CanvasRenderer.js 26 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. THREE.SpriteCanvasMaterial = function ( parameters ) {
  5. THREE.Material.call( this );
  6. this.type = 'SpriteCanvasMaterial';
  7. this.color = new THREE.Color( 0xffffff );
  8. this.program = function () {};
  9. this.setValues( parameters );
  10. };
  11. THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
  12. THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
  13. THREE.SpriteCanvasMaterial.prototype.isSpriteCanvasMaterial = true;
  14. THREE.SpriteCanvasMaterial.prototype.clone = function () {
  15. var material = new THREE.SpriteCanvasMaterial();
  16. material.copy( this );
  17. material.color.copy( this.color );
  18. material.program = this.program;
  19. return material;
  20. };
  21. //
  22. THREE.CanvasRenderer = function ( parameters ) {
  23. console.log( 'THREE.CanvasRenderer', THREE.REVISION );
  24. parameters = parameters || {};
  25. var _this = this,
  26. _renderData, _elements, _lights,
  27. _projector = new THREE.Projector(),
  28. _canvas = parameters.canvas !== undefined
  29. ? parameters.canvas
  30. : document.createElement( 'canvas' ),
  31. _canvasWidth = _canvas.width,
  32. _canvasHeight = _canvas.height,
  33. _canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
  34. _canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
  35. _viewportX = 0,
  36. _viewportY = 0,
  37. _viewportWidth = _canvasWidth,
  38. _viewportHeight = _canvasHeight,
  39. _pixelRatio = 1,
  40. _context = _canvas.getContext( '2d', {
  41. alpha: parameters.alpha === true
  42. } ),
  43. _clearColor = new THREE.Color( 0x000000 ),
  44. _clearAlpha = parameters.alpha === true ? 0 : 1,
  45. _contextGlobalAlpha = 1,
  46. _contextGlobalCompositeOperation = 0,
  47. _contextStrokeStyle = null,
  48. _contextFillStyle = null,
  49. _contextLineWidth = null,
  50. _contextLineCap = null,
  51. _contextLineJoin = null,
  52. _contextLineDash = [],
  53. _v1, _v2, _v3,
  54. _v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
  55. _color = new THREE.Color(),
  56. _diffuseColor = new THREE.Color(),
  57. _emissiveColor = new THREE.Color(),
  58. _lightColor = new THREE.Color(),
  59. _patterns = {},
  60. _uvs,
  61. _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
  62. _clipBox = new THREE.Box2(),
  63. _clearBox = new THREE.Box2(),
  64. _elemBox = new THREE.Box2(),
  65. _ambientLight = new THREE.Color(),
  66. _directionalLights = new THREE.Color(),
  67. _pointLights = new THREE.Color(),
  68. _vector3 = new THREE.Vector3(), // Needed for PointLight
  69. _centroid = new THREE.Vector3(),
  70. _normal = new THREE.Vector3(),
  71. _normalViewMatrix = new THREE.Matrix3();
  72. /* TODO
  73. _canvas.mozImageSmoothingEnabled = false;
  74. _canvas.webkitImageSmoothingEnabled = false;
  75. _canvas.msImageSmoothingEnabled = false;
  76. _canvas.imageSmoothingEnabled = false;
  77. */
  78. // dash+gap fallbacks for Firefox and everything else
  79. if ( _context.setLineDash === undefined ) {
  80. _context.setLineDash = function () {};
  81. }
  82. this.domElement = _canvas;
  83. this.autoClear = true;
  84. this.sortObjects = true;
  85. this.sortElements = true;
  86. this.info = {
  87. render: {
  88. vertices: 0,
  89. faces: 0
  90. }
  91. };
  92. // WebGLRenderer compatibility
  93. this.supportsVertexTextures = function () {};
  94. this.setFaceCulling = function () {};
  95. // API
  96. this.getContext = function () {
  97. return _context;
  98. };
  99. this.getContextAttributes = function () {
  100. return _context.getContextAttributes();
  101. };
  102. this.getPixelRatio = function () {
  103. return _pixelRatio;
  104. };
  105. this.setPixelRatio = function ( value ) {
  106. if ( value !== undefined ) _pixelRatio = value;
  107. };
  108. this.setSize = function ( width, height, updateStyle ) {
  109. _canvasWidth = width * _pixelRatio;
  110. _canvasHeight = height * _pixelRatio;
  111. _canvas.width = _canvasWidth;
  112. _canvas.height = _canvasHeight;
  113. _canvasWidthHalf = Math.floor( _canvasWidth / 2 );
  114. _canvasHeightHalf = Math.floor( _canvasHeight / 2 );
  115. if ( updateStyle !== false ) {
  116. _canvas.style.width = width + 'px';
  117. _canvas.style.height = height + 'px';
  118. }
  119. _clipBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
  120. _clipBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
  121. _clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
  122. _clearBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
  123. _contextGlobalAlpha = 1;
  124. _contextGlobalCompositeOperation = 0;
  125. _contextStrokeStyle = null;
  126. _contextFillStyle = null;
  127. _contextLineWidth = null;
  128. _contextLineCap = null;
  129. _contextLineJoin = null;
  130. this.setViewport( 0, 0, width, height );
  131. };
  132. this.setViewport = function ( x, y, width, height ) {
  133. _viewportX = x * _pixelRatio;
  134. _viewportY = y * _pixelRatio;
  135. _viewportWidth = width * _pixelRatio;
  136. _viewportHeight = height * _pixelRatio;
  137. };
  138. this.setScissor = function () {};
  139. this.setScissorTest = function () {};
  140. this.setClearColor = function ( color, alpha ) {
  141. _clearColor.set( color );
  142. _clearAlpha = alpha !== undefined ? alpha : 1;
  143. _clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
  144. _clearBox.max.set( _canvasWidthHalf, _canvasHeightHalf );
  145. };
  146. this.setClearColorHex = function ( hex, alpha ) {
  147. console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );
  148. this.setClearColor( hex, alpha );
  149. };
  150. this.getClearColor = function () {
  151. return _clearColor;
  152. };
  153. this.getClearAlpha = function () {
  154. return _clearAlpha;
  155. };
  156. this.getMaxAnisotropy = function () {
  157. return 0;
  158. };
  159. this.clear = function () {
  160. if ( _clearBox.isEmpty() === false ) {
  161. _clearBox.intersect( _clipBox );
  162. _clearBox.expandByScalar( 2 );
  163. _clearBox.min.x = _clearBox.min.x + _canvasWidthHalf;
  164. _clearBox.min.y = - _clearBox.min.y + _canvasHeightHalf; // higher y value !
  165. _clearBox.max.x = _clearBox.max.x + _canvasWidthHalf;
  166. _clearBox.max.y = - _clearBox.max.y + _canvasHeightHalf; // lower y value !
  167. if ( _clearAlpha < 1 ) {
  168. _context.clearRect(
  169. _clearBox.min.x | 0,
  170. _clearBox.max.y | 0,
  171. ( _clearBox.max.x - _clearBox.min.x ) | 0,
  172. ( _clearBox.min.y - _clearBox.max.y ) | 0
  173. );
  174. }
  175. if ( _clearAlpha > 0 ) {
  176. setBlending( THREE.NormalBlending );
  177. setOpacity( 1 );
  178. setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );
  179. _context.fillRect(
  180. _clearBox.min.x | 0,
  181. _clearBox.max.y | 0,
  182. ( _clearBox.max.x - _clearBox.min.x ) | 0,
  183. ( _clearBox.min.y - _clearBox.max.y ) | 0
  184. );
  185. }
  186. _clearBox.makeEmpty();
  187. }
  188. };
  189. // compatibility
  190. this.clearColor = function () {};
  191. this.clearDepth = function () {};
  192. this.clearStencil = function () {};
  193. this.render = function ( scene, camera ) {
  194. if ( camera.isCamera === undefined ) {
  195. console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
  196. return;
  197. }
  198. var background = scene.background;
  199. if ( background && background.isColor ) {
  200. setFillStyle( 'rgb(' + Math.floor( background.r * 255 ) + ',' + Math.floor( background.g * 255 ) + ',' + Math.floor( background.b * 255 ) + ')' );
  201. _context.fillRect( 0, 0, _canvasWidth, _canvasHeight );
  202. } else if ( this.autoClear === true ) {
  203. this.clear();
  204. }
  205. _this.info.render.vertices = 0;
  206. _this.info.render.faces = 0;
  207. _context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );
  208. _context.translate( _canvasWidthHalf, _canvasHeightHalf );
  209. _renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
  210. _elements = _renderData.elements;
  211. _lights = _renderData.lights;
  212. _normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
  213. /* DEBUG
  214. setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );
  215. _context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
  216. */
  217. calculateLights();
  218. for ( var e = 0, el = _elements.length; e < el; e ++ ) {
  219. var element = _elements[ e ];
  220. var material = element.material;
  221. if ( material === undefined || material.opacity === 0 ) continue;
  222. _elemBox.makeEmpty();
  223. if ( element instanceof THREE.RenderableSprite ) {
  224. _v1 = element;
  225. _v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
  226. renderSprite( _v1, element, material );
  227. } else if ( element instanceof THREE.RenderableLine ) {
  228. _v1 = element.v1; _v2 = element.v2;
  229. _v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
  230. _v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
  231. _elemBox.setFromPoints( [
  232. _v1.positionScreen,
  233. _v2.positionScreen
  234. ] );
  235. if ( _clipBox.intersectsBox( _elemBox ) === true ) {
  236. renderLine( _v1, _v2, element, material );
  237. }
  238. } else if ( element instanceof THREE.RenderableFace ) {
  239. _v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
  240. if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
  241. if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
  242. if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
  243. _v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
  244. _v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
  245. _v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
  246. if ( material.overdraw > 0 ) {
  247. expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );
  248. expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );
  249. expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );
  250. }
  251. _elemBox.setFromPoints( [
  252. _v1.positionScreen,
  253. _v2.positionScreen,
  254. _v3.positionScreen
  255. ] );
  256. if ( _clipBox.intersectsBox( _elemBox ) === true ) {
  257. renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );
  258. }
  259. }
  260. /* DEBUG
  261. setLineWidth( 1 );
  262. setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );
  263. _context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );
  264. */
  265. _clearBox.union( _elemBox );
  266. }
  267. /* DEBUG
  268. setLineWidth( 1 );
  269. setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );
  270. _context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );
  271. */
  272. _context.setTransform( 1, 0, 0, 1, 0, 0 );
  273. };
  274. //
  275. function calculateLights() {
  276. _ambientLight.setRGB( 0, 0, 0 );
  277. _directionalLights.setRGB( 0, 0, 0 );
  278. _pointLights.setRGB( 0, 0, 0 );
  279. for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
  280. var light = _lights[ l ];
  281. var lightColor = light.color;
  282. if ( light.isAmbientLight ) {
  283. _ambientLight.add( lightColor );
  284. } else if ( light.isDirectionalLight ) {
  285. // for sprites
  286. _directionalLights.add( lightColor );
  287. } else if ( light.isPointLight ) {
  288. // for sprites
  289. _pointLights.add( lightColor );
  290. }
  291. }
  292. }
  293. function calculateLight( position, normal, color ) {
  294. for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
  295. var light = _lights[ l ];
  296. _lightColor.copy( light.color );
  297. if ( light.isDirectionalLight ) {
  298. var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
  299. var amount = normal.dot( lightPosition );
  300. if ( amount <= 0 ) continue;
  301. amount *= light.intensity;
  302. color.add( _lightColor.multiplyScalar( amount ) );
  303. } else if ( light.isPointLight ) {
  304. var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
  305. var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
  306. if ( amount <= 0 ) continue;
  307. amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
  308. if ( amount == 0 ) continue;
  309. amount *= light.intensity;
  310. color.add( _lightColor.multiplyScalar( amount ) );
  311. }
  312. }
  313. }
  314. function renderSprite( v1, element, material ) {
  315. setOpacity( material.opacity );
  316. setBlending( material.blending );
  317. var scaleX = element.scale.x * _canvasWidthHalf;
  318. var scaleY = element.scale.y * _canvasHeightHalf;
  319. var dist = Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
  320. _elemBox.min.set( v1.x - dist, v1.y - dist );
  321. _elemBox.max.set( v1.x + dist, v1.y + dist );
  322. if ( material.isSpriteMaterial ) {
  323. var texture = material.map;
  324. if ( texture !== null ) {
  325. var pattern = _patterns[ texture.id ];
  326. if ( pattern === undefined || pattern.version !== texture.version ) {
  327. pattern = textureToPattern( texture );
  328. _patterns[ texture.id ] = pattern;
  329. }
  330. if ( pattern.canvas !== undefined ) {
  331. setFillStyle( pattern.canvas );
  332. var bitmap = texture.image;
  333. var ox = bitmap.width * texture.offset.x;
  334. var oy = bitmap.height * texture.offset.y;
  335. var sx = bitmap.width * texture.repeat.x;
  336. var sy = bitmap.height * texture.repeat.y;
  337. var cx = scaleX / sx;
  338. var cy = scaleY / sy;
  339. _context.save();
  340. _context.translate( v1.x, v1.y );
  341. if ( material.rotation !== 0 ) _context.rotate( material.rotation );
  342. _context.translate( - scaleX / 2, - scaleY / 2 );
  343. _context.scale( cx, cy );
  344. _context.translate( - ox, - oy );
  345. _context.fillRect( ox, oy, sx, sy );
  346. _context.restore();
  347. }
  348. } else {
  349. // no texture
  350. setFillStyle( material.color.getStyle() );
  351. _context.save();
  352. _context.translate( v1.x, v1.y );
  353. if ( material.rotation !== 0 ) _context.rotate( material.rotation );
  354. _context.scale( scaleX, - scaleY );
  355. _context.fillRect( - 0.5, - 0.5, 1, 1 );
  356. _context.restore();
  357. }
  358. } else if ( material.isSpriteCanvasMaterial ) {
  359. setStrokeStyle( material.color.getStyle() );
  360. setFillStyle( material.color.getStyle() );
  361. _context.save();
  362. _context.translate( v1.x, v1.y );
  363. if ( material.rotation !== 0 ) _context.rotate( material.rotation );
  364. _context.scale( scaleX, scaleY );
  365. material.program( _context );
  366. _context.restore();
  367. } else if ( material.isPointsMaterial ) {
  368. setFillStyle( material.color.getStyle() );
  369. _context.save();
  370. _context.translate( v1.x, v1.y );
  371. if ( material.rotation !== 0 ) _context.rotate( material.rotation );
  372. _context.scale( scaleX * material.size, - scaleY * material.size );
  373. _context.fillRect( - 0.5, - 0.5, 1, 1 );
  374. _context.restore();
  375. }
  376. /* DEBUG
  377. setStrokeStyle( 'rgb(255,255,0)' );
  378. _context.beginPath();
  379. _context.moveTo( v1.x - 10, v1.y );
  380. _context.lineTo( v1.x + 10, v1.y );
  381. _context.moveTo( v1.x, v1.y - 10 );
  382. _context.lineTo( v1.x, v1.y + 10 );
  383. _context.stroke();
  384. */
  385. }
  386. function renderLine( v1, v2, element, material ) {
  387. setOpacity( material.opacity );
  388. setBlending( material.blending );
  389. _context.beginPath();
  390. _context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
  391. _context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
  392. if ( material.isLineBasicMaterial ) {
  393. setLineWidth( material.linewidth );
  394. setLineCap( material.linecap );
  395. setLineJoin( material.linejoin );
  396. if ( material.vertexColors !== THREE.VertexColors ) {
  397. setStrokeStyle( material.color.getStyle() );
  398. } else {
  399. var colorStyle1 = element.vertexColors[ 0 ].getStyle();
  400. var colorStyle2 = element.vertexColors[ 1 ].getStyle();
  401. if ( colorStyle1 === colorStyle2 ) {
  402. setStrokeStyle( colorStyle1 );
  403. } else {
  404. try {
  405. var grad = _context.createLinearGradient(
  406. v1.positionScreen.x,
  407. v1.positionScreen.y,
  408. v2.positionScreen.x,
  409. v2.positionScreen.y
  410. );
  411. grad.addColorStop( 0, colorStyle1 );
  412. grad.addColorStop( 1, colorStyle2 );
  413. } catch ( exception ) {
  414. grad = colorStyle1;
  415. }
  416. setStrokeStyle( grad );
  417. }
  418. }
  419. _context.stroke();
  420. _elemBox.expandByScalar( material.linewidth * 2 );
  421. } else if ( material.isLineDashedMaterial ) {
  422. setLineWidth( material.linewidth );
  423. setLineCap( material.linecap );
  424. setLineJoin( material.linejoin );
  425. setStrokeStyle( material.color.getStyle() );
  426. setLineDash( [ material.dashSize, material.gapSize ] );
  427. _context.stroke();
  428. _elemBox.expandByScalar( material.linewidth * 2 );
  429. setLineDash( [] );
  430. }
  431. }
  432. function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {
  433. _this.info.render.vertices += 3;
  434. _this.info.render.faces ++;
  435. setOpacity( material.opacity );
  436. setBlending( material.blending );
  437. _v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
  438. _v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
  439. _v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
  440. drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
  441. if ( ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) && material.map === null ) {
  442. _diffuseColor.copy( material.color );
  443. _emissiveColor.copy( material.emissive );
  444. if ( material.vertexColors === THREE.FaceColors ) {
  445. _diffuseColor.multiply( element.color );
  446. }
  447. _color.copy( _ambientLight );
  448. _centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
  449. calculateLight( _centroid, element.normalModel, _color );
  450. _color.multiply( _diffuseColor ).add( _emissiveColor );
  451. material.wireframe === true
  452. ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
  453. : fillPath( _color );
  454. } else if ( material.isMeshBasicMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
  455. if ( material.map !== null ) {
  456. var mapping = material.map.mapping;
  457. if ( mapping === THREE.UVMapping ) {
  458. _uvs = element.uvs;
  459. patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );
  460. }
  461. } else if ( material.envMap !== null ) {
  462. if ( material.envMap.mapping === THREE.SphericalReflectionMapping ) {
  463. _normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
  464. _uv1x = 0.5 * _normal.x + 0.5;
  465. _uv1y = 0.5 * _normal.y + 0.5;
  466. _normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
  467. _uv2x = 0.5 * _normal.x + 0.5;
  468. _uv2y = 0.5 * _normal.y + 0.5;
  469. _normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
  470. _uv3x = 0.5 * _normal.x + 0.5;
  471. _uv3y = 0.5 * _normal.y + 0.5;
  472. patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
  473. }
  474. } else {
  475. _color.copy( material.color );
  476. if ( material.vertexColors === THREE.FaceColors ) {
  477. _color.multiply( element.color );
  478. }
  479. material.wireframe === true
  480. ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
  481. : fillPath( _color );
  482. }
  483. } else if ( material.isMeshNormalMaterial ) {
  484. _normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
  485. _color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
  486. material.wireframe === true
  487. ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
  488. : fillPath( _color );
  489. } else {
  490. _color.setRGB( 1, 1, 1 );
  491. material.wireframe === true
  492. ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
  493. : fillPath( _color );
  494. }
  495. }
  496. //
  497. function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
  498. _context.beginPath();
  499. _context.moveTo( x0, y0 );
  500. _context.lineTo( x1, y1 );
  501. _context.lineTo( x2, y2 );
  502. _context.closePath();
  503. }
  504. function strokePath( color, linewidth, linecap, linejoin ) {
  505. setLineWidth( linewidth );
  506. setLineCap( linecap );
  507. setLineJoin( linejoin );
  508. setStrokeStyle( color.getStyle() );
  509. _context.stroke();
  510. _elemBox.expandByScalar( linewidth * 2 );
  511. }
  512. function fillPath( color ) {
  513. setFillStyle( color.getStyle() );
  514. _context.fill();
  515. }
  516. function textureToPattern( texture ) {
  517. if ( texture.version === 0 ||
  518. texture instanceof THREE.CompressedTexture ||
  519. texture instanceof THREE.DataTexture ) {
  520. return {
  521. canvas: undefined,
  522. version: texture.version
  523. };
  524. }
  525. var image = texture.image;
  526. if ( image.complete === false ) {
  527. return {
  528. canvas: undefined,
  529. version: 0
  530. };
  531. }
  532. var repeatX = texture.wrapS === THREE.RepeatWrapping || texture.wrapS === THREE.MirroredRepeatWrapping;
  533. var repeatY = texture.wrapT === THREE.RepeatWrapping || texture.wrapT === THREE.MirroredRepeatWrapping;
  534. var mirrorX = texture.wrapS === THREE.MirroredRepeatWrapping;
  535. var mirrorY = texture.wrapT === THREE.MirroredRepeatWrapping;
  536. //
  537. var canvas = document.createElement( 'canvas' );
  538. canvas.width = image.width * ( mirrorX ? 2 : 1 );
  539. canvas.height = image.height * ( mirrorY ? 2 : 1 );
  540. var context = canvas.getContext( '2d' );
  541. context.setTransform( 1, 0, 0, - 1, 0, image.height );
  542. context.drawImage( image, 0, 0 );
  543. if ( mirrorX === true ) {
  544. context.setTransform( - 1, 0, 0, - 1, image.width, image.height );
  545. context.drawImage( image, - image.width, 0 );
  546. }
  547. if ( mirrorY === true ) {
  548. context.setTransform( 1, 0, 0, 1, 0, 0 );
  549. context.drawImage( image, 0, image.height );
  550. }
  551. if ( mirrorX === true && mirrorY === true ) {
  552. context.setTransform( - 1, 0, 0, 1, image.width, 0 );
  553. context.drawImage( image, - image.width, image.height );
  554. }
  555. var repeat = 'no-repeat';
  556. if ( repeatX === true && repeatY === true ) {
  557. repeat = 'repeat';
  558. } else if ( repeatX === true ) {
  559. repeat = 'repeat-x';
  560. } else if ( repeatY === true ) {
  561. repeat = 'repeat-y';
  562. }
  563. var pattern = _context.createPattern( canvas, repeat );
  564. if ( texture.onUpdate ) texture.onUpdate( texture );
  565. return {
  566. canvas: pattern,
  567. version: texture.version
  568. };
  569. }
  570. function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {
  571. var pattern = _patterns[ texture.id ];
  572. if ( pattern === undefined || pattern.version !== texture.version ) {
  573. pattern = textureToPattern( texture );
  574. _patterns[ texture.id ] = pattern;
  575. }
  576. if ( pattern.canvas !== undefined ) {
  577. setFillStyle( pattern.canvas );
  578. } else {
  579. setFillStyle( 'rgba( 0, 0, 0, 1)' );
  580. _context.fill();
  581. return;
  582. }
  583. // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
  584. var a, b, c, d, e, f, det, idet,
  585. offsetX = texture.offset.x / texture.repeat.x,
  586. offsetY = texture.offset.y / texture.repeat.y,
  587. width = texture.image.width * texture.repeat.x,
  588. height = texture.image.height * texture.repeat.y;
  589. u0 = ( u0 + offsetX ) * width;
  590. v0 = ( v0 + offsetY ) * height;
  591. u1 = ( u1 + offsetX ) * width;
  592. v1 = ( v1 + offsetY ) * height;
  593. u2 = ( u2 + offsetX ) * width;
  594. v2 = ( v2 + offsetY ) * height;
  595. x1 -= x0; y1 -= y0;
  596. x2 -= x0; y2 -= y0;
  597. u1 -= u0; v1 -= v0;
  598. u2 -= u0; v2 -= v0;
  599. det = u1 * v2 - u2 * v1;
  600. if ( det === 0 ) return;
  601. idet = 1 / det;
  602. a = ( v2 * x1 - v1 * x2 ) * idet;
  603. b = ( v2 * y1 - v1 * y2 ) * idet;
  604. c = ( u1 * x2 - u2 * x1 ) * idet;
  605. d = ( u1 * y2 - u2 * y1 ) * idet;
  606. e = x0 - a * u0 - c * v0;
  607. f = y0 - b * u0 - d * v0;
  608. _context.save();
  609. _context.transform( a, b, c, d, e, f );
  610. _context.fill();
  611. _context.restore();
  612. }
  613. /*
  614. function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
  615. // http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
  616. var a, b, c, d, e, f, det, idet,
  617. width = image.width - 1,
  618. height = image.height - 1;
  619. u0 *= width; v0 *= height;
  620. u1 *= width; v1 *= height;
  621. u2 *= width; v2 *= height;
  622. x1 -= x0; y1 -= y0;
  623. x2 -= x0; y2 -= y0;
  624. u1 -= u0; v1 -= v0;
  625. u2 -= u0; v2 -= v0;
  626. det = u1 * v2 - u2 * v1;
  627. idet = 1 / det;
  628. a = ( v2 * x1 - v1 * x2 ) * idet;
  629. b = ( v2 * y1 - v1 * y2 ) * idet;
  630. c = ( u1 * x2 - u2 * x1 ) * idet;
  631. d = ( u1 * y2 - u2 * y1 ) * idet;
  632. e = x0 - a * u0 - c * v0;
  633. f = y0 - b * u0 - d * v0;
  634. _context.save();
  635. _context.transform( a, b, c, d, e, f );
  636. _context.clip();
  637. _context.drawImage( image, 0, 0 );
  638. _context.restore();
  639. }
  640. */
  641. // Hide anti-alias gaps
  642. function expand( v1, v2, pixels ) {
  643. var x = v2.x - v1.x, y = v2.y - v1.y,
  644. det = x * x + y * y, idet;
  645. if ( det === 0 ) return;
  646. idet = pixels / Math.sqrt( det );
  647. x *= idet; y *= idet;
  648. v2.x += x; v2.y += y;
  649. v1.x -= x; v1.y -= y;
  650. }
  651. // Context cached methods.
  652. function setOpacity( value ) {
  653. if ( _contextGlobalAlpha !== value ) {
  654. _context.globalAlpha = value;
  655. _contextGlobalAlpha = value;
  656. }
  657. }
  658. function setBlending( value ) {
  659. if ( _contextGlobalCompositeOperation !== value ) {
  660. if ( value === THREE.NormalBlending ) {
  661. _context.globalCompositeOperation = 'source-over';
  662. } else if ( value === THREE.AdditiveBlending ) {
  663. _context.globalCompositeOperation = 'lighter';
  664. } else if ( value === THREE.SubtractiveBlending ) {
  665. _context.globalCompositeOperation = 'darker';
  666. } else if ( value === THREE.MultiplyBlending ) {
  667. _context.globalCompositeOperation = 'multiply';
  668. }
  669. _contextGlobalCompositeOperation = value;
  670. }
  671. }
  672. function setLineWidth( value ) {
  673. if ( _contextLineWidth !== value ) {
  674. _context.lineWidth = value;
  675. _contextLineWidth = value;
  676. }
  677. }
  678. function setLineCap( value ) {
  679. // "butt", "round", "square"
  680. if ( _contextLineCap !== value ) {
  681. _context.lineCap = value;
  682. _contextLineCap = value;
  683. }
  684. }
  685. function setLineJoin( value ) {
  686. // "round", "bevel", "miter"
  687. if ( _contextLineJoin !== value ) {
  688. _context.lineJoin = value;
  689. _contextLineJoin = value;
  690. }
  691. }
  692. function setStrokeStyle( value ) {
  693. if ( _contextStrokeStyle !== value ) {
  694. _context.strokeStyle = value;
  695. _contextStrokeStyle = value;
  696. }
  697. }
  698. function setFillStyle( value ) {
  699. if ( _contextFillStyle !== value ) {
  700. _context.fillStyle = value;
  701. _contextFillStyle = value;
  702. }
  703. }
  704. function setLineDash( value ) {
  705. if ( _contextLineDash.length !== value.length ) {
  706. _context.setLineDash( value );
  707. _contextLineDash = value;
  708. }
  709. }
  710. };