Skip to content

Commit 921fb98

Browse files
author
Evan Wallace
committed
added raytracer, cube primitive, and mouse callbacks
1 parent e0159ae commit 921fb98

File tree

4 files changed

+194
-11
lines changed

4 files changed

+194
-11
lines changed

‎src/main.js

+56-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ window.onload = function() {
33
var canvas = document.createElement('canvas');
44
canvas.width = 800;
55
canvas.height = 600;
6+
window.gl = null;
67
try { gl = canvas.getContext('webgl'); } catch (e) {}
78
try { gl = gl || canvas.getContext('experimental-webgl'); } catch (e) {}
89
if (!gl) throw 'WebGL not supported';
@@ -44,23 +45,75 @@ window.onload = function() {
4445
gl.lookAt = function(ex, ey, ez, cx, cy, cz, ux, uy, uz) { gl.multMatrix(Matrix.lookAt(ex, ey, ez, cx, cy, cz, ux, uy, uz)); };
4546
gl.pushMatrix = function() { stack.push(gl[matrix].m.slice()); };
4647
gl.popMatrix = function() { gl[matrix].m = stack.pop(); };
48+
gl.project = function(objX, objY, objZ, modelview, projection, viewport) {
49+
modelview = modelview || gl.modelviewMatrix;
50+
projection = projection || gl.projectionMatrix;
51+
viewport = viewport || gl.getParameter(gl.VIEWPORT);
52+
var point = projection.transformPoint(modelview.transformPoint(new Vector(objX, objY, objZ)));
53+
return new Vector(
54+
viewport[0] + viewport[2] * (point.x * 0.5 + 0.5),
55+
viewport[1] + viewport[3] * (point.y * 0.5 + 0.5),
56+
point.z * 0.5 + 0.5
57+
);
58+
};
59+
gl.unProject = function(winX, winY, winZ, modelview, projection, viewport) {
60+
modelview = modelview || gl.modelviewMatrix;
61+
projection = projection || gl.projectionMatrix;
62+
viewport = viewport || gl.getParameter(gl.VIEWPORT);
63+
var point = new Vector(
64+
(winX - viewport[0]) / viewport[2] * 2 - 1,
65+
(winY - viewport[1]) / viewport[3] * 2 - 1,
66+
winZ * 2 - 1
67+
);
68+
return projection.multiply(modelview).inverse().transformPoint(point);
69+
};
4770
gl.matrixMode(gl.MODELVIEW);
71+
gl.autoDraw = true;
4872

4973
// Set up the animation loop
5074
var post =
5175
window.webkitRequestAnimationFrame ||
5276
window.mozRequestAnimationFrame ||
5377
function(callback) { setTimeout(callback, 1000 / 60); };
54-
var time = new Date();
78+
var time;
5579
function frame() {
5680
var now = new Date();
57-
if (window.update) window.update((now - time) / 1000);
81+
if (window.update) window.update((now - (time || now)) / 1000);
5882
time = now;
5983
if (window.draw) window.draw();
60-
post(frame);
84+
if (gl.autoDraw) post(frame);
6185
}
6286

6387
// Draw the initial frame and start the animation loop
6488
if (window.setup) window.setup();
6589
frame();
6690
};
91+
92+
var isDragging = false;
93+
94+
function setMouseInfo(e) {
95+
window.mouseX = e.pageX;
96+
window.mouseY = e.pageY;
97+
for (var obj = gl.canvas; obj; obj = obj.offsetParent) {
98+
window.mouseX -= obj.offsetLeft;
99+
window.mouseY -= obj.offsetTop;
100+
}
101+
}
102+
103+
document.onmousedown = function(e) {
104+
setMouseInfo(e);
105+
isDragging = true;
106+
if (window.mousePressed) window.mousePressed();
107+
};
108+
109+
document.onmousemove = function(e) {
110+
setMouseInfo(e);
111+
if (!isDragging && window.mouseMoved) window.mouseMoved();
112+
else if (isDragging && window.mouseDragged) window.mouseDragged();
113+
};
114+
115+
document.onmouseup = function(e) {
116+
setMouseInfo(e);
117+
isDragging = false;
118+
if (window.mouseReleased) window.mouseReleased();
119+
};

‎src/mesh.js

+28-2
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ Mesh.prototype.computeAABB = function() {
6161
aabb.max = aabb.min.negative();
6262
for (var i = 0; i < this.vertices.length; i++) {
6363
var v = this.vertices[i];
64-
aabb.min = aabb.min.min(v);
65-
aabb.max = aabb.max.max(v);
64+
aabb.min = Vector.min(aabb.min, v);
65+
aabb.max = Vector.max(aabb.max, v);
6666
}
6767
return aabb;
6868
};
@@ -98,6 +98,32 @@ Mesh.plane = function(sizeX, sizeY, countX, countY, options) {
9898
return mesh;
9999
};
100100

101+
var cubeData = [
102+
[0, 4, 2, 6, -1, 0, 0], // -x
103+
[1, 3, 5, 7, +1, 0, 0], // +x
104+
[0, 1, 4, 5, 0, -1, 0], // -y
105+
[2, 6, 3, 7, 0, +1, 0], // +y
106+
[0, 2, 1, 3, 0, 0, -1], // -z
107+
[4, 5, 6, 7, 0, 0, +1] // +z
108+
];
109+
110+
Mesh.cube = function(sizeX, sizeY, sizeZ) {
111+
var mesh = new Mesh();
112+
for (var i = 0; i < cubeData.length; i++) {
113+
var data = cubeData[i], v = i * 4;
114+
for (var j = 0; j < 4; j++) {
115+
var d = data[j];
116+
mesh.vertices.push(new Vector(((d & 1) - 0.5) * sizeX, ((d & 2) / 2 - 0.5) * sizeY, ((d & 4) / 4 - 0.5) * sizeZ));
117+
if (mesh.coords) mesh.coords.push(new Vector(j & 1, (j & 2) / 2));
118+
if (mesh.normals) mesh.normals.push(new Vector(data[4], data[5], data[6]));
119+
}
120+
mesh.triangles.push(new Triangle(v, v + 1, v + 2));
121+
mesh.triangles.push(new Triangle(v + 2, v + 1, v + 3));
122+
}
123+
mesh.compile();
124+
return mesh;
125+
};
126+
101127
Mesh.load = function(json, options) {
102128
options = options || {};
103129
if (!json.coords) options.coords = false;

‎src/raytracer.js

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
HitTest = function(t, hit, normal) {
2+
this.t = arguments.length ? t : Number.MAX_VALUE;
3+
this.hit = hit;
4+
this.normal = normal;
5+
};
6+
7+
HitTest.prototype.mergeWith = function(other) {
8+
if (other.t > 0 && other.t < this.t) {
9+
this.t = other.t;
10+
this.hit = other.hit;
11+
this.normal = other.normal;
12+
}
13+
};
14+
15+
Raytracer = function() {
16+
var v = gl.getParameter(gl.VIEWPORT);
17+
var m = gl.modelviewMatrix.m;
18+
19+
// Reconstruct the eye position
20+
var axisX = new Vector(m[0], m[4], m[8]);
21+
var axisY = new Vector(m[1], m[5], m[9]);
22+
var axisZ = new Vector(m[2], m[6], m[10]);
23+
var offset = new Vector(m[3], m[7], m[11]);
24+
this.eye = new Vector(-offset.dot(axisX), -offset.dot(axisY), -offset.dot(axisZ));
25+
26+
// Generate rays through the four corners of the frustum
27+
var minX = v[0], maxX = minX + v[2];
28+
var minY = v[1], maxY = minY + v[3];
29+
this.ray00 = gl.unProject(minX, minY, 1).subtract(this.eye);
30+
this.ray10 = gl.unProject(maxX, minY, 1).subtract(this.eye);
31+
this.ray01 = gl.unProject(minX, maxY, 1).subtract(this.eye);
32+
this.ray11 = gl.unProject(maxX, maxY, 1).subtract(this.eye);
33+
this.viewport = v;
34+
};
35+
36+
Raytracer.prototype.getRayForPixel = function(x, y) {
37+
x = (x - this.viewport[0]) / this.viewport[2];
38+
y = 1 - (y - this.viewport[1]) / this.viewport[3];
39+
var ray0 = Vector.lerp(this.ray00, this.ray10, x);
40+
var ray1 = Vector.lerp(this.ray01, this.ray11, x);
41+
return Vector.lerp(ray0, ray1, y).unit();
42+
};
43+
44+
Raytracer.hitTestAABB = function(origin, ray, minCorner, maxCorner) {
45+
// Use the slab intersection method
46+
var tMin = minCorner.subtract(origin).divide(ray);
47+
var tMax = maxCorner.subtract(origin).divide(ray);
48+
var t1 = Vector.min(tMin, tMax);
49+
var t2 = Vector.max(tMin, tMax);
50+
var tNear = t1.max();
51+
var tFar = t2.min();
52+
53+
if (tNear > 0 && tNear < tFar) {
54+
var epsilon = 1.0e-6, min = minCorner.add(epsilon), max = maxCorner.subtract(epsilon), hit = origin.add(ray.multiply(tNear));
55+
return new HitTest(tNear, hit, new Vector((hit.x > max.x) - (hit.x < min.x), (hit.y > max.y) - (hit.y < min.y), (hit.z > max.z) - (hit.z < min.z)));
56+
}
57+
58+
return null;
59+
};
60+
61+
Raytracer.hitTestSphere = function(origin, ray, center, radius) {
62+
var offset = origin.subtract(center);
63+
var a = ray.dot(ray);
64+
var b = 2 * ray.dot(offset);
65+
var c = offset.dot(offset) - radius * radius;
66+
var discriminant = b * b - 4 * a * c;
67+
68+
if (discriminant > 0) {
69+
var t = (-b - Math.sqrt(discriminant)) / (2 * a), hit = origin.add(ray.multiply(t));
70+
return new HitTest(t, hit, hit.subtract(center).divide(radius));
71+
}
72+
73+
return null;
74+
};
75+
76+
Raytracer.hitTestTriangle = function(origin, ray, a, b, c) {
77+
var ab = b.subtract(a);
78+
var ac = c.subtract(a);
79+
var normal = ab.cross(ac).unit();
80+
var t = normal.dot(a.subtract(origin)).divide(normal.dot(ray));
81+
82+
if (t > 0) {
83+
var hit = origin.add(ray.multiply(t));
84+
var toHit = hit.subtract(a);
85+
var dot00 = ac.dot(ac);
86+
var dot01 = ac.dot(ab);
87+
var dot02 = ac.dot(toHit);
88+
var dot11 = ab.dot(ab);
89+
var dot12 = ab.dot(toHit);
90+
var divide = dot00 * dot11 - dot01 * dot01;
91+
var u = (dot11 * dot02 - dot01 * dot12) / divide;
92+
var v = (dot00 * dot12 - dot01 * dot02) / divide;
93+
if (u >= 0 && v >= 0 && u + v <= 1) return new HitTest(t, hit, normal);
94+
}
95+
96+
return null;
97+
};

‎src/vector.js

+13-6
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,20 @@ Vector = function(x, y, z) {
55
};
66

77
Vector.prototype.negative = function() { return new Vector(-this.x, -this.y, -this.z); };
8-
Vector.prototype.add = function(v) { return new Vector(this.x + v.x, this.y + v.y, this.z + v.z); };
9-
Vector.prototype.subtract = function(v) { return new Vector(this.x - v.x, this.y - v.y, this.z - v.z); };
10-
Vector.prototype.multiply = function(n) { return new Vector(this.x * n, this.y * n, this.z * n); };
11-
Vector.prototype.divide = function(n) { return new Vector(this.x / n, this.y / n, this.z / n); };
8+
Vector.prototype.add = function(v) { var b = v instanceof Vector; return new Vector(this.x + (b ? v.x : v), this.y + (b ? v.y : v), this.z + (b ? v.z : v)); };
9+
Vector.prototype.subtract = function(v) { var b = v instanceof Vector; return new Vector(this.x - (b ? v.x : v), this.y - (b ? v.y : v), this.z - (b ? v.z : v)); };
10+
Vector.prototype.multiply = function(v) { var b = v instanceof Vector; return new Vector(this.x * (b ? v.x : v), this.y * (b ? v.y : v), this.z * (b ? v.z : v)); };
11+
Vector.prototype.divide = function(v) { var b = v instanceof Vector; return new Vector(this.x / (b ? v.x : v), this.y / (b ? v.y : v), this.z / (b ? v.z : v)); };
1212
Vector.prototype.dot = function(v) { return this.x * v.x + this.y * v.y + this.z * v.z; };
1313
Vector.prototype.cross = function(v) { return new Vector(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x); };
1414
Vector.prototype.length = function() { return Math.sqrt(this.dot(this)); };
1515
Vector.prototype.unit = function() { return this.divide(this.length()); };
16-
Vector.prototype.min = function(v) { return new Vector(Math.min(this.x, v.x), Math.min(this.y, v.y), Math.min(this.z, v.z)); };
17-
Vector.prototype.max = function(v) { return new Vector(Math.max(this.x, v.x), Math.max(this.y, v.y), Math.max(this.z, v.z)); };
16+
Vector.prototype.min = function() { return Math.min(Math.min(this.x, this.y), this.z); };
17+
Vector.prototype.max = function() { return Math.max(Math.max(this.x, this.y), this.z); };
18+
Vector.prototype.toAngles = function() { return { theta: Math.atan2(this.z, this.x), phi: Math.asin(this.y / this.length()) }; };
19+
20+
Vector.fromAngles = function(theta, phi) { return new Vector(Math.cos(theta) * Math.cos(phi), Math.sin(phi), Math.sin(theta) * Math.cos(phi)); };
21+
Vector.random = function() { return Vector.fromAngles(Math.random() * Math.PI * 2, Math.asin(Math.random() * 2 - 1)); };
22+
Vector.min = function(a, b) { return new Vector(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.min(a.z, b.z)); };
23+
Vector.max = function(a, b) { return new Vector(Math.max(a.x, b.x), Math.max(a.y, b.y), Math.max(a.z, b.z)); };
24+
Vector.lerp = function(a, b, percent) { return new Vector(a.x + (b.x - a.x) * percent, a.y + (b.y - a.y) * percent, a.z + (b.z - a.z) * percent); };

0 commit comments

Comments
 (0)