From 38a71437e02bc0d359005711bc14f0937b95cf19 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 30 Jan 2026 04:59:46 +0000
Subject: [PATCH] fix: Use Uint32BufferAttribute for geometry index buffers to
 fix WebGPU errors

WebGPU is stricter than WebGL about buffer types. Passing plain JavaScript
arrays to geometry.setIndex() can cause "Failed to execute 'setIndexBuffer'
on 'GPURenderPassEncoder': parameter 1 is not of type 'GPUBuffer'" errors.

Fixed in:
- BuildingPlacementPreview.ts (grid mesh)
- Terrain.ts (terrain geometry and guardrails)
- WaterMesh.ts (shore mesh)

https://claude.ai/code/session_01VM695FVpXJe1mZjexmKoTx
---
 src/rendering/BuildingPlacementPreview.ts | 2 +-
 src/rendering/Terrain.ts                  | 4 ++--
 src/rendering/WaterMesh.ts                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/rendering/BuildingPlacementPreview.ts b/src/rendering/BuildingPlacementPreview.ts
index a685b1ba..51daa336 100644
--- a/src/rendering/BuildingPlacementPreview.ts
+++ b/src/rendering/BuildingPlacementPreview.ts
@@ -524,7 +524,7 @@ export class BuildingPlacementPreview {
 
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
     geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
-    geometry.setIndex(indices);
+    geometry.setIndex(new THREE.Uint32BufferAttribute(indices, 1));
 
     const material = new THREE.MeshBasicMaterial({
       vertexColors: true,
diff --git a/src/rendering/Terrain.ts b/src/rendering/Terrain.ts
index 955b0e08..5bf91a84 100644
--- a/src/rendering/Terrain.ts
+++ b/src/rendering/Terrain.ts
@@ -597,7 +597,7 @@ export class Terrain {
     geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
     geometry.setAttribute('aSlope', new THREE.Float32BufferAttribute(slopes, 1));
     geometry.setAttribute('aTerrainType', new THREE.Float32BufferAttribute(terrainTypes, 1));
-    geometry.setIndex(indices);
+    geometry.setIndex(new THREE.Uint32BufferAttribute(indices, 1));
     geometry.computeVertexNormals();
 
     return geometry;
@@ -765,7 +765,7 @@ export class Terrain {
     this.guardrailGeometry = new THREE.BufferGeometry();
     this.guardrailGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
     this.guardrailGeometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
-    this.guardrailGeometry.setIndex(indices);
+    this.guardrailGeometry.setIndex(new THREE.Uint32BufferAttribute(indices, 1));
 
     // RTS-style yellow/orange hazard color for guardrails
     const guardrailMaterial = new THREE.MeshStandardMaterial({
diff --git a/src/rendering/WaterMesh.ts b/src/rendering/WaterMesh.ts
index 7f504564..dd8c32fd 100644
--- a/src/rendering/WaterMesh.ts
+++ b/src/rendering/WaterMesh.ts
@@ -831,7 +831,7 @@ export class WaterMesh {
     const geometry = new THREE.BufferGeometry();
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
     geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 4));
-    geometry.setIndex(indices);
+    geometry.setIndex(new THREE.Uint32BufferAttribute(indices, 1));
     geometry.computeVertexNormals();
 
     // Softer blending - normal blend with lower opacity feels more natural