Fire.js 26 KB

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