Scatter Node Mask Fix

src/components/nodes/scatter-node.tsx

@@ -1,20 +1,27 @@
+import { useEffect } from 'react';
 import { useReactFlow, type NodeProps } from 'reactflow';
 
 import * as helpers from './helpers';
 
 import * as TerrainGenNode from '@/components/common/terraingen-node';
+import { useGraphGlobals } from '@/hooks/use-graph-globals';
 import * as nodeTypes from '@/lib/graph/node-types';
 
 const HANDLES = nodeTypes.HANDLES.scatter;
 type ScatterNodeData = nodeTypes.Scatter['data'];
 
 function ScatterNode({ id, data, ...props }: NodeProps<ScatterNodeData>) {
   const { setNodes } = useReactFlow();
+  const { triggerNodePipelineUpdate } = useGraphGlobals();
 
   const onChange = (key: 'instances' | 'threshold', value: number) => {
     helpers.updateNodeData<ScatterNodeData>({ id, setNodes, newData: { [key]: value } });
   };
 
+  useEffect(() => {
+    triggerNodePipelineUpdate(id);
+  }, [data.instances, data.threshold, id, triggerNodePipelineUpdate]);
+
   return (
     <TerrainGenNode.Root title="Scatter" {...props}>
       <TerrainGenNode.HandleOutput handleId={HANDLES.out.result} valueType="vec3f[]" />

src/lib/graph/index.ts

@@ -156,6 +156,12 @@ function generatePipelines(
       return { displacePipeline };
     }
 
+    const maskEdge = edges.find(
+      (edge) =>
+        edge.target === scatterNode.id && edge.targetHandle === nodeTypes.HANDLES.scatter.in.a,
+    );
+
+    const maskSourceNode = orderedDependencyNodes.find((node) => node.id === maskEdge?.source);
     let transformConfig: { translate: string; rotate: string; scale: string } | undefined;
     if (transformNode) {
       const translateEdge = edges.find(
@@ -203,6 +209,14 @@ function generatePipelines(
         outgoingHandleId: scatterEdge.sourceHandle!,
       }),
       meshPath: geometryNode.data.meshPath,
+      maskKey:
+        maskSourceNode && maskEdge
+          ? nodeMapping.getHandleKey({
+              sourceNode: maskSourceNode,
+              outgoingHandleId: maskEdge.sourceHandle!,
+            })
+          : undefined,
+      threshold: scatterNode.data.threshold,
       transform: transformConfig,
       fileContent:
         geometryNode.type === 'loadGeo' ? (geometryNode.data.fileContent as string) : undefined,

src/lib/renderers/pipelines/instance-points-pipeline.ts

@@ -10,6 +10,7 @@ export class InstancePointsPipeline {
 
   instanceCount = 1;
   instanceCountBuffer: GPUBuffer;
+  //numCreatedInstancesBuffer: GPUBuffer;
 
   instancingBindGroupLayout: GPUBindGroupLayout;
   instancingBindGroup: GPUBindGroup;
@@ -34,7 +35,7 @@ export class InstancePointsPipeline {
     this.customInstanceCode = customInstanceCode;
     this.instancePoints = this.device.createBuffer({
       label: 'instancing points vertex buffer',
-      size: Math.max(this.instanceCount * 96, 96),
+      size: Math.max(this.instanceCount * 112, 112),
       usage:
         GPUBufferUsage.VERTEX |
         GPUBufferUsage.COPY_DST |
@@ -52,6 +53,12 @@ export class InstancePointsPipeline {
     });
     this.device.queue.writeBuffer(this.instanceCountBuffer, 0, numInstances);
 
+    // this.numCreatedInstancesBuffer = device.createBuffer({
+    //   label: "buffer for how many valid points have been created",
+    //   size: 4,
+    //   usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    // });
+
     this.instancingBindGroupLayout = this.device.createBindGroupLayout({
       label: 'instancing bind group layout',
       entries: [
@@ -64,12 +71,21 @@ export class InstancePointsPipeline {
           },
         },
         {
+          // number of instances
           binding: 1,
           visibility: GPUShaderStage.COMPUTE,
           buffer: {
             type: 'uniform',
           },
         },
+        // {
+        //   // count how many instances we made
+        //   binding: 2,
+        //   visibility: GPUShaderStage.COMPUTE,
+        //   buffer: {
+        //     type: 'storage',
+        //   },
+        // },
       ],
     });
 

src/lib/renderers/pipelines/instancer.ts

@@ -13,6 +13,9 @@ export class IndirectInstancer {
 
   instancePointsComputePipeline: InstancePointsPipeline;
 
+  textureBindGroup: GPUBindGroup;
+  textureArray: GPUTexture;
+
   transformBuffer: GPUBuffer | undefined;
   transformBindGroupLayout: GPUBindGroupLayout | undefined;
   transformBindGroup: GPUBindGroup | undefined;
@@ -24,6 +27,7 @@ export class IndirectInstancer {
     instanceIndexBuffer: GPUBuffer,
     sceneUniformsBindGroupLayout: GPUBindGroupLayout,
     webGPU: WebGPUContext,
+    imageBitmaps?: ImageBitmap[],
     transformMatrix?: Float32Array,
   ) {
     this.device = device;
@@ -135,10 +139,33 @@ export class IndirectInstancer {
       ],
     });
 
+    const textureBindGroupLayout = this.device.createBindGroupLayout({
+      label: 'texture bind group layout',
+      entries: [
+        {
+          // sampler type...
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          sampler: { type: 'filtering' },
+        },
+        {
+          // texture view
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {
+            sampleType: 'float',
+            viewDimension: '2d-array',
+          },
+        },
+      ],
+    });
+
     const bindGroupLayouts = [
       sceneUniformsBindGroupLayout,
       this.instancingPointsBindGroupLayout,
+      textureBindGroupLayout,
     ];
+
     if (this.transformBindGroupLayout) {
       bindGroupLayouts.push(this.transformBindGroupLayout);
     }
@@ -171,18 +198,85 @@ export class IndirectInstancer {
         targets: [
           {
             format: webGPU.canvasFormat,
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+              },
+            },
           },
         ],
       },
     });
+
+    // create buffers for the image bitmaps
+    const firstSource = imageBitmaps![0];
+    this.textureArray = this.device.createTexture({
+      label: 'FAT FUCKING TEXTURE!!!!',
+      format: 'rgba8unorm',
+      size: {
+        width: firstSource.width,
+        height: firstSource.height,
+        depthOrArrayLayers: 20,
+      },
+      usage:
+        GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    for (let i = 0; i < imageBitmaps!.length; i++) {
+      const source = imageBitmaps![i];
+
+      this.device.queue.copyExternalImageToTexture(
+        { source: source, flipY: true },
+        {
+          texture: this.textureArray,
+          premultipliedAlpha: true,
+          origin: { x: 0, y: 0, z: i + 1 },
+        },
+        { width: source.width, height: source.height },
+      );
+    }
+
+    const sampler = this.device.createSampler({
+      addressModeU: 'repeat',
+      addressModeV: 'repeat',
+      magFilter: 'linear',
+      minFilter: 'linear',
+      mipmapFilter: 'linear',
+    });
+
+    this.textureBindGroup = this.device.createBindGroup({
+      label: 'texture bind group',
+      layout: textureBindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: sampler,
+        },
+        {
+          binding: 1,
+          resource: this.textureArray.createView({
+            dimension: '2d-array',
+          }),
+        },
+      ],
+    });
   }
 
   runRenderPass(renderPass: GPURenderPassEncoder, sceneUniforms: GPUBindGroup) {
     renderPass.setPipeline(this.instancingRenderPipeline);
     renderPass.setBindGroup(0, sceneUniforms);
     renderPass.setBindGroup(1, this.instancingPointsBindGroup);
+    renderPass.setBindGroup(2, this.textureBindGroup);
+
     if (this.transformBindGroup) {
-      renderPass.setBindGroup(2, this.transformBindGroup);
+      renderPass.setBindGroup(3, this.transformBindGroup);
     }
     renderPass.drawIndirect(this.indirectInstanceBuffer, 0);
   }

