[claude] InstancedMesh for glass tiles and island spires (#425) #443

claude · 2026-03-24T18:19:05Z

claude commented

2026-03-24 18:19:05 +00:00

Fixes #425

Summary

Replace ~75 individual THREE.Mesh glass tiles with a single THREE.InstancedMesh (one draw call instead of ~75)
Replace N individual THREE.Mesh island crystal spires (each with a unique ConeGeometry) with a single THREE.InstancedMesh using a unit cone scaled per-instance
Both InstancedMesh objects use THREE.StaticDrawUsage since instance matrices never change

Data Integrity Audit

Element	Category	Data Source
Glass Tiles	DATA-TETHERED AESTHETIC	No per-tile data — shared material; edge lines (LineSegments) retain per-distance opacity animation
Island Crystal Spires	DATA-TETHERED AESTHETIC	Terrain Perlin noise (same seeded noise as before — positions/scales unchanged)

Implementation Details

Glass tiles: Two-pass — collect valid tile positions into _tileSlots, then build InstancedMesh with rotation.x = -π/2 baked into each instance matrix. Edge LineSegments stay individual (they need per-material opacity animation for the ripple effect).

Island spires: Two-pass — collect {sx, sz, posY, rotX, rotZ, scaleXZ, scaleY} per spire, then build InstancedMesh(ConeGeometry(1,1,5), crystalMat, count). Each instance matrix is T * R * S where S = (spireR, spireH*2.8, spireR). This is mathematically equivalent to the original approach of pre-scaling via ConeGeometry(spireR, spireH*2.8, 5) with no scale on the mesh.

Test Plan

npx serve . -l 3000 and open http://localhost:3000
Verify glass platform tiles are visible and the edge glow ripple animation works outward from center
Verify island crystal spires appear at high-terrain points with correct shapes and sizes
Open browser DevTools → Three.js stats (or add renderer.info logging) and confirm draw calls are reduced vs. prior commit
Verify visual fidelity is unchanged — spires should look identical to before

Syntax Check

node --check app.js passes.

Draw Call Reduction

Glass tiles: ~75 draw calls → 1 draw call
Island spires: ~60–100 draw calls → 1 draw call
Total: ~135–175 draw calls eliminated

Fixes #425 ## Summary - Replace ~75 individual `THREE.Mesh` glass tiles with a single `THREE.InstancedMesh` (one draw call instead of ~75) - Replace N individual `THREE.Mesh` island crystal spires (each with a unique `ConeGeometry`) with a single `THREE.InstancedMesh` using a unit cone scaled per-instance - Both InstancedMesh objects use `THREE.StaticDrawUsage` since instance matrices never change ## Data Integrity Audit | Element | Category | Data Source | |---------|----------|-------------| | Glass Tiles | DATA-TETHERED AESTHETIC | No per-tile data — shared material; edge lines (LineSegments) retain per-distance opacity animation | | Island Crystal Spires | DATA-TETHERED AESTHETIC | Terrain Perlin noise (same seeded noise as before — positions/scales unchanged) | ## Implementation Details **Glass tiles**: Two-pass — collect valid tile positions into `_tileSlots`, then build `InstancedMesh` with `rotation.x = -π/2` baked into each instance matrix. Edge `LineSegments` stay individual (they need per-material opacity animation for the ripple effect). **Island spires**: Two-pass — collect `{sx, sz, posY, rotX, rotZ, scaleXZ, scaleY}` per spire, then build `InstancedMesh(ConeGeometry(1,1,5), crystalMat, count)`. Each instance matrix is `T * R * S` where `S = (spireR, spireH*2.8, spireR)`. This is mathematically equivalent to the original approach of pre-scaling via `ConeGeometry(spireR, spireH*2.8, 5)` with no scale on the mesh. ## Test Plan 1. `npx serve . -l 3000` and open http://localhost:3000 2. Verify glass platform tiles are visible and the edge glow ripple animation works outward from center 3. Verify island crystal spires appear at high-terrain points with correct shapes and sizes 4. Open browser DevTools → Three.js stats (or add `renderer.info` logging) and confirm draw calls are reduced vs. prior commit 5. Verify visual fidelity is unchanged — spires should look identical to before ## Syntax Check `node --check app.js` passes. ## Draw Call Reduction - Glass tiles: ~75 draw calls → 1 draw call - Island spires: ~60–100 draw calls → 1 draw call - Total: ~135–175 draw calls eliminated

claude added 1 commit 2026-03-24 18:19:06 +00:00

perf: convert glass tiles and island spires to InstancedMesh

CI / validate (pull_request) Successful in 5s

Details

CI / auto-merge (pull_request) Successful in 4s

Details

c1c4c04ee0

Replace ~75 individual THREE.Mesh glass tiles and N individual
ConeGeometry spire Meshes with InstancedMesh, reducing draw calls
from O(n) to O(1) per group.

Glass tiles: one InstancedMesh with StaticDrawUsage replaces ~75
glassTileMat.clone() meshes. Edge line glow (LineSegments) retained
individually for per-distance opacity animation.

Island spires: two-pass approach — collect spire params first, then
build one InstancedMesh with a unit cone (r=1, h=1) scaled per
instance via the instance matrix. Mathematically equivalent to the
original per-spire ConeGeometry since T*R*S on a unit cone produces
the same world-space vertices as T*R applied to a pre-scaled cone.

Fixes #425

claude referenced this pull request

2026-03-24 18:19:17 +00:00

[performance] Instanced Geometry — InstancedMesh for Repeated Elements #425

Timmy merged commit 02c8c351b1 into main

2026-03-24 18:19:21 +00:00

Timmy deleted branch claude/issue-425

2026-03-24 18:19:22 +00:00

Timmy referenced this issue from a commit

2026-03-24 18:19:23 +00:00

[claude] InstancedMesh for glass tiles and island spires (#425) (#443)

Sign in to join this conversation.