3d-raytrace.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. /*
  2. * Copyright (C) 2007 Apple Inc. All rights reserved.
  3. *
  4. * Redistribution and use in source and binary forms, with or without
  5. * modification, are permitted provided that the following conditions
  6. * are met:
  7. * 1. Redistributions of source code must retain the above copyright
  8. * notice, this list of conditions and the following disclaimer.
  9. * 2. Redistributions in binary form must reproduce the above copyright
  10. * notice, this list of conditions and the following disclaimer in the
  11. * documentation and/or other materials provided with the distribution.
  12. *
  13. * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
  14. * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  15. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16. * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
  17. * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  18. * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  19. * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  20. * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  21. * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  22. * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  23. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  24. */
  25. function createVector(x,y,z) {
  26. return new Array(x,y,z);
  27. }
  28. function sqrLengthVector(self) {
  29. return self[0] * self[0] + self[1] * self[1] + self[2] * self[2];
  30. }
  31. function lengthVector(self) {
  32. return Math.sqrt(self[0] * self[0] + self[1] * self[1] + self[2] * self[2]);
  33. }
  34. function addVector(self, v) {
  35. self[0] += v[0];
  36. self[1] += v[1];
  37. self[2] += v[2];
  38. return self;
  39. }
  40. function subVector(self, v) {
  41. self[0] -= v[0];
  42. self[1] -= v[1];
  43. self[2] -= v[2];
  44. return self;
  45. }
  46. function scaleVector(self, scale) {
  47. self[0] *= scale;
  48. self[1] *= scale;
  49. self[2] *= scale;
  50. return self;
  51. }
  52. function normaliseVector(self) {
  53. var len = Math.sqrt(self[0] * self[0] + self[1] * self[1] + self[2] * self[2]);
  54. self[0] /= len;
  55. self[1] /= len;
  56. self[2] /= len;
  57. return self;
  58. }
  59. function add(v1, v2) {
  60. return new Array(v1[0] + v2[0], v1[1] + v2[1], v1[2] + v2[2]);
  61. }
  62. function sub(v1, v2) {
  63. return new Array(v1[0] - v2[0], v1[1] - v2[1], v1[2] - v2[2]);
  64. }
  65. function scalev(v1, v2) {
  66. return new Array(v1[0] * v2[0], v1[1] * v2[1], v1[2] * v2[2]);
  67. }
  68. function dot(v1, v2) {
  69. return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];
  70. }
  71. function scale(v, scale) {
  72. return [v[0] * scale, v[1] * scale, v[2] * scale];
  73. }
  74. function cross(v1, v2) {
  75. return [v1[1] * v2[2] - v1[2] * v2[1],
  76. v1[2] * v2[0] - v1[0] * v2[2],
  77. v1[0] * v2[1] - v1[1] * v2[0]];
  78. }
  79. function normalise(v) {
  80. var len = lengthVector(v);
  81. return [v[0] / len, v[1] / len, v[2] / len];
  82. }
  83. function transformMatrix(self, v) {
  84. var vals = self;
  85. var x = vals[0] * v[0] + vals[1] * v[1] + vals[2] * v[2] + vals[3];
  86. var y = vals[4] * v[0] + vals[5] * v[1] + vals[6] * v[2] + vals[7];
  87. var z = vals[8] * v[0] + vals[9] * v[1] + vals[10] * v[2] + vals[11];
  88. return [x, y, z];
  89. }
  90. function invertMatrix(self) {
  91. var temp = new Array(16);
  92. var tx = -self[3];
  93. var ty = -self[7];
  94. var tz = -self[11];
  95. for (h = 0; h < 3; h++)
  96. for (v = 0; v < 3; v++)
  97. temp[h + v * 4] = self[v + h * 4];
  98. for (i = 0; i < 11; i++)
  99. self[i] = temp[i];
  100. self[3] = tx * self[0] + ty * self[1] + tz * self[2];
  101. self[7] = tx * self[4] + ty * self[5] + tz * self[6];
  102. self[11] = tx * self[8] + ty * self[9] + tz * self[10];
  103. return self;
  104. }
  105. // Triangle intersection using barycentric coord method
  106. function Triangle(p1, p2, p3) {
  107. var edge1 = sub(p3, p1);
  108. var edge2 = sub(p2, p1);
  109. var normal = cross(edge1, edge2);
  110. if (Math.abs(normal[0]) > Math.abs(normal[1]))
  111. if (Math.abs(normal[0]) > Math.abs(normal[2]))
  112. this.axis = 0;
  113. else
  114. this.axis = 2;
  115. else
  116. if (Math.abs(normal[1]) > Math.abs(normal[2]))
  117. this.axis = 1;
  118. else
  119. this.axis = 2;
  120. var u = (this.axis + 1) % 3;
  121. var v = (this.axis + 2) % 3;
  122. var u1 = edge1[u];
  123. var v1 = edge1[v];
  124. var u2 = edge2[u];
  125. var v2 = edge2[v];
  126. this.normal = normalise(normal);
  127. this.nu = normal[u] / normal[this.axis];
  128. this.nv = normal[v] / normal[this.axis];
  129. this.nd = dot(normal, p1) / normal[this.axis];
  130. var det = u1 * v2 - v1 * u2;
  131. this.eu = p1[u];
  132. this.ev = p1[v];
  133. this.nu1 = u1 / det;
  134. this.nv1 = -v1 / det;
  135. this.nu2 = v2 / det;
  136. this.nv2 = -u2 / det;
  137. this.material = [0.7, 0.7, 0.7];
  138. }
  139. Triangle.prototype.intersect = function(orig, dir, near, far) {
  140. var u = (this.axis + 1) % 3;
  141. var v = (this.axis + 2) % 3;
  142. var d = dir[this.axis] + this.nu * dir[u] + this.nv * dir[v];
  143. var t = (this.nd - orig[this.axis] - this.nu * orig[u] - this.nv * orig[v]) / d;
  144. if (t < near || t > far)
  145. return null;
  146. var Pu = orig[u] + t * dir[u] - this.eu;
  147. var Pv = orig[v] + t * dir[v] - this.ev;
  148. var a2 = Pv * this.nu1 + Pu * this.nv1;
  149. if (a2 < 0)
  150. return null;
  151. var a3 = Pu * this.nu2 + Pv * this.nv2;
  152. if (a3 < 0)
  153. return null;
  154. if ((a2 + a3) > 1)
  155. return null;
  156. return t;
  157. }
  158. function Scene(a_triangles) {
  159. this.triangles = a_triangles;
  160. this.lights = [];
  161. this.ambient = [0,0,0];
  162. this.background = [0.8,0.8,1];
  163. }
  164. var zero = new Array(0,0,0);
  165. Scene.prototype.intersect = function(origin, dir, near, far) {
  166. var closest = null;
  167. for (i = 0; i < this.triangles.length; i++) {
  168. var triangle = this.triangles[i];
  169. var d = triangle.intersect(origin, dir, near, far);
  170. if (d == null || d > far || d < near)
  171. continue;
  172. far = d;
  173. closest = triangle;
  174. }
  175. if (!closest)
  176. return [this.background[0],this.background[1],this.background[2]];
  177. var normal = closest.normal;
  178. var hit = add(origin, scale(dir, far));
  179. if (dot(dir, normal) > 0)
  180. normal = [-normal[0], -normal[1], -normal[2]];
  181. var colour = null;
  182. if (closest.shader) {
  183. colour = closest.shader(closest, hit, dir);
  184. } else {
  185. colour = closest.material;
  186. }
  187. // do reflection
  188. var reflected = null;
  189. if (colour.reflection > 0.001) {
  190. var reflection = addVector(scale(normal, -2*dot(dir, normal)), dir);
  191. reflected = this.intersect(hit, reflection, 0.0001, 1000000);
  192. if (colour.reflection >= 0.999999)
  193. return reflected;
  194. }
  195. var l = [this.ambient[0], this.ambient[1], this.ambient[2]];
  196. for (var i = 0; i < this.lights.length; i++) {
  197. var light = this.lights[i];
  198. var toLight = sub(light, hit);
  199. var distance = lengthVector(toLight);
  200. scaleVector(toLight, 1.0/distance);
  201. distance -= 0.0001;
  202. if (this.blocked(hit, toLight, distance))
  203. continue;
  204. var nl = dot(normal, toLight);
  205. if (nl > 0)
  206. addVector(l, scale(light.colour, nl));
  207. }
  208. l = scalev(l, colour);
  209. if (reflected) {
  210. l = addVector(scaleVector(l, 1 - colour.reflection), scaleVector(reflected, colour.reflection));
  211. }
  212. return l;
  213. }
  214. Scene.prototype.blocked = function(O, D, far) {
  215. var near = 0.0001;
  216. var closest = null;
  217. for (i = 0; i < this.triangles.length; i++) {
  218. var triangle = this.triangles[i];
  219. var d = triangle.intersect(O, D, near, far);
  220. if (d == null || d > far || d < near)
  221. continue;
  222. return true;
  223. }
  224. return false;
  225. }
  226. // this camera code is from notes i made ages ago, it is from *somewhere* -- i cannot remember where
  227. // that somewhere is
  228. function Camera(origin, lookat, up) {
  229. var zaxis = normaliseVector(subVector(lookat, origin));
  230. var xaxis = normaliseVector(cross(up, zaxis));
  231. var yaxis = normaliseVector(cross(xaxis, subVector([0,0,0], zaxis)));
  232. var m = new Array(16);
  233. m[0] = xaxis[0]; m[1] = xaxis[1]; m[2] = xaxis[2];
  234. m[4] = yaxis[0]; m[5] = yaxis[1]; m[6] = yaxis[2];
  235. m[8] = zaxis[0]; m[9] = zaxis[1]; m[10] = zaxis[2];
  236. invertMatrix(m);
  237. m[3] = 0; m[7] = 0; m[11] = 0;
  238. this.origin = origin;
  239. this.directions = new Array(4);
  240. this.directions[0] = normalise([-0.7, 0.7, 1]);
  241. this.directions[1] = normalise([ 0.7, 0.7, 1]);
  242. this.directions[2] = normalise([ 0.7, -0.7, 1]);
  243. this.directions[3] = normalise([-0.7, -0.7, 1]);
  244. this.directions[0] = transformMatrix(m, this.directions[0]);
  245. this.directions[1] = transformMatrix(m, this.directions[1]);
  246. this.directions[2] = transformMatrix(m, this.directions[2]);
  247. this.directions[3] = transformMatrix(m, this.directions[3]);
  248. }
  249. Camera.prototype.generateRayPair = function(y) {
  250. rays = new Array(new Object(), new Object());
  251. rays[0].origin = this.origin;
  252. rays[1].origin = this.origin;
  253. rays[0].dir = addVector(scale(this.directions[0], y), scale(this.directions[3], 1 - y));
  254. rays[1].dir = addVector(scale(this.directions[1], y), scale(this.directions[2], 1 - y));
  255. return rays;
  256. }
  257. function renderRows(camera, scene, pixels, width, height, starty, stopy) {
  258. for (var y = starty; y < stopy; y++) {
  259. var rays = camera.generateRayPair(y / height);
  260. for (var x = 0; x < width; x++) {
  261. var xp = x / width;
  262. var origin = addVector(scale(rays[0].origin, xp), scale(rays[1].origin, 1 - xp));
  263. var dir = normaliseVector(addVector(scale(rays[0].dir, xp), scale(rays[1].dir, 1 - xp)));
  264. var l = scene.intersect(origin, dir);
  265. pixels[y][x] = l;
  266. }
  267. }
  268. }
  269. Camera.prototype.render = function(scene, pixels, width, height) {
  270. var cam = this;
  271. var row = 0;
  272. renderRows(cam, scene, pixels, width, height, 0, height);
  273. }
  274. function raytraceScene()
  275. {
  276. var startDate = new Date().getTime();
  277. var numTriangles = 2 * 6;
  278. var triangles = new Array();//numTriangles);
  279. var tfl = createVector(-10, 10, -10);
  280. var tfr = createVector( 10, 10, -10);
  281. var tbl = createVector(-10, 10, 10);
  282. var tbr = createVector( 10, 10, 10);
  283. var bfl = createVector(-10, -10, -10);
  284. var bfr = createVector( 10, -10, -10);
  285. var bbl = createVector(-10, -10, 10);
  286. var bbr = createVector( 10, -10, 10);
  287. // cube!!!
  288. // front
  289. var i = 0;
  290. triangles[i++] = new Triangle(tfl, tfr, bfr);
  291. triangles[i++] = new Triangle(tfl, bfr, bfl);
  292. // back
  293. triangles[i++] = new Triangle(tbl, tbr, bbr);
  294. triangles[i++] = new Triangle(tbl, bbr, bbl);
  295. // triangles[i-1].material = [0.7,0.2,0.2];
  296. // triangles[i-1].material.reflection = 0.8;
  297. // left
  298. triangles[i++] = new Triangle(tbl, tfl, bbl);
  299. // triangles[i-1].reflection = 0.6;
  300. triangles[i++] = new Triangle(tfl, bfl, bbl);
  301. // triangles[i-1].reflection = 0.6;
  302. // right
  303. triangles[i++] = new Triangle(tbr, tfr, bbr);
  304. triangles[i++] = new Triangle(tfr, bfr, bbr);
  305. // top
  306. triangles[i++] = new Triangle(tbl, tbr, tfr);
  307. triangles[i++] = new Triangle(tbl, tfr, tfl);
  308. // bottom
  309. triangles[i++] = new Triangle(bbl, bbr, bfr);
  310. triangles[i++] = new Triangle(bbl, bfr, bfl);
  311. //Floor!!!!
  312. var green = createVector(0.0, 0.4, 0.0);
  313. var grey = createVector(0.4, 0.4, 0.4);
  314. grey.reflection = 1.0;
  315. var floorShader = function(tri, pos, view) {
  316. var x = ((pos[0]/32) % 2 + 2) % 2;
  317. var z = ((pos[2]/32 + 0.3) % 2 + 2) % 2;
  318. if (x < 1 != z < 1) {
  319. //in the real world we use the fresnel term...
  320. // var angle = 1-dot(view, tri.normal);
  321. // angle *= angle;
  322. // angle *= angle;
  323. // angle *= angle;
  324. //grey.reflection = angle;
  325. return grey;
  326. } else
  327. return green;
  328. }
  329. var ffl = createVector(-1000, -30, -1000);
  330. var ffr = createVector( 1000, -30, -1000);
  331. var fbl = createVector(-1000, -30, 1000);
  332. var fbr = createVector( 1000, -30, 1000);
  333. triangles[i++] = new Triangle(fbl, fbr, ffr);
  334. triangles[i-1].shader = floorShader;
  335. triangles[i++] = new Triangle(fbl, ffr, ffl);
  336. triangles[i-1].shader = floorShader;
  337. var _scene = new Scene(triangles);
  338. _scene.lights[0] = createVector(20, 38, -22);
  339. _scene.lights[0].colour = createVector(0.7, 0.3, 0.3);
  340. _scene.lights[1] = createVector(-23, 40, 17);
  341. _scene.lights[1].colour = createVector(0.7, 0.3, 0.3);
  342. _scene.lights[2] = createVector(23, 20, 17);
  343. _scene.lights[2].colour = createVector(0.7, 0.7, 0.7);
  344. _scene.ambient = createVector(0.1, 0.1, 0.1);
  345. // _scene.background = createVector(0.7, 0.7, 1.0);
  346. var size = 30;
  347. var pixels = new Array();
  348. for (var y = 0; y < size; y++) {
  349. pixels[y] = new Array();
  350. for (var x = 0; x < size; x++) {
  351. pixels[y][x] = 0;
  352. }
  353. }
  354. var _camera = new Camera(createVector(-40, 40, 40), createVector(0, 0, 0), createVector(0, 1, 0));
  355. _camera.render(_scene, pixels, size, size);
  356. return pixels;
  357. }
  358. function arrayToCanvasCommands(pixels)
  359. {
  360. var s = '<canvas id="renderCanvas" width="30px" height="30px"></canvas><scr' + 'ipt>\nvar pixels = [';
  361. var size = 30;
  362. for (var y = 0; y < size; y++) {
  363. s += "[";
  364. for (var x = 0; x < size; x++) {
  365. s += "[" + pixels[y][x] + "],";
  366. }
  367. s+= "],";
  368. }
  369. s += '];\n var canvas = document.getElementById("renderCanvas").getContext("2d");\n\
  370. \n\
  371. \n\
  372. var size = 30;\n\
  373. canvas.fillStyle = "red";\n\
  374. canvas.fillRect(0, 0, size, size);\n\
  375. canvas.scale(1, -1);\n\
  376. canvas.translate(0, -size);\n\
  377. \n\
  378. if (!canvas.setFillColor)\n\
  379. canvas.setFillColor = function(r, g, b, a) {\n\
  380. this.fillStyle = "rgb("+[Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)]+")";\n\
  381. }\n\
  382. \n\
  383. for (var y = 0; y < size; y++) {\n\
  384. for (var x = 0; x < size; x++) {\n\
  385. var l = pixels[y][x];\n\
  386. canvas.setFillColor(l[0], l[1], l[2], 1);\n\
  387. canvas.fillRect(x, y, 1, 1);\n\
  388. }\n\
  389. }</scr' + 'ipt>';
  390. return s;
  391. }
  392. testOutput = arrayToCanvasCommands(raytraceScene());
  393. var expectedLength = 20970;
  394. if (testOutput.length != expectedLength)
  395. throw "Error: bad result: expected length " + expectedLength + " but got " + testOutput.length;