Refactor & improve

src/pipelines/diffusion/diffuse.wgsl

@@ -1,58 +1,48 @@
 struct Settings {
-  size: vec2<f32>,
-  deltaTime: f32,
-  time: f32,
-  
   diffusionRateTrails: f32,
   decayRateTrails: f32,
   diffusionRateBrush: f32,
   decayRateBrush: f32,
 };
 
-@group(0) @binding(0) var<uniform> settings: Settings;
-@group(0) @binding(1) var Sampler: sampler;
-@group(0) @binding(2) var trailMap: texture_2d<f32>;
-@group(0) @binding(3) var noiseMap: texture_2d<f32>;
+@group(1) @binding(0) var<uniform> settings: Settings;
+@group(1) @binding(1) var Sampler: sampler;
+@group(1) @binding(2) var trailMap: texture_2d<f32>;
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
   var current = textureSample(trailMap, Sampler, uv);
-  let noise = textureSample(noiseMap, Sampler, uv);
 
   let neighbours: vec4<f32> = (
-      textureSample(trailMap, Sampler, uv + vec2<f32>(0, 1) / settings.size)
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(0, -1) / settings.size)
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(-1, 0) / settings.size)
-    + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / settings.size)
+      textureSample(trailMap, Sampler, uv + vec2<f32>(0, 1) / state.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(0, -1) / state.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(-1, 0) / state.size)
+    + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / state.size)
   ) / 4;
 
 
-    var q = vec4<f32>(0);
+    var change = vec4<f32>(0);
     for (var x: i32 = -1; x <= 1; x++) {
       for (var y: i32 = -1; y <= 1; y++) {
         if (x != 0 || y != 0) {
           let offset = vec2(f32(x), f32(y));
-          let neighbour = textureSample(trailMap, Sampler, uv + offset / settings.size);
-          // let noise = textureSample(noiseMap, Sampler, uv + offset / settings.size * 0.5).r;
-          let noise = random(uv + offset / settings.size * 0.5);
+          let neighbour = textureSample(trailMap, Sampler, uv + offset / state.size);
+          let random = textureSample(noise, noiseSampler, uv + offset / state.size * 0.5).r;
+          
           let difference = neighbour - current;
-
-          q += vec4(
-            min(1.0, length(neighbour.rgb)) * pow(noise, settings.diffusionRateTrails) * difference.rgb,
-            min(1.0, length(neighbour.a)) * pow(noise, settings.diffusionRateBrush) * difference.a
+          change += vec4(
+            length(neighbour.rgb) * pow(random, settings.diffusionRateTrails) * difference.rgb,
+            min(1.0, length(neighbour.a)) * pow(random, settings.diffusionRateBrush) * difference.a
           );
         }
       }
     }
-    current += q / 4;
-
-  let noise1 = random(uv);
-
+    current += change / 4;
 
   let decayed = vec4(
     current.rgb,
     current.a
-  ) - vec4(vec3(settings.decayRateTrails), settings.decayRateBrush) * settings.deltaTime * ((noise1 - 0.5) * 0.25 + 1);
+  ) - vec4(vec3(settings.decayRateTrails), settings.decayRateBrush) * state.deltaTime;
  
   return clamp(decayed, vec4(0), vec4(1));
 }

src/pipelines/diffusion/diffusion-pipeline.ts

@@ -1,41 +1,39 @@
 import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad/full-screen-quad';
-import { generateNoise } from '../../utils/graphics/noise/noise';
-import random from '../../utils/graphics/random.wgsl';
 import { smartCompile } from '../../utils/graphics/smart-compile';
