后期处理通道

3D扩展允许给layer设置一个后期处理通道，所谓后期处理通道，是指将renderer输出的内容放到FrameBuffer中依次通过若干个后期处理的Program来完成渲染。

实际上我们可以通过多个RenderTarget来实现这个功能，后期处理通道简化了实现的步骤。

这样可以实现很多有趣的效果。

  1. const fragment = /* glsl */ `
  2.   precision highp float;
  4.   uniform sampler2D tMap;
  5.   uniform sampler2D tFluid;
  6.   uniform float uTime;
  7.   varying vec2 vUv;
  9.   void main() {
  10.     vec3 fluid = texture2D(tFluid, vUv).rgb;
  11.     vec2 uv = vUv - fluid.rg * 0.0002;
  13.     gl_FragColor = mix( texture2D(tMap, uv), vec4(fluid * 0.1 + 0.5, 1), step(0.5, vUv.x) ) ;
  15.     // Oscillate between fluid values and the distorted scene
  16.     // gl_FragColor = mix(texture2D(tMap, uv), vec4(fluid * 0.1 + 0.5, 1), smoothstep(0.0, 0.7, sin(uTime)));
  17.   }
  18. `;
  20. const baseVertex = /* glsl */ `
  21.   precision highp float;
  22.   attribute vec2 position;
  23.   attribute vec2 uv;
  24.   varying vec2 vUv;
  25.   varying vec2 vL;
  26.   varying vec2 vR;
  27.   varying vec2 vT;
  28.   varying vec2 vB;
  29.   uniform vec2 texelSize;
  30.   void main () {
  31.     vUv = uv;
  32.     vL = vUv - vec2(texelSize.x, 0.0);
  33.     vR = vUv + vec2(texelSize.x, 0.0);
  34.     vT = vUv + vec2(0.0, texelSize.y);
  35.     vB = vUv - vec2(0.0, texelSize.y);
  36.     gl_Position = vec4(position, 0, 1);
  37.   }
  38. `;
  40. const clearShader = /* glsl */ `
  41.   precision mediump float;
  42.   precision mediump sampler2D;
  43.   varying highp vec2 vUv;
  44.   uniform sampler2D uTexture;
  45.   uniform float value;
  46.   void main () {
  47.     gl_FragColor = value * texture2D(uTexture, vUv);
  48.   }
  49. `;
  51. const splatShader = /* glsl */ `
  52.   precision highp float;
  53.   precision highp sampler2D;
  54.   varying vec2 vUv;
  55.   uniform sampler2D uTarget;
  56.   uniform float aspectRatio;
  57.   uniform vec3 color;
  58.   uniform vec2 point;
  59.   uniform float radius;
  60.   void main () {
  61.     vec2 p = vUv - point.xy;
  62.     p.x *= aspectRatio;
  63.     vec3 splat = exp(-dot(p, p) / radius) * color;
  64.     vec3 base = texture2D(uTarget, vUv).xyz;
  65.     gl_FragColor = vec4(base + splat, 1.0);
  66.   }
  67. `;
  69. const advectionManualFilteringShader = /* glsl */ `
  70.   precision highp float;
  71.   precision highp sampler2D;
  72.   varying vec2 vUv;
  73.   uniform sampler2D uVelocity;
  74.   uniform sampler2D uSource;
  75.   uniform vec2 texelSize;
  76.   uniform vec2 dyeTexelSize;
  77.   uniform float dt;
  78.   uniform float dissipation;
  79.   vec4 bilerp (sampler2D sam, vec2 uv, vec2 tsize) {
  80.     vec2 st = uv / tsize - 0.5;
  81.     vec2 iuv = floor(st);
  82.     vec2 fuv = fract(st);
  83.     vec4 a = texture2D(sam, (iuv + vec2(0.5, 0.5)) * tsize);
  84.     vec4 b = texture2D(sam, (iuv + vec2(1.5, 0.5)) * tsize);
  85.     vec4 c = texture2D(sam, (iuv + vec2(0.5, 1.5)) * tsize);
  86.     vec4 d = texture2D(sam, (iuv + vec2(1.5, 1.5)) * tsize);
  87.     return mix(mix(a, b, fuv.x), mix(c, d, fuv.x), fuv.y);
  88.   }
  89.   void main () {
  90.     vec2 coord = vUv - dt * bilerp(uVelocity, vUv, texelSize).xy * texelSize;
  91.     gl_FragColor = dissipation * bilerp(uSource, coord, dyeTexelSize);
  92.     gl_FragColor.a = 1.0;
  93.   }
  94. `;
  96. const advectionShader = /* glsl */ `
  97.   precision highp float;
  98.   precision highp sampler2D;
  99.   varying vec2 vUv;
  100.   uniform sampler2D uVelocity;
  101.   uniform sampler2D uSource;
  102.   uniform vec2 texelSize;
  103.   uniform float dt;
  104.   uniform float dissipation;
  105.   void main () {
  106.     vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
  107.     gl_FragColor = dissipation * texture2D(uSource, coord);
  108.     gl_FragColor.a = 1.0;
  109.   }
  110. `;
  112. const divergenceShader = /* glsl */ `
  113.   precision mediump float;
  114.   precision mediump sampler2D;
  115.   varying highp vec2 vUv;
  116.   varying highp vec2 vL;
  117.   varying highp vec2 vR;
  118.   varying highp vec2 vT;
  119.   varying highp vec2 vB;
  120.   uniform sampler2D uVelocity;
  121.   void main () {
  122.     float L = texture2D(uVelocity, vL).x;
  123.     float R = texture2D(uVelocity, vR).x;
  124.     float T = texture2D(uVelocity, vT).y;
  125.     float B = texture2D(uVelocity, vB).y;
  126.     vec2 C = texture2D(uVelocity, vUv).xy;
  127.     if (vL.x < 0.0) { L = -C.x; }
  128.     if (vR.x > 1.0) { R = -C.x; }
  129.     if (vT.y > 1.0) { T = -C.y; }
  130.     if (vB.y < 0.0) { B = -C.y; }
  131.     float div = 0.5 * (R - L + T - B);
  132.     gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
  133.   }
  134. `;
  136. const curlShader = /* glsl */ `
  137.   precision mediump float;
  138.   precision mediump sampler2D;
  139.   varying highp vec2 vUv;
  140.   varying highp vec2 vL;
  141.   varying highp vec2 vR;
  142.   varying highp vec2 vT;
  143.   varying highp vec2 vB;
  144.   uniform sampler2D uVelocity;
  145.   void main () {
  146.     float L = texture2D(uVelocity, vL).y;
  147.     float R = texture2D(uVelocity, vR).y;
  148.     float T = texture2D(uVelocity, vT).x;
  149.     float B = texture2D(uVelocity, vB).x;
  150.     float vorticity = R - L - T + B;
  151.     gl_FragColor = vec4(0.5 * vorticity, 0.0, 0.0, 1.0);
  152.   }
  153. `;
  155. const vorticityShader = /* glsl */ `
  156.   precision highp float;
  157.   precision highp sampler2D;
  158.   varying vec2 vUv;
  159.   varying vec2 vL;
  160.   varying vec2 vR;
  161.   varying vec2 vT;
  162.   varying vec2 vB;
  163.   uniform sampler2D uVelocity;
  164.   uniform sampler2D uCurl;
  165.   uniform float curl;
  166.   uniform float dt;
  167.   void main () {
  168.     float L = texture2D(uCurl, vL).x;
  169.     float R = texture2D(uCurl, vR).x;
  170.     float T = texture2D(uCurl, vT).x;
  171.     float B = texture2D(uCurl, vB).x;
  172.     float C = texture2D(uCurl, vUv).x;
  173.     vec2 force = 0.5 * vec2(abs(T) - abs(B), abs(R) - abs(L));
  174.     force /= length(force) + 0.0001;
  175.     force *= curl * C;
  176.     force.y *= -1.0;
  177.     vec2 vel = texture2D(uVelocity, vUv).xy;
  178.     gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
  179.   }
  180. `;
  182. const pressureShader = /* glsl */ `
  183.   precision mediump float;
  184.   precision mediump sampler2D;
  185.   varying highp vec2 vUv;
  186.   varying highp vec2 vL;
  187.   varying highp vec2 vR;
  188.   varying highp vec2 vT;
  189.   varying highp vec2 vB;
  190.   uniform sampler2D uPressure;
  191.   uniform sampler2D uDivergence;
  192.   void main () {
  193.     float L = texture2D(uPressure, vL).x;
  194.     float R = texture2D(uPressure, vR).x;
  195.     float T = texture2D(uPressure, vT).x;
  196.     float B = texture2D(uPressure, vB).x;
  197.     float C = texture2D(uPressure, vUv).x;
  198.     float divergence = texture2D(uDivergence, vUv).x;
  199.     float pressure = (L + R + B + T - divergence) * 0.25;
  200.     gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
  201.   }
  202. `;
  204. const gradientSubtractShader = /* glsl */ `
  205.   precision mediump float;
  206.   precision mediump sampler2D;
  207.   varying highp vec2 vUv;
  208.   varying highp vec2 vL;
  209.   varying highp vec2 vR;
  210.   varying highp vec2 vT;
  211.   varying highp vec2 vB;
  212.   uniform sampler2D uPressure;
  213.   uniform sampler2D uVelocity;
  214.   void main () {
  215.     float L = texture2D(uPressure, vL).x;
  216.     float R = texture2D(uPressure, vR).x;
  217.     float T = texture2D(uPressure, vT).x;
  218.     float B = texture2D(uPressure, vB).x;
  219.     vec2 velocity = texture2D(uVelocity, vUv).xy;
  220.     velocity.xy -= vec2(R - L, T - B);
  221.     gl_FragColor = vec4(velocity, 0.0, 1.0);
  222.   }
  223. `;
  225. const {Scene} = spritejs;
  226. const {RenderTarget, Mesh3d, Geometry, Cube, shaders} = spritejs.ext3d;
  227. const container = document.getElementById('container');
  228. const scene = new Scene({
  229.   container,
  230.   displayRatio: 2,
  231. });
  232. const layer = scene.layer3d('fglayer', {
  233.   // autoRender: false,
  234.   camera: {
  235.     fov: 35,
  236.   },
  237.   post: true,
  238. });
  240. layer.camera.attributes.pos = [0, 1, 5];
  241. layer.camera.lookAt([0, 0, 0]);
  243. const post = layer.post;
  245. // Helper functions for larger device support
  246. function getSupportedFormat(gl, internalFormat, format, type) {
  247.   if(!supportRenderTextureFormat(gl, internalFormat, format, type)) {
  248.     switch (internalFormat) {
  249.       case gl.R16F:
  250.         return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
  251.       case gl.RG16F:
  252.         return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
  253.       default:
  254.         return null;
  255.     }
  256.   }
  258.   return {internalFormat, format};
  259. }
  261. function supportRenderTextureFormat(gl, internalFormat, format, type) {
  262.   const texture = gl.createTexture();
  263.   gl.bindTexture(gl.TEXTURE_2D, texture);
  264.   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  265.   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  266.   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  267.   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  268.   gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);
  270.   const fbo = gl.createFramebuffer();
  271.   gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  272.   gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  274.   const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  275.   if(status !== gl.FRAMEBUFFER_COMPLETE) return false;
  276.   return true;
  277. }
  279. // Resolution of simulation
  280. const simRes = 128;
  281. const dyeRes = 512;
  283. // Main inputs to control look and feel of fluid
  284. const iterations = 3;
  285. const densityDissipation = 0.97;
  286. const velocityDissipation = 0.98;
  287. const pressureDissipation = 0.8;
  288. const curlStrength = 20;
  289. const radius = 0.2;
  291. // Common uniform
  292. const texelSize = {value: [1 / simRes, 1 / simRes]};
  294. const renderer = layer.renderer;
  295. const gl = layer.gl;
  297. // Get supported formats and types for FBOs
  298. const supportLinearFiltering = renderer.extensions[`OES_texture_${renderer.isWebgl2 ? '' : 'half_'}float_linear`];
  299. const halfFloat = renderer.isWebgl2 ? gl.HALF_FLOAT // eslint-disable-line no-nested-ternary
  300.   : renderer.extensions.OES_texture_half_float ? renderer.extensions.OES_texture_half_float.HALF_FLOAT_OES
  301.     : gl.UNSIGNED_BYTE;
  303. const filtering = supportLinearFiltering ? gl.LINEAR : gl.NEAREST;
  304. let rgba,
  305.   rg,
  306.   r;
  308. if(renderer.isWebgl2) {
  309.   rgba = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloat);
  310.   rg = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloat);
  311.   r = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloat);
  312. } else {
  313.   rgba = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloat);
  314.   rg = rgba;
  315.   r = rgba;
  316. }
  318. // Create fluid simulation FBOs
  319. const density = new RenderTarget(gl, {
  320.   width: dyeRes,
  321.   height: dyeRes,
  322.   type: halfFloat,
  323.   format: rgba.format,
  324.   internalFormat: rgba.internalFormat,
  325.   minFilter: filtering,
  326.   depth: false,
  327.   buffer: true,
  328. });
  330. const velocity = new RenderTarget(gl, {
  331.   width: simRes,
  332.   height: simRes,
  333.   type: halfFloat,
  334.   format: rg.format,
  335.   internalFormat: rg.internalFormat,
  336.   minFilter: filtering,
  337.   depth: false,
  338.   buffer: true,
  339. });
  341. const pressure = new RenderTarget(gl, {
  342.   width: simRes,
  343.   height: simRes,
  344.   type: halfFloat,
  345.   format: r.format,
  346.   internalFormat: r.internalFormat,
  347.   minFilter: gl.NEAREST,
  348.   depth: false,
  349.   buffer: true,
  350. });
  352. const divergence = new RenderTarget(gl, {
  353.   width: simRes,
  354.   height: simRes,
  355.   type: halfFloat,
  356.   format: r.format,
  357.   internalFormat: r.internalFormat,
  358.   minFilter: gl.NEAREST,
  359.   depth: false,
  360. });
  362. const curl = new RenderTarget(gl, {
  363.   width: simRes,
  364.   height: simRes,
  365.   type: halfFloat,
  366.   format: r.format,
  367.   internalFormat: r.internalFormat,
  368.   minFilter: gl.NEAREST,
  369.   depth: false,
  370. });
  372. const triangle = new Geometry(gl, {
  373.   position: {size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3])},
  374.   uv: {size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2])},
  375. });
  377. // Create fluid simulation programs
  378. const clearProgram = new Mesh3d(layer.createProgram({
  379.   vertex: baseVertex,
  380.   fragment: clearShader,
  381.   uniforms: {
  382.     texelSize,
  383.     uTexture: {value: null},
  384.     value: {value: pressureDissipation},
  385.   },
  386.   depthTest: false,
  387.   depthWrite: false,
  388. }), {
  389.   model: triangle,
  390. });
  392. const splatProgram = new Mesh3d(layer.createProgram({
  393.   vertex: baseVertex,
  394.   fragment: splatShader,
  395.   uniforms: {
  396.     texelSize,
  397.     uTarget: {value: null},
  398.     aspectRatio: {value: 1},
  399.     color: {value: [0, 0, 0]},
  400.     point: {value: [0, 0]},
  401.     radius: {value: 1},
  402.   },
  403.   depthTest: false,
  404.   depthWrite: false,
  405. }), {
  406.   model: triangle,
  407. });
  409. const advectionProgram = new Mesh3d(layer.createProgram({
  410.   vertex: baseVertex,
  411.   fragment: supportLinearFiltering ? advectionShader : advectionManualFilteringShader,
  412.   uniforms: {
  413.     texelSize,
  414.     dyeTexelSize: {value: [1 / dyeRes, 1 / dyeRes]},
  415.     uVelocity: {value: null},
  416.     uSource: {value: null},
  417.     dt: {value: 0.016},
  418.     dissipation: {value: 1.0},
  419.   },
  420.   depthTest: false,
  421.   depthWrite: false,
  422. }), {
  423.   model: triangle,
  424. });
  426. const divergenceProgram = new Mesh3d(layer.createProgram({
  427.   vertex: baseVertex,
  428.   fragment: divergenceShader,
  429.   uniforms: {
  430.     texelSize,
  431.     uVelocity: {value: null},
  432.   },
  433.   depthTest: false,
  434.   depthWrite: false,
  435. }), {
  436.   model: triangle,
  437. });
  439. const curlProgram = new Mesh3d(layer.createProgram({
  440.   vertex: baseVertex,
  441.   fragment: curlShader,
  442.   uniforms: {
  443.     texelSize,
  444.     uVelocity: {value: null},
  445.   },
  446.   depthTest: false,
  447.   depthWrite: false,
  448. }), {
  449.   model: triangle,
  450. });
  452. const vorticityProgram = new Mesh3d(layer.createProgram({
  453.   vertex: baseVertex,
  454.   fragment: vorticityShader,
  455.   uniforms: {
  456.     texelSize,
  457.     uVelocity: {value: null},
  458.     uCurl: {value: null},
  459.     curl: {value: curlStrength},
  460.     dt: {value: 0.016},
  461.   },
  462.   depthTest: false,
  463.   depthWrite: false,
  464. }), {
  465.   model: triangle,
  466. });
  468. const pressureProgram = new Mesh3d(layer.createProgram({
  469.   vertex: baseVertex,
  470.   fragment: pressureShader,
  471.   uniforms: {
  472.     texelSize,
  473.     uPressure: {value: null},
  474.     uDivergence: {value: null},
  475.   },
  476.   depthTest: false,
  477.   depthWrite: false,
  478. }), {
  479.   model: triangle,
  480. });
  482. const gradienSubtractProgram = new Mesh3d(layer.createProgram({
  483.   vertex: baseVertex,
  484.   fragment: gradientSubtractShader,
  485.   uniforms: {
  486.     texelSize,
  487.     uPressure: {value: null},
  488.     uVelocity: {value: null},
  489.   },
  490.   depthTest: false,
  491.   depthWrite: false,
  492. }), {
  493.   model: triangle,
  494. });
  496. const splats = [];
  498. // Create handlers to get mouse position and velocity
  499. const isTouchCapable = 'ontouchstart' in window;
  500. if(isTouchCapable) {
  501.   window.addEventListener('touchstart', updateMouse, false);
  502.   window.addEventListener('touchmove', updateMouse, false);
  503. } else {
  504.   window.addEventListener('mousemove', updateMouse, false);
  505. }
  507. const lastMouse = {x: 0, y: 0};
  508. function updateMouse(e) {
  509.   if(e.changedTouches && e.changedTouches.length) {
  510.     e.x = e.changedTouches[0].pageX;
  511.     e.y = e.changedTouches[0].pageY;
  512.   }
  513.   if(e.x === undefined) {
  514.     e.x = e.pageX;
  515.     e.y = e.pageY;
  516.   }
  518.   if(!lastMouse.isInit) {
  519.     lastMouse.isInit = true;
  521.     // First input
  522.     lastMouse.x = e.x;
  523.     lastMouse.y = e.y;
  524.   }
  526.   const deltaX = e.x - lastMouse.x;
  527.   const deltaY = e.y - lastMouse.y;
  529.   lastMouse.x = e.x;
  530.   lastMouse.y = e.y;
  531.   // console.log(deltaX, deltaY);
  532.   // Add if the mouse is moving
  533.   if(Math.abs(deltaX) || Math.abs(deltaY)) {
  534.     splats.push({
  535.       // Get mouse value in 0 to 1 range, with y flipped
  536.       x: e.x / renderer.width,
  537.       y: 1.0 - e.y / renderer.height,
  538.       dx: deltaX * 5.0,
  539.       dy: deltaY * -5.0,
  540.     });
  541.   }
  542. }
  544. // Function to draw number of interactions onto input render target
  545. function splat({x, y, dx, dy}) {
  546.   splatProgram.program.uniforms.uTarget.value = velocity.texture;
  547.   splatProgram.program.uniforms.aspectRatio.value = renderer.width / renderer.height;
  548.   splatProgram.program.uniforms.point.value = [x, y];
  549.   splatProgram.program.uniforms.color.value = [dx, dy, 1.0];
  550.   splatProgram.program.uniforms.radius.value = radius / 100.0;
  552.   layer.renderTarget(velocity, {
  553.     root: splatProgram,
  554.     sort: false,
  555.     update: false,
  556.   });
  557.   velocity.swap();
  559.   splatProgram.program.uniforms.uTarget.value = density.texture;
  561.   layer.renderTarget(density, {
  562.     root: splatProgram,
  563.     sort: false,
  564.     update: false,
  565.   });
  567.   density.swap();
  568. }
  570. const normalProgram = layer.createProgram({
  571.   ...shaders.NORMAL,
  572. });
  574. const mesh = new Cube(normalProgram);
  575. layer.append(mesh);
  577. for(let i = 0; i < 20; i++) {
  578.   const m = mesh.cloneNode();
  579.   m.attributes.pos = [
  580.     Math.random() * 3 - 1.5,
  581.     Math.random() * 3 - 1.5,
  582.     Math.random() * 3 - 1.5,
  583.   ];
  584.   m.attributes.rotate = [
  585.     Math.random() * 360 - 180,
  586.     Math.random() * 360 - 180,
  587.     0,
  588.   ];
  589.   m.attributes.scale = Math.random() * 0.5 + 0.1;
  590.   mesh.append(m);
  591. }
  593. const pass = post.addPass({
  594.   fragment,
  595.   uniforms: {
  596.     tFluid: {value: null},
  597.     uTime: {value: 0},
  598.   },
  599. });
  600. layer.bindTime(pass);
  602. // requestAnimationFrame(update);
  604. layer.tick(() => {
  605.   // Perform all of the fluid simulation renders
  606.   // No need to clear during sim, saving a number of GL calls.
  607.   renderer.autoClear = false;
  609.   // Render all of the inputs since last frame
  610.   for(let i = splats.length - 1; i >= 0; i--) {
  611.     const s = splats.splice(i, 1)[0];
  612.     splat(s);
  613.   }
  615.   curlProgram.program.uniforms.uVelocity.value = velocity.texture;
  616.   layer.renderTarget(curl, {
  617.     root: curlProgram,
  618.     sort: false,
  619.     update: false,
  620.   });
  622.   vorticityProgram.program.uniforms.uVelocity.value = velocity.texture;
  623.   vorticityProgram.program.uniforms.uCurl.value = curl.texture;
  625.   layer.renderTarget(velocity, {
  626.     root: vorticityProgram,
  627.     sort: false,
  628.     update: false,
  629.   });
  630.   velocity.swap();
  632.   divergenceProgram.program.uniforms.uVelocity.value = velocity.texture;
  633.   layer.renderTarget(divergence, {
  634.     root: divergenceProgram,
  635.     sort: false,
  636.     update: false,
  637.   });
  639.   clearProgram.program.uniforms.uTexture.value = pressure.texture;
  640.   clearProgram.program.uniforms.value.value = pressureDissipation;
  642.   layer.renderTarget(pressure, {
  643.     root: clearProgram,
  644.     sort: false,
  645.     update: false,
  646.   });
  647.   pressure.swap();
  649.   pressureProgram.program.uniforms.uDivergence.value = divergence.texture;
  651.   for(let i = 0; i < iterations; i++) {
  652.     pressureProgram.program.uniforms.uPressure.value = pressure.texture;
  654.     layer.renderTarget(pressure, {
  655.       root: pressureProgram,
  656.       sort: false,
  657.       update: false,
  658.     });
  659.     pressure.swap();
  660.   }
  662.   gradienSubtractProgram.program.uniforms.uPressure.value = pressure.texture;
  663.   gradienSubtractProgram.program.uniforms.uVelocity.value = velocity.texture;
  665.   layer.renderTarget(velocity, {
  666.     root: gradienSubtractProgram,
  667.     sort: false,
  668.     update: false,
  669.   });
  670.   velocity.swap();
  672.   advectionProgram.program.uniforms.dyeTexelSize.value = 1 / simRes;
  673.   advectionProgram.program.uniforms.uVelocity.value = velocity.texture;
  674.   advectionProgram.program.uniforms.uSource.value = velocity.texture;
  675.   advectionProgram.program.uniforms.dissipation.value = velocityDissipation;
  677.   layer.renderTarget(velocity, {
  678.     root: advectionProgram,
  679.     sort: false,
  680.     update: false,
  681.   });
  682.   velocity.swap();
  684.   advectionProgram.program.uniforms.dyeTexelSize.value = 1 / dyeRes;
  685.   advectionProgram.program.uniforms.uVelocity.value = velocity.texture;
  686.   advectionProgram.program.uniforms.uSource.value = density.texture;
  687.   advectionProgram.program.uniforms.dissipation.value = densityDissipation;
  689.   layer.renderTarget(density, {
  690.     root: advectionProgram,
  691.     sort: false,
  692.     update: false,
  693.   });
  694.   density.swap();
  696.   // Set clear back to default
  697.   renderer.autoClear = true;
  699.   // Update post pass uniform with the simulation output
  700.   pass.uniforms.tFluid.value = density.texture;
  702.   mesh.attributes.rotateY -= 0.15;
  703.   mesh.attributes.rotateX -= 0.3;
  704. });