SoftwareRenderer.js 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219
  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. material.map.addEventListener( 'update', function ( event ) {
  329. texture.fromImage( event.target.image );
  330. } );
  331. textures[ material.map.id ] = texture;
  332. if ( material instanceof THREE.MeshBasicMaterial
  333. || material instanceof THREE.SpriteMaterial ) {
  334. shader = basicMaterialShader;
  335. } else {
  336. shader = lightingMaterialShader;
  337. }
  338. } else {
  339. if ( material.vertexColors === THREE.FaceColors ) {
  340. string = [
  341. 'var colorOffset = offset * 4;',
  342. 'buffer[ colorOffset ] = face.color.r * 255;',
  343. 'buffer[ colorOffset + 1 ] = face.color.g * 255;',
  344. 'buffer[ colorOffset + 2 ] = face.color.b * 255;',
  345. 'buffer[ colorOffset + 3 ] = material.opacity * 255;',
  346. 'depthBuf[ offset ] = depth;'
  347. ].join( '\n' );
  348. } else {
  349. string = [
  350. 'var colorOffset = offset * 4;',
  351. 'buffer[ colorOffset ] = material.color.r * 255;',
  352. 'buffer[ colorOffset + 1 ] = material.color.g * 255;',
  353. 'buffer[ colorOffset + 2 ] = material.color.b * 255;',
  354. 'buffer[ colorOffset + 3 ] = material.opacity * 255;',
  355. 'depthBuf[ offset ] = depth;'
  356. ].join( '\n' );
  357. }
  358. shader = new Function( 'buffer, depthBuf, offset, depth, u, v, n, face, material', string );
  359. }
  360. } else {
  361. var string = [
  362. 'var colorOffset = offset * 4;',
  363. 'buffer[ colorOffset ] = u * 255;',
  364. 'buffer[ colorOffset + 1 ] = v * 255;',
  365. 'buffer[ colorOffset + 2 ] = 0;',
  366. 'buffer[ colorOffset + 3 ] = 255;',
  367. 'depthBuf[ offset ] = depth;'
  368. ].join( '\n' );
  369. shader = new Function( 'buffer, depthBuf, offset, depth, u, v', string );
  370. }
  371. shaders[ id ] = shader;
  372. }
  373. return shader;
  374. }
  375. function clearRectangle( x1, y1, x2, y2 ) {
  376. var xmin = Math.max( Math.min( x1, x2 ), 0 );
  377. var xmax = Math.min( Math.max( x1, x2 ), canvasWidth );
  378. var ymin = Math.max( Math.min( y1, y2 ), 0 );
  379. var ymax = Math.min( Math.max( y1, y2 ), canvasHeight );
  380. var offset = ( xmin + ymin * canvasWidth ) * 4 + 3;
  381. var linestep = ( canvasWidth - ( xmax - xmin ) ) * 4;
  382. for ( var y = ymin; y < ymax; y ++ ) {
  383. for ( var x = xmin; x < xmax; x ++ ) {
  384. data[ offset += 4 ] = 0;
  385. }
  386. offset += linestep;
  387. }
  388. }
  389. function drawTriangle( v1, v2, v3, uv1, uv2, uv3, shader, face, material ) {
  390. // TODO: Implement per-pixel z-clipping
  391. if ( v1.z < - 1 || v1.z > 1 || v2.z < - 1 || v2.z > 1 || v3.z < - 1 || v3.z > 1 ) return;
  392. // https://gist.github.com/2486101
  393. // explanation: http://pouet.net/topic.php?which=8760&page=1
  394. // 28.4 fixed-point coordinates
  395. var x1 = ( v1.x * viewportXScale + viewportXOffs ) | 0;
  396. var x2 = ( v2.x * viewportXScale + viewportXOffs ) | 0;
  397. var x3 = ( v3.x * viewportXScale + viewportXOffs ) | 0;
  398. var y1 = ( v1.y * viewportYScale + viewportYOffs ) | 0;
  399. var y2 = ( v2.y * viewportYScale + viewportYOffs ) | 0;
  400. var y3 = ( v3.y * viewportYScale + viewportYOffs ) | 0;
  401. // Z values (.28 fixed-point)
  402. var z1 = ( v1.z * viewportZScale + viewportZOffs ) | 0;
  403. var z2 = ( v2.z * viewportZScale + viewportZOffs ) | 0;
  404. var z3 = ( v3.z * viewportZScale + viewportZOffs ) | 0;
  405. // UV values
  406. var bHasUV = false;
  407. var tu1, tv1, tu2, tv2, tu3, tv3;
  408. if ( uv1 && uv2 && uv3 ) {
  409. bHasUV = true;
  410. tu1 = uv1.x;
  411. tv1 = 1 - uv1.y;
  412. tu2 = uv2.x;
  413. tv2 = 1 - uv2.y;
  414. tu3 = uv3.x;
  415. tv3 = 1 - uv3.y;
  416. }
  417. // Normal values
  418. var bHasNormal = false;
  419. var n1, n2, n3, nz1, nz2, nz3;
  420. if ( face.vertexNormalsModel ) {
  421. bHasNormal = true;
  422. n1 = face.vertexNormalsModel[ 0 ];
  423. n2 = face.vertexNormalsModel[ 1 ];
  424. n3 = face.vertexNormalsModel[ 2 ];
  425. nz1 = n1.z * 255;
  426. nz2 = n2.z * 255;
  427. nz3 = n3.z * 255;
  428. }
  429. // Deltas
  430. var dx12 = x1 - x2, dy12 = y2 - y1;
  431. var dx23 = x2 - x3, dy23 = y3 - y2;
  432. var dx31 = x3 - x1, dy31 = y1 - y3;
  433. // Bounding rectangle
  434. var minx = Math.max( ( Math.min( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, 0 );
  435. var maxx = Math.min( ( Math.max( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, canvasWidth );
  436. var miny = Math.max( ( Math.min( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, 0 );
  437. var maxy = Math.min( ( Math.max( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, canvasHeight );
  438. rectx1 = Math.min( minx, rectx1 );
  439. rectx2 = Math.max( maxx, rectx2 );
  440. recty1 = Math.min( miny, recty1 );
  441. recty2 = Math.max( maxy, recty2 );
  442. // Block size, standard 8x8 (must be power of two)
  443. var q = blockSize;
  444. // Start in corner of 8x8 block
  445. minx &= ~ ( q - 1 );
  446. miny &= ~ ( q - 1 );
  447. // Constant part of half-edge functions
  448. var minXfixscale = ( minx << subpixelBits );
  449. var minYfixscale = ( miny << subpixelBits );
  450. var c1 = dy12 * ( ( minXfixscale ) - x1 ) + dx12 * ( ( minYfixscale ) - y1 );
  451. var c2 = dy23 * ( ( minXfixscale ) - x2 ) + dx23 * ( ( minYfixscale ) - y2 );
  452. var c3 = dy31 * ( ( minXfixscale ) - x3 ) + dx31 * ( ( minYfixscale ) - y3 );
  453. // Correct for fill convention
  454. if ( dy12 > 0 || ( dy12 == 0 && dx12 > 0 ) ) c1 ++;
  455. if ( dy23 > 0 || ( dy23 == 0 && dx23 > 0 ) ) c2 ++;
  456. if ( dy31 > 0 || ( dy31 == 0 && dx31 > 0 ) ) c3 ++;
  457. // Note this doesn't kill subpixel precision, but only because we test for >=0 (not >0).
  458. // It's a bit subtle. :)
  459. c1 = ( c1 - 1 ) >> subpixelBits;
  460. c2 = ( c2 - 1 ) >> subpixelBits;
  461. c3 = ( c3 - 1 ) >> subpixelBits;
  462. // Z interpolation setup
  463. var dz12 = z1 - z2, dz31 = z3 - z1;
  464. var invDet = 1.0 / ( dx12 * dy31 - dx31 * dy12 );
  465. var dzdx = ( invDet * ( dz12 * dy31 - dz31 * dy12 ) ); // dz per one subpixel step in x
  466. var dzdy = ( invDet * ( dz12 * dx31 - dx12 * dz31 ) ); // dz per one subpixel step in y
  467. // Z at top/left corner of rast area
  468. var cz = ( z1 + ( ( minXfixscale ) - x1 ) * dzdx + ( ( minYfixscale ) - y1 ) * dzdy ) | 0;
  469. // Z pixel steps
  470. var fixscale = ( 1 << subpixelBits );
  471. dzdx = ( dzdx * fixscale ) | 0;
  472. dzdy = ( dzdy * fixscale ) | 0;
  473. var dtvdx, dtvdy, cbtu, cbtv;
  474. if ( bHasUV ) {
  475. // UV interpolation setup
  476. var dtu12 = tu1 - tu2, dtu31 = tu3 - tu1;
  477. var dtudx = ( invDet * ( dtu12 * dy31 - dtu31 * dy12 ) ); // dtu per one subpixel step in x
  478. var dtudy = ( invDet * ( dtu12 * dx31 - dx12 * dtu31 ) ); // dtu per one subpixel step in y
  479. var dtv12 = tv1 - tv2, dtv31 = tv3 - tv1;
  480. dtvdx = ( invDet * ( dtv12 * dy31 - dtv31 * dy12 ) ); // dtv per one subpixel step in x
  481. dtvdy = ( invDet * ( dtv12 * dx31 - dx12 * dtv31 ) ); // dtv per one subpixel step in y
  482. // UV at top/left corner of rast area
  483. cbtu = ( tu1 + ( minXfixscale - x1 ) * dtudx + ( minYfixscale - y1 ) * dtudy );
  484. cbtv = ( tv1 + ( minXfixscale - x1 ) * dtvdx + ( minYfixscale - y1 ) * dtvdy );
  485. // UV pixel steps
  486. dtudx = dtudx * fixscale;
  487. dtudy = dtudy * fixscale;
  488. dtvdx = dtvdx * fixscale;
  489. dtvdy = dtvdy * fixscale;
  490. }
  491. var dnxdx, dnzdy, cbnz;
  492. if ( bHasNormal ) {
  493. // Normal interpolation setup
  494. var dnz12 = nz1 - nz2, dnz31 = nz3 - nz1;
  495. var dnzdx = ( invDet * ( dnz12 * dy31 - dnz31 * dy12 ) ); // dnz per one subpixel step in x
  496. var dnzdy = ( invDet * ( dnz12 * dx31 - dx12 * dnz31 ) ); // dnz per one subpixel step in y
  497. // Normal at top/left corner of rast area
  498. cbnz = ( nz1 + ( minXfixscale - x1 ) * dnzdx + ( minYfixscale - y1 ) * dnzdy );
  499. // Normal pixel steps
  500. dnzdx = ( dnzdx * fixscale );
  501. dnzdy = ( dnzdy * fixscale );
  502. }
  503. // Set up min/max corners
  504. var qm1 = q - 1; // for convenience
  505. var nmin1 = 0, nmax1 = 0;
  506. var nmin2 = 0, nmax2 = 0;
  507. var nmin3 = 0, nmax3 = 0;
  508. var nminz = 0, nmaxz = 0;
  509. if ( dx12 >= 0 ) nmax1 -= qm1 * dx12; else nmin1 -= qm1 * dx12;
  510. if ( dy12 >= 0 ) nmax1 -= qm1 * dy12; else nmin1 -= qm1 * dy12;
  511. if ( dx23 >= 0 ) nmax2 -= qm1 * dx23; else nmin2 -= qm1 * dx23;
  512. if ( dy23 >= 0 ) nmax2 -= qm1 * dy23; else nmin2 -= qm1 * dy23;
  513. if ( dx31 >= 0 ) nmax3 -= qm1 * dx31; else nmin3 -= qm1 * dx31;
  514. if ( dy31 >= 0 ) nmax3 -= qm1 * dy31; else nmin3 -= qm1 * dy31;
  515. if ( dzdx >= 0 ) nmaxz += qm1 * dzdx; else nminz += qm1 * dzdx;
  516. if ( dzdy >= 0 ) nmaxz += qm1 * dzdy; else nminz += qm1 * dzdy;
  517. // Loop through blocks
  518. var linestep = canvasWidth - q;
  519. var scale = 1.0 / ( c1 + c2 + c3 );
  520. var cb1 = c1;
  521. var cb2 = c2;
  522. var cb3 = c3;
  523. var cbz = cz;
  524. var qstep = - q;
  525. var e1x = qstep * dy12;
  526. var e2x = qstep * dy23;
  527. var e3x = qstep * dy31;
  528. var ezx = qstep * dzdx;
  529. var etux, etvx;
  530. if ( bHasUV ) {
  531. etux = qstep * dtudx;
  532. etvx = qstep * dtvdx;
  533. }
  534. var enzx;
  535. if ( bHasNormal ) {
  536. enzx = qstep * dnzdx;
  537. }
  538. var x0 = minx;
  539. for ( var y0 = miny; y0 < maxy; y0 += q ) {
  540. // New block line - keep hunting for tri outer edge in old block line dir
  541. while ( x0 >= minx && x0 < maxx && cb1 >= nmax1 && cb2 >= nmax2 && cb3 >= nmax3 ) {
  542. x0 += qstep;
  543. cb1 += e1x;
  544. cb2 += e2x;
  545. cb3 += e3x;
  546. cbz += ezx;
  547. if ( bHasUV ) {
  548. cbtu += etux;
  549. cbtv += etvx;
  550. }
  551. if ( bHasNormal ) {
  552. cbnz += enzx;
  553. }
  554. }
  555. // Okay, we're now in a block we know is outside. Reverse direction and go into main loop.
  556. qstep = - qstep;
  557. e1x = - e1x;
  558. e2x = - e2x;
  559. e3x = - e3x;
  560. ezx = - ezx;
  561. if ( bHasUV ) {
  562. etux = - etux;
  563. etvx = - etvx;
  564. }
  565. if ( bHasNormal ) {
  566. enzx = - enzx;
  567. }
  568. while ( 1 ) {
  569. // Step everything
  570. x0 += qstep;
  571. cb1 += e1x;
  572. cb2 += e2x;
  573. cb3 += e3x;
  574. cbz += ezx;
  575. if ( bHasUV ) {
  576. cbtu += etux;
  577. cbtv += etvx;
  578. }
  579. if ( bHasNormal ) {
  580. cbnz += enzx;
  581. }
  582. // We're done with this block line when at least one edge completely out
  583. // If an edge function is too small and decreasing in the current traversal
  584. // dir, we're done with this line.
  585. if ( x0 < minx || x0 >= maxx ) break;
  586. if ( cb1 < nmax1 ) if ( e1x < 0 ) break; else continue;
  587. if ( cb2 < nmax2 ) if ( e2x < 0 ) break; else continue;
  588. if ( cb3 < nmax3 ) if ( e3x < 0 ) break; else continue;
  589. // We can skip this block if it's already fully covered
  590. var blockX = x0 >> blockShift;
  591. var blockY = y0 >> blockShift;
  592. var blockId = blockX + blockY * canvasWBlocks;
  593. var minz = cbz + nminz;
  594. // farthest point in block closer than closest point in our tri?
  595. if ( blockMaxZ[ blockId ] < minz ) continue;
  596. // Need to do a deferred clear?
  597. var bflags = blockFlags[ blockId ];
  598. if ( bflags & BLOCK_NEEDCLEAR ) clearBlock( blockX, blockY );
  599. blockFlags[ blockId ] = bflags & ~ ( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
  600. // Offset at top-left corner
  601. var offset = x0 + y0 * canvasWidth;
  602. // Accept whole block when fully covered
  603. if ( cb1 >= nmin1 && cb2 >= nmin2 && cb3 >= nmin3 ) {
  604. var maxz = cbz + nmaxz;
  605. blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
  606. var cy1 = cb1;
  607. var cy2 = cb2;
  608. var cyz = cbz;
  609. var cytu, cytv;
  610. if ( bHasUV ) {
  611. cytu = cbtu;
  612. cytv = cbtv;
  613. }
  614. var cynz;
  615. if ( bHasNormal ) {
  616. cynz = cbnz;
  617. }
  618. for ( var iy = 0; iy < q; iy ++ ) {
  619. var cx1 = cy1;
  620. var cx2 = cy2;
  621. var cxz = cyz;
  622. var cxtu;
  623. var cxtv;
  624. if ( bHasUV ) {
  625. cxtu = cytu;
  626. cxtv = cytv;
  627. }
  628. var cxnz;
  629. if ( bHasNormal ) {
  630. cxnz = cynz;
  631. }
  632. for ( var ix = 0; ix < q; ix ++ ) {
  633. var z = cxz;
  634. if ( z < zbuffer[ offset ] ) {
  635. shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
  636. }
  637. cx1 += dy12;
  638. cx2 += dy23;
  639. cxz += dzdx;
  640. if ( bHasUV ) {
  641. cxtu += dtudx;
  642. cxtv += dtvdx;
  643. }
  644. if ( bHasNormal ) {
  645. cxnz += dnzdx;
  646. }
  647. offset ++;
  648. }
  649. cy1 += dx12;
  650. cy2 += dx23;
  651. cyz += dzdy;
  652. if ( bHasUV ) {
  653. cytu += dtudy;
  654. cytv += dtvdy;
  655. }
  656. if ( bHasNormal ) {
  657. cynz += dnzdy;
  658. }
  659. offset += linestep;
  660. }
  661. } else {
  662. // Partially covered block
  663. var cy1 = cb1;
  664. var cy2 = cb2;
  665. var cy3 = cb3;
  666. var cyz = cbz;
  667. var cytu, cytv;
  668. if ( bHasUV ) {
  669. cytu = cbtu;
  670. cytv = cbtv;
  671. }
  672. var cynz;
  673. if ( bHasNormal ) {
  674. cynz = cbnz;
  675. }
  676. for ( var iy = 0; iy < q; iy ++ ) {
  677. var cx1 = cy1;
  678. var cx2 = cy2;
  679. var cx3 = cy3;
  680. var cxz = cyz;
  681. var cxtu;
  682. var cxtv;
  683. if ( bHasUV ) {
  684. cxtu = cytu;
  685. cxtv = cytv;
  686. }
  687. var cxnz;
  688. if ( bHasNormal ) {
  689. cxnz = cynz;
  690. }
  691. for ( var ix = 0; ix < q; ix ++ ) {
  692. if ( ( cx1 | cx2 | cx3 ) >= 0 ) {
  693. var z = cxz;
  694. if ( z < zbuffer[ offset ] ) {
  695. shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
  696. }
  697. }
  698. cx1 += dy12;
  699. cx2 += dy23;
  700. cx3 += dy31;
  701. cxz += dzdx;
  702. if ( bHasUV ) {
  703. cxtu += dtudx;
  704. cxtv += dtvdx;
  705. }
  706. if ( bHasNormal ) {
  707. cxnz += dnzdx;
  708. }
  709. offset ++;
  710. }
  711. cy1 += dx12;
  712. cy2 += dx23;
  713. cy3 += dx31;
  714. cyz += dzdy;
  715. if ( bHasUV ) {
  716. cytu += dtudy;
  717. cytv += dtvdy;
  718. }
  719. if ( bHasNormal ) {
  720. cynz += dnzdy;
  721. }
  722. offset += linestep;
  723. }
  724. }
  725. }
  726. // Advance to next row of blocks
  727. cb1 += q * dx12;
  728. cb2 += q * dx23;
  729. cb3 += q * dx31;
  730. cbz += q * dzdy;
  731. if ( bHasUV ) {
  732. cbtu += q * dtudy;
  733. cbtv += q * dtvdy;
  734. }
  735. if ( bHasNormal ) {
  736. cbnz += q * dnzdy;
  737. }
  738. }
  739. }
  740. function clearBlock( blockX, blockY ) {
  741. var zoffset = blockX * blockSize + blockY * blockSize * canvasWidth;
  742. var poffset = zoffset * 4;
  743. var zlinestep = canvasWidth - blockSize;
  744. var plinestep = zlinestep * 4;
  745. for ( var y = 0; y < blockSize; y ++ ) {
  746. for ( var x = 0; x < blockSize; x ++ ) {
  747. zbuffer[ zoffset ++ ] = maxZVal;
  748. data[ poffset ++ ] = clearColor.r * 255 | 0;
  749. data[ poffset ++ ] = clearColor.g * 255 | 0;
  750. data[ poffset ++ ] = clearColor.b * 255 | 0;
  751. data[ poffset ++ ] = 255;
  752. }
  753. zoffset += zlinestep;
  754. poffset += plinestep;
  755. }
  756. }
  757. function finishClear( ) {
  758. var block = 0;
  759. for ( var y = 0; y < canvasHBlocks; y ++ ) {
  760. for ( var x = 0; x < canvasWBlocks; x ++ ) {
  761. if ( blockFlags[ block ] & BLOCK_NEEDCLEAR ) {
  762. clearBlock( x, y );
  763. blockFlags[ block ] = BLOCK_ISCLEAR;
  764. }
  765. block ++;
  766. }
  767. }
  768. }
  769. };
  770. THREE.SoftwareRenderer.Texture = function() {
  771. var canvas;
  772. this.fromImage = function( image ) {
  773. if ( ! image || image.width <= 0 || image.height <= 0 )
  774. return;
  775. if ( canvas === undefined ) {
  776. canvas = document.createElement( 'canvas' );
  777. }
  778. var size = image.width > image.height ? image.width : image.height;
  779. size = THREE.Math.nextPowerOfTwo( size );
  780. if ( canvas.width != size || canvas.height != size ) {
  781. canvas.width = size;
  782. canvas.height = size;
  783. }
  784. var ctx = canvas.getContext( '2d' );
  785. ctx.clearRect( 0, 0, size, size );
  786. ctx.drawImage( image, 0, 0, size, size );
  787. var imgData = ctx.getImageData( 0, 0, size, size );
  788. this.data = imgData.data;
  789. this.width = size;
  790. this.height = size;
  791. this.srcUrl = image.src;
  792. };
  793. };