Refactor & improve

src/game-loop/game-loop.ts

@@ -1,17 +1,20 @@
-import { Agent } from '../pipelines/agents/agent';
 import { AgentPipeline } from '../pipelines/agents/agent-pipeline';
 import { BrushPipeline } from '../pipelines/brush/brush-pipeline';
+import { CommonState } from '../pipelines/common-state/common-state';
+import { CopyPipeline } from '../pipelines/copy/copy-pipeline';
 import { DiffusionPipeline } from '../pipelines/diffusion/diffusion-pipeline';
 import { RenderPipeline } from '../pipelines/render/render-pipeline';
 import { settings } from '../settings';
 import { DeltaTimeCalculator } from '../utils/delta-time-calculator';
-import { Random } from '../utils/random';
+import { spawnAgents } from './spawn-agents';
 
 import { vec2 } from 'gl-matrix';
 
 export default class GameLoop {
   private readonly deltaTimeCalculator = new DeltaTimeCalculator();
 
+  private readonly commonState: CommonState;
+  private readonly copyPipeline: CopyPipeline;
   private readonly agentPipeline: AgentPipeline;
   private readonly renderPipeline: RenderPipeline;
   private readonly brushPipeline: BrushPipeline;
@@ -19,6 +22,8 @@ export default class GameLoop {
 
   private trailMapA?: GPUTexture;
   private trailMapB?: GPUTexture;
+  private trailMapAView?: GPUTextureView;
+  private trailMapBView?: GPUTextureView;
 
   private hasFinished = false;
   private readonly hasFinishedPromise: Promise<void> = new Promise(
@@ -41,10 +46,16 @@ export default class GameLoop {
 
     this.resize();
 
-    this.agentPipeline = new AgentPipeline(this.device, this.spawnAgents());
-    this.brushPipeline = new BrushPipeline(this.device);
-    this.diffusionPipeline = new DiffusionPipeline(this.device);
-    this.renderPipeline = new RenderPipeline(context, this.device);
+    this.commonState = new CommonState(this.device);
+    this.copyPipeline = new CopyPipeline(this.device);
+    this.agentPipeline = new AgentPipeline(
+      this.device,
+      spawnAgents(this.canvasSize, settings.agentCount),
+      this.commonState
+    );
+    this.brushPipeline = new BrushPipeline(this.device, this.commonState);
+    this.diffusionPipeline = new DiffusionPipeline(this.device, this.commonState);
+    this.renderPipeline = new RenderPipeline(context, this.device, this.commonState);
 
     window.addEventListener('resize', this.resize.bind(this));
     window.addEventListener('mousemove', this.onSwipe.bind(this));
@@ -73,33 +84,6 @@ export default class GameLoop {
     );
   }
 
-  private spawnAgents(): Array<Agent> {
-    const minSize = Math.min(this.canvas.width, this.canvas.height);
-    const ratio = Math.max(this.canvas.width, this.canvas.height) / minSize;
-    const size = vec2.fromValues(
-      this.canvas.width / minSize,
-      this.canvas.height / minSize
-    );
-    vec2.normalize(size, size);
-    return new Array(settings.agentCount).fill(0).map(() => {
-      const radius = Random.randomBetween(0, settings.startingRadius / ratio);
-      const angle = Random.randomBetween(0, Math.PI * 2);
-      const center = vec2.fromValues(0.5, 0.5);
-
-      const delta = vec2.fromValues(Math.cos(angle) * radius, Math.sin(angle) * radius);
-      vec2.divide(delta, delta, size);
-
-      const position = vec2.add(vec2.create(), center, delta);
-
-      return {
-        position,
-        angle: angle + Math.PI,
-        species: 0,
-        timeToLive: Random.randomBetween(10, 15000),
-      };
-    });
-  }
-
   private resize() {
     const devicePixelRatio = window.devicePixelRatio || 1;
     this.canvas.width = this.canvas.clientWidth * devicePixelRatio;
@@ -107,19 +91,23 @@ export default class GameLoop {
 
     this.trailMapA?.destroy();
     this.trailMapA = this.createTrailMap();
+    this.trailMapAView = this.trailMapA.createView();
 
     this.trailMapB?.destroy();
     this.trailMapB = this.createTrailMap();
+    this.trailMapBView = this.trailMapB.createView();
   }
 
   private createTrailMap(): GPUTexture {
     return this.device.createTexture({
+      format: 'rgba16float',
+      dimension: '2d',
+      mipLevelCount: 1,
       size: {
         width: this.canvas.width,
         height: this.canvas.height,
         depthOrArrayLayers: 1,
       },
-      format: 'rgba16float',
       usage:
         GPUTextureUsage.STORAGE_BINDING |
         GPUTextureUsage.TEXTURE_BINDING |
@@ -134,28 +122,27 @@ export default class GameLoop {
 
     const deltaTime = this.deltaTimeCalculator.calculateDeltaTimeInSeconds(time);
 
-    const params = {
-      canvasSize: vec2.fromValues(this.canvas.width, this.canvas.height),
-      time,
-      deltaTime,
-      ...settings,
-    };
+    this.commonState.setParameters(this.canvasSize, deltaTime, time);
 
     [
       this.agentPipeline,
       this.brushPipeline,
       this.diffusionPipeline,
       this.renderPipeline,
-    ].forEach((pipeline) => pipeline.setParameters(params));
+    ].forEach((pipeline) => pipeline.setParameters(settings));
 
     const commandEncoder = this.device.createCommandEncoder();
 
     for (let i = 0; i < settings.renderSpeed; i++) {
-      this.agentPipeline.execute(commandEncoder, this.trailMapA, this.trailMapB);
-      this.brushPipeline.execute(commandEncoder, this.trailMapB);
-      this.diffusionPipeline.execute(commandEncoder, this.trailMapB, this.trailMapA);
-      this.renderPipeline.execute(commandEncoder, this.trailMapA);
-      [this.trailMapA, this.trailMapB] = [this.trailMapB, this.trailMapA];
+      this.copyPipeline.execute(commandEncoder, this.trailMapAView, this.trailMapBView);
+      this.brushPipeline.execute(commandEncoder, this.trailMapBView);
+      this.agentPipeline.execute(commandEncoder, this.trailMapAView, this.trailMapBView);
+      this.diffusionPipeline.execute(
+        commandEncoder,
+        this.trailMapBView,
+        this.trailMapAView
+      );
+      this.renderPipeline.execute(commandEncoder, this.trailMapAView);
     }
 
     this.device.queue.submit([commandEncoder.finish()]);
@@ -167,14 +154,20 @@ export default class GameLoop {
   public destroy() {
     this.hasFinished = true;
 
+    this.copyPipeline?.destroy();
     this.agentPipeline?.destroy();
     this.brushPipeline?.destroy();
     this.diffusionPipeline?.destroy();
     this.renderPipeline?.destroy();
+    this.commonState?.destroy();
 
     this.trailMapA?.destroy();
     this.trailMapB?.destroy();
 
     this.resolveHasFinished();
   }
+
+  private get canvasSize(): vec2 {
+    return vec2.fromValues(this.canvas.width, this.canvas.height);
+  }
 }

src/game-loop/spawn-agents.ts

@@ -0,0 +1,29 @@
+import { Agent } from '../pipelines/agents/agent';
+import { settings } from '../settings';
+import { Random } from '../utils/random';
+
+import { vec2 } from 'gl-matrix';
+
+export const spawnAgents = (canvasSize: vec2, agentCount: number): Array<Agent> => {
+  const minSize = Math.min(...canvasSize);
+  const ratio = Math.max(...canvasSize) / minSize;
+  const size = vec2.scale(vec2.create(), canvasSize, 1 / minSize);
+  vec2.normalize(size, size);
+  return new Array(agentCount).fill(0).map(() => {
+    const radius = Random.randomBetween(0, settings.startingRadius / ratio);
+    const angle = Random.randomBetween(0, Math.PI * 2);
+    const center = vec2.fromValues(0.5, 0.5);
+
+    const delta = vec2.fromValues(Math.cos(angle) * radius, Math.sin(angle) * radius);
+    vec2.divide(delta, delta, size);
+
+    const position = vec2.add(vec2.create(), center, delta);
+
+    return {
+      position,
+      angle: angle + Math.PI,
+      species: 0,
+      timeToLive: Random.randomBetween(10, 15000),
+    };
+  });
+};