2
0

SoftwareRenderer.js 36 KB

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