[p5.js 2.0 Bug Report]: [WEBGPU] Rendering multiple instances of a model doesn't work yet

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2-rc2

Web browser and version

Chrome 143

Operating system

MacOS 15.2

Steps to reproduce this

Steps:

1. Create a WebGPU canvas
2. Create a shader that moves vertices using the instance id
3. Create some custom geometry
4. Draw the geometry using the shader + an instance count

Nothing renders in WebGPU mode, but it renders correctly if you switch back to WebGL.

Snippet:

Live: https://editor.p5js.org/davepagurek/sketches/FBR7lqDXS

let geom
let sh
async function setup() {
  await createCanvas(400, 400, WEBGPU)
  // This works
  // createCanvas(400, 400, WEBGL)
  
  geom = buildGeometry(() => sphere(10))
  sh = baseMaterialShader().modify(() => {
    getWorldInputs((inputs) => {
      inputs.position.x += instanceID() * 30
      return inputs
    })
  })
}

function draw() {
  background(100)
  
  push()
  noStroke()
  shader(sh)
  model(geom, 5)
  pop()
}

[Piyushrathoree]

Hi , @davepagurek is this issue specific to macos or is it happening in windows or Linux as well , please tell me about it , I would love to work on it.

[davepagurek]

Hi! I have only tested on my Mac, but I'm guessing it's probably happening in any webgpu-enabled browser/platform. Are you able to run the p5 web editor sketch linked in the issue? For me only the background shows up in WebGPU mode, and if I comment out the WebGPU createCanvas and uncomment the WebGL one, you can see 5 circles in a row.

[davepagurek]

The issue is probably this:

p5.js/src/strands/strands_api.js

Lines 52 to 55 in db2ceae

	fn.instanceID = function() {
	const node = build.variableNode(strandsContext, { baseType: BaseType.INT, dimension: 1 }, 'gl_InstanceID');
	return createStrandsNode(node.id, node.dimension, strandsContext);
	}

The instanceID() function is currently always being turned into the gl_InstanceID property in the shader code. That's a WebGL specific thing, so that won't work in WebGPU. So what we need to do here is probably add a method to the glsl backend and wgsl backend for p5.strands that returns the name of this property for their respective languages. For glsl, that's gl_InstanceID.

For WGSL, it's a bit more complicated, since it's not a global property like in GLSL. Instead, it needs to be a second parameter to the main function, e.g.:

struct VertexInput {
  @location(0) position : vec3<f32>,
};

struct VertexOutput {
  @builtin(position) position : vec4<f32>,
};

@vertex
fn main(
  input : VertexInput,
  // This is it here:
  @builtin(instance_index) instance_id : u32
) -> VertexOutput {
  var out : VertexOutput;

  var pos = input.position;
  pos.x = pos.x + 10.0 * f32(instance_id);

  out.position = vec4<f32>(pos, 1.0);
  return out;
}

So we maybe just say in the WGSL backend that it's always called instance_id, and then we modify all our base shaders to add that @builtin(instance_index) instance_id : u32 parameter.

[davepagurek]

Taking this one on myself because passing the instance id from the main function to hook functions is somewhat involved