Untitled fiddle

HTML

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.webgpu.js",
      "three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.webgpu.js",
      "three/tsl": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.tsl.js"
    }
  }
</script>
<pre id="out">running...</pre>
<script type="module">
  import * as THREE from "three/webgpu";
  import { pass } from "three/tsl";

  // Render pipelines as the WebGPU device creates them, by phase.
  let phase = "setup";
  let pipelines = [];
  const { createRenderPipeline, createRenderPipelineAsync } = GPUDevice.prototype;
  GPUDevice.prototype.createRenderPipeline = function (d) {
    pipelines.push(`${phase}: sync ${d.fragment?.targets?.[0]?.format}`);
    return createRenderPipeline.call(this, d);
  };
  GPUDevice.prototype.createRenderPipelineAsync = function (d) {
    pipelines.push(`${phase}: async ${d.fragment?.targets?.[0]?.format}`);
    return createRenderPipelineAsync.call(this, d);
  };

  // A mesh and an instanced mesh, precompiled with scenePass.compileAsync(), then rendered once
  // through a RenderPipeline. Returns what each phase built.
  async function run(forceWebGL) {
    phase = "setup";
    pipelines = [];
    const renderer = new THREE.WebGPURenderer({ forceWebGL });
    renderer.setSize(256, 256);
    await renderer.init();

    const builds = [];
    renderer.debug.onNodeBuilderCreated = (builder, renderObject) =>
      builds.push(`${phase}: ${renderObject.object.name}`);

    const scene = new THREE.Scene();
    scene.add(new THREE.DirectionalLight(0xffffff, 2));
    const box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardNodeMaterial());
    box.name = "box";
    const instances = new THREE.InstancedMesh(new THREE.BoxGeometry(0.3, 0.3, 0.3), new THREE.MeshStandardNodeMaterial(), 3);
    instances.name = "instances";
    scene.add(box, instances);
   ...