Add differentiated rendering

src/pipelines/render/render-pipeline.ts

@@ -5,7 +5,7 @@ import { RenderSettings } from './render-settings';
 import shader from './render.wgsl';
 
 export class RenderPipeline {
-  private static readonly UNIFORM_COUNT = 4;
+  private static readonly UNIFORM_COUNT = 16;
 
   private readonly pipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
@@ -48,11 +48,24 @@ export class RenderPipeline {
     canvasSize,
     deltaTime,
     time,
+    brushColor,
+    speciesColorA,
+    speciesColorB,
   }: CommonParameters & RenderSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
-      new Float32Array([...canvasSize, deltaTime, time])
+      new Float32Array([
+        ...canvasSize,
+        deltaTime,
+        time,
+        ...brushColor,
+        0, //padding
+        ...speciesColorA,
+        0, //padding
+        ...speciesColorB,
+        0, //padding
+      ])
     );
   }
 

src/pipelines/render/render-settings.ts

@@ -1 +1,7 @@
-export interface RenderSettings {}
+import { vec3 } from 'gl-matrix';
+
+export interface RenderSettings {
+  brushColor: vec3;
+  speciesColorA: vec3;
+  speciesColorB: vec3;
+}

src/pipelines/render/render.wgsl

@@ -2,6 +2,9 @@ struct Settings {
   size: vec2<f32>,
   deltaTime: f32,
   time: f32,
+  brushColor: vec3<f32>,
+  speciesColorA: vec3<f32>,
+  speciesColorB: vec3<f32>,
 };
 
 @group(0) @binding(0) var<uniform> settings: Settings;
@@ -10,6 +13,15 @@ struct Settings {
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
-  return vec4(textureSample(TargetTexture, mySampler, uv).rgb, 1.0);
-  return vec4(0, settings.deltaTime * 0.0, 0.0, 1.0);
+  let traces = textureSample(TargetTexture, mySampler, uv);
+
+  let speciesAStrength = traces.r;
+  let speciesBStrength = traces.g;
+  let brushStrength = traces.a;
+  return vec4(
+    settings.speciesColorA * speciesAStrength +
+    settings.speciesColorB * speciesBStrength +
+    settings.brushColor * brushStrength,
+    1
+  );
 }