-import { CommonParameters } from '../common-parameters';
+import { CommonState } from '../common-state/common-state';
 import shader from './diffuse.wgsl';
 import { DiffusionSettings } from './diffusion-settings';
 
 export class DiffusionPipeline {
-  private static readonly UNIFORM_COUNT = 18;
+  private static readonly UNIFORM_COUNT = 4;
 
+  private readonly bindGroupLayout: GPUBindGroupLayout;
   private readonly pipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly quadVertexBuffer: GPUBuffer;
   private readonly noise: GPUTextureView;
 
   private bindGroup?: GPUBindGroup;
-  private previousTrailMapIn?: GPUTexture;
+  private previousTrailMapIn?: GPUTextureView;
 
-  public constructor(private readonly device: GPUDevice) {
-    this.noise = generateNoise({
-      device,
-      width: 256,
-      height: 256,
-      octaves: 8,
-      amplitude: 0.12,
-      gain: 0.7,
-      lacunarity: 80,
-    });
+  public constructor(
+    private readonly device: GPUDevice,
+    private readonly commonState: CommonState
+  ) {
+    this.bindGroupLayout = device.createBindGroupLayout(
+      DiffusionPipeline.bindGroupLayout
+    );
 
     const { buffer, vertex } = setUpFullScreenQuad(device);
     this.quadVertexBuffer = buffer;
 
     this.pipeline = device.createRenderPipeline({
-      layout: 'auto',
+      layout: device.createPipelineLayout({
+        bindGroupLayouts: [commonState.bindGroupLayout, this.bindGroupLayout],
+      }),
       vertex,
       fragment: {
-        module: smartCompile(device, random, shader),
+        module: smartCompile(device, CommonState.shaderCode, shader),
         entryPoint: 'fragment',
         targets: [
           {
@@ -55,22 +53,15 @@ export class DiffusionPipeline {
   }
 
   public setParameters({
-    canvasSize,
-    deltaTime,
-    time,
     diffusionRateTrails,
     decayRateTrails,
     diffusionRateBrush,
     decayRateBrush,
-  }: CommonParameters & DiffusionSettings) {
+  }: DiffusionSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
       new Float32Array([
-        canvasSize[0],
-        canvasSize[1],
-        deltaTime,
-        time,
         diffusionRateTrails,
         decayRateTrails,
         diffusionRateBrush,
@@ -81,16 +72,16 @@ export class DiffusionPipeline {
 
   public execute(
     commandEncoder: GPUCommandEncoder,
-    trailMapIn: GPUTexture,
-    trailMapOut: GPUTexture
+    trailMapIn: GPUTextureView,
+    trailMapOut: GPUTextureView
   ) {
     this.ensureBindGroupExists(trailMapIn);
 
     const renderPassDescriptor: GPURenderPassDescriptor = {
       colorAttachments: [
         {
-          view: trailMapOut.createView(),
-          clearValue: { r: 1.0, g: 1.0, b: 1.0, a: 1.0 },
+          view: trailMapOut,
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
           loadOp: 'clear',
           storeOp: 'store',
         },
@@ -100,15 +91,16 @@ export class DiffusionPipeline {
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
     passEncoder.setPipeline(this.pipeline);
     passEncoder.setVertexBuffer(0, this.quadVertexBuffer);
-    passEncoder.setBindGroup(0, this.bindGroup);
+    this.commonState.execute(passEncoder);
+    passEncoder.setBindGroup(1, this.bindGroup);
     passEncoder.draw(4, 1);
     passEncoder.end();
   }
 
-  private ensureBindGroupExists(trailMapIn: GPUTexture) {
+  private ensureBindGroupExists(trailMapIn: GPUTextureView) {
     if (this.previousTrailMapIn !== trailMapIn) {
       this.bindGroup = this.device.createBindGroup({
-        layout: this.pipeline.getBindGroupLayout(0),
+        layout: this.bindGroupLayout,
         entries: [
           {
             binding: 0,
@@ -125,11 +117,7 @@ export class DiffusionPipeline {
           },
           {
             binding: 2,
-            resource: trailMapIn.createView(),
-          },
-          {
-            binding: 3,
-            resource: this.noise,
+            resource: trailMapIn,
           },
         ],
       });
@@ -142,4 +130,32 @@ export class DiffusionPipeline {
     this.quadVertexBuffer.destroy();
     this.uniforms.destroy();
   }
+
+  private static get bindGroupLayout(): GPUBindGroupLayoutDescriptor {
+    return {
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: {
+            type: 'uniform',
+          },
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: {
+            type: 'filtering',
+          },
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'float',
+          },
+        },
+      ],
+    };
+  }
 }