Multiple improvements

package.json

@@ -7,7 +7,7 @@
   "devDependencies": {
     "@webgpu/types": "^0.1",
     "copyfiles": "^2.4",
-    "esbuild": "^0.19",
+    "esbuild": "^0.23",
     "typescript": "^5"
   },
   "scripts": {

src/scripts/GPURenderRunner.ts

@@ -27,7 +27,7 @@ export class GPURenderRunner implements GPURunner {
     async Init() {
         await this.runner.Init()
         let renderInfo = this.runner.getRenderInfo()
-        this.render = new Render(renderInfo.textures, ...renderInfo.fragmentShaderFilenames)
+        this.render = new Render(renderInfo.textures,[], ...renderInfo.fragmentShaderFilenames)
         await this.render.Init()
     }
 

src/scripts/RunGPURunner.ts

@@ -126,10 +126,9 @@ async function HandleAsyncAnimation(runner: GPURunner) {
             GPU.device.queue.onSubmittedWorkDone().then(() => queuePartFinished())
         }
         // fill the queue
-        queuePartFinished().then(r => {
-        })
-        queuePartFinished().then(r => {
-        })
+        const noop = () => {};
+        queuePartFinished().then(noop)
+        queuePartFinished().then(noop)
 
         let renderFinished = true
         let frame = async () => {

src/scripts/fluid/advect/advect.ts

@@ -77,6 +77,11 @@ export class Advect {
         });
     }
 
+    public async Destroy() {
+        this.velocitydest.destroy();
+    }
+
+
     GetCommandBuffer(): GPUCommandBuffer {
 
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();

src/scripts/fluid/div/div.ts

@@ -70,6 +70,11 @@ export class Div {
         });
     }
 
