2
0

SoftwareRenderer.js 31 KB

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