SoftwareRenderer.js 26 KB

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