Refactor

src/pipelines/agents/agent-pipeline.ts

@@ -1,4 +1,6 @@
+import { CommonParameters } from '../common-parameters';
 import { AGENT_SIZE_IN_BYTES, Agent } from './agent';
+import { AgentSettings } from './agent-settings';
 import shader from './agent.wgsl';
 
 export class AgentPipeline {
@@ -54,34 +56,24 @@ export class AgentPipeline {
   }
 
   public setParameters({
-    width,
-    height,
-    trailWeight,
+    canvasSize,
     deltaTime,
     time,
+    trailWeight,
     moveSpeed,
     turnSpeed,
     sensorAngleDegrees,
     sensorOffsetDst,
-  }: {
-    width: number;
-    height: number;
-    trailWeight: number;
-    deltaTime: number;
-    time: number;
-    moveSpeed: number;
-    turnSpeed: number;
-    sensorAngleDegrees: number;
-    sensorOffsetDst: number;
-  }) {
+  }: CommonParameters & AgentSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
       new Float32Array([
-        width,
-        height,
-        trailWeight,
+        canvasSize[0],
+        canvasSize[1],
+        deltaTime,
         time,
+        trailWeight,
         moveSpeed * deltaTime,
         turnSpeed * deltaTime,
         (sensorAngleDegrees * Math.PI) / 180,

src/pipelines/agents/agent-settings.ts

@@ -0,0 +1,7 @@
+export interface AgentSettings {
+  trailWeight: number;
+  moveSpeed: number;
+  turnSpeed: number;
+  sensorAngleDegrees: number;
+  sensorOffsetDst: number;
+}

src/pipelines/agents/agent.wgsl

@@ -5,12 +5,12 @@ struct Agent {
 
 struct Settings {
   size: vec2<f32>,
-  trailWeight : f32,
+  deltaTime : f32,
   time : f32,
 
+  trailWeight : f32,
   moveRate : f32,
   turnRate : f32,
-
   sensorAngle : f32,
   sensorOffsetDst : f32,
 };

src/pipelines/brush/brush-pipeline.ts

@@ -1,9 +1,11 @@
+import { CommonParameters } from '../common-parameters';
+import { BrushSettings } from './brush-settings';
 import shader from './brush.wgsl';
 
 import { vec2 } from 'gl-matrix';
 
 export class BrushPipeline {
-  private static readonly UNIFORM_COUNT = 2;
+  private static readonly UNIFORM_COUNT = 4;
   private static readonly MAX_LINE_COUNT = 100;
   private static readonly VERTICES_PER_LINE_SEGMENT = 6;
 
@@ -85,8 +87,16 @@ export class BrushPipeline {
     this.linePoints.length = 0;
   }
 
-  public setParameters({ width, height }: { width: number; height: number }) {
-    this.device.queue.writeBuffer(this.uniforms, 0, new Float32Array([width, height]));
+  public setParameters({
+    canvasSize,
+    deltaTime,
+    time,
+  }: CommonParameters & BrushSettings) {
+    this.device.queue.writeBuffer(
+      this.uniforms,
+      0,
+      new Float32Array([canvasSize[0], canvasSize[1], deltaTime, time])
+    );
 
     this.device.queue.writeBuffer(
       this.vertexBuffer,

src/pipelines/brush/brush-settings.ts

@@ -0,0 +1 @@
+export interface BrushSettings {}

src/pipelines/brush/brush.wgsl

@@ -12,7 +12,9 @@ fn vertex(
 }
 
 struct Settings {
-  size : vec2<f32>
+  size : vec2<f32>,
+  deltaTime : f32,
+  time : f32
 };
 
 @group(0) @binding(0) var<uniform> settings : Settings;

src/pipelines/common-parameters.ts

@@ -0,0 +1,7 @@
+import { vec2 } from 'gl-matrix';
+
+export interface CommonParameters {
+  canvasSize: vec2;
+  deltaTime: number;
+  time: number;
+}

src/pipelines/diffusion/diffuse.wgsl

@@ -1,9 +1,10 @@
 struct Settings {
   size : vec2<f32>,
-  diffusionRate : f32,
-  decayRate : f32,
   deltaTime : f32,
   time : f32,
+  
+  diffusionRate : f32,
+  decayRate : f32,
   swipeRadius : f32,
   swipeBlur : f32,
 };

src/pipelines/diffusion/diffusion-pipeline.ts

@@ -1,5 +1,7 @@
 import { setUpFullScreenQuad } from '../../utils/full-screen-quad';
+import { CommonParameters } from '../common-parameters';
 import shader from './diffuse.wgsl';
+import { DiffusionSettings } from './diffusion-settings';
 
 export class DiffusionPipeline {
   private static readonly UNIFORM_COUNT = 16;
@@ -41,34 +43,24 @@ export class DiffusionPipeline {
   }
 
   public setParameters({
-    width,
-    height,
-    diffusionRate,
-    decayRate,
+    canvasSize,
     deltaTime,
     time,
+    diffusionRate,
+    decayRate,
     swipeRadius,
     swipeBlur,
-  }: {
-    width: number;
-    height: number;
-    diffusionRate: number;
-    decayRate: number;
-    deltaTime: number;
-    time: number;
-    swipeRadius: number;
-    swipeBlur: number;
-  }) {
+  }: CommonParameters & DiffusionSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
       new Float32Array([
-        width,
-        height,
-        diffusionRate,
-        decayRate,
+        canvasSize[0],
+        canvasSize[1],
         deltaTime,
         time,
+        diffusionRate,
+        decayRate,
         swipeRadius,
         swipeBlur,
       ])

src/pipelines/diffusion/diffusion-settings.ts

@@ -0,0 +1,6 @@
+export interface DiffusionSettings {
+  diffusionRate: number;
+  decayRate: number;
+  swipeRadius: number;
+  swipeBlur: number;
+}

src/pipelines/render/render-pipeline.ts

@@ -1,8 +1,13 @@
 import { setUpFullScreenQuad } from '../../utils/full-screen-quad';
+import { CommonParameters } from '../common-parameters';
+import { RenderSettings } from './render-settings';
 import shader from './render.wgsl';
 
 export class RenderPipeline {
+  private static readonly UNIFORM_COUNT = 4;
+
   private readonly pipeline: GPURenderPipeline;
+  private readonly uniforms: GPUBuffer;
   private readonly quadVertexBuffer: GPUBuffer;
 
   private bindGroup?: GPUBindGroup;
@@ -34,6 +39,23 @@ export class RenderPipeline {
         topology: 'triangle-strip',
       },
     });
+
+    this.uniforms = this.device.createBuffer({
+      size: RenderPipeline.UNIFORM_COUNT * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+
+  public setParameters({
+    canvasSize,
+    deltaTime,
+    time,
+  }: CommonParameters & RenderSettings) {
+    this.device.queue.writeBuffer(
+      this.uniforms,
+      0,
+      new Float32Array([canvasSize[0], canvasSize[1], deltaTime, time])
+    );
   }
 
   public execute(commandEncoder: GPUCommandEncoder, colorTexture: GPUTexture) {
@@ -64,13 +86,19 @@ export class RenderPipeline {
         entries: [
           {
             binding: 0,
+            resource: {
+              buffer: this.uniforms,
+            },
+          },
+          {
+            binding: 1,
             resource: this.device.createSampler({
               magFilter: 'linear',
               minFilter: 'linear',
             }),
           },
           {
-            binding: 1,
+            binding: 2,
             resource: colorTexture.createView(),
           },
         ],

src/pipelines/render/render-settings.ts

@@ -0,0 +1 @@
+export interface RenderSettings {}

src/pipelines/render/render.wgsl

@@ -1,8 +1,14 @@
-@group(0) @binding(0) var mySampler: sampler;
-@group(0) @binding(1) var TargetTexture : texture_2d<f32>;
+struct Settings {
+  size : vec2<f32>,
+  deltaTime : f32,
+  time : f32,
+};
 
+@group(0) @binding(0) var<uniform> settings : Settings;
+@group(0) @binding(1) var mySampler: sampler;
+@group(0) @binding(2) var TargetTexture : texture_2d<f32>;
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  return vec4(textureSample(TargetTexture, mySampler, uv).rgb * 1.0, 1);
+  return vec4(textureSample(TargetTexture, mySampler, uv).r * 1.0, settings.deltaTime * 0.0, 0.0, 1.0);
 }