,

src/pipelines/eraser/eraser-texture-pipeline.ts

@@ -24,6 +24,7 @@ export class EraserTexturePipeline {
   private readonly bindGroupLayout: GPUBindGroupLayout;
   private readonly bindGroup: GPUBindGroup;
   private readonly pipeline: GPURenderPipeline;
+  private readonly multiTargetPipeline: GPURenderPipeline;
   private readonly uniforms: GPUBuffer;
   private readonly uniformValues = new Float32Array(EraserTexturePipeline.UNIFORM_COUNT);
   private readonly uniformCache = createCachedFloat32BufferWrite(
@@ -65,49 +66,9 @@ export class EraserTexturePipeline {
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     });
 
-    this.pipeline = device.createRenderPipeline({
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [commonState.bindGroupLayout, this.bindGroupLayout],
-      }),
-      vertex: {
-        module: smartCompile(device, CommonState.shaderCode, shader),
-        entryPoint: 'vertex',
-        buffers: [
-          {
-            arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
-            attributes: [
-              {
-                shaderLocation: 0,
-                format: 'float32x2',
-                offset: 0,
-              },
-              {
-                shaderLocation: 1,
-                format: 'float32x2',
-                offset: Float32Array.BYTES_PER_ELEMENT * 2,
-              },
-              {
-                shaderLocation: 2,
-                format: 'float32x2',
-                offset: Float32Array.BYTES_PER_ELEMENT * 4,
-              },
-            ],
-          },
-        ],
-      },
-      fragment: {
-        module: smartCompile(device, CommonState.shaderCode, shader),
-        entryPoint: 'fragment',
-        targets: [
-          {
-            format: 'rgba16float',
-          },
-        ],
-      },
-      primitive: {
-        topology: 'triangle-list',
-      },
-    });
+    const shaderModule = smartCompile(device, CommonState.shaderCode, shader);
+    this.pipeline = this.createPipeline(shaderModule, 'fragment', 1);
+    this.multiTargetPipeline = this.createPipeline(shaderModule, 'fragmentMrt', 3);
 
     this.uniforms = this.device.createBuffer({
       size: EraserTexturePipeline.UNIFORM_COUNT * Float32Array.BYTES_PER_ELEMENT,
@@ -194,22 +155,41 @@ export class EraserTexturePipeline {
   }
 
   public execute(commandEncoder: GPUCommandEncoder, textureOut: GPUTextureView): void {
+    this.executeWithPipeline(commandEncoder, this.pipeline, [textureOut]);
+  }
+
+  public executeMultiTarget(
+    commandEncoder: GPUCommandEncoder,
+    sourceMapOut: GPUTextureView,
+    influenceMapOut: GPUTextureView,
+    trailMapOut: GPUTextureView
+  ): void {
+    this.executeWithPipeline(commandEncoder, this.multiTargetPipeline, [
+      sourceMapOut,
+      influenceMapOut,
+      trailMapOut,
+    ]);
+  }
+
+  private executeWithPipeline(
+    commandEncoder: GPUCommandEncoder,
+    pipeline: GPURenderPipeline,
+    textureViews: Array<GPUTextureView>
+  ): void {
     if (this.lineCount === 0) {
       return;
     }
 
     const renderPassDescriptor: GPURenderPassDescriptor = {
-      colorAttachments: [
-        {
-          view: textureOut,
-          loadOp: 'load',
-          storeOp: 'store',
-        },
-      ],
+      colorAttachments: textureViews.map<GPURenderPassColorAttachment>((view) => ({
+        view,
+        loadOp: 'load',
+        storeOp: 'store',
+      })),
     };
 
     const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-    passEncoder.setPipeline(this.pipeline);
+    passEncoder.setPipeline(pipeline);
     this.commonState.execute(passEncoder);
     passEncoder.setBindGroup(1, this.bindGroup);
     passEncoder.setVertexBuffer(0, this.vertexBuffer);
@@ -222,6 +202,54 @@ export class EraserTexturePipeline {
     this.uniforms.destroy();
   }
 
+  private createPipeline(
+    shaderModule: GPUShaderModule,
+    fragmentEntryPoint: string,
+    colorTargetCount: number
+  ): GPURenderPipeline {
+    return this.device.createRenderPipeline({
+      layout: this.device.createPipelineLayout({
+        bindGroupLayouts: [this.commonState.bindGroupLayout, this.bindGroupLayout],
+      }),
+      vertex: {
+        module: shaderModule,
+        entryPoint: 'vertex',
+        buffers: [
+          {
+            arrayStride: Float32Array.BYTES_PER_ELEMENT * 6,
+            attributes: [
+              {
+                shaderLocation: 0,
+                format: 'float32x2',
+                offset: 0,
+              },
+              {
+                shaderLocation: 1,
+                format: 'float32x2',
+                offset: Float32Array.BYTES_PER_ELEMENT * 2,
+              },
+              {
+                shaderLocation: 2,
+                format: 'float32x2',
+                offset: Float32Array.BYTES_PER_ELEMENT * 4,
+              },
+            ],
+          },
+        ],
+      },
+      fragment: {
+        module: shaderModule,
+        entryPoint: fragmentEntryPoint,
+        targets: Array.from({ length: colorTargetCount }, () => ({
+          format: 'rgba16float' as const,
+        })),
+      },
+      primitive: {
+        topology: 'triangle-list',
+      },
+    });
+  }
+
   private static subsampleSegments(segments: Array<LineSegment>): Array<LineSegment> {
     if (segments.length <= EraserTexturePipeline.MAX_LINE_COUNT) {
       return segments;