Fire.js 26 KB

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