Fire.js 26 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072
  1. /**
  2. * @author Mike Piecuch / https://github.com/mikepiecuch
  3. *
  4. * Based on research paper "Real-Time Fluid Dynamics for Games" by Jos Stam
  5. * http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/GDC03.pdf
  6. *
  7. */
  8. THREE.Fire = function ( geometry, options ) {
  9. THREE.Mesh.call( this, geometry );
  10. this.type = 'Fire';
  11. this.clock = new THREE.Clock();
  12. options = options || {};
  13. var textureWidth = options.textureWidth || 512;
  14. var textureHeight = options.textureHeight || 512;
  15. var oneOverWidth = 1.0 / textureWidth;
  16. var oneOverHeight = 1.0 / textureHeight;
  17. var debug = ( options.debug === undefined ) ? false : options.debug;
  18. this.color1 = options.color1 || new THREE.Color( 0xffffff );
  19. this.color2 = options.color2 || new THREE.Color( 0xffa000 );
  20. this.color3 = options.color3 || new THREE.Color( 0x000000 );
  21. this.colorBias = ( options.colorBias === undefined ) ? 0.8 : options.colorBias;
  22. this.diffuse = ( options.diffuse === undefined ) ? 1.33 : options.diffuse;
  23. this.viscosity = ( options.viscosity === undefined ) ? 0.25 : options.viscosity;
  24. this.expansion = ( options.expansion === undefined ) ? - 0.25 : options.expansion;
  25. this.swirl = ( options.swirl === undefined ) ? 50.0 : options.swirl;
  26. this.burnRate = ( options.burnRate === undefined ) ? 0.3 : options.burnRate;
  27. this.drag = ( options.drag === undefined ) ? 0.35 : options.drag;
  28. this.airSpeed = ( options.airSpeed === undefined ) ? 6.0 : options.airSpeed;
  29. this.windVector = options.windVector || new THREE.Vector2( 0.0, 0.75 );
  30. this.speed = ( options.speed === undefined ) ? 500.0 : options.speed;
  31. this.massConservation = ( options.massConservation === undefined ) ? false : options.massConservation;
  32. var size = textureWidth * textureHeight;
  33. this.sourceData = new Uint8Array( 4 * size );
  34. this.clearSources = function () {
  35. for ( var y = 0; y < textureHeight; y ++ ) {
  36. for ( var x = 0; x < textureWidth; x ++ ) {
  37. var i = y * textureWidth + x;
  38. var stride = i * 4;
  39. this.sourceData[ stride ] = 0;
  40. this.sourceData[ stride + 1 ] = 0;
  41. this.sourceData[ stride + 2 ] = 0;
  42. this.sourceData[ stride + 3 ] = 0;
  43. }
  44. }
  45. this.sourceMaterial.uniforms.sourceMap.value = this.internalSource;
  46. this.sourceMaterial.needsUpdate = true;
  47. return this.sourceData;
  48. };
  49. this.addSource = function ( u, v, radius, density = null, windX = null, windY = null ) {
  50. var startX = Math.max( Math.floor( ( u - radius ) * textureWidth ), 0 );
  51. var startY = Math.max( Math.floor( ( v - radius ) * textureHeight ), 0 );
  52. var endX = Math.min( Math.floor( ( u + radius ) * textureWidth ), textureWidth );
  53. var endY = Math.min( Math.floor( ( v + radius ) * textureHeight ), textureHeight );
  54. for ( var y = startY; y < endY; y ++ ) {
  55. for ( var x = startX; x < endX; x ++ ) {
  56. var diffX = x * oneOverWidth - u;
  57. var diffY = y * oneOverHeight - v;
  58. if ( diffX * diffX + diffY * diffY < radius * radius ) {
  59. var i = y * textureWidth + x;
  60. var stride = i * 4;
  61. if ( density != null ) {
  62. this.sourceData[ stride ] = Math.min( Math.max( density, 0.0 ), 1.0 ) * 255;
  63. }
  64. if ( windX != null ) {
  65. var wind = Math.min( Math.max( windX, - 1.0 ), 1.0 );
  66. wind = ( wind < 0.0 ) ? Math.floor( wind * 127 ) + 255 : Math.floor( wind * 127 );
  67. this.sourceData[ stride + 1 ] = wind;
  68. }
  69. if ( windY != null ) {
  70. var wind = Math.min( Math.max( windY, - 1.0 ), 1.0 );
  71. wind = ( wind < 0.0 ) ? Math.floor( wind * 127 ) + 255 : Math.floor( wind * 127 );
  72. this.sourceData[ stride + 2 ] = wind;
  73. }
  74. }
  75. }
  76. }
  77. this.internalSource.needsUpdate = true;
  78. return this.sourceData;
  79. };
  80. // When setting source map, red channel is density. Green and blue channels
  81. // encode x and y velocity respectively as signed chars:
  82. // (0 -> 127 = 0.0 -> 1.0, 128 -> 255 = -1.0 -> 0.0 )
  83. this.setSourceMap = function ( texture ) {
  84. this.sourceMaterial.uniforms.sourceMap.value = texture;
  85. };
  86. var parameters = {
  87. minFilter: THREE.NearestFilter,
  88. magFilter: THREE.NearestFilter,
  89. format: THREE.RGBAFormat,
  90. depthBuffer: false,
  91. stencilBuffer: false
  92. };
  93. this.field0 = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
  94. this.field0.background = new THREE.Color( 0x000000 );
  95. this.field1 = new THREE.WebGLRenderTarget( textureWidth,
  96. textureHeight,
  97. parameters );
  98. this.field0.background = new THREE.Color( 0x000000 );
  99. this.fieldProj = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
  100. this.field0.background = new THREE.Color( 0x000000 );
  101. if ( ! THREE.Math.isPowerOfTwo( textureWidth ) ||
  102. ! THREE.Math.isPowerOfTwo( textureHeight ) ) {
  103. this.field0.texture.generateMipmaps = false;
  104. this.field1.texture.generateMipmaps = false;
  105. this.fieldProj.texture.generateMipmaps = false;
  106. }
  107. this.fieldScene = new THREE.Scene();
  108. this.fieldScene.background = new THREE.Color( 0x000000 );
  109. this.orthoCamera = new THREE.OrthographicCamera( textureWidth / - 2, textureWidth / 2, textureHeight / 2, textureHeight / - 2, 1, 2 );
  110. this.orthoCamera.position.z = 1;
  111. this.fieldGeometry = new THREE.PlaneGeometry( textureWidth, textureHeight );
  112. this.internalSource = new THREE.DataTexture( this.sourceData, textureWidth, textureHeight, THREE.RGBAFormat );
  113. // Source Shader
  114. var shader = THREE.Fire.SourceShader;
  115. this.sourceMaterial = new THREE.ShaderMaterial( {
  116. uniforms: shader.uniforms,
  117. vertexShader: shader.vertexShader,
  118. fragmentShader: shader.fragmentShader,
  119. transparent: false
  120. } );
  121. this.clearSources();
  122. this.sourceMesh = new THREE.Mesh( this.fieldGeometry, this.sourceMaterial );
  123. this.fieldScene.add( this.sourceMesh );
  124. // Diffuse Shader
  125. var shader = THREE.Fire.DiffuseShader;
  126. this.diffuseMaterial = new THREE.ShaderMaterial( {
  127. uniforms: shader.uniforms,
  128. vertexShader: shader.vertexShader,
  129. fragmentShader: shader.fragmentShader,
  130. transparent: false
  131. } );
  132. this.diffuseMaterial.uniforms.oneOverWidth.value = oneOverWidth;
  133. this.diffuseMaterial.uniforms.oneOverHeight.value = oneOverHeight;
  134. this.diffuseMesh = new THREE.Mesh( this.fieldGeometry, this.diffuseMaterial );
  135. this.fieldScene.add( this.diffuseMesh );
  136. // Drift Shader
  137. shader = THREE.Fire.DriftShader;
  138. this.driftMaterial = new THREE.ShaderMaterial( {
  139. uniforms: shader.uniforms,
  140. vertexShader: shader.vertexShader,
  141. fragmentShader: shader.fragmentShader,
  142. transparent: false
  143. } );
  144. this.driftMaterial.uniforms.oneOverWidth.value = oneOverWidth;
  145. this.driftMaterial.uniforms.oneOverHeight.value = oneOverHeight;
  146. this.driftMesh = new THREE.Mesh( this.fieldGeometry, this.driftMaterial );
  147. this.fieldScene.add( this.driftMesh );
  148. // Projection Shader 1
  149. shader = THREE.Fire.ProjectionShader1;
  150. this.projMaterial1 = new THREE.ShaderMaterial( {
  151. uniforms: shader.uniforms,
  152. vertexShader: shader.vertexShader,
  153. fragmentShader: shader.fragmentShader,
  154. transparent: false
  155. } );
  156. this.projMaterial1.uniforms.oneOverWidth.value = oneOverWidth;
  157. this.projMaterial1.uniforms.oneOverHeight.value = oneOverHeight;
  158. this.projMesh1 = new THREE.Mesh( this.fieldGeometry, this.projMaterial1 );
  159. this.fieldScene.add( this.projMesh1 );
  160. // Projection Shader 2
  161. shader = THREE.Fire.ProjectionShader2;
  162. this.projMaterial2 = new THREE.ShaderMaterial( {
  163. uniforms: shader.uniforms,
  164. vertexShader: shader.vertexShader,
  165. fragmentShader: shader.fragmentShader,
  166. transparent: false
  167. } );
  168. this.projMaterial2.uniforms.oneOverWidth.value = oneOverWidth;
  169. this.projMaterial2.uniforms.oneOverHeight.value = oneOverHeight;
  170. this.projMesh2 = new THREE.Mesh( this.fieldGeometry, this.projMaterial2 );
  171. this.fieldScene.add( this.projMesh2 );
  172. // Projection Shader 3
  173. shader = THREE.Fire.ProjectionShader3;
  174. this.projMaterial3 = new THREE.ShaderMaterial( {
  175. uniforms: shader.uniforms,
  176. vertexShader: shader.vertexShader,
  177. fragmentShader: shader.fragmentShader,
  178. transparent: false
  179. } );
  180. this.projMaterial3.uniforms.oneOverWidth.value = oneOverWidth;
  181. this.projMaterial3.uniforms.oneOverHeight.value = oneOverHeight;
  182. this.projMesh3 = new THREE.Mesh( this.fieldGeometry, this.projMaterial3 );
  183. this.fieldScene.add( this.projMesh3 );
  184. // Color Shader
  185. if ( debug ) {
  186. shader = THREE.Fire.DebugShader;
  187. } else {
  188. shader = THREE.Fire.ColorShader;
  189. }
  190. this.material = new THREE.ShaderMaterial( {
  191. uniforms: shader.uniforms,
  192. vertexShader: shader.vertexShader,
  193. fragmentShader: shader.fragmentShader,
  194. transparent: true
  195. } );
  196. this.material.uniforms.densityMap.value = this.field1.texture;
  197. this.configShaders = function ( dt ) {
  198. this.diffuseMaterial.uniforms.diffuse.value = dt * 0.05 * this.diffuse;
  199. this.diffuseMaterial.uniforms.viscosity.value = dt * 0.05 * this.viscosity;
  200. this.diffuseMaterial.uniforms.expansion.value = Math.exp( this.expansion * - 1.0 );
  201. this.diffuseMaterial.uniforms.swirl.value = Math.exp( this.swirl * - 0.1 );
  202. this.diffuseMaterial.uniforms.drag.value = Math.exp( this.drag * - 0.1 );
  203. this.diffuseMaterial.uniforms.burnRate.value = this.burnRate * dt * 0.01;
  204. this.driftMaterial.uniforms.windVector.value = this.windVector;
  205. this.driftMaterial.uniforms.airSpeed.value = dt * this.airSpeed * 0.001 * textureHeight;
  206. this.material.uniforms.color1.value = this.color1;
  207. this.material.uniforms.color2.value = this.color2;
  208. this.material.uniforms.color3.value = this.color3;
  209. this.material.uniforms.colorBias.value = this.colorBias;
  210. };
  211. this.clearDiffuse = function () {
  212. this.diffuseMaterial.uniforms.expansion.value = 1.0;
  213. this.diffuseMaterial.uniforms.swirl.value = 1.0;
  214. this.diffuseMaterial.uniforms.drag.value = 1.0;
  215. this.diffuseMaterial.uniforms.burnRate.value = 0.0;
  216. };
  217. this.swapTextures = function () {
  218. var swap = this.field0;
  219. this.field0 = this.field1;
  220. this.field1 = swap;
  221. };
  222. this.saveRenderState = function ( renderer ) {
  223. this.savedRenderTarget = renderer.getRenderTarget();
  224. this.savedVrEnabled = renderer.vr.enabled;
  225. this.savedShadowAutoUpdate = renderer.shadowMap.autoUpdate;
  226. this.savedAntialias = renderer.antialias;
  227. this.savedToneMapping = renderer.toneMapping;
  228. };
  229. this.restoreRenderState = function ( renderer ) {
  230. renderer.vr.enabled = this.savedVrEnabled;
  231. renderer.shadowMap.autoUpdate = this.savedShadowAutoUpdate;
  232. renderer.setRenderTarget( this.savedRenderTarget );
  233. renderer.antialias = this.savedAntialias;
  234. renderer.toneMapping = this.savedToneMapping;
  235. };
  236. this.renderSource = function ( renderer ) {
  237. this.sourceMesh.visible = true;
  238. this.sourceMaterial.uniforms.densityMap.value = this.field0.texture;
  239. renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
  240. this.sourceMesh.visible = false;
  241. this.swapTextures();
  242. };
  243. this.renderDiffuse = function ( renderer ) {
  244. this.diffuseMesh.visible = true;
  245. this.diffuseMaterial.uniforms.densityMap.value = this.field0.texture;
  246. renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
  247. this.diffuseMesh.visible = false;
  248. this.swapTextures();
  249. };
  250. this.renderDrift = function ( renderer ) {
  251. this.driftMesh.visible = true;
  252. this.driftMaterial.uniforms.densityMap.value = this.field0.texture;
  253. renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
  254. this.driftMesh.visible = false;
  255. this.swapTextures();
  256. };
  257. this.renderProject = function ( renderer ) {
  258. // Projection pass 1
  259. this.projMesh1.visible = true;
  260. this.projMaterial1.uniforms.densityMap.value = this.field0.texture;
  261. renderer.render( this.fieldScene, this.orthoCamera, this.fieldProj );
  262. this.projMesh1.visible = false;
  263. this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
  264. // Projection pass 2
  265. this.projMesh2.visible = true;
  266. for ( var i = 0; i < 20; i ++ ) {
  267. renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
  268. var temp = this.field1;
  269. this.field1 = this.fieldProj;
  270. this.fieldProj = temp;
  271. this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
  272. }
  273. this.projMesh2.visible = false;
  274. this.projMaterial3.uniforms.densityMap.value = this.field0.texture;
  275. this.projMaterial3.uniforms.projMap.value = this.fieldProj.texture;
  276. // Projection pass 3
  277. this.projMesh3.visible = true;
  278. renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
  279. this.projMesh3.visible = false;
  280. this.swapTextures();
  281. };
  282. this.onBeforeRender = function ( renderer, scene, camera ) {
  283. var delta = this.clock.getDelta();
  284. if ( delta > 0.1 ) {
  285. delta = 0.1;
  286. }
  287. var dt = delta * ( this.speed * 0.1 );
  288. this.configShaders( dt );
  289. this.saveRenderState( renderer );
  290. renderer.vr.enabled = false; // Avoid camera modification and recursion
  291. renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
  292. renderer.antialias = false;
  293. renderer.toneMapping = THREE.NoToneMapping;
  294. this.sourceMesh.visible = false;
  295. this.diffuseMesh.visible = false;
  296. this.driftMesh.visible = false;
  297. this.projMesh1.visible = false;
  298. this.projMesh2.visible = false;
  299. this.projMesh3.visible = false;
  300. this.renderSource( renderer );
  301. this.clearDiffuse();
  302. for ( var i = 0; i < 21; i ++ ) {
  303. this.renderDiffuse( renderer );
  304. }
  305. this.configShaders( dt );
  306. this.renderDiffuse( renderer );
  307. this.renderDrift( renderer );
  308. if ( this.massConservation ) {
  309. this.renderProject( renderer );
  310. this.renderProject( renderer );
  311. }
  312. // Final result out for coloring
  313. this.material.map = this.field1.texture;
  314. this.material.transparent = true;
  315. this.material.minFilter = THREE.LinearFilter,
  316. this.material.magFilter = THREE.LinearFilter,
  317. this.restoreRenderState( renderer );
  318. };
  319. };
  320. THREE.Fire.prototype = Object.create( THREE.Mesh.prototype );
  321. THREE.Fire.prototype.constructor = THREE.Fire;
  322. THREE.Fire.SourceShader = {
  323. uniforms: {
  324. 'sourceMap': {
  325. type: 't',
  326. value: null
  327. },
  328. 'densityMap': {
  329. type: 't',
  330. value: null
  331. }
  332. },
  333. vertexShader: [
  334. 'varying vec2 vUv;',
  335. 'void main() {',
  336. ' vUv = uv;',
  337. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  338. ' gl_Position = projectionMatrix * mvPosition;',
  339. '}'
  340. ].join( "\n" ),
  341. fragmentShader: [
  342. 'uniform sampler2D sourceMap;',
  343. 'uniform sampler2D densityMap;',
  344. 'varying vec2 vUv;',
  345. 'void main() {',
  346. ' vec4 source = texture2D( sourceMap, vUv );',
  347. ' vec4 current = texture2D( densityMap, vUv );',
  348. ' vec2 v0 = (current.gb - step(0.5, current.gb)) * 2.0;',
  349. ' vec2 v1 = (source.gb - step(0.5, source.gb)) * 2.0;',
  350. ' vec2 newVel = v0 + v1;',
  351. ' newVel = clamp(newVel, -0.99, 0.99);',
  352. ' newVel = newVel * 0.5 + step(0.0, -newVel);',
  353. ' float newDensity = source.r + current.a;',
  354. ' float newTemp = source.r + current.r;',
  355. ' newDensity = clamp(newDensity, 0.0, 1.0);',
  356. ' newTemp = clamp(newTemp, 0.0, 1.0);',
  357. ' gl_FragColor = vec4(newTemp, newVel.xy, newDensity);',
  358. '}'
  359. ].join( "\n" )
  360. };
  361. THREE.Fire.DiffuseShader = {
  362. uniforms: {
  363. 'oneOverWidth': {
  364. type: 'f',
  365. value: null
  366. },
  367. 'oneOverHeight': {
  368. type: 'f',
  369. value: null
  370. },
  371. 'diffuse': {
  372. type: 'f',
  373. value: null
  374. },
  375. 'viscosity': {
  376. type: 'f',
  377. value: null
  378. },
  379. 'expansion': {
  380. type: 'f',
  381. value: null
  382. },
  383. 'swirl': {
  384. type: 'f',
  385. value: null
  386. },
  387. 'drag': {
  388. type: 'f',
  389. value: null
  390. },
  391. 'burnRate': {
  392. type: 'f',
  393. value: null
  394. },
  395. 'densityMap': {
  396. type: 't',
  397. value: null
  398. }
  399. },
  400. vertexShader: [
  401. 'varying vec2 vUv;',
  402. 'void main() {',
  403. ' vUv = uv;',
  404. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  405. ' gl_Position = projectionMatrix * mvPosition;',
  406. '}'
  407. ].join( "\n" ),
  408. fragmentShader: [
  409. 'uniform float oneOverWidth;',
  410. 'uniform float oneOverHeight;',
  411. 'uniform float diffuse;',
  412. 'uniform float viscosity;',
  413. 'uniform float expansion;',
  414. 'uniform float swirl;',
  415. 'uniform float burnRate;',
  416. 'uniform float drag;',
  417. 'uniform sampler2D densityMap;',
  418. 'varying vec2 vUv;',
  419. 'void main() {',
  420. ' vec4 dC = texture2D( densityMap, vUv );',
  421. ' vec4 dL = texture2D( densityMap, vec2(vUv.x - oneOverWidth, vUv.y) );',
  422. ' vec4 dR = texture2D( densityMap, vec2(vUv.x + oneOverWidth, vUv.y) );',
  423. ' vec4 dU = texture2D( densityMap, vec2(vUv.x, vUv.y - oneOverHeight) );',
  424. ' vec4 dD = texture2D( densityMap, vec2(vUv.x, vUv.y + oneOverHeight) );',
  425. ' vec4 dUL = texture2D( densityMap, vec2(vUv.x - oneOverWidth, vUv.y - oneOverHeight) );',
  426. ' vec4 dUR = texture2D( densityMap, vec2(vUv.x + oneOverWidth, vUv.y - oneOverHeight) );',
  427. ' vec4 dDL = texture2D( densityMap, vec2(vUv.x - oneOverWidth, vUv.y + oneOverHeight) );',
  428. ' vec4 dDR = texture2D( densityMap, vec2(vUv.x + oneOverWidth, vUv.y + oneOverHeight) );',
  429. ' dC.yz = (dC.yz - step(0.5, dC.yz)) * 2.0;',
  430. ' dL.yz = (dL.yz - step(0.5, dL.yz)) * 2.0;',
  431. ' dR.yz = (dR.yz - step(0.5, dR.yz)) * 2.0;',
  432. ' dU.yz = (dU.yz - step(0.5, dU.yz)) * 2.0;',
  433. ' dD.yz = (dD.yz - step(0.5, dD.yz)) * 2.0;',
  434. ' dUL.yz = (dUL.yz - step(0.5, dUL.yz)) * 2.0;',
  435. ' dUR.yz = (dUR.yz - step(0.5, dUR.yz)) * 2.0;',
  436. ' dDL.yz = (dDL.yz - step(0.5, dDL.yz)) * 2.0;',
  437. ' dDR.yz = (dDR.yz - step(0.5, dDR.yz)) * 2.0;',
  438. ' vec4 result = (dC + vec4(diffuse, viscosity, viscosity, diffuse) * ( dL + dR + dU + dD + dUL + dUR + dDL + dDR )) / (1.0 + 8.0 * vec4(diffuse, viscosity, viscosity, diffuse)) - vec4(0.0, 0.0, 0.0, 0.001);',
  439. ' float temperature = result.r;',
  440. ' temperature = clamp(temperature - burnRate, 0.0, 1.0);',
  441. ' vec2 velocity = result.yz;',
  442. ' vec2 expansionVec = vec2(dL.w - dR.w, dU.w - dD.w);',
  443. ' vec2 swirlVec = vec2((dL.z - dR.z) * 0.5, (dU.y - dD.y) * 0.5);',
  444. ' velocity = velocity + (1.0 - expansion) * expansionVec + (1.0 - swirl) * swirlVec;',
  445. ' velocity = velocity - (1.0 - drag) * velocity;',
  446. ' gl_FragColor = vec4(temperature, velocity * 0.5 + step(0.0, -velocity), result.w);',
  447. ' gl_FragColor = gl_FragColor * step(oneOverWidth, vUv.x);',
  448. ' gl_FragColor = gl_FragColor * step(oneOverHeight, vUv.y);',
  449. ' gl_FragColor = gl_FragColor * step(vUv.x, 1.0 - oneOverWidth);',
  450. ' gl_FragColor = gl_FragColor * step(vUv.y, 1.0 - oneOverHeight);',
  451. '}'
  452. ].join( "\n" )
  453. };
  454. THREE.Fire.DriftShader = {
  455. uniforms: {
  456. 'oneOverWidth': {
  457. type: 'f',
  458. value: null
  459. },
  460. 'oneOverHeight': {
  461. type: 'f',
  462. value: null
  463. },
  464. 'windVector': {
  465. type: 'v2',
  466. value: new THREE.Vector2( 0.0, 0.0 )
  467. },
  468. 'airSpeed': {
  469. type: 'f',
  470. value: null
  471. },
  472. 'densityMap': {
  473. type: 't',
  474. value: null
  475. }
  476. },
  477. vertexShader: [
  478. 'varying vec2 vUv;',
  479. 'void main() {',
  480. ' vUv = uv;',
  481. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  482. ' gl_Position = projectionMatrix * mvPosition;',
  483. '}'
  484. ].join( "\n" ),
  485. fragmentShader: [
  486. 'uniform float oneOverWidth;',
  487. 'uniform float oneOverHeight;',
  488. 'uniform vec2 windVector;',
  489. 'uniform float airSpeed;',
  490. 'uniform sampler2D densityMap;',
  491. 'varying vec2 vUv;',
  492. 'void main() {',
  493. ' vec2 velocity = texture2D( densityMap, vUv ).gb;',
  494. ' velocity = (velocity - step(0.5, velocity)) * 2.0;',
  495. ' velocity = velocity + windVector;',
  496. ' vec2 sourcePos = vUv - airSpeed * vec2(oneOverWidth, oneOverHeight) * velocity;',
  497. ' vec2 units = sourcePos / vec2(oneOverWidth, oneOverHeight);',
  498. ' vec2 intPos = floor(units);',
  499. ' vec2 frac = units - intPos;',
  500. ' intPos = intPos * vec2(oneOverWidth, oneOverHeight);',
  501. ' vec4 dX0Y0 = texture2D( densityMap, intPos + vec2(0.0, -oneOverHeight) );',
  502. ' vec4 dX1Y0 = texture2D( densityMap, intPos + vec2(oneOverWidth, 0.0) );',
  503. ' vec4 dX0Y1 = texture2D( densityMap, intPos + vec2(0.0, oneOverHeight) );',
  504. ' vec4 dX1Y1 = texture2D( densityMap, intPos + vec2(oneOverWidth, oneOverHeight) );',
  505. ' dX0Y0.gb = (dX0Y0.gb - step(0.5, dX0Y0.gb)) * 2.0;',
  506. ' dX1Y0.gb = (dX1Y0.gb - step(0.5, dX1Y0.gb)) * 2.0;',
  507. ' dX0Y1.gb = (dX0Y1.gb - step(0.5, dX0Y1.gb)) * 2.0;',
  508. ' dX1Y1.gb = (dX1Y1.gb - step(0.5, dX1Y1.gb)) * 2.0;',
  509. ' vec4 source = mix(mix(dX0Y0, dX1Y0, frac.x), mix(dX0Y1, dX1Y1, frac.x), frac.y);',
  510. ' source.gb = source.gb * 0.5 + step(0.0, -source.gb);',
  511. ' gl_FragColor = source;',
  512. '}'
  513. ].join( "\n" )
  514. };
  515. THREE.Fire.ProjectionShader1 = {
  516. uniforms: {
  517. 'oneOverWidth': {
  518. type: 'f',
  519. value: null
  520. },
  521. 'oneOverHeight': {
  522. type: 'f',
  523. value: null
  524. },
  525. 'densityMap': {
  526. type: 't',
  527. value: null
  528. }
  529. },
  530. vertexShader: [
  531. 'varying vec2 vUv;',
  532. 'void main() {',
  533. ' vUv = uv;',
  534. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  535. ' gl_Position = projectionMatrix * mvPosition;',
  536. '}'
  537. ].join( "\n" ),
  538. fragmentShader: [
  539. 'uniform float oneOverWidth;',
  540. 'uniform float oneOverHeight;',
  541. 'uniform sampler2D densityMap;',
  542. 'varying vec2 vUv;',
  543. 'void main() {',
  544. ' float dL = texture2D( densityMap, vec2(vUv.x - oneOverWidth, vUv.y) ).g;',
  545. ' float dR = texture2D( densityMap, vec2(vUv.x + oneOverWidth, vUv.y) ).g;',
  546. ' float dU = texture2D( densityMap, vec2(vUv.x, vUv.y - oneOverHeight) ).b;',
  547. ' float dD = texture2D( densityMap, vec2(vUv.x, vUv.y + oneOverHeight) ).b;',
  548. ' dL = (dL - step(0.5, dL)) * 2.0;',
  549. ' dR = (dR - step(0.5, dR)) * 2.0;',
  550. ' dU = (dU - step(0.5, dU)) * 2.0;',
  551. ' dD = (dD - step(0.5, dD)) * 2.0;',
  552. ' float h = (oneOverWidth + oneOverHeight) * 0.5;',
  553. ' float div = -0.5 * h * (dR - dL + dD - dU);',
  554. ' gl_FragColor = vec4( 0.0, 0.0, div * 0.5 + step(0.0, -div), 0.0);',
  555. '}'
  556. ].join( "\n" )
  557. };
  558. THREE.Fire.ProjectionShader2 = {
  559. uniforms: {
  560. 'oneOverWidth': {
  561. type: 'f',
  562. value: null
  563. },
  564. 'oneOverHeight': {
  565. type: 'f',
  566. value: null
  567. },
  568. 'densityMap': {
  569. type: 't',
  570. value: null
  571. }
  572. },
  573. vertexShader: [
  574. 'varying vec2 vUv;',
  575. 'void main() {',
  576. ' vUv = uv;',
  577. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  578. ' gl_Position = projectionMatrix * mvPosition;',
  579. '}'
  580. ].join( "\n" ),
  581. fragmentShader: [
  582. 'uniform float oneOverWidth;',
  583. 'uniform float oneOverHeight;',
  584. 'uniform sampler2D densityMap;',
  585. 'varying vec2 vUv;',
  586. 'void main() {',
  587. ' float div = texture2D( densityMap, vUv ).b;',
  588. ' float pL = texture2D( densityMap, vec2(vUv.x - oneOverWidth, vUv.y) ).g;',
  589. ' float pR = texture2D( densityMap, vec2(vUv.x + oneOverWidth, vUv.y) ).g;',
  590. ' float pU = texture2D( densityMap, vec2(vUv.x, vUv.y - oneOverHeight) ).g;',
  591. ' float pD = texture2D( densityMap, vec2(vUv.x, vUv.y + oneOverHeight) ).g;',
  592. ' float divNorm = (div - step(0.5, div)) * 2.0;',
  593. ' pL = (pL - step(0.5, pL)) * 2.0;',
  594. ' pR = (pR - step(0.5, pR)) * 2.0;',
  595. ' pU = (pU - step(0.5, pU)) * 2.0;',
  596. ' pD = (pD - step(0.5, pD)) * 2.0;',
  597. ' float p = (divNorm + pR + pL + pD + pU) * 0.25;',
  598. ' gl_FragColor = vec4( 0.0, p * 0.5 + step(0.0, -p), div, 0.0);',
  599. '}'
  600. ].join( "\n" )
  601. };
  602. THREE.Fire.ProjectionShader3 = {
  603. uniforms: {
  604. 'oneOverWidth': {
  605. type: 'f',
  606. value: null
  607. },
  608. 'oneOverHeight': {
  609. type: 'f',
  610. value: null
  611. },
  612. 'densityMap': {
  613. type: 't',
  614. value: null
  615. },
  616. 'projMap': {
  617. type: 't',
  618. value: null
  619. }
  620. },
  621. vertexShader: [
  622. 'varying vec2 vUv;',
  623. 'void main() {',
  624. ' vUv = uv;',
  625. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  626. ' gl_Position = projectionMatrix * mvPosition;',
  627. '}'
  628. ].join( "\n" ),
  629. fragmentShader: [
  630. 'uniform float oneOverWidth;',
  631. 'uniform float oneOverHeight;',
  632. 'uniform sampler2D densityMap;',
  633. 'uniform sampler2D projMap;',
  634. 'varying vec2 vUv;',
  635. 'void main() {',
  636. ' vec4 orig = texture2D(densityMap, vUv);',
  637. ' float pL = texture2D( projMap, vec2(vUv.x - oneOverWidth, vUv.y) ).g;',
  638. ' float pR = texture2D( projMap, vec2(vUv.x + oneOverWidth, vUv.y) ).g;',
  639. ' float pU = texture2D( projMap, vec2(vUv.x, vUv.y - oneOverHeight) ).g;',
  640. ' float pD = texture2D( projMap, vec2(vUv.x, vUv.y + oneOverHeight) ).g;',
  641. ' float uNorm = (orig.g - step(0.5, orig.g)) * 2.0;',
  642. ' float vNorm = (orig.b - step(0.5, orig.b)) * 2.0;',
  643. ' pL = (pL - step(0.5, pL)) * 2.0;',
  644. ' pR = (pR - step(0.5, pR)) * 2.0;',
  645. ' pU = (pU - step(0.5, pU)) * 2.0;',
  646. ' pD = (pD - step(0.5, pD)) * 2.0;',
  647. ' float h = (oneOverWidth + oneOverHeight) * 0.5;',
  648. ' float u = uNorm - (0.5 * (pR - pL) / h);',
  649. ' float v = vNorm - (0.5 * (pD - pU) / h);',
  650. ' gl_FragColor = vec4( orig.r, u * 0.5 + step(0.0, -u), v * 0.5 + step(0.0, -v), orig.a);',
  651. '}'
  652. ].join( "\n" )
  653. };
  654. THREE.Fire.ColorShader = {
  655. uniforms: {
  656. 'color1': {
  657. type: 'c',
  658. value: null
  659. },
  660. 'color2': {
  661. type: 'c',
  662. value: null
  663. },
  664. 'color3': {
  665. type: 'c',
  666. value: null
  667. },
  668. 'colorBias': {
  669. type: 'f',
  670. value: null
  671. },
  672. 'densityMap': {
  673. type: 't',
  674. value: null
  675. }
  676. },
  677. vertexShader: [
  678. 'varying vec2 vUv;',
  679. 'void main() {',
  680. ' vUv = uv;',
  681. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  682. ' gl_Position = projectionMatrix * mvPosition;',
  683. '}'
  684. ].join( "\n" ),
  685. fragmentShader: [
  686. 'uniform vec3 color1;',
  687. 'uniform vec3 color2;',
  688. 'uniform vec3 color3;',
  689. 'uniform float colorBias;',
  690. 'uniform sampler2D densityMap;',
  691. 'varying vec2 vUv;',
  692. 'void main() {',
  693. ' float density = texture2D( densityMap, vUv ).a;',
  694. ' float temperature = texture2D( densityMap, vUv ).r;',
  695. ' float bias = clamp(colorBias, 0.0001, 0.9999);',
  696. ' vec3 blend1 = mix(color3, color2, temperature / bias) * (1.0 - step(bias, temperature));',
  697. ' vec3 blend2 = mix(color2, color1, (temperature - bias) / (1.0 - bias) ) * step(bias, temperature);',
  698. ' gl_FragColor = vec4(blend1 + blend2, density);',
  699. '}'
  700. ].join( "\n" )
  701. };
  702. THREE.Fire.DebugShader = {
  703. uniforms: {
  704. 'color1': {
  705. type: 'c',
  706. value: null
  707. },
  708. 'color2': {
  709. type: 'c',
  710. value: null
  711. },
  712. 'color3': {
  713. type: 'c',
  714. value: null
  715. },
  716. 'colorBias': {
  717. type: 'f',
  718. value: null
  719. },
  720. 'densityMap': {
  721. type: 't',
  722. value: null
  723. }
  724. },
  725. vertexShader: [
  726. 'varying vec2 vUv;',
  727. 'void main() {',
  728. ' vUv = uv;',
  729. ' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
  730. ' gl_Position = projectionMatrix * mvPosition;',
  731. '}'
  732. ].join( "\n" ),
  733. fragmentShader: [
  734. 'uniform sampler2D densityMap;',
  735. 'varying vec2 vUv;',
  736. 'void main() {',
  737. ' float density;',
  738. ' density = texture2D( densityMap, vUv ).a;',
  739. ' vec2 vel = texture2D( densityMap, vUv ).gb;',
  740. ' vel = (vel - step(0.5, vel)) * 2.0;',
  741. ' float r = density;',
  742. ' float g = max(abs(vel.x), density * 0.5);',
  743. ' float b = max(abs(vel.y), density * 0.5);',
  744. ' float a = max(density * 0.5, max(abs(vel.x), abs(vel.y)));',
  745. ' gl_FragColor = vec4(r, g, b, a);',
  746. '}'
  747. ].join( "\n" )
  748. };