Fire.js 26 KB

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