+    public async Destroy() {
+        this.div.destroy();
+    }
+
+
     GetCommandBuffer() : GPUCommandBuffer {
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();
         {

src/scripts/fluid/fluid.ts

@@ -31,8 +31,6 @@ export class Fluid extends GPUAbstractRunner {
     public getType(): RunnerType {
         return RunnerType.ASYNCANIM
     }
-    public async Destroy() {
-    }
 
     n: number;
     m: number;
@@ -109,6 +107,19 @@ export class Fluid extends GPUAbstractRunner {
         //await GPU.Render(poisson.pressurea);
     }
 
+    public async Destroy() {
+        await this.project.Destroy()
+        await this.poisson.Destroy()
+        await this.div.Destroy()
+        await this.transport.Destroy()
+        await this.advect.Destroy()
+        await this.source.Destroy()
+        this.velocity.destroy()
+        this.density.destroy()
+        this.flags.destroy()
+    }
+
+
     async Run() {
 
         GPU.device.queue.submit([
@@ -141,12 +152,12 @@ export class Fluid extends GPUAbstractRunner {
                 vel[(j * this.width + i) * 4 + 1] = toHalf(x * 0.03);
             }
  */
+
         for (let j = 200; j < this.height-200; j++)
             for (let i = 200; i < this.width-200; i++) {
-                vel[(j * this.width + i) * 4 + 0] = toHalf(0.3);
+                vel[(j * this.width + i) * 4 + 0] = toHalf(0.);
                 vel[(j * this.width + i) * 4 + 1] = toHalf(0.);
             }
-
         this.velocity = await GPU.CreateTextureFromArrayBuffer(this.width, this.height, "rgba16float", vel.buffer);
     }
 
@@ -157,8 +168,10 @@ export class Fluid extends GPUAbstractRunner {
             for (let i = 0; i < this.width; i++) {
                 let x: number = i - 256;
                 let y: number = j - 256;
-                density[(j * this.width + i) * 4 + 0] = toHalf(Math.exp(-(x * x + y * y) * 0.001));
-                density[(j * this.width + i) * 4 + 3] = toHalf(1.0);
+                //density[(j * this.width + i) * 4 + 0] = toHalf(Math.exp(-(x * x + y * y) * 0.001));
+                // density[(j * this.width + i) * 4 + 3] = toHalf(1.0);
+                density[(j * this.width + i) * 4 + 0] = toHalf(0.);
+                density[(j * this.width + i) * 4 + 3] = toHalf(0.);
             }
         this.density = await GPU.CreateTextureFromArrayBuffer(this.width, this.height, "rgba16float", density.buffer);
     }
@@ -167,8 +180,8 @@ export class Fluid extends GPUAbstractRunner {
         let flags = new Uint32Array(this.width * this.height*4);
 
         const F   = 0x0001   // is Fluid
-        const B_u = 0x0002   /* obstacle cells adjacent to fluid cells */
-        const B_d = 0x0004   /* in the respective direction            */
+        const B_u = 0x0002   // obstacle cells adjacent to fluid cells
+        const B_d = 0x0004   // in the respective direction
         const B_l = 0x0008
         const B_r = 0x0010
 
@@ -180,7 +193,7 @@ export class Fluid extends GPUAbstractRunner {
         // is fluid
         for (let j = 1; j < this.height-1; j++)
             for (let i = 1; i < this.width-1; i++) {
-                flags[(j * this.width + i)*4] = 1; // is fluid
+                flags[(j * this.width + i)*4] = F; // is fluid
             }
 
         for (let i = 1; i < this.width - 1; i++) {

src/scripts/fluid/poisson/poisson.ts

@@ -177,6 +177,11 @@ export class Poisson {
         });
     }
 
+    public async Destroy() {
+        this.pressurea.destroy();
+        this.pressureb.destroy();
+    }
+
     GetCommandBuffer() : GPUCommandBuffer {
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();
 

src/scripts/fluid/project/project.ts

@@ -79,6 +79,10 @@ export class Project {
         });
     }
 
+    public async Destroy() {
+        this.velocitydest.destroy();
+    }
+
     GetCommandBuffer() : GPUCommandBuffer {
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();
         {

src/scripts/fluid/source/source.ts

@@ -1,5 +1,6 @@
 import {GPU} from "../../webgpu/gpu";
 import {Texture} from "../../webgpu/texture";
+import {Buffer} from "../../webgpu/buffer";
 
 export class Source {
     width: number;
@@ -16,6 +17,9 @@ export class Source {
     pipeline_layout: GPUPipelineLayout;
     compute_pipeline: GPUComputePipeline;
 
+    stagingBuffer: Buffer
+    stagingData: Float32Array
+
     constructor(velocity: Texture, density: Texture, flags: Texture) {
         this.velocitysrc = velocity;
         this.densitysrc = density;
@@ -30,6 +34,9 @@ export class Source {
         this.velocitydest = GPU.CreateTexture(this.velocitysrc.width, this.velocitysrc.height, this.velocitysrc.format);
         this.densitydest = GPU.CreateTexture(this.densitysrc.width, this.densitysrc.height, this.densitysrc.format);
 
+        this.stagingBuffer = GPU.CreateUniformBuffer(4 * 4) // must be a multiple of 16 bytes
+        this.stagingData = new Float32Array(4)
+
         this.bind_group_layout = GPU.device.createBindGroupLayout({
             entries: [{
                 binding: 0,
@@ -51,6 +58,10 @@ export class Source {
                 binding: 4,
                 texture: {sampleType: "sint"},
                 visibility: GPUShaderStage.COMPUTE
+            }, {
+                binding: 5,
+                buffer: {type: "uniform", minBindingSize: 4 * 4},
+                visibility: GPUShaderStage.COMPUTE
             }]
         });
 
@@ -71,6 +82,9 @@ export class Source {
             }, {
                 binding: 4,
                 resource: this.flags.textureView
+            }, {
+                binding: 5,
+                resource: this.stagingBuffer.resource
             }]
         });
 
@@ -84,7 +98,17 @@ export class Source {
         });
     }
 
+    public async Destroy() {
+        this.velocitydest.destroy();
+        this.densitydest.destroy();
+    }
+
     GetCommandBuffer(): GPUCommandBuffer {
+        this.stagingData[0] = GPU.mouseCoordinate.x; // set iMouseX
+        this.stagingData[1] = GPU.mouseCoordinate.y; // set iMouseY
+        this.stagingData[2] = GPU.mouseCoordinate.wheel;
+        this.stagingData[3] += 1.; // increase iFrame
+        GPU.device.queue.writeBuffer(this.stagingBuffer.buffer, 0, this.stagingData)
 
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();
         {

src/scripts/fluid/source/source.wgsl

@@ -1,14 +1,29 @@
+struct StagingBuffer {
+    iMouse: vec2f,
+    wheel: f32,
+    iFrame: f32
+};
+
 @group(0) @binding(0) var velocity_src: texture_2d<f32>;
 @group(0) @binding(1) var velocity_dest: texture_storage_2d<rgba16float, write>;
 @group(0) @binding(2) var density_src: texture_2d<f32>;
 @group(0) @binding(3) var density_dest: texture_storage_2d<rgba16float, write>;
 @group(0) @binding(4) var flags: texture_2d<i32>;
+@group(0) @binding(5) var<uniform> staging: StagingBuffer;
+
+var<private> mouse_pos = vec2<f32>(0.);
+var<private> mouse_wheel: f32 = 0.;
 
-@compute @workgroup_size(2, 2)
+fn sphere(p: vec2<f32>, r: f32) -> f32 {
+    return length(p) - r;
+}
+
+@compute @workgroup_size(8, 8)
 fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
     var dims = vec2<i32>(textureDimensions(velocity_src));
     let pixel_coords = vec2<i32>(global_id.xy);
 
+
     var v = textureLoad(velocity_src, pixel_coords, 0);
     var d = textureLoad(density_src, pixel_coords, 0);
 
@@ -25,10 +40,24 @@ fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
         }
     }
 
+    //mouse_pos = ((staging.iMouse.xy / vec2<f32>(dims.xy))*2.0 - 1.0) * vec2f(1., 1.);
+    mouse_pos = staging.iMouse.xy;
+    mouse_wheel = staging.wheel;
+
+    //let dist = sphere(vec2<f32>(pixel_coords) - mouse_pos, (-mouse_wheel*0.005+0.05));
+    let dist = sphere(vec2<f32>(pixel_coords) - mouse_pos, -10.*mouse_wheel + 10.);
+    if (dist < 0) {
+        //v = vec4<f32>(0.0);
+        v *= 0.5;
+        d = vec4<f32>(1.0, 0., 0., 1.);
+    }
+
+/*
     if (((pixel_coords.x > 250)) && (pixel_coords.x < 260) && ((pixel_coords.y > 250)) && (pixel_coords.y < 260)) {
         v = vec4<f32>(0.0);
+        d = vec4<f32>(1.0, 0., 0., 0.);
     }
-
+*/
     textureStore(velocity_dest, pixel_coords, v);
     textureStore(density_dest, pixel_coords, d);
 }

src/scripts/fluid/transport/transport.ts

@@ -104,6 +104,10 @@ export class Transport {
         });
     }
 
+    public async Destroy() {
+        this.textureb.destroy();
+    }
+
     GetCommandBuffer() : GPUCommandBuffer {
         let encoder: GPUCommandEncoder = GPU.CreateCommandEncoder();
         {

src/scripts/light/light.ts

@@ -70,6 +70,7 @@ export class LightPropagation extends GPUAbstractRunner {
         console.log("Create Render")
         this.render = new Render(
             [this.textureDest, this.scene.emitter],
+            [],
             "scripts/light/common.wgsl", "scripts/light/distance.wgsl", "scripts/light/aces-tone-mapping.wgsl")
         await this.render.Init()
 

src/scripts/light2/light.ts

@@ -74,6 +74,7 @@ export class LightPropagation2 extends GPUAbstractRunner {
         console.log("Create Render")
         this.render = new Render(
             [this.textureSrc, this.scene.emitter],
+            [],
             "scripts/light2/common.wgsl", "scripts/light2/aces-tone-mapping.wgsl")
         await this.render.Init()