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() {

src/pipelines/render/render.wgsl

@@ -10,32 +10,14 @@ struct Settings {
   traceNormalizationFloor: f32,
   brushColorBase: f32,
   brushColorStrengthMultiplier: f32,
-  backgroundGrainStrength: f32,
 };
 
 @group(1) @binding(0) var<uniform> settings: Settings;
 @group(1) @binding(2) var trailMap: texture_2d<f32>;
 @group(1) @binding(3) var sourceMap: texture_2d<f32>;
 
-const NOISE_TEXTURE_MASK = 2047u;
-
 @fragment
 fn fragment(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
-  let pixel = vec2<i32>(position.xy);
-  let traces = textureLoad(trailMap, pixel, 0);
-  let sources = textureLoad(sourceMap, pixel, 0);
-  return renderColor(traces, sources, getTexturedBackground(pixel));
-}
-
-@fragment
-fn fragmentNoSource(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
-  let pixel = vec2<i32>(position.xy);
-  let traces = textureLoad(trailMap, pixel, 0);
-  return renderColor(traces, vec4<f32>(0.0), getTexturedBackground(pixel));
-}
-
-@fragment
-fn fragmentNoGrain(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
   let pixel = vec2<i32>(position.xy);
   let traces = textureLoad(trailMap, pixel, 0);
   let sources = textureLoad(sourceMap, pixel, 0);
@@ -43,39 +25,30 @@ fn fragmentNoGrain(@builtin(position) position: vec4<f32>) -> @location(0) vec4<
 }
 
 @fragment
-fn fragmentNoSourceNoGrain(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
+fn fragmentNoSource(@builtin(position) position: vec4<f32>) -> @location(0) vec4<f32> {
   let pixel = vec2<i32>(position.xy);
   let traces = textureLoad(trailMap, pixel, 0);
   return renderColor(traces, vec4<f32>(0.0), getFlatBackground());
 }
 
 fn renderColor(traces: vec4<f32>, sources: vec4<f32>, background: vec3<f32>) -> vec4<f32> {
-  let tracesMax = maxComponent(traces.rgb);
-  let sourcesMax = maxComponent(sources.rgb);
-  if max(tracesMax, sourcesMax) <= 0.0 {
+  let traceStrengths = clarity(traces.rgb);
+  let sourceStrengths = clarity(sources.rgb);
+  let traceStrength = maxComponent(traceStrengths);
+  let brushStrength = maxComponent(sourceStrengths);
+  if max(traceStrength, brushStrength) <= 0.0 {
     return vec4(background, 1);
   }
 
-  let traceStrengths = vec3(
-    clarity(traces.r),
-    clarity(traces.g),
-    clarity(traces.b)
-  );
-  if sourcesMax <= 0.0 {
+  if brushStrength <= 0.0 {
     let traceColor =
         traceStrengths.r * settings.colorA
       + traceStrengths.g * settings.colorB
       + traceStrengths.b * settings.colorC;
     let normalizedTraceColor = normalizeColorIntensity(traceColor);
-    let traceStrength = maxComponent(traceStrengths);
     return vec4(mix(background, clamp(normalizedTraceColor, vec3(0), vec3(1)), traceStrength), 1);
   }
 
-  let sourceStrengths = vec3(
-    clarity(sources.r),
-    clarity(sources.g),
-    clarity(sources.b)
-  );
   let strengths = max(traceStrengths, sourceStrengths);
   let traceColor =
       strengths.r * settings.colorA
@@ -87,7 +60,6 @@ fn renderColor(traces: vec4<f32>, sources: vec4<f32>, background: vec3<f32>) ->
     + sourceStrengths.g * settings.colorB
     + sourceStrengths.b * settings.colorC;
   let normalizedBrushColor = normalizeColorIntensity(brushColor);
-  let brushStrength = maxComponent(sourceStrengths);
   let brushVisibility = clamp(
     brushStrength * (
       settings.brushColorBase +
@@ -106,12 +78,8 @@ fn maxComponent(v: vec3<f32>) -> f32 {
   return max(max(v.r, v.g), v.b);
 }
 
-fn clarity(strength: f32) -> f32 {
-  let clamped = clamp(strength, 0, 1);
-  if settings.clarity == 1.0 {
-    return clamped;
-  }
-  return pow(clamped, settings.clarity);
+fn clarity(strength: vec3<f32>) -> vec3<f32> {
+  return pow(clamp(strength, vec3(0), vec3(1)), vec3(settings.clarity));
 }
 
 fn normalizeColorIntensity(color: vec3<f32>) -> vec3<f32> {
@@ -122,14 +90,3 @@ fn normalizeColorIntensity(color: vec3<f32>) -> vec3<f32> {
 fn getFlatBackground() -> vec3<f32> {
   return clamp(settings.backgroundColor, vec3(0), vec3(1));
 }
-
-fn getTexturedBackground(pixel: vec2<i32>) -> vec3<f32> {
-  let noiseCoord = vec2<i32>(vec2<u32>(pixel) & vec2<u32>(NOISE_TEXTURE_MASK));
-  let grain = textureLoad(noise, noiseCoord, 0).r - 0.5;
-
-  return clamp(
-    settings.backgroundColor + vec3(grain * settings.backgroundGrainStrength),
-    vec3(0),
-    vec3(1)
-  );
-}