aesthetics: Improve Fluid + sequencing

src/geometries/genWireCube.ts

@@ -0,0 +1,49 @@
+import { GL_LINES } from '../gl/constants';
+import { Geometry } from '../heck/Geometry';
+import { glCreateVertexbuffer } from '../gl/glCreateVertexbuffer';
+import { glVertexArrayBindVertexbuffer } from '../gl/glVertexArrayBindVertexbuffer';
+
+export function genWireCube( dimension?: [ number, number, number ] ): Geometry {
+  const [ x, y, z ] = dimension ?? [ 1, 1, 1 ];
+
+  const arrayPosition = [
+    -x, -y, z,
+    x, -y, z,
+    x, -y, z,
+    x, y, z,
+    x, y, z,
+    -x, y, z,
+    -x, y, z,
+    -x, -y, z,
+
+    -x, -y, -z,
+    x, -y, -z,
+    x, -y, -z,
+    x, y, -z,
+    x, y, -z,
+    -x, y, -z,
+    -x, y, -z,
+    -x, -y, -z,
+
+    -x, -y, z,
+    -x, -y, -z,
+    x, -y, z,
+    x, -y, -z,
+    x, y, z,
+    x, y, -z,
+    -x, y, z,
+    -x, y, -z,
+  ];
+
+  // -- buffers ------------------------------------------------------------------------------------
+  const position = glCreateVertexbuffer( new Float32Array( arrayPosition ) );
+
+  // -- geometry -----------------------------------------------------------------------------------
+  const geometry = new Geometry();
+  geometry.count = arrayPosition.length / 3;
+  geometry.mode = GL_LINES;
+
+  glVertexArrayBindVertexbuffer( geometry.vao, position, 0, 3 );
+
+  return geometry;
+}

src/heck/components/Blit.ts

@@ -42,7 +42,7 @@ export class Blit extends Component {
     this.filter = options?.filter ?? GL_NEAREST;
   }
 
-  protected __updateImpl(): void {
+  public blitImmediate(): void {
     if ( this.src && this.dst ) {
       gl.bindFramebuffer( GL_READ_FRAMEBUFFER, this.src.framebuffer );
       if ( this.dst instanceof RawBufferRenderTarget ) {
@@ -60,4 +60,8 @@ export class Blit extends Component {
       );
     }
   }
+
+  protected __updateImpl(): void {
+    this.blitImmediate();
+  }
 }

src/nodes/FluidScene/Fluid.ts

@@ -1,4 +1,5 @@
 import { BUFFER_RESO } from './constants';
+import { Blit } from '../../heck/components/Blit';
 import { BufferTextureRenderTarget } from '../../heck/BufferTextureRenderTarget';
 import { GLTextureFormatStuffR16F, GLTextureFormatStuffRGBA16F } from '../../gl/glSetTexture';
 import { GL_NEAREST, GL_ONE, GL_ONE_MINUS_SRC_ALPHA, GL_TEXTURE_2D } from '../../gl/constants';
@@ -49,14 +50,10 @@ export class Fluid extends SceneNode {
       new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffR16F ),
       new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffR16F ),
     );
-    const swapVelocity = new Swap(
+    const swapDensity = new Swap(
       new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffRGBA16F ),
       new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffRGBA16F ),
     );
-    const swapDensity = new Swap(
-      new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffR16F ),
-      new BufferTextureRenderTarget( BUFFER_RESO, BUFFER_RESO, 1, GLTextureFormatStuffR16F ),
-    );
 
     glTextureFilter( bufferCurl.texture, GL_NEAREST );
     glTextureFilter( bufferDivergence.texture, GL_NEAREST );
@@ -66,13 +63,11 @@ export class Fluid extends SceneNode {
       bufferDivergence.name = 'Fluid/bufferDivergence';
       swapPressure.i.name = 'Fluid/swapPressure/0';
       swapPressure.o.name = 'Fluid/swapPressure/1';
-      swapVelocity.i.name = 'Fluid/swapVelocity/0';
-      swapVelocity.o.name = 'Fluid/swapVelocity/1';
       swapDensity.i.name = 'Fluid/swapDensity/0';
       swapDensity.o.name = 'Fluid/swapDensity/1';
     }
 
