SoftwareRenderer.js 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author ryg / http://farbrausch.de/~fg
  4. * @author mraleph / http://mrale.ph/
  5. * @author daoshengmu / http://dsmu.me/
  6. */
  7. THREE.SoftwareRenderer = function ( parameters ) {
  8. console.log( 'THREE.SoftwareRenderer', THREE.REVISION );
  9. parameters = parameters || {};
  10. var canvas = parameters.canvas !== undefined
  11. ? parameters.canvas
  12. : document.createElement( 'canvas' );
  13. var context = canvas.getContext( '2d', {
  14. alpha: parameters.alpha === true
  15. } );
  16. var shaders = {};
  17. var textures = {};
  18. var canvasWidth, canvasHeight;
  19. var canvasWBlocks, canvasHBlocks;
  20. var viewportXScale, viewportYScale, viewportZScale;
  21. var viewportXOffs, viewportYOffs, viewportZOffs;
  22. var clearColor = new THREE.Color( 0x000000 );
  23. var imagedata, data, zbuffer;
  24. var numBlocks, blockMaxZ, blockFlags;
  25. var BLOCK_ISCLEAR = ( 1 << 0 );
  26. var BLOCK_NEEDCLEAR = ( 1 << 1 );
  27. var subpixelBits = 4;
  28. var subpixelBias = ( 1 << subpixelBits ) - 1;
  29. var blockShift = 3;
  30. var blockSize = 1 << blockShift;
  31. var maxZVal = ( 1 << 24 ); // Note: You want to size this so you don't get overflows.
  32. var rectx1 = Infinity, recty1 = Infinity;
  33. var rectx2 = 0, recty2 = 0;
  34. var prevrectx1 = Infinity, prevrecty1 = Infinity;
  35. var prevrectx2 = 0, prevrecty2 = 0;
  36. var projector = new THREE.Projector();
  37. var vector1 = new THREE.Vector3();
  38. var vector2 = new THREE.Vector3();
  39. var vector3 = new THREE.Vector3();
  40. var texCoord1 = new THREE.Vector2();
  41. var texCoord2 = new THREE.Vector2();
  42. var texCoord3 = new THREE.Vector2();
  43. this.domElement = canvas;
  44. this.autoClear = true;
  45. // WebGLRenderer compatibility
  46. this.supportsVertexTextures = function () {};
  47. this.setFaceCulling = function () {};
  48. this.setClearColor = function ( color, alpha ) {
  49. clearColor.set( color );
  50. cleanColorBuffer();
  51. };
  52. this.setPixelRatio = function () {};
  53. this.setSize = function ( width, height ) {
  54. canvasWBlocks = Math.floor( width / blockSize );
  55. canvasHBlocks = Math.floor( height / blockSize );
  56. canvasWidth = canvasWBlocks * blockSize;
  57. canvasHeight = canvasHBlocks * blockSize;
  58. var fixScale = 1 << subpixelBits;
  59. viewportXScale = fixScale * canvasWidth / 2;
  60. viewportYScale = - fixScale * canvasHeight / 2;
  61. viewportZScale = maxZVal / 2;
  62. viewportXOffs = fixScale * canvasWidth / 2 + 0.5;
  63. viewportYOffs = fixScale * canvasHeight / 2 + 0.5;
  64. viewportZOffs = maxZVal / 2 + 0.5;
  65. canvas.width = canvasWidth;
  66. canvas.height = canvasHeight;
  67. context.fillStyle = clearColor.getStyle();
  68. context.fillRect( 0, 0, canvasWidth, canvasHeight );
  69. imagedata = context.getImageData( 0, 0, canvasWidth, canvasHeight );
  70. data = imagedata.data;
  71. zbuffer = new Int32Array( data.length / 4 );
  72. numBlocks = canvasWBlocks * canvasHBlocks;
  73. blockMaxZ = new Int32Array( numBlocks );
  74. blockFlags = new Uint8Array( numBlocks );
  75. for ( var i = 0, l = zbuffer.length; i < l; i ++ ) {
  76. zbuffer[ i ] = maxZVal;
  77. }
  78. for ( var i = 0; i < numBlocks; i ++ ) {
  79. blockFlags[ i ] = BLOCK_ISCLEAR;
  80. }
  81. cleanColorBuffer();
  82. };
  83. this.setSize( canvas.width, canvas.height );
  84. this.clear = function () {
  85. rectx1 = Infinity;
  86. recty1 = Infinity;
  87. rectx2 = 0;
  88. recty2 = 0;
  89. for ( var i = 0; i < numBlocks; i ++ ) {
  90. blockMaxZ[ i ] = maxZVal;
  91. blockFlags[ i ] = ( blockFlags[ i ] & BLOCK_ISCLEAR ) ? BLOCK_ISCLEAR : BLOCK_NEEDCLEAR;
  92. }
  93. };
  94. this.render = function ( scene, camera ) {
  95. if ( this.autoClear === true ) this.clear();
  96. var renderData = projector.projectScene( scene, camera, false, false );
  97. var elements = renderData.elements;
  98. for ( var e = 0, el = elements.length; e < el; e ++ ) {
  99. var element = elements[ e ];
  100. var material = element.material;
  101. var shader = getMaterialShader( material );
  102. if ( element instanceof THREE.RenderableFace ) {
  103. if ( ! element.uvs ) {
  104. drawTriangle(
  105. element.v1.positionScreen,
  106. element.v2.positionScreen,
  107. element.v3.positionScreen,
  108. null, null, null,
  109. shader, element, material
  110. );
  111. } else {
  112. drawTriangle(
  113. element.v1.positionScreen,
  114. element.v2.positionScreen,
  115. element.v3.positionScreen,
  116. element.uvs[ 0 ], element.uvs[ 1 ], element.uvs[ 2 ],
  117. shader, element, material
  118. );
  119. }
  120. } else if ( element instanceof THREE.RenderableSprite ) {
  121. var scaleX = element.scale.x * 0.5;
  122. var scaleY = element.scale.y * 0.5;
  123. vector1.copy( element );
  124. vector1.x -= scaleX;
  125. vector1.y += scaleY;
  126. vector2.copy( element );
  127. vector2.x -= scaleX;
  128. vector2.y -= scaleY;
  129. vector3.copy( element );
  130. vector3.x += scaleX;
  131. vector3.y += scaleY;
  132. if ( material.map ) {
  133. texCoord1.set( 0, 1 );
  134. texCoord2.set( 0, 0 );
  135. texCoord3.set( 1, 1 );
  136. drawTriangle(
  137. vector1, vector2, vector3,
  138. texCoord1, texCoord2, texCoord3,
  139. shader, element, material
  140. );
  141. } else {
  142. drawTriangle(
  143. vector1, vector2, vector3,
  144. null, null, null,
  145. shader, element, material
  146. );
  147. }
  148. vector1.copy( element );
  149. vector1.x += scaleX;
  150. vector1.y += scaleY;
  151. vector2.copy( element );
  152. vector2.x -= scaleX;
  153. vector2.y -= scaleY;
  154. vector3.copy( element );
  155. vector3.x += scaleX;
  156. vector3.y -= scaleY;
  157. if ( material.map ) {
  158. texCoord1.set( 1, 1 );
  159. texCoord2.set( 0, 0 );
  160. texCoord3.set( 1, 0 );
  161. drawTriangle(
  162. vector1, vector2, vector3,
  163. texCoord1, texCoord2, texCoord3,
  164. shader, element, material
  165. );
  166. } else {
  167. drawTriangle(
  168. vector1, vector2, vector3,
  169. null, null, null,
  170. shader, element, material
  171. );
  172. }
  173. }
  174. }
  175. finishClear();
  176. var x = Math.min( rectx1, prevrectx1 );
  177. var y = Math.min( recty1, prevrecty1 );
  178. var width = Math.max( rectx2, prevrectx2 ) - x;
  179. var height = Math.max( recty2, prevrecty2 ) - y;
  180. /*
  181. // debug; draw zbuffer
  182. for ( var i = 0, l = zbuffer.length; i < l; i++ ) {
  183. var o = i * 4;
  184. var v = (65535 - zbuffer[ i ]) >> 3;
  185. data[ o + 0 ] = v;
  186. data[ o + 1 ] = v;
  187. data[ o + 2 ] = v;
  188. data[ o + 3 ] = 255;
  189. }
  190. */
  191. if ( x !== Infinity ) {
  192. context.putImageData( imagedata, 0, 0, x, y, width, height );
  193. }
  194. prevrectx1 = rectx1; prevrecty1 = recty1;
  195. prevrectx2 = rectx2; prevrecty2 = recty2;
  196. };
  197. function cleanColorBuffer() {
  198. var size = canvasWidth * canvasHeight * 4;
  199. for ( var i = 0; i < size; i += 4 ) {
  200. data[ i ] = clearColor.r * 255 | 0;
  201. data[ i + 1 ] = clearColor.g * 255 | 0;
  202. data[ i + 2 ] = clearColor.b * 255 | 0;
  203. data[ i + 3 ] = 255;
  204. }
  205. context.fillStyle = clearColor.getStyle();
  206. context.fillRect( 0, 0, canvasWidth, canvasHeight );
  207. }
  208. function getPalette( material, bSimulateSpecular ) {
  209. var i = 0, j = 0;
  210. var diffuseR = material.color.r * 255;
  211. var diffuseG = material.color.g * 255;
  212. var diffuseB = material.color.b * 255;
  213. var palette = new Uint8Array( 256 * 3 );
  214. if ( bSimulateSpecular ) {
  215. while ( i < 204 ) {
  216. palette[ j ++ ] = Math.min( i * diffuseR / 204, 255 );
  217. palette[ j ++ ] = Math.min( i * diffuseG / 204, 255 );
  218. palette[ j ++ ] = Math.min( i * diffuseB / 204, 255 );
  219. ++ i;
  220. }
  221. while ( i < 256 ) {
  222. // plus specular highlight
  223. palette[ j ++ ] = Math.min( diffuseR + ( i - 204 ) * ( 255 - diffuseR ) / 82, 255 );
  224. palette[ j ++ ] = Math.min( diffuseG + ( i - 204 ) * ( 255 - diffuseG ) / 82, 255 );
  225. palette[ j ++ ] = Math.min( diffuseB + ( i - 204 ) * ( 255 - diffuseB ) / 82, 255 );
  226. ++ i;
  227. }
  228. } else {
  229. while ( i < 256 ) {
  230. palette[ j ++ ] = Math.min( i * diffuseR / 255, 255 );
  231. palette[ j ++ ] = Math.min( i * diffuseG / 255, 255 );
  232. palette[ j ++ ] = Math.min( i * diffuseB / 255, 255 );
  233. ++ i;
  234. }
  235. }
  236. return palette;
  237. }
  238. function basicMaterialShader( buffer, depthBuf, offset, depth, u, v, n, face, material ) {
  239. var colorOffset = offset * 4;
  240. var texture = textures[ material.map.id ];
  241. if ( ! texture.data )
  242. return;
  243. var tdim = texture.width;
  244. var isTransparent = material.transparent;
  245. var tbound = tdim - 1;
  246. var tdata = texture.data;
  247. var tIndex = ( ( ( v * tdim ) & tbound ) * tdim + ( ( u * tdim ) & tbound ) ) * 4;
  248. if ( ! isTransparent ) {
  249. buffer[ colorOffset ] = tdata[ tIndex ];
  250. buffer[ colorOffset + 1 ] = tdata[ tIndex + 1 ];
  251. buffer[ colorOffset + 2 ] = tdata[ tIndex + 2 ];
  252. buffer[ colorOffset + 3 ] = material.opacity * 255;
  253. depthBuf[ offset ] = depth;
  254. } else {
  255. var opaci = tdata[ tIndex + 3 ] * material.opacity;
  256. var texel = ( tdata[ tIndex ] << 16 ) + ( tdata[ tIndex + 1 ] << 8 ) + tdata[ tIndex + 2 ];
  257. if ( opaci < 250 ) {
  258. var backColor = ( buffer[ colorOffset ] << 16 ) + ( buffer[ colorOffset + 1 ] << 8 ) + buffer[ colorOffset + 2 ];
  259. texel = texel * opaci + backColor * ( 1 - opaci );
  260. }
  261. buffer[ colorOffset ] = ( texel & 0xff0000 ) >> 16;
  262. buffer[ colorOffset + 1 ] = ( texel & 0xff00 ) >> 8;
  263. buffer[ colorOffset + 2 ] = texel & 0xff;
  264. buffer[ colorOffset + 3 ] = material.opacity * 255;
  265. }
  266. }
  267. function lightingMaterialShader( buffer, depthBuf, offset, depth, u, v, n, face, material ) {
  268. var colorOffset = offset * 4;
  269. var texture = textures[ material.map.id ];
  270. if ( ! texture.data )
  271. return;
  272. var tdim = texture.width;
  273. var isTransparent = material.transparent;
  274. var cIndex = ( n > 0 ? ( ~~ n ) : 0 ) * 3;
  275. var tbound = tdim - 1;
  276. var tdata = texture.data;
  277. var tIndex = ( ( ( v * tdim ) & tbound ) * tdim + ( ( u * tdim ) & tbound ) ) * 4;
  278. if ( ! isTransparent ) {
  279. buffer[ colorOffset ] = ( material.palette[ cIndex ] * tdata[ tIndex ] ) >> 8;
  280. buffer[ colorOffset + 1 ] = ( material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ] ) >> 8;
  281. buffer[ colorOffset + 2 ] = ( material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ] ) >> 8;
  282. buffer[ colorOffset + 3 ] = material.opacity * 255;
  283. depthBuf[ offset ] = depth;
  284. } else {
  285. var opaci = tdata[ tIndex + 3 ] * material.opacity;
  286. var foreColor = ( ( material.palette[ cIndex ] * tdata[ tIndex ] ) << 16 )
  287. + ( ( material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ] ) << 8 )
  288. + ( material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ] );
  289. if ( opaci < 250 ) {
  290. var backColor = buffer[ colorOffset ] << 24 + buffer[ colorOffset + 1 ] << 16 + buffer[ colorOffset + 2 ] << 8;
  291. foreColor = foreColor * opaci + backColor * ( 1 - opaci );
  292. }
  293. buffer[ colorOffset ] = ( foreColor & 0xff0000 ) >> 16;
  294. buffer[ colorOffset + 1 ] = ( foreColor & 0xff00 ) >> 8;
  295. buffer[ colorOffset + 2 ] = ( foreColor & 0xff );
  296. buffer[ colorOffset + 3 ] = material.opacity * 255;
  297. }
  298. }
  299. function onMaterialUpdate ( event ) {
  300. var material = event.target;
  301. material.removeEventListener( 'update', onMaterialUpdate );
  302. delete shaders[ material.id ];
  303. }
  304. function getMaterialShader( material ) {
  305. var id = material.id;
  306. var shader = shaders[ id ];
  307. if ( shaders[ id ] === undefined ) {
  308. material.addEventListener( 'update', onMaterialUpdate );
  309. if ( material instanceof THREE.MeshBasicMaterial ||
  310. material instanceof THREE.MeshLambertMaterial ||
  311. material instanceof THREE.MeshPhongMaterial ||
  312. material instanceof THREE.SpriteMaterial ) {
  313. if ( material instanceof THREE.MeshLambertMaterial ) {
  314. // Generate color palette
  315. if ( ! material.palette ) {
  316. material.palette = getPalette( material, false );
  317. }
  318. } else if ( material instanceof THREE.MeshPhongMaterial ) {
  319. // Generate color palette
  320. if ( ! material.palette ) {
  321. material.palette = getPalette( material, true );
  322. }
  323. }
  324. var string;
  325. if ( material.map ) {
  326. var texture = new THREE.SoftwareRenderer.Texture();
  327. texture.fromImage( material.map.image );
  328. textures[ material.map.id ] = texture;
  329. if ( material instanceof THREE.MeshBasicMaterial
  330. || material instanceof THREE.SpriteMaterial ) {
  331. shader = basicMaterialShader;
  332. } else {
  333. shader = lightingMaterialShader;
  334. }
  335. } else {
  336. if ( material.vertexColors === THREE.FaceColors ) {
  337. string = [
  338. 'var colorOffset = offset * 4;',
  339. 'buffer[ colorOffset ] = face.color.r * 255;',
  340. 'buffer[ colorOffset + 1 ] = face.color.g * 255;',
  341. 'buffer[ colorOffset + 2 ] = face.color.b * 255;',
  342. 'buffer[ colorOffset + 3 ] = material.opacity * 255;',
  343. 'depthBuf[ offset ] = depth;'
  344. ].join( '\n' );
  345. } else {
  346. string = [
  347. 'var colorOffset = offset * 4;',
  348. 'buffer[ colorOffset ] = material.color.r * 255;',
  349. 'buffer[ colorOffset + 1 ] = material.color.g * 255;',
  350. 'buffer[ colorOffset + 2 ] = material.color.b * 255;',
  351. 'buffer[ colorOffset + 3 ] = material.opacity * 255;',
  352. 'depthBuf[ offset ] = depth;'
  353. ].join( '\n' );
  354. }
  355. shader = new Function( 'buffer, depthBuf, offset, depth, u, v, n, face, material', string );
  356. }
  357. } else {
  358. var string = [
  359. 'var colorOffset = offset * 4;',
  360. 'buffer[ colorOffset ] = u * 255;',
  361. 'buffer[ colorOffset + 1 ] = v * 255;',
  362. 'buffer[ colorOffset + 2 ] = 0;',
  363. 'buffer[ colorOffset + 3 ] = 255;',
  364. 'depthBuf[ offset ] = depth;'
  365. ].join( '\n' );
  366. shader = new Function( 'buffer, depthBuf, offset, depth, u, v', string );
  367. }
  368. shaders[ id ] = shader;
  369. }
  370. return shader;
  371. }
  372. function clearRectangle( x1, y1, x2, y2 ) {
  373. var xmin = Math.max( Math.min( x1, x2 ), 0 );
  374. var xmax = Math.min( Math.max( x1, x2 ), canvasWidth );
  375. var ymin = Math.max( Math.min( y1, y2 ), 0 );
  376. var ymax = Math.min( Math.max( y1, y2 ), canvasHeight );
  377. var offset = ( xmin + ymin * canvasWidth ) * 4 + 3;
  378. var linestep = ( canvasWidth - ( xmax - xmin ) ) * 4;
  379. for ( var y = ymin; y < ymax; y ++ ) {
  380. for ( var x = xmin; x < xmax; x ++ ) {
  381. data[ offset += 4 ] = 0;
  382. }
  383. offset += linestep;
  384. }
  385. }
  386. function drawTriangle( v1, v2, v3, uv1, uv2, uv3, shader, face, material ) {
  387. // TODO: Implement per-pixel z-clipping
  388. if ( v1.z < - 1 || v1.z > 1 || v2.z < - 1 || v2.z > 1 || v3.z < - 1 || v3.z > 1 ) return;
  389. // https://gist.github.com/2486101
  390. // explanation: http://pouet.net/topic.php?which=8760&page=1
  391. // 28.4 fixed-point coordinates
  392. var x1 = ( v1.x * viewportXScale + viewportXOffs ) | 0;
  393. var x2 = ( v2.x * viewportXScale + viewportXOffs ) | 0;
  394. var x3 = ( v3.x * viewportXScale + viewportXOffs ) | 0;
  395. var y1 = ( v1.y * viewportYScale + viewportYOffs ) | 0;
  396. var y2 = ( v2.y * viewportYScale + viewportYOffs ) | 0;
  397. var y3 = ( v3.y * viewportYScale + viewportYOffs ) | 0;
  398. // Z values (.28 fixed-point)
  399. var z1 = ( v1.z * viewportZScale + viewportZOffs ) | 0;
  400. var z2 = ( v2.z * viewportZScale + viewportZOffs ) | 0;
  401. var z3 = ( v3.z * viewportZScale + viewportZOffs ) | 0;
  402. // UV values
  403. var bHasUV = false;
  404. var tu1, tv1, tu2, tv2, tu3, tv3;
  405. if ( uv1 && uv2 && uv3 ) {
  406. bHasUV = true;
  407. tu1 = uv1.x;
  408. tv1 = 1 - uv1.y;
  409. tu2 = uv2.x;
  410. tv2 = 1 - uv2.y;
  411. tu3 = uv3.x;
  412. tv3 = 1 - uv3.y;
  413. }
  414. // Normal values
  415. var bHasNormal = false;
  416. var n1, n2, n3, nz1, nz2, nz3;
  417. if ( face.vertexNormalsModel ) {
  418. bHasNormal = true;
  419. n1 = face.vertexNormalsModel[ 0 ];
  420. n2 = face.vertexNormalsModel[ 1 ];
  421. n3 = face.vertexNormalsModel[ 2 ];
  422. nz1 = n1.z * 255;
  423. nz2 = n2.z * 255;
  424. nz3 = n3.z * 255;
  425. }
  426. // Deltas
  427. var dx12 = x1 - x2, dy12 = y2 - y1;
  428. var dx23 = x2 - x3, dy23 = y3 - y2;
  429. var dx31 = x3 - x1, dy31 = y1 - y3;
  430. // Bounding rectangle
  431. var minx = Math.max( ( Math.min( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, 0 );
  432. var maxx = Math.min( ( Math.max( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, canvasWidth );
  433. var miny = Math.max( ( Math.min( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, 0 );
  434. var maxy = Math.min( ( Math.max( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, canvasHeight );
  435. rectx1 = Math.min( minx, rectx1 );
  436. rectx2 = Math.max( maxx, rectx2 );
  437. recty1 = Math.min( miny, recty1 );
  438. recty2 = Math.max( maxy, recty2 );
  439. // Block size, standard 8x8 (must be power of two)
  440. var q = blockSize;
  441. // Start in corner of 8x8 block
  442. minx &= ~ ( q - 1 );
  443. miny &= ~ ( q - 1 );
  444. // Constant part of half-edge functions
  445. var minXfixscale = ( minx << subpixelBits );
  446. var minYfixscale = ( miny << subpixelBits );
  447. var c1 = dy12 * ( ( minXfixscale ) - x1 ) + dx12 * ( ( minYfixscale ) - y1 );
  448. var c2 = dy23 * ( ( minXfixscale ) - x2 ) + dx23 * ( ( minYfixscale ) - y2 );
  449. var c3 = dy31 * ( ( minXfixscale ) - x3 ) + dx31 * ( ( minYfixscale ) - y3 );
  450. // Correct for fill convention
  451. if ( dy12 > 0 || ( dy12 == 0 && dx12 > 0 ) ) c1 ++;
  452. if ( dy23 > 0 || ( dy23 == 0 && dx23 > 0 ) ) c2 ++;
  453. if ( dy31 > 0 || ( dy31 == 0 && dx31 > 0 ) ) c3 ++;
  454. // Note this doesn't kill subpixel precision, but only because we test for >=0 (not >0).
  455. // It's a bit subtle. :)
  456. c1 = ( c1 - 1 ) >> subpixelBits;
  457. c2 = ( c2 - 1 ) >> subpixelBits;
  458. c3 = ( c3 - 1 ) >> subpixelBits;
  459. // Z interpolation setup
  460. var dz12 = z1 - z2, dz31 = z3 - z1;
  461. var invDet = 1.0 / ( dx12 * dy31 - dx31 * dy12 );
  462. var dzdx = ( invDet * ( dz12 * dy31 - dz31 * dy12 ) ); // dz per one subpixel step in x
  463. var dzdy = ( invDet * ( dz12 * dx31 - dx12 * dz31 ) ); // dz per one subpixel step in y
  464. // Z at top/left corner of rast area
  465. var cz = ( z1 + ( ( minXfixscale ) - x1 ) * dzdx + ( ( minYfixscale ) - y1 ) * dzdy ) | 0;
  466. // Z pixel steps
  467. var fixscale = ( 1 << subpixelBits );
  468. dzdx = ( dzdx * fixscale ) | 0;
  469. dzdy = ( dzdy * fixscale ) | 0;
  470. var dtvdx, dtvdy, cbtu, cbtv;
  471. if ( bHasUV ) {
  472. // UV interpolation setup
  473. var dtu12 = tu1 - tu2, dtu31 = tu3 - tu1;
  474. var dtudx = ( invDet * ( dtu12 * dy31 - dtu31 * dy12 ) ); // dtu per one subpixel step in x
  475. var dtudy = ( invDet * ( dtu12 * dx31 - dx12 * dtu31 ) ); // dtu per one subpixel step in y
  476. var dtv12 = tv1 - tv2, dtv31 = tv3 - tv1;
  477. dtvdx = ( invDet * ( dtv12 * dy31 - dtv31 * dy12 ) ); // dtv per one subpixel step in x
  478. dtvdy = ( invDet * ( dtv12 * dx31 - dx12 * dtv31 ) ); // dtv per one subpixel step in y
  479. // UV at top/left corner of rast area
  480. cbtu = ( tu1 + ( minXfixscale - x1 ) * dtudx + ( minYfixscale - y1 ) * dtudy );
  481. cbtv = ( tv1 + ( minXfixscale - x1 ) * dtvdx + ( minYfixscale - y1 ) * dtvdy );
  482. // UV pixel steps
  483. dtudx = dtudx * fixscale;
  484. dtudy = dtudy * fixscale;
  485. dtvdx = dtvdx * fixscale;
  486. dtvdy = dtvdy * fixscale;
  487. }
  488. var dnxdx, dnzdy, cbnz;
  489. if ( bHasNormal ) {
  490. // Normal interpolation setup
  491. var dnz12 = nz1 - nz2, dnz31 = nz3 - nz1;
  492. var dnzdx = ( invDet * ( dnz12 * dy31 - dnz31 * dy12 ) ); // dnz per one subpixel step in x
  493. var dnzdy = ( invDet * ( dnz12 * dx31 - dx12 * dnz31 ) ); // dnz per one subpixel step in y
  494. // Normal at top/left corner of rast area
  495. cbnz = ( nz1 + ( minXfixscale - x1 ) * dnzdx + ( minYfixscale - y1 ) * dnzdy );
  496. // Normal pixel steps
  497. dnzdx = ( dnzdx * fixscale );
  498. dnzdy = ( dnzdy * fixscale );
  499. }
  500. // Set up min/max corners
  501. var qm1 = q - 1; // for convenience
  502. var nmin1 = 0, nmax1 = 0;
  503. var nmin2 = 0, nmax2 = 0;
  504. var nmin3 = 0, nmax3 = 0;
  505. var nminz = 0, nmaxz = 0;
  506. if ( dx12 >= 0 ) nmax1 -= qm1 * dx12; else nmin1 -= qm1 * dx12;
  507. if ( dy12 >= 0 ) nmax1 -= qm1 * dy12; else nmin1 -= qm1 * dy12;
  508. if ( dx23 >= 0 ) nmax2 -= qm1 * dx23; else nmin2 -= qm1 * dx23;
  509. if ( dy23 >= 0 ) nmax2 -= qm1 * dy23; else nmin2 -= qm1 * dy23;
  510. if ( dx31 >= 0 ) nmax3 -= qm1 * dx31; else nmin3 -= qm1 * dx31;
  511. if ( dy31 >= 0 ) nmax3 -= qm1 * dy31; else nmin3 -= qm1 * dy31;
  512. if ( dzdx >= 0 ) nmaxz += qm1 * dzdx; else nminz += qm1 * dzdx;
  513. if ( dzdy >= 0 ) nmaxz += qm1 * dzdy; else nminz += qm1 * dzdy;
  514. // Loop through blocks
  515. var linestep = canvasWidth - q;
  516. var scale = 1.0 / ( c1 + c2 + c3 );
  517. var cb1 = c1;
  518. var cb2 = c2;
  519. var cb3 = c3;
  520. var cbz = cz;
  521. var qstep = - q;
  522. var e1x = qstep * dy12;
  523. var e2x = qstep * dy23;
  524. var e3x = qstep * dy31;
  525. var ezx = qstep * dzdx;
  526. var etux, etvx;
  527. if ( bHasUV ) {
  528. etux = qstep * dtudx;
  529. etvx = qstep * dtvdx;
  530. }
  531. var enzx;
  532. if ( bHasNormal ) {
  533. enzx = qstep * dnzdx;
  534. }
  535. var x0 = minx;
  536. for ( var y0 = miny; y0 < maxy; y0 += q ) {
  537. // New block line - keep hunting for tri outer edge in old block line dir
  538. while ( x0 >= minx && x0 < maxx && cb1 >= nmax1 && cb2 >= nmax2 && cb3 >= nmax3 ) {
  539. x0 += qstep;
  540. cb1 += e1x;
  541. cb2 += e2x;
  542. cb3 += e3x;
  543. cbz += ezx;
  544. if ( bHasUV ) {
  545. cbtu += etux;
  546. cbtv += etvx;
  547. }
  548. if ( bHasNormal ) {
  549. cbnz += enzx;
  550. }
  551. }
  552. // Okay, we're now in a block we know is outside. Reverse direction and go into main loop.
  553. qstep = - qstep;
  554. e1x = - e1x;
  555. e2x = - e2x;
  556. e3x = - e3x;
  557. ezx = - ezx;
  558. if ( bHasUV ) {
  559. etux = - etux;
  560. etvx = - etvx;
  561. }
  562. if ( bHasNormal ) {
  563. enzx = - enzx;
  564. }
  565. while ( 1 ) {
  566. // Step everything
  567. x0 += qstep;
  568. cb1 += e1x;
  569. cb2 += e2x;
  570. cb3 += e3x;
  571. cbz += ezx;
  572. if ( bHasUV ) {
  573. cbtu += etux;
  574. cbtv += etvx;
  575. }
  576. if ( bHasNormal ) {
  577. cbnz += enzx;
  578. }
  579. // We're done with this block line when at least one edge completely out
  580. // If an edge function is too small and decreasing in the current traversal
  581. // dir, we're done with this line.
  582. if ( x0 < minx || x0 >= maxx ) break;
  583. if ( cb1 < nmax1 ) if ( e1x < 0 ) break; else continue;
  584. if ( cb2 < nmax2 ) if ( e2x < 0 ) break; else continue;
  585. if ( cb3 < nmax3 ) if ( e3x < 0 ) break; else continue;
  586. // We can skip this block if it's already fully covered
  587. var blockX = x0 >> blockShift;
  588. var blockY = y0 >> blockShift;
  589. var blockId = blockX + blockY * canvasWBlocks;
  590. var minz = cbz + nminz;
  591. // farthest point in block closer than closest point in our tri?
  592. if ( blockMaxZ[ blockId ] < minz ) continue;
  593. // Need to do a deferred clear?
  594. var bflags = blockFlags[ blockId ];
  595. if ( bflags & BLOCK_NEEDCLEAR ) clearBlock( blockX, blockY );
  596. blockFlags[ blockId ] = bflags & ~ ( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
  597. // Offset at top-left corner
  598. var offset = x0 + y0 * canvasWidth;
  599. // Accept whole block when fully covered
  600. if ( cb1 >= nmin1 && cb2 >= nmin2 && cb3 >= nmin3 ) {
  601. var maxz = cbz + nmaxz;
  602. blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
  603. var cy1 = cb1;
  604. var cy2 = cb2;
  605. var cyz = cbz;
  606. var cytu, cytv;
  607. if ( bHasUV ) {
  608. cytu = cbtu;
  609. cytv = cbtv;
  610. }
  611. var cynz;
  612. if ( bHasNormal ) {
  613. cynz = cbnz;
  614. }
  615. for ( var iy = 0; iy < q; iy ++ ) {
  616. var cx1 = cy1;
  617. var cx2 = cy2;
  618. var cxz = cyz;
  619. var cxtu;
  620. var cxtv;
  621. if ( bHasUV ) {
  622. cxtu = cytu;
  623. cxtv = cytv;
  624. }
  625. var cxnz;
  626. if ( bHasNormal ) {
  627. cxnz = cynz;
  628. }
  629. for ( var ix = 0; ix < q; ix ++ ) {
  630. var z = cxz;
  631. if ( z < zbuffer[ offset ] ) {
  632. shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
  633. }
  634. cx1 += dy12;
  635. cx2 += dy23;
  636. cxz += dzdx;
  637. if ( bHasUV ) {
  638. cxtu += dtudx;
  639. cxtv += dtvdx;
  640. }
  641. if ( bHasNormal ) {
  642. cxnz += dnzdx;
  643. }
  644. offset ++;
  645. }
  646. cy1 += dx12;
  647. cy2 += dx23;
  648. cyz += dzdy;
  649. if ( bHasUV ) {
  650. cytu += dtudy;
  651. cytv += dtvdy;
  652. }
  653. if ( bHasNormal ) {
  654. cynz += dnzdy;
  655. }
  656. offset += linestep;
  657. }
  658. } else {
  659. // Partially covered block
  660. var cy1 = cb1;
  661. var cy2 = cb2;
  662. var cy3 = cb3;
  663. var cyz = cbz;
  664. var cytu, cytv;
  665. if ( bHasUV ) {
  666. cytu = cbtu;
  667. cytv = cbtv;
  668. }
  669. var cynz;
  670. if ( bHasNormal ) {
  671. cynz = cbnz;
  672. }
  673. for ( var iy = 0; iy < q; iy ++ ) {
  674. var cx1 = cy1;
  675. var cx2 = cy2;
  676. var cx3 = cy3;
  677. var cxz = cyz;
  678. var cxtu;
  679. var cxtv;
  680. if ( bHasUV ) {
  681. cxtu = cytu;
  682. cxtv = cytv;
  683. }
  684. var cxnz;
  685. if ( bHasNormal ) {
  686. cxnz = cynz;
  687. }
  688. for ( var ix = 0; ix < q; ix ++ ) {
  689. if ( ( cx1 | cx2 | cx3 ) >= 0 ) {
  690. var z = cxz;
  691. if ( z < zbuffer[ offset ] ) {
  692. shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
  693. }
  694. }
  695. cx1 += dy12;
  696. cx2 += dy23;
  697. cx3 += dy31;
  698. cxz += dzdx;
  699. if ( bHasUV ) {
  700. cxtu += dtudx;
  701. cxtv += dtvdx;
  702. }
  703. if ( bHasNormal ) {
  704. cxnz += dnzdx;
  705. }
  706. offset ++;
  707. }
  708. cy1 += dx12;
  709. cy2 += dx23;
  710. cy3 += dx31;
  711. cyz += dzdy;
  712. if ( bHasUV ) {
  713. cytu += dtudy;
  714. cytv += dtvdy;
  715. }
  716. if ( bHasNormal ) {
  717. cynz += dnzdy;
  718. }
  719. offset += linestep;
  720. }
  721. }
  722. }
  723. // Advance to next row of blocks
  724. cb1 += q * dx12;
  725. cb2 += q * dx23;
  726. cb3 += q * dx31;
  727. cbz += q * dzdy;
  728. if ( bHasUV ) {
  729. cbtu += q * dtudy;
  730. cbtv += q * dtvdy;
  731. }
  732. if ( bHasNormal ) {
  733. cbnz += q * dnzdy;
  734. }
  735. }
  736. }
  737. function clearBlock( blockX, blockY ) {
  738. var zoffset = blockX * blockSize + blockY * blockSize * canvasWidth;
  739. var poffset = zoffset * 4;
  740. var zlinestep = canvasWidth - blockSize;
  741. var plinestep = zlinestep * 4;
  742. for ( var y = 0; y < blockSize; y ++ ) {
  743. for ( var x = 0; x < blockSize; x ++ ) {
  744. zbuffer[ zoffset ++ ] = maxZVal;
  745. data[ poffset ++ ] = clearColor.r * 255 | 0;
  746. data[ poffset ++ ] = clearColor.g * 255 | 0;
  747. data[ poffset ++ ] = clearColor.b * 255 | 0;
  748. data[ poffset ++ ] = 255;
  749. }
  750. zoffset += zlinestep;
  751. poffset += plinestep;
  752. }
  753. }
  754. function finishClear( ) {
  755. var block = 0;
  756. for ( var y = 0; y < canvasHBlocks; y ++ ) {
  757. for ( var x = 0; x < canvasWBlocks; x ++ ) {
  758. if ( blockFlags[ block ] & BLOCK_NEEDCLEAR ) {
  759. clearBlock( x, y );
  760. blockFlags[ block ] = BLOCK_ISCLEAR;
  761. }
  762. block ++;
  763. }
  764. }
  765. }
  766. };
  767. THREE.SoftwareRenderer.Texture = function() {
  768. var canvas;
  769. this.fromImage = function( image ) {
  770. if ( ! image || image.width <= 0 || image.height <= 0 )
  771. return;
  772. if ( canvas === undefined ) {
  773. canvas = document.createElement( 'canvas' );
  774. }
  775. var size = image.width > image.height ? image.width : image.height;
  776. size = THREE.Math.nextPowerOfTwo( size );
  777. if ( canvas.width != size || canvas.height != size ) {
  778. canvas.width = size;
  779. canvas.height = size;
  780. }
  781. var ctx = canvas.getContext( '2d' );
  782. ctx.clearRect( 0, 0, size, size );
  783. ctx.drawImage( image, 0, 0, size, size );
  784. var imgData = ctx.getImageData( 0, 0, size, size );
  785. this.data = imgData.data;
  786. this.width = size;
  787. this.height = size;
  788. this.srcUrl = image.src;
  789. };
  790. };