WIP

src/pipelines/render/render-pipeline.ts

@@ -1,5 +1,7 @@
-import { vec3 } from 'gl-matrix';
-
+import {
+  createCachedFloat32BufferWrite,
+  writeFloat32BufferIfChanged,
+} from '../../utils/graphics/cached-buffer-write';
 import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad';
 import { smartCompile } from '../../utils/graphics/smart-compile';
 import { CommonState } from '../common-state/common-state';
@@ -7,15 +9,23 @@ import { RenderSettings } from './render-settings';
 import shader from './render.wgsl?raw';
 
 export class RenderPipeline {
-  private static readonly UNIFORM_COUNT = 13;
+  private static readonly UNIFORM_COUNT = 20;
 
   private readonly bindGroupLayout: GPUBindGroupLayout;
-  private readonly pipeline: GPURenderPipeline;
+  private readonly canvasPipeline: GPURenderPipeline;
+  private readonly exportPipeline: GPURenderPipeline;
+  private readonly sampler: GPUSampler;
   private readonly uniforms: GPUBuffer;
+  private readonly uniformValues = new Float32Array(RenderPipeline.UNIFORM_COUNT);
+  private readonly uniformCache = createCachedFloat32BufferWrite(
+    RenderPipeline.UNIFORM_COUNT
+  );
   private readonly vertexBuffer: GPUBuffer;
 
-  private bindGroup?: GPUBindGroup;
-  private previousColorTexture?: GPUTextureView;
+  private readonly bindGroupsByTexture = new WeakMap<
+    GPUTextureView,
+    WeakMap<GPUTextureView, GPUBindGroup>
+  >();
 
   public constructor(
     private readonly context: GPUCanvasContext,
@@ -27,104 +37,179 @@ export class RenderPipeline {
     const { buffer, vertex } = setUpFullScreenQuad(device);
     this.vertexBuffer = buffer;
 
-    this.pipeline = device.createRenderPipeline({
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [commonState.bindGroupLayout, this.bindGroupLayout],
-      }),
-      vertex,
-      fragment: {
-        module: smartCompile(device, CommonState.shaderCode, shader),
-        entryPoint: 'fragment',
-        targets: [
-          {
-            format: navigator.gpu.getPreferredCanvasFormat(),
-          },
-        ],
-      },
-      primitive: {
-        topology: 'triangle-strip',
-      },
+    this.sampler = device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
     });
 
+    const format = navigator.gpu.getPreferredCanvasFormat();
+    this.canvasPipeline = this.createPipeline(format, vertex);
+    this.exportPipeline = this.createPipeline(format, vertex);
+
     this.uniforms = this.device.createBuffer({
       size: RenderPipeline.UNIFORM_COUNT * Float32Array.BYTES_PER_ELEMENT,
       usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
   }
 
+  private createPipeline(
+    format: GPUTextureFormat,
+    vertex: GPUVertexState
+  ): GPURenderPipeline {
+    return this.device.createRenderPipeline({
+      layout: this.device.createPipelineLayout({
+        bindGroupLayouts: [this.commonState.bindGroupLayout, this.bindGroupLayout],
+      }),
+      vertex,
+      fragment: {
+        module: smartCompile(this.device, CommonState.shaderCode, shader),
+        entryPoint: 'fragment',
+        targets: [
+          {
+            format,
+          },
+        ],
+      },
+      primitive: {
+        topology: 'triangle-strip',
+      },
+    });
+  }
+
   public setParameters({
-    brushColor,
-    evenGenerationColor,
-    oddGenerationColor,
+    channelColors,
+    backgroundColor,
+    cameraCenter,
+    cameraZoom,
     clarity,
   }: RenderSettings & {
-    brushColor: vec3;
-    evenGenerationColor: vec3;
-    oddGenerationColor: vec3;
+    channelColors: Array<[number, number, number]>;
+    backgroundColor: [number, number, number];
+    cameraCenter: [number, number];
+    cameraZoom: number;
   }) {
-    this.device.queue.writeBuffer(
+    const [a, b, c] = channelColors;
+    this.uniformValues[0] = a[0];
+    this.uniformValues[1] = a[1];
+    this.uniformValues[2] = a[2];
+    this.uniformValues[3] = 0;
+    this.uniformValues[4] = b[0];
+    this.uniformValues[5] = b[1];
+    this.uniformValues[6] = b[2];
+    this.uniformValues[7] = 0;
+    this.uniformValues[8] = c[0];
+    this.uniformValues[9] = c[1];
+    this.uniformValues[10] = c[2];
+    this.uniformValues[11] = 0;
+    this.uniformValues[12] = backgroundColor[0];
+    this.uniformValues[13] = backgroundColor[1];
+    this.uniformValues[14] = backgroundColor[2];
+    this.uniformValues[15] = clarity;
+    this.uniformValues[16] = cameraCenter[0];
+    this.uniformValues[17] = cameraCenter[1];
+    this.uniformValues[18] = cameraZoom;
+    this.uniformValues[19] = 0;
+    writeFloat32BufferIfChanged(
+      this.device,
       this.uniforms,
-      0,
-      new Float32Array([
-        ...brushColor,
-        0, //padding
-        ...evenGenerationColor,
-        0, //padding
-        ...oddGenerationColor,
-        clarity,
-      ])
+      this.uniformValues,
+      this.uniformCache
     );
   }
 
-  public execute(commandEncoder: GPUCommandEncoder, colorTexture: GPUTextureView) {
-    this.ensureBindGroupExists(colorTexture);
+  public execute(
+    commandEncoder: GPUCommandEncoder,
+    colorTexture: GPUTextureView,
+    sourceTexture: GPUTextureView
+  ) {
+    const bindGroup = this.getBindGroup(colorTexture, sourceTexture);
 
     const renderPassDescriptor: GPURenderPassDescriptor = {
       colorAttachments: [
         {
           view: this.context.getCurrentTexture().createView(),
-          clearValue: { r: 0, g: 1, b: 1, a: 1 },
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
           loadOp: 'clear',
           storeOp: 'store',
         },
       ],
     };
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-    passEncoder.setPipeline(this.pipeline);
+    passEncoder.setPipeline(this.canvasPipeline);
     this.commonState.execute(passEncoder);
     passEncoder.setVertexBuffer(0, this.vertexBuffer);
-    passEncoder.setBindGroup(1, this.bindGroup);
+    passEncoder.setBindGroup(1, bindGroup);
     passEncoder.draw(4, 1);
     passEncoder.end();
   }
 
-  private ensureBindGroupExists(colorTexture: GPUTextureView) {
-    if (this.previousColorTexture !== colorTexture) {
-      this.bindGroup = this.device.createBindGroup({
-        layout: this.bindGroupLayout,
-        entries: [
-          {
-            binding: 0,
-            resource: {
-              buffer: this.uniforms,
-            },
-          },
-          {
-            binding: 1,
-            resource: this.device.createSampler({
-              magFilter: 'linear',
-              minFilter: 'linear',
-            }),
-          },
-          {
-            binding: 2,
-            resource: colorTexture,
-          },
-        ],
-      });
+  public executeToView(
+    commandEncoder: GPUCommandEncoder,
+    colorTexture: GPUTextureView,
+    sourceTexture: GPUTextureView,
+    outputTexture: GPUTextureView
+  ) {
+    const bindGroup = this.getBindGroup(colorTexture, sourceTexture);
 
-      this.previousColorTexture = colorTexture;
+    const passEncoder = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: outputTexture,
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    });
+    passEncoder.setPipeline(this.exportPipeline);
+    this.commonState.execute(passEncoder);
+    passEncoder.setVertexBuffer(0, this.vertexBuffer);
+    passEncoder.setBindGroup(1, bindGroup);
+    passEncoder.draw(4, 1);
+    passEncoder.end();
+  }
+
+  private getBindGroup(
+    colorTexture: GPUTextureView,
+    sourceTexture: GPUTextureView
+  ): GPUBindGroup {
+    let sourceTextureCache = this.bindGroupsByTexture.get(colorTexture);
+    if (!sourceTextureCache) {
+      sourceTextureCache = new WeakMap<GPUTextureView, GPUBindGroup>();
+      this.bindGroupsByTexture.set(colorTexture, sourceTextureCache);
     }
+
+    const cached = sourceTextureCache.get(sourceTexture);
+    if (cached) {
+      return cached;
+    }
+
+    const bindGroup = this.device.createBindGroup({
+      layout: this.bindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: {
+            buffer: this.uniforms,
+          },
+        },
+        {
+          binding: 1,
+          resource: this.sampler,
+        },
+        {
+          binding: 2,
+          resource: colorTexture,
+        },
+        {
+          binding: 3,
+          resource: sourceTexture,
+        },
+      ],
+    });
+
+    sourceTextureCache.set(sourceTexture, bindGroup);
+    return bindGroup;
   }
 
   public destroy() {
@@ -156,6 +241,13 @@ export class RenderPipeline {
             sampleType: 'float',
           },
         },
+        {
+          binding: 3,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'float',
+          },
+        },
       ],
     };
   }