Add WebGPU support

[Glavin001]

Should merge #153 first.

---

• Add WebGPU support
  • Export separate WebGL and WebGPU versions of code for tree-shaking, with default being WebGL for backwards compatibility.
  • Unit Tests pass (likely still missing specific cases though)

• End-to-End (Playwright) Tests pass (likely still missing specific cases though)

• Renders in index-webgpu.html
• LOD
• Frustum Culling

Demos

Known bugs to fix

• Position of LOD meshes is wrong.
  • I notice as I zoom in the different LOD meshes activate (✅ good), however, their position is wrong/different (❌ bad) so they appear to disappear (actually just appearing elsewhere).

• Increase max instances count using textures-based instancing using TSL textureLoad()
  • See examples/shadowLOD-webgpu.ts has a low count
  • WebGPU implementation currently uses a buffer-based approach for instancing which is limited to ~1000 instances due to the 64KB UBO size limit. To support 200,000+ instances like WebGL, implement texture-based instancing using TSL's textureLoad() to read matrices from matricesTexture for counts exceeding the UBO limit.

[github-advanced-security]

ESLint found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[Glavin001]

I haven't figured out the bug yet:

  const instancedMesh = new InstancedMesh2(new BoxGeometry(3,3,3), materials, { capacity: count, renderer });
  instancedMesh.castShadow = true;

  // Add LOD levels with NodeMaterials
  instancedMesh.addLOD(new SphereGeometry(1, 8, 4), new MeshPhongNodeMaterial({ color: 0x00e6e6 }), 100);

  instancedMesh.addInstances(count, (obj, index) => {
    // Deterministic placement: simple XY grid, spread evenly
    const gridSize = Math.ceil(Math.sqrt(count));
    const spacing = terrainSize / gridSize;
    const x = (index % gridSize) * spacing - terrainSize / 2 + spacing / 2;
    const z = Math.floor(index / gridSize) * spacing - terrainSize / 2 + spacing / 2;
    obj.position.set(x, 0, z);
  });

Zoomed out:

Zoomed in:

[sonarqubecloud]

Quality Gate failed

Failed conditions
6 Security Hotspots

See analysis details on SonarQube Cloud

[Glavin001]

If someone could help that'd be appreciated 🙂

[agargaro]

Hi, thank you for the PR. I'll check everything this weekend :)

[GeorgePetri]

Hi, i'd like to have this merged, is there any way i can help?

[agargaro]

It will be merged shortly, as soon as I find some time to look at it, sorry 😅
However, many things will need to be rewritten to make the most of webgpu.

[Glavin001]

⚠️ I'm new to WebGPU and was using Cursor + Claude Opus 4.5 (IIRC) to help me write most of this code. There is still functionality missing, I imagine, and some issues related to LOD and how values are passed into the compute shader, as noted in the PR description.

If I could have some guidance, I'd be happy to try to continue. However, I imagine it will be slow moving without more feedback and some help. Thank you!

[agargaro]

I wasn't talking about this PR, but about the code in general 😄.
Frustum culling, for example, should be performed on the GPU rather than the CPU like now.
For now, however, it's fine to migrate little by little, as in this PR.

I'm studying webgpu so that I can push the library to its limits with future versions