SoftwareRenderer.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author ryg / http://farbrausch.de/~fg
  4. * @author mraleph / http://mrale.ph/
  5. */
  6. THREE.SoftwareRenderer = function () {
  7. console.log( 'THREE.SoftwareRenderer', THREE.REVISION );
  8. var canvas = document.createElement( 'canvas' );
  9. var context = canvas.getContext( '2d' );
  10. var shaders = {};
  11. var canvasWidth, canvasHeight;
  12. var canvasWBlocks, canvasHBlocks;
  13. var viewportXScale, viewportYScale, viewportZScale;
  14. var viewportXOffs, viewportYOffs, viewportZOffs;
  15. var clearColor = new THREE.Color( 0x000000 );
  16. var imagedata, data, zbuffer;
  17. var numBlocks, blockMaxZ, blockFlags;
  18. var BLOCK_ISCLEAR = (1 << 0);
  19. var BLOCK_NEEDCLEAR = (1 << 1);
  20. var subpixelBits = 4;
  21. var subpixelBias = (1 << subpixelBits) - 1;
  22. var blockShift = 3;
  23. var blockSize = 1 << blockShift;
  24. var maxZVal = (1 << 24); // Note: You want to size this so you don't get overflows.
  25. var rectx1 = Infinity, recty1 = Infinity;
  26. var rectx2 = 0, recty2 = 0;
  27. var prevrectx1 = Infinity, prevrecty1 = Infinity;
  28. var prevrectx2 = 0, prevrecty2 = 0;
  29. var projector = new THREE.Projector();
  30. var vector1 = new THREE.Vector3();
  31. var vector2 = new THREE.Vector3();
  32. var vector3 = new THREE.Vector3();
  33. this.domElement = canvas;
  34. this.autoClear = true;
  35. // WebGLRenderer compatibility
  36. this.supportsVertexTextures = function () {};
  37. this.setFaceCulling = function () {};
  38. this.setClearColor = function ( color, alpha ) {
  39. clearColor.set( color );
  40. };
  41. this.setSize = function ( width, height ) {
  42. canvasWBlocks = Math.floor( width / blockSize );
  43. canvasHBlocks = Math.floor( height / blockSize );
  44. canvasWidth = canvasWBlocks * blockSize;
  45. canvasHeight = canvasHBlocks * blockSize;
  46. var fixScale = 1 << subpixelBits;
  47. viewportXScale = fixScale * canvasWidth / 2;
  48. viewportYScale = -fixScale * canvasHeight / 2;
  49. viewportZScale = maxZVal / 2;
  50. viewportXOffs = fixScale * canvasWidth / 2 + 0.5;
  51. viewportYOffs = fixScale * canvasHeight / 2 + 0.5;
  52. viewportZOffs = maxZVal / 2 + 0.5;
  53. canvas.width = canvasWidth;
  54. canvas.height = canvasHeight;
  55. context.fillStyle = clearColor.getStyle();
  56. context.fillRect( 0, 0, canvasWidth, canvasHeight );
  57. imagedata = context.getImageData( 0, 0, canvasWidth, canvasHeight );
  58. data = imagedata.data;
  59. zbuffer = new Int32Array( data.length / 4 );
  60. numBlocks = canvasWBlocks * canvasHBlocks;
  61. blockMaxZ = new Int32Array( numBlocks );
  62. blockFlags = new Uint8Array( numBlocks );
  63. for ( var i = 0, l = zbuffer.length; i < l; i ++ ) {
  64. zbuffer[ i ] = maxZVal;
  65. }
  66. for ( var i = 0; i < numBlocks; i ++ ) {
  67. blockFlags[ i ] = BLOCK_ISCLEAR;
  68. }
  69. };
  70. this.setSize( canvas.width, canvas.height );
  71. this.clear = function () {
  72. rectx1 = Infinity;
  73. recty1 = Infinity;
  74. rectx2 = 0;
  75. recty2 = 0;
  76. for ( var i = 0; i < numBlocks; i ++ ) {
  77. blockMaxZ[ i ] = maxZVal;
  78. blockFlags[ i ] = (blockFlags[ i ] & BLOCK_ISCLEAR) ? BLOCK_ISCLEAR : BLOCK_NEEDCLEAR;
  79. }
  80. };
  81. this.render = function ( scene, camera ) {
  82. if ( this.autoClear === true ) this.clear();
  83. var renderData = projector.projectScene( scene, camera );
  84. var elements = renderData.elements;
  85. for ( var e = 0, el = elements.length; e < el; e ++ ) {
  86. var element = elements[ e ];
  87. var material = element.material;
  88. var shader = getMaterialShader( material );
  89. if ( element instanceof THREE.RenderableFace ) {
  90. drawTriangle(
  91. element.v1.positionScreen,
  92. element.v2.positionScreen,
  93. element.v3.positionScreen,
  94. shader, element, material
  95. );
  96. } else if ( element instanceof THREE.RenderableSprite ) {
  97. var scaleX = element.scale.x * 0.5;
  98. var scaleY = element.scale.y * 0.5;
  99. vector1.copy( element );
  100. vector1.x -= scaleX;
  101. vector1.y += scaleY;
  102. vector2.copy( element );
  103. vector2.x -= scaleX;
  104. vector2.y -= scaleY;
  105. vector3.copy( element );
  106. vector3.x += scaleX;
  107. vector3.y += scaleY;
  108. drawTriangle(
  109. vector1, vector2, vector3,
  110. shader, element, material
  111. );
  112. vector1.copy( element );
  113. vector1.x += scaleX;
  114. vector1.y += scaleY;
  115. vector2.copy( element );
  116. vector2.x -= scaleX;
  117. vector2.y -= scaleY;
  118. vector3.copy( element );
  119. vector3.x += scaleX;
  120. vector3.y -= scaleY;
  121. drawTriangle(
  122. vector1, vector2, vector3,
  123. shader, element, material
  124. );
  125. }
  126. }
  127. finishClear();
  128. var x = Math.min( rectx1, prevrectx1 );
  129. var y = Math.min( recty1, prevrecty1 );
  130. var width = Math.max( rectx2, prevrectx2 ) - x;
  131. var height = Math.max( recty2, prevrecty2 ) - y;
  132. /*
  133. // debug; draw zbuffer
  134. for ( var i = 0, l = zbuffer.length; i < l; i++ ) {
  135. var o = i * 4;
  136. var v = (65535 - zbuffer[ i ]) >> 3;
  137. data[ o + 0 ] = v;
  138. data[ o + 1 ] = v;
  139. data[ o + 2 ] = v;
  140. data[ o + 3 ] = 255;
  141. }
  142. */
  143. if ( x !== Infinity ) {
  144. context.putImageData( imagedata, 0, 0, x, y, width, height );
  145. }
  146. prevrectx1 = rectx1; prevrecty1 = recty1;
  147. prevrectx2 = rectx2; prevrecty2 = recty2;
  148. };
  149. function getMaterialShader( material ) {
  150. var id = material.id;
  151. var shader = shaders[ id ];
  152. if ( shaders[ id ] === undefined ) {
  153. if ( material instanceof THREE.MeshBasicMaterial ||
  154. material instanceof THREE.MeshLambertMaterial ||
  155. material instanceof THREE.MeshPhongMaterial ||
  156. material instanceof THREE.SpriteMaterial ) {
  157. var string;
  158. if ( material.vertexColors === THREE.FaceColors ) {
  159. string = [
  160. 'buffer[ offset ] = face.color.r * 255;',
  161. 'buffer[ offset + 1 ] = face.color.g * 255;',
  162. 'buffer[ offset + 2 ] = face.color.b * 255;',
  163. 'buffer[ offset + 3 ] = material.opacity * 255;',
  164. ].join('\n');
  165. } else {
  166. string = [
  167. 'buffer[ offset ] = material.color.r * 255;',
  168. 'buffer[ offset + 1 ] = material.color.g * 255;',
  169. 'buffer[ offset + 2 ] = material.color.b * 255;',
  170. 'buffer[ offset + 3 ] = material.opacity * 255;',
  171. ].join('\n');
  172. }
  173. shader = new Function( 'buffer, offset, u, v, face, material', string );
  174. } else {
  175. var string = [
  176. 'buffer[ offset ] = u * 255;',
  177. 'buffer[ offset + 1 ] = v * 255;',
  178. 'buffer[ offset + 2 ] = 0;',
  179. 'buffer[ offset + 3 ] = 255;'
  180. ].join('\n');
  181. shader = new Function( 'buffer, offset, u, v', string );
  182. }
  183. shaders[ id ] = shader;
  184. }
  185. return shader;
  186. }
  187. function clearRectangle( x1, y1, x2, y2 ) {
  188. var xmin = Math.max( Math.min( x1, x2 ), 0 );
  189. var xmax = Math.min( Math.max( x1, x2 ), canvasWidth );
  190. var ymin = Math.max( Math.min( y1, y2 ), 0 );
  191. var ymax = Math.min( Math.max( y1, y2 ), canvasHeight );
  192. var offset = ( xmin + ymin * canvasWidth ) * 4 + 3;
  193. var linestep = ( canvasWidth - ( xmax - xmin ) ) * 4;
  194. for ( var y = ymin; y < ymax; y ++ ) {
  195. for ( var x = xmin; x < xmax; x ++ ) {
  196. data[ offset += 4 ] = 0;
  197. }
  198. offset += linestep;
  199. }
  200. }
  201. function drawTriangle( v1, v2, v3, shader, face, material ) {
  202. // TODO: Implement per-pixel z-clipping
  203. if ( v1.z < -1 || v1.z > 1 || v2.z < -1 || v2.z > 1 || v3.z < -1 || v3.z > 1 ) return;
  204. // https://gist.github.com/2486101
  205. // explanation: http://pouet.net/topic.php?which=8760&page=1
  206. // 28.4 fixed-point coordinates
  207. var x1 = (v1.x * viewportXScale + viewportXOffs) | 0;
  208. var x2 = (v2.x * viewportXScale + viewportXOffs) | 0;
  209. var x3 = (v3.x * viewportXScale + viewportXOffs) | 0;
  210. var y1 = (v1.y * viewportYScale + viewportYOffs) | 0;
  211. var y2 = (v2.y * viewportYScale + viewportYOffs) | 0;
  212. var y3 = (v3.y * viewportYScale + viewportYOffs) | 0;
  213. // Z values (.28 fixed-point)
  214. var z1 = (v1.z * viewportZScale + viewportZOffs) | 0;
  215. var z2 = (v2.z * viewportZScale + viewportZOffs) | 0;
  216. var z3 = (v3.z * viewportZScale + viewportZOffs) | 0;
  217. // Deltas
  218. var dx12 = x1 - x2, dy12 = y2 - y1;
  219. var dx23 = x2 - x3, dy23 = y3 - y2;
  220. var dx31 = x3 - x1, dy31 = y1 - y3;
  221. // Bounding rectangle
  222. var minx = Math.max( ( Math.min( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, 0 );
  223. var maxx = Math.min( ( Math.max( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, canvasWidth );
  224. var miny = Math.max( ( Math.min( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, 0 );
  225. var maxy = Math.min( ( Math.max( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, canvasHeight );
  226. rectx1 = Math.min( minx, rectx1 );
  227. rectx2 = Math.max( maxx, rectx2 );
  228. recty1 = Math.min( miny, recty1 );
  229. recty2 = Math.max( maxy, recty2 );
  230. // Block size, standard 8x8 (must be power of two)
  231. var q = blockSize;
  232. // Start in corner of 8x8 block
  233. minx &= ~(q - 1);
  234. miny &= ~(q - 1);
  235. // Constant part of half-edge functions
  236. var c1 = dy12 * ((minx << subpixelBits) - x1) + dx12 * ((miny << subpixelBits) - y1);
  237. var c2 = dy23 * ((minx << subpixelBits) - x2) + dx23 * ((miny << subpixelBits) - y2);
  238. var c3 = dy31 * ((minx << subpixelBits) - x3) + dx31 * ((miny << subpixelBits) - y3);
  239. // Correct for fill convention
  240. if ( dy12 > 0 || ( dy12 == 0 && dx12 > 0 ) ) c1 ++;
  241. if ( dy23 > 0 || ( dy23 == 0 && dx23 > 0 ) ) c2 ++;
  242. if ( dy31 > 0 || ( dy31 == 0 && dx31 > 0 ) ) c3 ++;
  243. // Note this doesn't kill subpixel precision, but only because we test for >=0 (not >0).
  244. // It's a bit subtle. :)
  245. c1 = (c1 - 1) >> subpixelBits;
  246. c2 = (c2 - 1) >> subpixelBits;
  247. c3 = (c3 - 1) >> subpixelBits;
  248. // Z interpolation setup
  249. var dz12 = z1 - z2, dz31 = z3 - z1;
  250. var invDet = 1.0 / (dx12*dy31 - dx31*dy12);
  251. var dzdx = (invDet * (dz12*dy31 - dz31*dy12)); // dz per one subpixel step in x
  252. var dzdy = (invDet * (dz12*dx31 - dx12*dz31)); // dz per one subpixel step in y
  253. // Z at top/left corner of rast area
  254. var cz = ( z1 + ((minx << subpixelBits) - x1) * dzdx + ((miny << subpixelBits) - y1) * dzdy ) | 0;
  255. // Z pixel steps
  256. var zfixscale = (1 << subpixelBits);
  257. dzdx = (dzdx * zfixscale) | 0;
  258. dzdy = (dzdy * zfixscale) | 0;
  259. // Set up min/max corners
  260. var qm1 = q - 1; // for convenience
  261. var nmin1 = 0, nmax1 = 0;
  262. var nmin2 = 0, nmax2 = 0;
  263. var nmin3 = 0, nmax3 = 0;
  264. var nminz = 0, nmaxz = 0;
  265. if (dx12 >= 0) nmax1 -= qm1*dx12; else nmin1 -= qm1*dx12;
  266. if (dy12 >= 0) nmax1 -= qm1*dy12; else nmin1 -= qm1*dy12;
  267. if (dx23 >= 0) nmax2 -= qm1*dx23; else nmin2 -= qm1*dx23;
  268. if (dy23 >= 0) nmax2 -= qm1*dy23; else nmin2 -= qm1*dy23;
  269. if (dx31 >= 0) nmax3 -= qm1*dx31; else nmin3 -= qm1*dx31;
  270. if (dy31 >= 0) nmax3 -= qm1*dy31; else nmin3 -= qm1*dy31;
  271. if (dzdx >= 0) nmaxz += qm1*dzdx; else nminz += qm1*dzdx;
  272. if (dzdy >= 0) nmaxz += qm1*dzdy; else nminz += qm1*dzdy;
  273. // Loop through blocks
  274. var linestep = canvasWidth - q;
  275. var scale = 1.0 / (c1 + c2 + c3);
  276. var cb1 = c1;
  277. var cb2 = c2;
  278. var cb3 = c3;
  279. var cbz = cz;
  280. var qstep = -q;
  281. var e1x = qstep * dy12;
  282. var e2x = qstep * dy23;
  283. var e3x = qstep * dy31;
  284. var ezx = qstep * dzdx;
  285. var x0 = minx;
  286. for ( var y0 = miny; y0 < maxy; y0 += q ) {
  287. // New block line - keep hunting for tri outer edge in old block line dir
  288. while ( x0 >= minx && x0 < maxx && cb1 >= nmax1 && cb2 >= nmax2 && cb3 >= nmax3 ) {
  289. x0 += qstep;
  290. cb1 += e1x;
  291. cb2 += e2x;
  292. cb3 += e3x;
  293. cbz += ezx;
  294. }
  295. // Okay, we're now in a block we know is outside. Reverse direction and go into main loop.
  296. qstep = -qstep;
  297. e1x = -e1x;
  298. e2x = -e2x;
  299. e3x = -e3x;
  300. ezx = -ezx;
  301. while ( 1 ) {
  302. // Step everything
  303. x0 += qstep;
  304. cb1 += e1x;
  305. cb2 += e2x;
  306. cb3 += e3x;
  307. cbz += ezx;
  308. // We're done with this block line when at least one edge completely out
  309. // If an edge function is too small and decreasing in the current traversal
  310. // dir, we're done with this line.
  311. if (x0 < minx || x0 >= maxx) break;
  312. if (cb1 < nmax1) if (e1x < 0) break; else continue;
  313. if (cb2 < nmax2) if (e2x < 0) break; else continue;
  314. if (cb3 < nmax3) if (e3x < 0) break; else continue;
  315. // We can skip this block if it's already fully covered
  316. var blockX = x0 >> blockShift;
  317. var blockY = y0 >> blockShift;
  318. var blockId = blockX + blockY * canvasWBlocks;
  319. var minz = cbz + nminz;
  320. // farthest point in block closer than closest point in our tri?
  321. if ( blockMaxZ[ blockId ] < minz ) continue;
  322. // Need to do a deferred clear?
  323. var bflags = blockFlags[ blockId ];
  324. if ( bflags & BLOCK_NEEDCLEAR) clearBlock( blockX, blockY );
  325. blockFlags[ blockId ] = bflags & ~( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
  326. // Offset at top-left corner
  327. var offset = x0 + y0 * canvasWidth;
  328. // Accept whole block when fully covered
  329. if ( cb1 >= nmin1 && cb2 >= nmin2 && cb3 >= nmin3 ) {
  330. var maxz = cbz + nmaxz;
  331. blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
  332. var cy1 = cb1;
  333. var cy2 = cb2;
  334. var cyz = cbz;
  335. for ( var iy = 0; iy < q; iy ++ ) {
  336. var cx1 = cy1;
  337. var cx2 = cy2;
  338. var cxz = cyz;
  339. for ( var ix = 0; ix < q; ix ++ ) {
  340. var z = cxz;
  341. if ( z < zbuffer[ offset ] ) {
  342. zbuffer[ offset ] = z;
  343. var u = cx1 * scale;
  344. var v = cx2 * scale;
  345. shader( data, offset * 4, u, v, face, material );
  346. }
  347. cx1 += dy12;
  348. cx2 += dy23;
  349. cxz += dzdx;
  350. offset++;
  351. }
  352. cy1 += dx12;
  353. cy2 += dx23;
  354. cyz += dzdy;
  355. offset += linestep;
  356. }
  357. } else { // Partially covered block
  358. var cy1 = cb1;
  359. var cy2 = cb2;
  360. var cy3 = cb3;
  361. var cyz = cbz;
  362. for ( var iy = 0; iy < q; iy ++ ) {
  363. var cx1 = cy1;
  364. var cx2 = cy2;
  365. var cx3 = cy3;
  366. var cxz = cyz;
  367. for ( var ix = 0; ix < q; ix ++ ) {
  368. if ( ( cx1 | cx2 | cx3 ) >= 0 ) {
  369. var z = cxz;
  370. if ( z < zbuffer[ offset ] ) {
  371. var u = cx1 * scale;
  372. var v = cx2 * scale;
  373. zbuffer[ offset ] = z;
  374. shader( data, offset * 4, u, v, face, material );
  375. }
  376. }
  377. cx1 += dy12;
  378. cx2 += dy23;
  379. cx3 += dy31;
  380. cxz += dzdx;
  381. offset++;
  382. }
  383. cy1 += dx12;
  384. cy2 += dx23;
  385. cy3 += dx31;
  386. cyz += dzdy;
  387. offset += linestep;
  388. }
  389. }
  390. }
  391. // Advance to next row of blocks
  392. cb1 += q*dx12;
  393. cb2 += q*dx23;
  394. cb3 += q*dx31;
  395. cbz += q*dzdy;
  396. }
  397. }
  398. function clearBlock( blockX, blockY ) {
  399. var zoffset = blockX * blockSize + blockY * blockSize * canvasWidth;
  400. var poffset = zoffset * 4;
  401. var zlinestep = canvasWidth - blockSize;
  402. var plinestep = zlinestep * 4;
  403. for ( var y = 0; y < blockSize; y ++ ) {
  404. for ( var x = 0; x < blockSize; x ++ ) {
  405. zbuffer[ zoffset ++ ] = maxZVal;
  406. data[ poffset ++ ] = clearColor.r * 255 | 0;
  407. data[ poffset ++ ] = clearColor.g * 255 | 0;
  408. data[ poffset ++ ] = clearColor.b * 255 | 0;
  409. data[ poffset ++ ] = 255;
  410. }
  411. zoffset += zlinestep;
  412. poffset += plinestep;
  413. }
  414. }
  415. function finishClear( ) {
  416. var block = 0;
  417. for ( var y = 0; y < canvasHBlocks; y ++ ) {
  418. for ( var x = 0; x < canvasWBlocks; x ++ ) {
  419. if ( blockFlags[ block ] & BLOCK_NEEDCLEAR ) {
  420. clearBlock( x, y );
  421. blockFlags[ block ] = BLOCK_ISCLEAR;
  422. }
  423. block ++;
  424. }
  425. }
  426. }
  427. };