-    // -- density ----------------------------------------------------------------------------------
+    // -- poke density -----------------------------------------------------------------------------
     const materialPokeDensity = new Material(
       quadVert,
       fluidPokeDensityFrag,
@@ -108,9 +103,9 @@ export class Fluid extends SceneNode {
       },
     );
     materialCurl.addUniformTextures(
-      'samplerVelocity',
+      'samplerDensity',
       GL_TEXTURE_2D,
-      swapVelocity.o.texture,
+      swapDensity.o.texture,
     );
 
     const quadCurl = new Quad( {
@@ -127,9 +122,9 @@ export class Fluid extends SceneNode {
       },
     );
     materialDivergence.addUniformTextures(
-      'samplerVelocity',
+      'samplerDensity',
       GL_TEXTURE_2D,
-      swapVelocity.o.texture,
+      swapDensity.o.texture,
     );
 
     const quadDivergence = new Quad( {
@@ -154,10 +149,10 @@ export class Fluid extends SceneNode {
 
     swapPressure.swap();
 
-    const quadPressures = arraySerial( 24 ).map( ( i ) => {
+    const quadPressures = arraySerial( 20 ).map( () => {
       const material = new Material(
         quadVert,
-        fluidPressureFrag( i === 0 ),
+        fluidPressureFrag,
         {
           initOptions: { geometry: quadGeometry, target: dummyRenderTarget1 },
         },
@@ -191,7 +186,6 @@ export class Fluid extends SceneNode {
         initOptions: { geometry: quadGeometry, target: dummyRenderTarget1 },
       },
     );
-    materialResolvePressure.addUniform( 'curl', '1f', 5.0 );
     materialResolvePressure.addUniformTextures(
       'samplerCurl',
       GL_TEXTURE_2D,
@@ -203,17 +197,17 @@ export class Fluid extends SceneNode {
       swapPressure.o.texture,
     );
     materialResolvePressure.addUniformTextures(
-      'samplerVelocity',
+      'samplerDensity',
       GL_TEXTURE_2D,
-      swapVelocity.o.texture,
+      swapDensity.o.texture,
     );
 
     const quadResolvePressure = new Quad( {
-      target: swapVelocity.i,
+      target: swapDensity.i,
       material: materialResolvePressure,
     } );
 
-    swapVelocity.swap();
+    swapDensity.swap();
 
     // -- advection --------------------------------------------------------------------------------
     const materialAdvectionVelocity = new Material(
@@ -223,47 +217,23 @@ export class Fluid extends SceneNode {
         initOptions: { geometry: quadGeometry, target: dummyRenderTarget1 },
       },
     );
-    materialAdvectionVelocity.addUniform( 'dissipation', '1f', 0.1 );
     materialAdvectionVelocity.addUniformTextures(
-      'samplerVelocity',
-      GL_TEXTURE_2D,
-      swapVelocity.o.texture,
-    );
-    materialAdvectionVelocity.addUniformTextures(
-      'samplerSource',
+      'samplerDensity',
       GL_TEXTURE_2D,
-      swapVelocity.o.texture,
+      swapDensity.o.texture,
     );
 
     const quadAdvectionVelocity = new Quad( {
-      target: swapVelocity.i,
+      target: swapDensity.i,
       material: materialAdvectionVelocity,
     } );
 
-    swapVelocity.swap();
-
-    const materialAdvectionDensity = new Material(
-      quadVert,
-      fluidAdvectionFrag,
-      {
-        initOptions: { geometry: quadGeometry, target: dummyRenderTarget1 },
-      },
-    );
-    materialAdvectionDensity.addUniform( 'dissipation', '1f', 1.0 );
-    materialAdvectionDensity.addUniformTextures(
-      'samplerVelocity',
-      GL_TEXTURE_2D,
-      swapVelocity.o.texture,
-    );
-    materialAdvectionDensity.addUniformTextures(
-      'samplerSource',
-      GL_TEXTURE_2D,
-      swapDensity.o.texture,
-    );
+    swapDensity.swap();
 
-    const quadAdvectionDensity = new Quad( {
-      target: swapDensity.i,
-      material: materialAdvectionDensity,
+    // -- blit back --------------------------------------------------------------------------------
+    const blitDensity = new Blit( {
+      src: swapDensity.o,
+      dst: swapDensity.i,
     } );
 
     swapDensity.swap();
@@ -284,11 +254,6 @@ export class Fluid extends SceneNode {
       GL_TEXTURE_2D,
       swapDensity.o.texture,
     );
-    forward.addUniformTextures(
-      'samplerVelocity',
-      GL_TEXTURE_2D,
-      swapVelocity.o.texture,
-    );
 
     const lambdaLightUniforms = createLightUniformsLambda( [ forward ] );
 
@@ -318,7 +283,7 @@ export class Fluid extends SceneNode {
       quadPressures.map( ( quad ) => quad.drawImmediate( { time, deltaTime } ) );
       quadResolvePressure.drawImmediate( { time, deltaTime } );
       quadAdvectionVelocity.drawImmediate( { time, deltaTime } );
-      quadAdvectionDensity.drawImmediate( { time, deltaTime } );
+      blitDensity.blitImmediate();
     } );
 
     // -- names ------------------------------------------------------------------------------------
@@ -330,7 +295,6 @@ export class Fluid extends SceneNode {
       quadPressures.map( ( quad, i ) => quad.name = `quadPressures${ i }` );
       quadResolvePressure.name = 'quadResolvePressure';
       quadAdvectionVelocity.name = 'quadAdvectionVelocity';
-      quadAdvectionDensity.name = 'quadAdvectionDensity';
       lambdaLightUniforms.name = 'lambdaLightUniforms';
       lambdaRaymarchCameraUniforms.name = 'lambdaRaymarchCameraUniforms';
       mesh.name = 'mesh';

src/nodes/FluidScene/FluidScene.ts

@@ -1,10 +1,18 @@
 import { CameraStack } from '../CameraStack/CameraStack';
 import { Fluid } from './Fluid';
 import { GL_TEXTURE_2D } from '../../gl/constants';
+import { Lambda } from '../../heck/components/Lambda';
+import { Material } from '../../heck/Material';
+import { Mesh } from '../../heck/components/Mesh';
 import { PointLightNode } from '../Lights/PointLightNode';
 import { SceneNode } from '../../heck/components/SceneNode';
 import { cameraStackATarget } from '../../globals/cameraStackTargets';
+import { dummyRenderTarget1 } from '../../globals/dummyRenderTarget';
+import { fluidFrameFrag } from './shaders/fluidFrameFrag';
+import { genWireCube } from '../../geometries/genWireCube';
 import { mainCameraStackResources } from '../CameraStack/mainCameraStackResources';
+import { objectVert } from '../../shaders/common/objectVert';
+import { quatRotationY, vec3ApplyQuaternion } from '@0b5vr/experimental';
 import { swapShadowMap1 } from '../../globals/swapShadowMap';
 
 export class FluidScene extends SceneNode {
@@ -38,17 +46,46 @@ export class FluidScene extends SceneNode {
     // == fluid ====================================================================================
     const fluid = new Fluid();
 
+    // == frame ====================================================================================
+    const geometryFrame = genWireCube( [ 0.5, 0.5, 0.5 ] );
+
+    const forwardFrame = new Material(
+      objectVert,
+      fluidFrameFrag,
+      {
+        initOptions: { geometry: geometryFrame, target: dummyRenderTarget1 },
+      }
+    );
+
+    const frame = new Mesh( {
+      geometry: geometryFrame,
+      materials: { forward: forwardFrame },
+    } );
+
+    if ( import.meta.env.DEV ) {
+      frame.name = 'frame';
+    }
+
     // == camera ===================================================================================
     const camera = new CameraStack( {
       scene,
       resources: mainCameraStackResources,
       target: cameraStackATarget,
     } );
-    camera.transform.lookAt(
-      [ 0.0, 0.0, 1.0 ],
-      [ 0.0, 0.0, 0.0 ],
-      0.0,
-    );
+
+    const lambdaSpeen = new Lambda( {
+      onUpdate: ( { time } ) => {
+        camera.transform.lookAt(
+          vec3ApplyQuaternion( [ 0.0, 0.1, 1.5 ], quatRotationY( 0.2 * time ) ),
+          [ 0.0, 0.0, 0.0 ],
+          0.0,
+        );
+      },
+    } );
+
+    if ( import.meta.env.DEV ) {
+      lambdaSpeen.name = 'speen';
+    }
 
     fluid.forward.addUniformTextures(
       'samplerDeferredPos',
@@ -60,7 +97,9 @@ export class FluidScene extends SceneNode {
     this.children = [
       lightF,
       lightR,
+      frame,
       fluid,
+      lambdaSpeen,
       camera,
     ];
   }

src/nodes/FluidScene/constants.ts

@@ -1,3 +1,4 @@
-export const GRID_RESO_SQRT = 12;
+export const GRID_RESO_SQRT = 10;
 export const GRID_RESO = GRID_RESO_SQRT * GRID_RESO_SQRT;
 export const BUFFER_RESO = GRID_RESO * GRID_RESO_SQRT;
+export const CURL = 4.0;

src/nodes/FluidScene/shaders/fluidAdvectionFrag.ts

@@ -1,4 +1,4 @@
-import { add, assign, build, def, defInNamed, defOut, defUniformNamed, div, insert, main, mul, sub, sw } from '../../../shaders/shaderBuilder';
+import { assign, build, def, defInNamed, defOut, defUniformNamed, exp, insert, main, mul, sub, sw, vec4 } from '../../../shaders/shaderBuilder';
 import { defFluidSampleLinear3D } from './defFluidSampleLinear3D';
 import { defFluidSampleNearest3D } from './defFluidSampleNearest3D';
 import { fluidClampToGrid } from './fluidClampToGrid';
@@ -12,22 +12,20 @@ export const fluidAdvectionFrag: string = build( () => {
   const fragColor = defOut( 'vec4' );
 
   const deltaTime = defUniformNamed( 'float', 'deltaTime' );
-  const dissipation = defUniformNamed( 'float', 'dissipation' );
-  const samplerVelocity = defUniformNamed( 'sampler2D', 'samplerVelocity' );
-  const samplerSource = defUniformNamed( 'sampler2D', 'samplerSource' );
+  const samplerDensity = defUniformNamed( 'sampler2D', 'samplerDensity' );
 
   const sampleNearest3D = defFluidSampleNearest3D();
   const sampleLinear3D = defFluidSampleLinear3D();
 
   main( () => {
     const pos = def( 'vec3', fluidUvToPos( vUv ) );
 
-    const vel = sw( sampleNearest3D( samplerVelocity, pos ), 'xyz' );
+    const vel = sw( sampleNearest3D( samplerDensity, pos ), 'xyz' );
     const samplePos = fluidClampToGrid( sub( pos, mul( deltaTime, vel ) ) );
-    const result = sampleLinear3D( samplerSource, samplePos );
+    const result = sampleLinear3D( samplerDensity, samplePos );
 
-    const decay = add( 1.0, mul( deltaTime, dissipation ) );
+    const decay = exp( mul( deltaTime, vec4( 0.0, 0.0, 0.0, -2.0 ) ) );
 
-    assign( fragColor, div( result, decay ) );
+    assign( fragColor, mul( result, decay ) );
   } );
 } );