src/lib/renderers/terrain-renderer.ts

@@ -452,7 +452,7 @@ export class TerrainRenderer implements IRenderer {
       colorAttachments: [
         {
           view: canvasTextureView,
-          clearValue: [0.3, 0, 0, 1],
+          clearValue: [0.0, 0, 0, 0],
           loadOp: 'clear',
           storeOp: 'store',
         },
@@ -615,10 +615,10 @@ export class TerrainRenderer implements IRenderer {
 
     if (config.outputs.fileContent) {
       if (config.outputs.fileType === 'obj') {
-        mesh.parseObjContent(config.outputs.fileContent);
+        await mesh.parseObjContent(config.outputs.fileContent);
       } else if (config.outputs.fileType === 'gltf' || config.outputs.fileType === 'glb') {
         const { gltfWithBuffers, gltf } = await mesh.loadGltf(config.outputs.fileContent);
-        mesh.parseGLTFContent(gltfWithBuffers, gltf);
+        await mesh.parseGLTFContent(gltfWithBuffers, gltf);
       }
     } else {
       await mesh.loadObj(path.join(import.meta.env.BASE_URL, config.outputs.meshPath));
@@ -641,13 +641,7 @@ export class TerrainRenderer implements IRenderer {
     });
     this.device.queue.writeBuffer(instanceIndexBuffer, 0, mesh.indices);
 
-    const customInstanceShader = jit.generateInstanceShaderCode(
-      config,
-      instanceComputeShaderTemplate,
-    );
-
-    console.log('custom instance shader:', customInstanceShader);
-
+    // set uniforms
     this.nodeGraphUniformConfig = config.uniforms;
     const { totalSize, offsets } = jit.calculateUniformLayout(config.uniforms);
     this.nodeGraphUniformLayout = offsets;
@@ -686,14 +680,24 @@ export class TerrainRenderer implements IRenderer {
       ],
     });
 
-    console.log('num instances:', config.outputs.instanceCount);
+    // create custom instancing shader
+    if (!config.outputs.maskKey) {
+      config.outputs.maskKey = 'terrainPos.y';
+    }
+    const customInstanceShader = jit.generateInstanceShaderCode(
+      config,
+      instanceComputeShaderTemplate,
+    );
+
+    console.log('custom instance shader:', customInstanceShader);
 
     // Run compute to create a buffer of points
     this.instancePointsComputePipeline = new InstancePointsPipeline(
       this.device,
       this.stage.groundPlane,
       this.normalsComputePipeline,
       config.outputs.instanceCount,
+      customInstanceShader,
     );
 
     const encoder = this.device.createCommandEncoder();
@@ -729,6 +733,7 @@ export class TerrainRenderer implements IRenderer {
       instanceIndexBuffer,
       this.sceneUniformsBindGroupLayout,
       this.webGPU,
+      mesh.textures,
       transformMatrix,
     );
   }