Refactor and improve brush

src/pipelines/agents/agent-pipeline.ts

@@ -1,3 +1,4 @@
+import { smartCompile } from '../../utils/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import { AGENT_SIZE_IN_BYTES, Agent } from './agent';
 import { AgentSettings } from './agent-settings';
@@ -23,9 +24,7 @@ export class AgentPipeline {
     this.pipeline = device.createComputePipeline({
       layout: 'auto',
       compute: {
-        module: device.createShaderModule({
-          code: shader,
-        }),
+        module: smartCompile(device, shader),
         entryPoint: 'main',
       },
     });

src/pipelines/brush/brush-pipeline.ts

@@ -1,3 +1,5 @@
+import { generateNoise } from '../../utils/graphics/noise/noise';
+import { smartCompile } from '../../utils/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import { BrushSettings } from './brush-settings';
 import shader from './brush.wgsl';
@@ -5,22 +7,34 @@ import shader from './brush.wgsl';
 import { vec2 } from 'gl-matrix';
 
 export class BrushPipeline {
-  private static readonly UNIFORM_COUNT = 4;
+  private static readonly UNIFORM_COUNT = 9;
   private static readonly MAX_LINE_COUNT = 100;
   private static readonly VERTICES_PER_LINE_SEGMENT = 6;
+  private static readonly ATTRIBUTES_PER_LINE_SEGMENT = 6;
 
   private readonly pipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly vertexBuffer: GPUBuffer;
-  private readonly linePoints: Array<vec2> = [];
+  private readonly noise: GPUTexture;
+  private linePoints: Array<vec2> = [];
+  private previousPoints: Array<vec2> = [];
+  private nextPoint: vec2 | null = null;
   private bindGroup: GPUBindGroup;
 
   public constructor(private readonly device: GPUDevice) {
+    this.noise = generateNoise({
+      device,
+      octaves: 4,
+      amplitude: 0.7,
+      gain: 0.6,
+      lacunarity: 4,
+    });
+
     this.vertexBuffer = device.createBuffer({
       size:
         BrushPipeline.MAX_LINE_COUNT *
         BrushPipeline.VERTICES_PER_LINE_SEGMENT *
-        2 *
+        BrushPipeline.ATTRIBUTES_PER_LINE_SEGMENT *
         Float32Array.BYTES_PER_ELEMENT,
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     });
@@ -28,31 +42,45 @@ export class BrushPipeline {
     this.pipeline = device.createRenderPipeline({
       layout: 'auto',
       vertex: {
-        module: device.createShaderModule({
-          code: shader,
-        }),
+        module: smartCompile(device, shader),
         entryPoint: 'vertex',
         buffers: [
           {
-            arrayStride: Float32Array.BYTES_PER_ELEMENT * 2,
+            arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
             attributes: [
               {
                 shaderLocation: 0,
                 format: 'float32x2',
                 offset: 0,
               },
+              {
+                shaderLocation: 1,
+                format: 'float32x2',
+                offset: Float32Array.BYTES_PER_ELEMENT * 2,
+              },
+              {
+                shaderLocation: 2,
+                format: 'float32x2',
+                offset: Float32Array.BYTES_PER_ELEMENT * 4,
+              },
             ],
           },
         ],
       },
       fragment: {
-        module: device.createShaderModule({
-          code: shader,
-        }),
+        module: smartCompile(device, shader),
         entryPoint: 'fragment',
         targets: [
           {
             format: 'rgba16float',
+            blend: {
+              color: {
+                operation: 'max',
+                srcFactor: 'one',
+                dstFactor: 'one',
+              },
+              alpha: {},
+            },
           },
         ],
       },
@@ -75,29 +103,75 @@ export class BrushPipeline {
             buffer: this.uniforms,
           },
         },
+        {
+          binding: 1,
+          resource: this.device.createSampler({
+            magFilter: 'linear',
+            minFilter: 'linear',
+          }),
+        },
+        {
+          binding: 2,
+          resource: this.noise.createView(),
+        },
       ],
     });
   }
 
   public addSwipe(position: vec2) {
-    this.linePoints.push(position);
+    this.nextPoint = position;
+    // this.linePoints.push(position);
   }
 
   public clearSwipes() {
     this.linePoints.length = 0;
+    this.previousPoints.length = 0;
+    this.nextPoint = null;
   }
 
   public setParameters({
     canvasSize,
     deltaTime,
     time,
+    brushWidth,
+    brushBlurWidth,
   }: CommonParameters & BrushSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
-      new Float32Array([canvasSize[0], canvasSize[1], deltaTime, time])
+      new Float32Array([...canvasSize, deltaTime, time, brushWidth / 2, brushBlurWidth])
     );
 
+    // this.linePoints = [
+    //   vec2.fromValues(0.1, 0.1),
+    //   vec2.fromValues(0.8, 0.2),
+    //   vec2.fromValues(0.75, 0.8),
+    //   vec2.fromValues(0.1, 0.4),
+    // ].map((v) => vec2.multiply(v, v, canvasSize));
+
+    if (this.nextPoint == null) {
+      return;
+    }
+    this.previousPoints.push(this.nextPoint);
+    if (this.previousPoints.length < 3) {
+      return;
+    }
+
+    this.linePoints = [];
+    for (let t = 0; t < 1; t += 1 / BrushPipeline.MAX_LINE_COUNT) {
+      this.linePoints.push(
+        catmullRomInterpolation(
+          this.previousPoints[0],
+          this.previousPoints[1],
+          this.previousPoints[2],
+          this.nextPoint,
+          t
+        )
+      );
+    }
+
+    this.previousPoints.splice(0, this.previousPoints.length - 3);
+
     this.device.queue.writeBuffer(
       this.vertexBuffer,
       0,
@@ -105,8 +179,8 @@ export class BrushPipeline {
         new Array(this.lineCount).fill(0).flatMap((_, i) => {
           const from = this.linePoints[i];
           const to = this.linePoints[i + 1];
-          const [a, b, c, d] = this.lineToRectangle(from, to, 0.01);
-          return [...a, ...b, ...c, ...b, ...c, ...d];
+          const [a, b, c, d] = this.getSegmentBoundingBox(from, to, brushWidth / 2);
+          return [a, b, c, b, c, d].flatMap((v) => [...v, ...from, ...to]);
         })
       )
     );
@@ -116,16 +190,23 @@ export class BrushPipeline {
     return Math.max(0, this.linePoints.length - 1);
   }
 
-  private lineToRectangle(from: vec2, to: vec2, width: number): [vec2, vec2, vec2, vec2] {
+  private getSegmentBoundingBox(from: vec2, to: vec2, width: number): Array<vec2> {
     const dir = vec2.sub(vec2.create(), to, from);
+    vec2.normalize(dir, dir);
+
     const perp = vec2.fromValues(dir[1], -dir[0]);
-    vec2.normalize(perp, perp);
-    vec2.scale(perp, perp, width / 2);
+
+    vec2.scale(dir, dir, width);
+    vec2.scale(perp, perp, width);
+
+    const offsetStart = vec2.sub(vec2.create(), from, dir);
+    const offsetEnd = vec2.add(vec2.create(), to, dir);
+
     return [
-      vec2.add(vec2.create(), from, perp),
-      vec2.sub(vec2.create(), from, perp),
-      vec2.add(vec2.create(), to, perp),
-      vec2.sub(vec2.create(), to, perp),
+      vec2.add(vec2.create(), offsetStart, perp),
+      vec2.sub(vec2.create(), offsetStart, perp),
+      vec2.add(vec2.create(), offsetEnd, perp),
+      vec2.sub(vec2.create(), offsetEnd, perp),
     ];
   }
 
@@ -134,7 +215,6 @@ export class BrushPipeline {
       colorAttachments: [
         {
           view: trailMapOut.createView(),
-          clearValue: { r: 1.0, g: 1.0, b: 1.0, a: 1.0 },
           loadOp: 'load',
           storeOp: 'store',
         },
@@ -145,9 +225,36 @@ export class BrushPipeline {
     passEncoder.setPipeline(this.pipeline);
     passEncoder.setBindGroup(0, this.bindGroup);
     passEncoder.setVertexBuffer(0, this.vertexBuffer);
-    passEncoder.draw(this.lineCount * BrushPipeline.VERTICES_PER_LINE_SEGMENT, 1);
+    passEncoder.draw(BrushPipeline.VERTICES_PER_LINE_SEGMENT * this.lineCount, 1);
     passEncoder.end();
 
-    this.linePoints.splice(0, this.linePoints.length - 1); // clear the array
+    this.linePoints.splice(0, this.linePoints.length - 1);
   }
 }
+
+const catmullRomInterpolation = (
+  p0: vec2,
+  p1: vec2,
+  p2: vec2,
+  p3: vec2,
+  t: number
+): vec2 => {
+  const t2 = t * t;
+  const t3 = t2 * t;
+
+  const x =
+    0.5 *
+    (2 * p1[0] +
+      (-p0[0] + p2[0]) * t +
+      (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 +
+      (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3);
+
+  const y =
+    0.5 *
+    (2 * p1[1] +
+      (-p0[1] + p2[1]) * t +
+      (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 +
+      (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3);
+
+  return [x, y];
+};

src/pipelines/brush/brush-settings.ts

@@ -1 +1,4 @@
-export interface BrushSettings {}
+export interface BrushSettings {
+  brushWidth: number;
+  brushBlurWidth: number;
+}

src/pipelines/brush/brush.wgsl

@@ -1,25 +1,49 @@
+struct Settings {
+  size : vec2<f32>,
+  deltaTime : f32,
+  time : f32,
+  brushWidth: f32,
+  brushBlurWidth: f32
+};
+
+@group(0) @binding(0) var<uniform> settings : Settings;
+@group(0) @binding(1) var Sampler: sampler;
+@group(0) @binding(2) var noise : texture_2d<f32>;
+
 struct VertexOutput {
   @builtin(position) position : vec4<f32>,
-  @location(0) uv : vec2<f32>
+  @location(0) screenPosition : vec2<f32>,
+  @location(1) start : vec2<f32>,
+  @location(2) end : vec2<f32>
 }
 
 @vertex
 fn vertex(
-  @location(0) uv : vec2<f32>
+  @location(0) screenPosition : vec2<f32>,
+  @location(1) @interpolate(flat) start : vec2<f32>,
+  @location(2) @interpolate(flat) end : vec2<f32>
 ) -> VertexOutput {
+  let uv = screenPosition / settings.size;
   let position = uv * 2.0 - 1.0;
-  return VertexOutput(vec4(position, 0.0, 1.0), uv);
+  return VertexOutput(vec4(position, 0.0, 1.0), screenPosition, start, end);
 }
 
-struct Settings {
-  size : vec2<f32>,
-  deltaTime : f32,
-  time : f32
-};
-
-@group(0) @binding(0) var<uniform> settings : Settings;
-
 @fragment
-fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  return vec4(1, settings.size.x  * 0, 0, 1);
+fn fragment(
+  @location(0) screenPosition: vec2<f32>,
+  @location(1) start: vec2<f32>,
+  @location(2) end: vec2<f32>
+) -> @location(0) vec4<f32> {
+    let pa = (screenPosition - start);
+    let direction = (end - start);
+    let q = clamp(dot(pa, direction) / dot(direction, direction), 0, 1);
+    let noise = textureSample(noise, Sampler, screenPosition / settings.size);
+
+    let distance = length(pa - direction * q) + noise.r * 5;
+
+    if(distance > settings.brushWidth) {
+      discard;
+    }
+
+    return vec4(clamp((settings.brushWidth - distance) / settings.brushBlurWidth, 0, 1));
 }

src/pipelines/diffusion/diffuse.wgsl

@@ -5,8 +5,6 @@ struct Settings {
   
   diffusionRate : f32,
   decayRate : f32,
-  swipeRadius : f32,
-  swipeBlur : f32,
 };
 
 @group(0) @binding(0) var<uniform> settings : Settings;
@@ -24,9 +22,11 @@ fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
     + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / settings.size)
   );
 
-  return mix(
+  let mixed = mix(
     current,
     neighbours / 4.0,
     settings.diffusionRate
   ) * (1.0 - settings.decayRate);
+
+  return clamp(mixed, vec4(0), vec4(1));
 }

src/pipelines/diffusion/diffusion-pipeline.ts

@@ -1,4 +1,5 @@
-import { setUpFullScreenQuad } from '../../utils/full-screen-quad';
+import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad/full-screen-quad';
+import { smartCompile } from '../../utils/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import shader from './diffuse.wgsl';
 import { DiffusionSettings } from './diffusion-settings';
@@ -21,9 +22,7 @@ export class DiffusionPipeline {
       layout: 'auto',
       vertex,
       fragment: {
-        module: device.createShaderModule({
-          code: shader,
-        }),
+        module: smartCompile(device, shader),
         entryPoint: 'fragment',
         targets: [
           {
@@ -48,8 +47,6 @@ export class DiffusionPipeline {
     time,
     diffusionRate,
     decayRate,
-    swipeRadius,
-    swipeBlur,
   }: CommonParameters & DiffusionSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
@@ -61,8 +58,6 @@ export class DiffusionPipeline {
         time,
         diffusionRate,
         decayRate,
-        swipeRadius,
-        swipeBlur,
       ])
     );
   }

src/pipelines/diffusion/diffusion-settings.ts

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

src/pipelines/render/render-pipeline.ts

@@ -1,4 +1,5 @@
-import { setUpFullScreenQuad } from '../../utils/full-screen-quad';
+import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad/full-screen-quad';
+import { smartCompile } from '../../utils/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import { RenderSettings } from './render-settings';
 import shader from './render.wgsl';
@@ -15,8 +16,7 @@ export class RenderPipeline {
 
   public constructor(
     private readonly context: GPUCanvasContext,
-    private readonly device: GPUDevice,
-    preferredCanvasFormat: GPUTextureFormat
+    private readonly device: GPUDevice
   ) {
     const { buffer, vertex } = setUpFullScreenQuad(device);
     this.quadVertexBuffer = buffer;
@@ -25,13 +25,11 @@ export class RenderPipeline {
       layout: 'auto',
       vertex,
       fragment: {
-        module: device.createShaderModule({
-          code: shader,
-        }),
+        module: smartCompile(device, shader),
         entryPoint: 'fragment',
         targets: [
           {
-            format: preferredCanvasFormat,
+            format: navigator.gpu.getPreferredCanvasFormat(),
           },
         ],
       },
@@ -54,7 +52,7 @@ export class RenderPipeline {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
-      new Float32Array([canvasSize[0], canvasSize[1], deltaTime, time])
+      new Float32Array([...canvasSize, deltaTime, time])
     );
   }
 

src/pipelines/render/render.wgsl

@@ -10,5 +10,6 @@ struct Settings {
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  return vec4(textureSample(TargetTexture, mySampler, uv).r * 1.0, settings.deltaTime * 0.0, 0.0, 1.0);
+  return vec4(textureSample(TargetTexture, mySampler, uv).rgb, 1.0);
+  return vec4(0, settings.deltaTime * 0.0, 0.0, 1.0);
 }