Optimise

src/pipelines/render/render-pipeline.ts

@@ -1,7 +1,7 @@
 import { createBindGroupCache } from '../../utils/graphics/bind-group-cache';
 import {
-  createCachedFloat32BufferWrite,
-  writeFloat32BufferIfChanged,
+  createCachedBufferWrite,
+  writeBufferIfChanged,
 } from '../../utils/graphics/cached-buffer-write';
 import { setUpFullScreenQuad } from '../../utils/graphics/full-screen-quad';
 import { smartCompile } from '../../utils/graphics/smart-compile';
@@ -14,22 +14,21 @@ export interface RenderSettings {
   renderTraceNormalizationFloor: number;
   renderBrushColorBase: number;
   renderBrushColorStrengthMultiplier: number;
-  backgroundGrainStrength: number;
 }
 
-// 3 channel colors (vec3 + f32 padding) + bg color (vec3) + 5 scalars = 20 floats.
+// 3 channel colors (vec3 + f32 padding) + bg color (vec3) + 4 scalars,
+// rounded up to 20 floats for 16-byte uniform alignment.
 const UNIFORM_COUNT = 20;
 
 export class RenderPipeline {
   private readonly bindGroupLayout: GPUBindGroupLayout;
   private readonly pipeline: GPURenderPipeline;
   private readonly noSourcePipeline: GPURenderPipeline;
-  private readonly noGrainPipeline: GPURenderPipeline;
-  private readonly noSourceNoGrainPipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly uniformValues = new Float32Array(UNIFORM_COUNT);
-  private readonly uniformCache = createCachedFloat32BufferWrite(UNIFORM_COUNT);
-  private useBackgroundGrain = true;
+  private readonly uniformCache = createCachedBufferWrite(
+    UNIFORM_COUNT * Float32Array.BYTES_PER_ELEMENT
+  );
 
   private readonly getBindGroup = createBindGroupCache<GPUTextureView, GPUTextureView>(
     (colorTexture, sourceTexture) =>
@@ -46,7 +45,8 @@ export class RenderPipeline {
   public constructor(
     private readonly context: GPUCanvasContext,
     private readonly device: GPUDevice,
-    private readonly commonState: CommonState
+    private readonly commonState: CommonState,
+    private readonly canvasFormat: GPUTextureFormat
   ) {
     this.bindGroupLayout = device.createBindGroupLayout({
       entries: [
@@ -70,7 +70,6 @@ export class RenderPipeline {
 
     const shaderModule = smartCompile(device, CommonState.shaderCode, shader);
     const vertex = setUpFullScreenQuad(device);
-    const format = navigator.gpu.getPreferredCanvasFormat();
     const pipelineLayout = device.createPipelineLayout({
       bindGroupLayouts: [this.commonState.bindGroupLayout, this.bindGroupLayout],
     });
@@ -78,30 +77,16 @@ export class RenderPipeline {
       pipelineLayout,
       vertex,
       shaderModule,
-      format,
+      this.canvasFormat,
       'fragment'
     );
     this.noSourcePipeline = this.createPipeline(
       pipelineLayout,
       vertex,
       shaderModule,
-      format,
+      this.canvasFormat,
       'fragmentNoSource'
     );
-    this.noGrainPipeline = this.createPipeline(
-      pipelineLayout,
-      vertex,
-      shaderModule,
-      format,
-      'fragmentNoGrain'
-    );
-    this.noSourceNoGrainPipeline = this.createPipeline(
-      pipelineLayout,
-      vertex,
-      shaderModule,
-      format,
-      'fragmentNoSourceNoGrain'
-    );
 
     this.uniforms = device.createBuffer({
       size: UNIFORM_COUNT * Float32Array.BYTES_PER_ELEMENT,
@@ -135,7 +120,6 @@ export class RenderPipeline {
     renderTraceNormalizationFloor,
     renderBrushColorBase,
     renderBrushColorStrengthMultiplier,
-    backgroundGrainStrength,
   }: RenderSettings & {
     channelColors: [RgbColor, RgbColor, RgbColor];
     backgroundColor: RgbColor;
@@ -158,9 +142,7 @@ export class RenderPipeline {
     this.uniformValues[16] = renderTraceNormalizationFloor;
     this.uniformValues[17] = renderBrushColorBase;
     this.uniformValues[18] = renderBrushColorStrengthMultiplier;
-    this.uniformValues[19] = backgroundGrainStrength;
-    this.useBackgroundGrain = backgroundGrainStrength !== 0;
-    writeFloat32BufferIfChanged(
+    writeBufferIfChanged(
       this.device,
       this.uniforms,
       this.uniformValues,
@@ -232,10 +214,7 @@ export class RenderPipeline {
   }
 
   private getPipeline(useSourceTexture: boolean): GPURenderPipeline {
-    if (useSourceTexture) {
-      return this.useBackgroundGrain ? this.pipeline : this.noGrainPipeline;
-    }
-    return this.useBackgroundGrain ? this.noSourcePipeline : this.noSourceNoGrainPipeline;
+    return useSourceTexture ? this.pipeline : this.noSourcePipeline;
   }
 
   public destroy() {