Add WebGPU visual test for instanceID fragment support

Author: aashu2006

test/unit/visual/cases/webgpu.js

@@ -272,8 +272,37 @@ visualSuite("WebGPU", function () {
       p5.filter(invert);
       await screenshot();
     });
+
+    visualTest('instanceID in fragment hook colors instances (WebGPU)', async function(p5, screenshot) {
+      await p5.createCanvas(50, 50, p5.WEBGPU);
+      const numInstances = 4;
+      const shader = p5.baseMaterialShader().modify(() => {
+        // Vertex hook: position instances in a horizontal row
+        p5.getWorldInputs((inputs) => {
+          const id = p5.instanceID();
+          const spacing = 12;
+          const offset = (id - (numInstances - 1) / 2.0) * spacing;
+          inputs.position.x += offset;
+          return inputs;
+        });
+        // Fragment hook: color each instance based on instanceID
+        p5.getFinalColor((color) => {
+          const id = p5.instanceID();
+          const t = id / (numInstances - 1.0);
+          color = [t, t, t, 1];
+          return color;
+        });
+      }, { p5, numInstances });
+      p5.background(128);
+      p5.noStroke();
+      p5.shader(shader);
+      const obj = p5.buildGeometry(() => p5.circle(0, 0, 10));
+      p5.model(obj, numInstances);
+      await screenshot();
+    });
   });
 
+
   visualSuite('filters', function() {
     const setupSketch = async (p5) => {
       await p5.createCanvas(50, 50, p5.WEBGPU);

test/unit/visual/screenshots/WebGPU/Shaders/instanceID in fragment hook colors instances (WebGPU)/000.png

@@ -0,0 +1,3 @@
+{
+  "numScreenshots": 1
+}