Improve rendering

src/pipelines/agents/agent-pipeline.ts

@@ -1,4 +1,5 @@
-import { smartCompile } from '../../utils/webgpu/smart-compile';
+import random from '../../utils/graphics/random.wgsl';
+import { smartCompile } from '../../utils/graphics/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import { AGENT_SIZE_IN_BYTES, Agent } from './agent';
 import { AgentSettings } from './agent-settings';
@@ -24,7 +25,7 @@ export class AgentPipeline {
     this.pipeline = device.createComputePipeline({
       layout: 'auto',
       compute: {
-        module: smartCompile(device, shader),
+        module: smartCompile(device, random, shader),
         entryPoint: 'main',
       },
     });
@@ -57,7 +58,7 @@ export class AgentPipeline {
     canvasSize,
     deltaTime,
     time,
-    trailWeight,
+    brushTrailWeight,
     moveSpeed,
     turnSpeed,
     sensorAngleDegrees,
@@ -71,7 +72,7 @@ export class AgentPipeline {
         canvasSize[1],
         deltaTime,
         time,
-        trailWeight,
+        brushTrailWeight,
         moveSpeed * deltaTime,
         turnSpeed * deltaTime,
         (sensorAngleDegrees * Math.PI) / 180,

src/pipelines/agents/agent-settings.ts

@@ -1,5 +1,5 @@
 export interface AgentSettings {
-  trailWeight: number;
+  brushTrailWeight: number;
   moveSpeed: number;
   turnSpeed: number;
   sensorAngleDegrees: number;

src/pipelines/agents/agent.wgsl

@@ -10,7 +10,7 @@ struct Settings {
   deltaTime: f32,
   time: f32,
 
-  trailWeight: f32,
+  brushTrailWeight: f32,
   moveRate: f32,
   turnRate: f32,
   sensorAngle: f32,
@@ -33,16 +33,18 @@ fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
   var agent = agents[id];
 
   if (agent.timeToLive <= 0.) {
-    agent.position = vec2(random(id + u32(settings.time * 10 + agent.position.x * 10000)),
-      random(id + u32(settings.time * 10 + agent.position.y * 10000)));
-    agent.angle = random(id + u32(settings.time)) * 3.14159265359 * 2.;
+    agent.position = vec2(
+      random_with_seed(agent.position, f32(id) + settings.time),
+      random_with_seed(agent.position, f32(id) + settings.time + 12),
+    );
+    agent.angle = random_with_seed(vec2(agent.angle), f32(id) + settings.time);
     agent.species = 1;
     agent.timeToLive = 1000;
     agents[id] = agent;
     return;
   }
 
-  let random = random(id + u32(settings.time * 10000 + agent.position.y * 10 + agent.position.x));
+  let random = random_with_seed(agent.position, f32(id) + settings.time);
 
   let trailCurrent = sense(agent, 0, 0);
   var weight: f32;
@@ -60,9 +62,9 @@ fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
   let trailLeft = sense(agent, settings.sensorOffset, settings.sensorAngle);
   let trailRight = sense(agent, settings.sensorOffset, -settings.sensorAngle);
 
-  var weightForward: f32 = trailForward.a;
-  var weightLeft: f32 = trailLeft.a;
-  var weightRight: f32 = trailRight.a;
+  var weightForward: f32 = trailForward.a * settings.brushTrailWeight;
+  var weightLeft: f32 = trailLeft.a * settings.brushTrailWeight;
+  var weightRight: f32 = trailRight.a * settings.brushTrailWeight;
   if (agent.species == 0) {
     weightForward += trailForward.r - trailForward.g;
     weightLeft += trailLeft.r - trailLeft.g;
@@ -107,13 +109,4 @@ fn sense(agent: Agent, sensorOffset: f32, sensorOffsetAngle: f32) -> vec4<f32> {
   return textureLoad(TrailMapIn, vec2<i32>(sensorPos * settings.size), 0); 
 }
 
-fn random(state0: u32) -> f32 {
-  var state: u32 = state0;
-  state = state ^ 2747636419u;
-  state = state * 2654435769u;
-  state = state ^ (state >> 16u);
-  state = state * 2654435769u;
-  state = state ^ (state >> 16u);
-  state = state * 2654435769u;
-  return f32(state) / 4294967295.0;
-}
+

src/pipelines/brush/brush-pipeline.ts

@@ -1,5 +1,5 @@
 import { generateNoise } from '../../utils/graphics/noise/noise';
-import { smartCompile } from '../../utils/webgpu/smart-compile';
+import { smartCompile } from '../../utils/graphics/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import { BrushSettings } from './brush-settings';
 import shader from './brush.wgsl';
@@ -24,10 +24,12 @@ export class BrushPipeline {
   public constructor(private readonly device: GPUDevice) {
     this.noise = generateNoise({
       device,
-      octaves: 4,
-      amplitude: 0.7,
-      gain: 0.6,
-      lacunarity: 4,
+      width: 512,
+      height: 512,
+      octaves: 16,
+      amplitude: 0.5,
+      gain: 0.8,
+      lacunarity: 80,
     });
 
     this.vertexBuffer = device.createBuffer({
@@ -138,12 +140,18 @@ export class BrushPipeline {
     deltaTime,
     time,
     brushWidth,
-    brushBlurWidth,
+    brushWidthRandomness,
   }: CommonParameters & BrushSettings) {
     this.device.queue.writeBuffer(
       this.uniforms,
       0,
-      new Float32Array([...canvasSize, deltaTime, time, brushWidth / 2, brushBlurWidth])
+      new Float32Array([
+        ...canvasSize,
+        deltaTime,
+        time,
+        brushWidth / 2,
+        brushWidthRandomness,
+      ])
     );
 
     // this.linePoints = [

src/pipelines/brush/brush-settings.ts

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

src/pipelines/brush/brush.wgsl

@@ -3,7 +3,7 @@ struct Settings {
   deltaTime: f32,
   time: f32,
   brushWidth: f32,
-  brushBlurWidth: f32
+  brushWidthRandomness: f32
 };
 
 @group(0) @binding(0) var<uniform> settings: Settings;
@@ -34,17 +34,20 @@ fn fragment(
   @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);
+    var distance = distanceFromLine(screenPosition, start, end);
     let noise = textureSample(noise, Sampler, screenPosition / settings.size);
-
-    let distance = length(pa - direction * q) + noise.r * 5;
+    distance += noise.r * settings.brushWidthRandomness;
 
     if(distance > settings.brushWidth) {
       discard;
     }
 
-    let strength = clamp((settings.brushWidth - distance) / settings.brushBlurWidth, 0, 1);
-    return vec4(0, 0, 0, strength);
+    return vec4(0, 0, 0, 1);
+}
+
+fn distanceFromLine(position: vec2<f32>, start: vec2<f32>, end: vec2<f32>) -> f32 {
+  let pa = position - start;
+  let direction = end - start;
+  let q = clamp(dot(pa, direction) / dot(direction, direction), 0, 1);
+  return length(pa - direction * q);
 }

src/pipelines/diffusion/diffuse.wgsl

@@ -12,12 +12,12 @@ struct Settings {
 @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 noise: texture_2d<f32>;
+@group(0) @binding(3) var noiseMap: texture_2d<f32>;
 
 @fragment
 fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
   var current = textureSample(trailMap, Sampler, uv);
-  let noise = textureSample(noise, Sampler, uv);
+  let noise = textureSample(noiseMap, Sampler, uv);
 
   let neighbours: vec4<f32> = (
       textureSample(trailMap, Sampler, uv + vec2<f32>(0, 1) / settings.size)
@@ -26,17 +26,33 @@ fn fragment(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
     + textureSample(trailMap, Sampler, uv + vec2<f32>(1, 0) / settings.size)
   ) / 4;
 
-  let mixedTrails = mix(
+
+    var q = 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 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
+          );
+        }
+      }
+    }
+    current += q / 4;
+
+  let noise1 = random(uv);
+
+
+  let decayed = vec4(
     current.rgb,
-    neighbours.rgb,
-    settings.diffusionRateTrails
-  ) * (1.0 - settings.decayRateTrails);
-
-  let mixedBrush = mix(
-    current.a  + (noise.a - 0.5) * 0.1,
-    neighbours.a ,
-    settings.diffusionRateBrush
-  ) * (1.0 - settings.decayRateBrush);
-
-  return clamp(vec4(mixedTrails, mixedBrush), vec4(0), vec4(1));
+    current.a
+  ) - vec4(vec3(settings.decayRateTrails), settings.decayRateBrush) * settings.deltaTime * ((noise1 - 0.5) * 0.25 + 1);
+ 
+  return clamp(decayed, vec4(0), vec4(1));
 }

src/pipelines/diffusion/diffusion-pipeline.ts

@@ -1,6 +1,7 @@
 import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad/full-screen-quad';
 import { generateNoise } from '../../utils/graphics/noise/noise';
-import { smartCompile } from '../../utils/webgpu/smart-compile';
+import random from '../../utils/graphics/random.wgsl';
+import { smartCompile } from '../../utils/graphics/smart-compile';
 import { CommonParameters } from '../common-parameters';
 import shader from './diffuse.wgsl';
 import { DiffusionSettings } from './diffusion-settings';
@@ -34,7 +35,7 @@ export class DiffusionPipeline {
       layout: 'auto',
       vertex,
       fragment: {
-        module: smartCompile(device, shader),
+        module: smartCompile(device, random, shader),
         entryPoint: 'fragment',
         targets: [
           {

src/pipelines/render/render-pipeline.ts

@@ -1,5 +1,7 @@
 import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad/full-screen-quad';
-import { smartCompile } from '../../utils/webgpu/smart-compile';
+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 { RenderSettings } from './render-settings';
 import shader from './render.wgsl';
@@ -10,6 +12,7 @@ export class RenderPipeline {
   private readonly pipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly quadVertexBuffer: GPUBuffer;
+  private readonly noise: GPUTextureView;
 
   private bindGroup?: GPUBindGroup;
   private previousColorTexture?: GPUTexture;
@@ -18,6 +21,16 @@ export class RenderPipeline {
     private readonly context: GPUCanvasContext,
     private readonly device: GPUDevice
   ) {
+    this.noise = generateNoise({
+      device,
+      width: 512,
+      height: 512,
+      octaves: 16,
+      amplitude: 0.3,
+      gain: 0.8,
+      lacunarity: 80,
+    });
+
     const { buffer, vertex } = setUpFullScreenQuad(device);
     this.quadVertexBuffer = buffer;
 
@@ -25,7 +38,7 @@ export class RenderPipeline {
       layout: 'auto',
       vertex,
       fragment: {
-        module: smartCompile(device, shader),
+        module: smartCompile(device, random, shader),
         entryPoint: 'fragment',
         targets: [
           {
@@ -112,6 +125,10 @@ export class RenderPipeline {
             binding: 2,
             resource: colorTexture.createView(),
           },
+          {
+            binding: 3,
+            resource: this.noise,
+          },
         ],
       });