@jgengine/shell 0.14.0 → 0.15.0-next.0

package/dist/scene/CityRenderer.js

@@ -16,7 +16,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
-import { roundPathCorners, buildRoadRibbon, dashSegments } from "@jgengine/core/world/roads";
+import { roundPathCorners, buildJunctionSurface, buildRoadRibbon, dashSegments, GROUND_DECAL_LAYERS, trimPathAtJunctions, } from "@jgengine/core/world/roads";
 import { offsetPath } from "@jgengine/core/world/streets";
 import { triangulatePolygon, triangulateRingBand } from "@jgengine/core/world/cityGeometry";
 import { resolveCityObject, CITY_KIND, CITY_ZONE_KIND, } from "@jgengine/core/world/cityKind";
@@ -37,6 +37,27 @@ const CURB_COLOR = "#c4c0b6";
 const HEDGE_COLOR = "#3d6631";
 const PARK_COLORS = { plaza: "#b3ada0", green: "#4e7c41", meadow: "#6d8a4c", field: "#94805a", courtyard: "#5c8348", buffer: "#63734a" };
 const CROP_COLORS = ["#5d7a35", "#7a6b41", "#6f7f3a"];
+/**
+ * City ground-decal stack. The single-owner {@link GROUND_DECAL_LAYERS} table fixes the authored-road
+ * heights, but a generated district drapes many more surface classes (sidewalk/park/median/curb) and
+ * wants more clearance over relief, so it keeps its own baseline while mirroring the table's ordering
+ * (terrain < road == junction < marking) and its two hard contracts: the welded junction surface
+ * shares the road layer (seam-welded, never stacked), and markings ride above the road with
+ * `polygonOffset`/`renderOrder` on the material. Values below preserve the district's prior look.
+ */
+const SIDEWALK_LAYER = 0.1;
+const PARK_LAYER = 0.12;
+const DRIVEWAY_LAYER = 0.12;
+const BRIDGE_DECK_LIFT = 0.12;
+const PARKING_LAYER = 0.13;
+const PLAZA_LAYER = 0.14;
+const ROAD_LAYER = 0.16; // asphalt/gravel carriageway AND the welded junction surface (seam-shared)
+const CROP_LAYER = 0.2;
+const CURB_LAYER = 0.24;
+const MARKING_LAYER = 0.26;
+const MEDIAN_LAYER = 0.3;
+/** Trim + weld tuning shared by {@link trimPathAtJunctions} and {@link buildJunctionSurface} for the district. */
+const JUNCTION_OPTS = { curbReturnRadius: 3, apronMargin: 0.6, filletSegments: 6, elevation: ROAD_LAYER, maxSegmentLength: 2 };
 const SPECIES_PROXY = { broadleaf: "oak", conifer: "pine", palm: "palm", cypress: "cypress" };
 const SPECIES_SCALE = { broadleaf: 2.7, conifer: 2.5, palm: 2.6, cypress: 2.3 };
 /** Accumulates draped ribbons, patches, discs, and quads into one merged (optionally colored) buffer. */
@@ -64,6 +85,17 @@ class MeshAccumulator {
             this.indices.push(ribbon.indices[i] + offset);
         this.pushColor(ribbon.positions.length / 3, color);
     }
+    /** Append an already-draped ribbon/surface (absolute `[x,y,z]` positions) verbatim — e.g. a welded junction. */
+    addMesh(ribbon, color = null) {
+        if (ribbon.positions.length === 0)
+            return;
+        const offset = this.positions.length / 3;
+        for (let i = 0; i < ribbon.positions.length; i += 1)
+            this.positions.push(ribbon.positions[i]);
+        for (let i = 0; i < ribbon.indices.length; i += 1)
+            this.indices.push(ribbon.indices[i] + offset);
+        this.pushColor(ribbon.positions.length / 3, color);
+    }
     /** A ground-draped rotated rectangle, grid-subdivided so large patches follow the relief. */
     addPatch(center, size, rotationY, sample, elevation, color = null) {
         const cos = Math.cos(rotationY);
@@ -610,18 +642,43 @@ function OneCity({ object, context }) {
             ]) {
                 const x = center[0] + along[0] * length * sa + perp[0] * width * sp;
                 const z = center[1] + along[1] * length * sa + perp[1] * width * sp;
-                markings.positions.push(x, deckSampler(x, z) + 0.26, z);
+                markings.positions.push(x, deckSampler(x, z) + MARKING_LAYER, z);
             }
             markings.indices.push(base, base + 2, base + 1, base + 1, base + 2, base + 3);
         };
+        // Trim carriageways back to their junction boundaries and weld one surface per crossing (no
+        // overlapping ribbons hidden under a floating disc). Street endpoints coincide bitwise with
+        // junction nodes, so `trimPathAtJunctions` cuts each rounded ribbon exactly at the crossing; the
+        // terminal corners feed `buildJunctionSurface` per intersection. Any crossing that gets no trimmed
+        // approach (e.g. sliced past the intersection cap) falls back to the old rounded outline below.
+        const intersectionInputs = resolved.intersections.map((cross) => ({
+            x: cross.x,
+            z: cross.z,
+            arms: cross.arms.map((arm) => ({ angle: arm.angle, width: arm.width })),
+        }));
+        const approachesByCross = new Map();
         for (const street of resolved.streets) {
             if (street.points.length < 2)
                 continue;
             const rounded = roundPathCorners(street.points, Math.max(2.5, street.width * 1.15), 9);
             const surface = street.surface === "gravel" ? gravel : asphalt;
-            surface.addRibbon(rounded, street.width, deckSampler, 0.16);
+            for (const sub of trimPathAtJunctions(rounded, street.width, intersectionInputs, JUNCTION_OPTS)) {
+                surface.addRibbon(sub.path, street.width, deckSampler, ROAD_LAYER);
+                for (const cut of sub.cuts) {
+                    const approach = {
+                        center: cut.center,
+                        left: [cut.left[0], deckSampler(cut.left[0], cut.left[1]) + ROAD_LAYER, cut.left[1]],
+                        right: [cut.right[0], deckSampler(cut.right[0], cut.right[1]) + ROAD_LAYER, cut.right[1]],
+                    };
+                    const list = approachesByCross.get(cut.junctionIndex);
+                    if (list)
+                        list.push(approach);
+                    else
+                        approachesByCross.set(cut.junctionIndex, [approach]);
+                }
+            }
             if (street.sidewalk && !useBlockSidewalks)
-                sidewalks.addRibbon(rounded, street.width + 3.6, sample, 0.1);
+                sidewalks.addRibbon(rounded, street.width + 3.6, sample, SIDEWALK_LAYER);
             // Curbs + painted edge/lane lines make a flat ribbon read as a real carriageway. Both break at
             // junctions (the crossing owns its own pavement), so clip the centerline first.
             if (street.surface === "asphalt") {
@@ -631,26 +688,26 @@ function OneCity({ object, context }) {
                         continue;
                     const left = offsetPath(run, half);
                     const right = offsetPath(run, -half);
-                    curbs.addRibbon(left, 0.55, deckSampler, 0.24);
-                    curbs.addRibbon(right, 0.55, deckSampler, 0.24);
+                    curbs.addRibbon(left, 0.55, deckSampler, CURB_LAYER);
+                    curbs.addRibbon(right, 0.55, deckSampler, CURB_LAYER);
                     if (street.level !== "lane") {
                         // White edge (fog) lines just inside the curb.
-                        markings.addRibbon(offsetPath(run, half - 0.75), 0.16, deckSampler, 0.26);
-                        markings.addRibbon(offsetPath(run, -(half - 0.75)), 0.16, deckSampler, 0.26);
+                        markings.addRibbon(offsetPath(run, half - 0.75), 0.16, deckSampler, MARKING_LAYER);
+                        markings.addRibbon(offsetPath(run, -(half - 0.75)), 0.16, deckSampler, MARKING_LAYER);
                         // Avenue+ get dashed lane dividers either side of the centerline.
                         if (street.level === "avenue") {
                             for (const dash of dashSegments(offsetPath(run, half * 0.5), 2.4, 3.2))
-                                markings.addRibbon(dash, 0.13, deckSampler, 0.26);
+                                markings.addRibbon(dash, 0.13, deckSampler, MARKING_LAYER);
                             for (const dash of dashSegments(offsetPath(run, -half * 0.5), 2.4, 3.2))
-                                markings.addRibbon(dash, 0.13, deckSampler, 0.26);
+                                markings.addRibbon(dash, 0.13, deckSampler, MARKING_LAYER);
                         }
                     }
                 }
             }
             if (street.bulb !== undefined) {
-                (street.surface === "gravel" ? gravel : asphalt).addDisc(street.bulb, street.width * 1.15, sample, 0.16);
+                (street.surface === "gravel" ? gravel : asphalt).addDisc(street.bulb, street.width * 1.15, sample, ROAD_LAYER);
                 if (street.sidewalk)
-                    sidewalks.addDisc(street.bulb, street.width * 1.15 + 1.8, sample, 0.1);
+                    sidewalks.addDisc(street.bulb, street.width * 1.15 + 1.8, sample, SIDEWALK_LAYER);
             }
             if (street.surface === "asphalt" && street.level !== "lane") {
                 if (street.level === "boulevard") {
@@ -664,9 +721,9 @@ function OneCity({ object, context }) {
                         if (runLength < 7)
                             continue;
                         const width = Math.max(1.3, street.width * 0.14);
-                        medians.addRibbon(run, width, deckSampler, 0.3);
-                        medians.addDisc(run[0], width / 2, deckSampler, 0.3, null, 8);
-                        medians.addDisc(run[run.length - 1], width / 2, deckSampler, 0.3, null, 8);
+                        medians.addRibbon(run, width, deckSampler, MEDIAN_LAYER);
+                        medians.addDisc(run[0], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
+                        medians.addDisc(run[run.length - 1], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
                     }
                 }
                 else {
@@ -681,40 +738,50 @@ function OneCity({ object, context }) {
                             }
                         }
                         if (!inCross)
-                            markings.addRibbon(dash, 0.18, deckSampler, 0.26);
+                            markings.addRibbon(dash, 0.18, deckSampler, MARKING_LAYER);
                     }
                 }
             }
         }
+        // NOTE: streetGenerator's `Street.sidewalks` offset polylines are NOT surfaced here — this renderer
+        // consumes `resolveCityObject`'s `CityStreet` (which carries only a `sidewalk` boolean), and its
+        // sidewalks come from richer block curb→land bands below. Wiring the raw offset polylines would be a
+        // second, redundant sidewalk source, so it is intentionally skipped for this component's data flow.
         // Sidewalk band per block: the region between the curb ring (outer) and the land ring (inner).
         // Blocks whose two rings coincide (no sidewalk) drop out — every band triangle is degenerate,
         // so `addRingBand` emits nothing.
         if (useBlockSidewalks) {
             for (const block of resolved.blocks) {
-                sidewalks.addRingBand(block.curb, block.polygon, sample, 0.1);
+                sidewalks.addRingBand(block.curb, block.polygon, sample, SIDEWALK_LAYER);
             }
         }
         // Junctions: corner curb-return apron (sidewalk ring peeking out under the asphalt patch), the
         // patch itself, and a zebra crossing on every REAL arm — but only where the crossing warrants
         // it. Avenue-and-up arms (or a boulevard/avenue junction) get zebra stripes and the apron;
         // small residential crossings get just the asphalt patch.
-        for (const cross of resolved.intersections) {
+        resolved.intersections.forEach((cross, crossIndex) => {
             const bigLevel = cross.level === "boulevard" || cross.level === "avenue";
             const armZebra = (width) => bigLevel || width >= resolved.rules.streetWidth * 1.4;
             const paved = resolved.rules.sidewalks && cross.level !== "lane";
-            // The junction pavement is the roads' union with rounded curb corners — a real crossing, not a
-            // stamped circle. A slightly larger apron underneath reads as the wrapped sidewalk/curb.
-            const outline = junctionOutline(cross);
-            if (outline !== null) {
-                if (paved) {
-                    const apron = junctionOutline(cross, 1.15, resolved.rules.sidewalkWidth + 0.4);
-                    if (apron !== null)
-                        sidewalks.addPolygon(apron, sample, 0.1);
-                }
-                patches.addPolygon(outline, deckSampler, 0.18);
+            // A slightly larger apron underneath the crossing reads as the wrapped sidewalk/curb.
+            if (paved) {
+                const apron = junctionOutline(cross, 1.15, resolved.rules.sidewalkWidth + 0.4);
+                if (apron !== null)
+                    sidewalks.addPolygon(apron, sample, SIDEWALK_LAYER);
+            }
+            // The junction pavement is welded onto the trimmed ribbon ends (seam-shared, no floating disc).
+            // Crossings that got no trimmed approach fall back to the rounded outline / disc, so coverage
+            // never regresses.
+            const approaches = approachesByCross.get(crossIndex);
+            if (approaches !== undefined && approaches.length > 0) {
+                patches.addMesh(buildJunctionSurface({ x: cross.x, z: cross.z }, approaches, deckSampler, JUNCTION_OPTS));
             }
             else {
-                patches.addDisc([cross.x, cross.z], cross.radius, deckSampler, 0.18);
+                const outline = junctionOutline(cross);
+                if (outline !== null)
+                    patches.addPolygon(outline, deckSampler, ROAD_LAYER);
+                else
+                    patches.addDisc([cross.x, cross.z], cross.radius, deckSampler, ROAD_LAYER);
             }
             if (paved) {
                 const maxHalf = Math.max(...cross.arms.map((arm) => arm.width / 2));
@@ -733,12 +800,12 @@ function OneCity({ object, context }) {
                     }
                 }
             }
-        }
+        });
         for (const drive of resolved.driveways) {
-            (drive.surface === "gravel" ? gravelDrives : pavementDrives).addRibbon(drive.points, drive.width, sample, 0.12);
+            (drive.surface === "gravel" ? gravelDrives : pavementDrives).addRibbon(drive.points, drive.width, sample, DRIVEWAY_LAYER);
         }
         for (const pad of resolved.parkingLots) {
-            pavementDrives.addPatch(pad.center, pad.size, pad.rotationY, sample, 0.13);
+            pavementDrives.addPatch(pad.center, pad.size, pad.rotationY, sample, PARKING_LAYER);
             // Stall separators along the pad.
             const cos = Math.cos(pad.rotationY);
             const sin = Math.sin(pad.rotationY);
@@ -753,7 +820,7 @@ function OneCity({ object, context }) {
         for (const park of resolved.parks) {
             parkColor.set(PARK_COLORS[park.type]);
             parkColor.multiplyScalar(0.92 + park.jitter * 0.16);
-            const elevation = park.type === "plaza" ? 0.14 : 0.12;
+            const elevation = park.type === "plaza" ? PLAZA_LAYER : PARK_LAYER;
             // Block-pipeline parks carry a real road-derived polygon; the rect is only a coarse proxy.
             if (park.polygon !== undefined)
                 parks.addPolygon(park.polygon, sample, elevation, parkColor);
@@ -763,7 +830,7 @@ function OneCity({ object, context }) {
                 const crop = new THREE.Color(CROP_COLORS[Math.floor(park.jitter * CROP_COLORS.length) % CROP_COLORS.length]);
                 crop.multiplyScalar(0.9 + park.jitter * 0.2);
                 for (const row of park.rows)
-                    crops.addRibbon(row, 1.05, sample, 0.2, crop);
+                    crops.addRibbon(row, 1.05, sample, CROP_LAYER, crop);
             }
         }
         return {
@@ -817,7 +884,7 @@ function OneCity({ object, context }) {
                 const arch = bridge.style === "arch" ? Math.sin(t * Math.PI) * Math.min(1.6, span * 0.03) : 0.25;
                 return hA + (hB - hA) * t + arch;
             };
-            decks.addRibbon(bridge.points, bridge.width + 1.2, deckY, 0.12);
+            decks.addRibbon(bridge.points, bridge.width + 1.2, deckY, BRIDGE_DECK_LIFT);
             // Curb strips give the deck visible thickness from the side.
             const tangent = [abx / span, abz / span];
             const normal = [-tangent[1], tangent[0]];
@@ -1005,7 +1072,7 @@ function OneCity({ object, context }) {
     }, [furniture]);
     if (resolved === null)
         return null;
-    return (_jsxs("group", { children: [ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, roughness: 0.8, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette })] }));
+    return (_jsxs("group", { children: [ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, renderOrder: 1, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, roughness: 0.8, metalness: 0, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette })] }));
 }
 /** One instanced unit-box mesh from precomposed matrices (bridge parts). */
 function InstancedBoxes({ matrices, color }) {

package/dist/scene/GrassFieldRenderer.js

@@ -63,7 +63,10 @@ function OneGrass({ object, context }) {
         return null;
     const { rules, center } = resolved;
     // Size the instance buffer to the authored patch (bounded): the default 1500-blade buffer reads
-    // as stubble on anything bigger than a lawn, silently ignoring the authored density.
+    // as stubble on anything bigger than a lawn, silently ignoring the authored density. The 250k cap
+    // is independent of the (now wider) camera distance fade — instances are placed across the patch
+    // footprint, and the fade only thins how many *draw* at range in the vertex shader — so a deeper
+    // meadow reads expansive without raising the instance ceiling.
     const instanceCount = Math.max(1500, Math.min(250000, Math.ceil(rules.density * area[0] * area[1])));
     return (_jsx(GrassField, { position: [center[0], center[1], center[2]], area: area, count: instanceCount, density: rules.density, bladeHeight: bladeHeight, colorBase: rules.colorBase, colorTip: rules.colorTip, colorGround: context.groundColorAt?.(center[0], center[2]), colorVariation: rules.colorVariation, roughness: rules.roughness, seed: hashSeed(rules.seed.length > 0 ? rules.seed : object.id), heightAt: heightAt, wind: wind, edgeFeather: 2.2, exclude: exclude }));
 }

package/dist/scene/PoleLineRenderer.js

@@ -13,6 +13,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { parseParams } from "@jgengine/core/scene/sceneKinds";
 import { readNamedSockets } from "@jgengine/core/scene/modelSockets";
 import { POLE_LINE_KIND, POLE_LINE_SCHEMA, resolvePoleLine } from "@jgengine/core/world/poleLineKind";
+import { useDisposable } from "../render/useDisposable.js";
 import { registerSceneKindRenderer } from "./sceneKindRenderers.js";
 function Cables({ cables }) {
     const geometry = useMemo(() => {
@@ -139,25 +140,15 @@ function ProxyPoles({ poles, height, wireCount, wireSpacing, }) {
     const insulatorRef = useRef(null);
     const armLength = wireCount > 1 ? (wireCount - 1) * wireSpacing + 0.6 : 0.8;
     // Chunkier members than a real-scale pole: stylized worlds read thin cylinders as wire, not wood.
-    const trunkGeometry = useMemo(() => new THREE.CylinderGeometry(0.13, 0.22, height, 10), [height]);
-    const armGeometry = useMemo(() => new THREE.BoxGeometry(armLength, 0.17, 0.14), [armLength]);
-    const braceGeometry = useMemo(() => {
+    const trunkGeometry = useDisposable(() => new THREE.CylinderGeometry(0.13, 0.22, height, 10), [height]);
+    const armGeometry = useDisposable(() => new THREE.BoxGeometry(armLength, 0.17, 0.14), [armLength]);
+    const braceGeometry = useDisposable(() => {
         const braceSpan = Math.hypot(armLength * 0.32, 0.7);
         return new THREE.BoxGeometry(0.07, braceSpan, 0.06);
     }, [armLength]);
-    const insulatorGeometry = useMemo(() => new THREE.CylinderGeometry(0.06, 0.085, 0.24, 8), []);
-    const trunkMaterial = useMemo(() => createWeatheredWoodMaterial("#6b533a"), []);
-    const armMaterial = useMemo(() => createWeatheredWoodMaterial("#59452e", "x"), []);
-    useEffect(() => () => {
-        trunkGeometry.dispose();
-        armGeometry.dispose();
-        braceGeometry.dispose();
-        insulatorGeometry.dispose();
-    }, [trunkGeometry, armGeometry, braceGeometry, insulatorGeometry]);
-    useEffect(() => () => {
-        trunkMaterial.dispose();
-        armMaterial.dispose();
-    }, [trunkMaterial, armMaterial]);
+    const insulatorGeometry = useDisposable(() => new THREE.CylinderGeometry(0.06, 0.085, 0.24, 8), []);
+    const trunkMaterial = useDisposable(() => createWeatheredWoodMaterial("#6b533a"), []);
+    const armMaterial = useDisposable(() => createWeatheredWoodMaterial("#59452e", "x"), []);
     useEffect(() => {
         const trunk = trunkRef.current;
         const arm = armRef.current;

package/dist/settings/QuickControls.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useDebouncedCommit } from "@jgengine/react/useDebouncedCommit";
 function QuickSlider({ row }) {
-    const value = Number(row.value);
-    const readout = row.format?.(value) ?? String(value);
-    return (_jsxs("label", { className: "flex items-center gap-2 text-xs text-neutral-300", children: [_jsx("span", { className: "w-16 shrink-0 truncate", children: row.label }), _jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: value, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer accent-emerald-400", onChange: (event) => row.set(Number(event.target.value)) }), _jsx("span", { className: "w-9 shrink-0 text-right tabular-nums text-neutral-100", children: readout })] }));
+    // Live-mirror the thumb; debounce the persisting `set`, flush on release/blur (#1372).
+    const { value: local, onInput, flush } = useDebouncedCommit(Number(row.value), (next) => row.set(next));
+    const readout = row.format?.(local) ?? String(local);
+    return (_jsxs("label", { className: "flex items-center gap-2 text-xs text-neutral-300", children: [_jsx("span", { className: "w-16 shrink-0 truncate", children: row.label }), _jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: local, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer accent-emerald-400", onChange: (event) => onInput(Number(event.target.value)), onPointerUp: flush, onKeyUp: flush, onBlur: flush }), _jsx("span", { className: "w-9 shrink-0 text-right tabular-nums text-neutral-100", children: readout })] }));
 }
 function QuickToggle({ row }) {
     const on = Boolean(row.value);

package/dist/settings/SettingsMenu.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { useDebouncedCommit } from "@jgengine/react/useDebouncedCommit";
 import {} from "./settingsController.js";
 const surface = "var(--jg-surface, #16161d)";
 const surfaceDeep = "var(--jg-surface-deep, #0b0b11)";
@@ -26,9 +27,11 @@ function RowShell({ label, control }) {
     return (_jsxs("div", { className: "flex items-center justify-between gap-4 rounded-xl px-3.5 py-3", style: rowStyle, children: [_jsx("span", { className: "text-sm", style: { color: text }, children: label }), control] }));
 }
 function SliderRow({ row }) {
-    const value = Number(row.value);
-    const readout = row.format?.(value) ?? String(value);
-    return (_jsx(RowShell, { label: row.label, control: _jsxs("div", { className: "flex flex-1 items-center gap-3 pl-4", children: [_jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: value, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer", style: { accentColor: accent }, onChange: (event) => row.set(Number(event.target.value)) }), _jsx("span", { className: "w-12 shrink-0 text-right text-sm tabular-nums", style: { color: text }, children: readout })] }) }));
+    // Mirror the thumb + readout locally; debounce the persisting `set` so a drag doesn't storm the
+    // settings store (and any graphics rebuild it drives), flushing on release/blur (#1372).
+    const { value: local, onInput, flush } = useDebouncedCommit(Number(row.value), (next) => row.set(next));
+    const readout = row.format?.(local) ?? String(local);
+    return (_jsx(RowShell, { label: row.label, control: _jsxs("div", { className: "flex flex-1 items-center gap-3 pl-4", children: [_jsx("input", { type: "range", min: row.min, max: row.max, step: row.step, value: local, "aria-label": row.label, className: "h-1.5 flex-1 cursor-pointer", style: { accentColor: accent }, onChange: (event) => onInput(Number(event.target.value)), onPointerUp: flush, onKeyUp: flush, onBlur: flush }), _jsx("span", { className: "w-12 shrink-0 text-right text-sm tabular-nums", style: { color: text }, children: readout })] }) }));
 }
 function ToggleRow({ row }) {
     const on = Boolean(row.value);

package/dist/settings/appliedSettings.d.ts

@@ -1,11 +1,13 @@
 import type { AudioBusDef } from "@jgengine/core/audio/audioFalloff";
 import { type GraphicsQuality, type SettingsStore } from "@jgengine/core/settings/settingsModel";
-import { type TouchStyle } from "@jgengine/core/input/touchScheme";
+import { type TouchJoystickVariant, type TouchStyle } from "@jgengine/core/input/touchScheme";
 import type { AudioEngine } from "../audio/audioEngine.js";
 /** Sentinel Controls value meaning "defer to the game's suggested touch skin". */
 export declare const TOUCH_STYLE_AUTO = "auto";
 /** Shell-internal: binds the SettingsStore touch-style choice to the touch renderer. @internal */
 export declare function useTouchStyle(store: SettingsStore, fallback: TouchStyle): TouchStyle;
+/** Shell-internal: binds the SettingsStore joystick-variant choice (fixed vs floating) to the touch renderer. @internal */
+export declare function useTouchJoystickVariant(store: SettingsStore): TouchJoystickVariant;
 export declare function useSettingsRevision(store: SettingsStore): number;
 export declare function useGraphicsSettings(store: SettingsStore, shadowsDefault: boolean): {
     shadows: boolean;

package/dist/settings/appliedSettings.js

@@ -1,6 +1,6 @@
-import { useEffect, useReducer } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import { busVolumeSettingId, DEFAULT_GRAPHICS_QUALITY, DEFAULT_MASTER_VOLUME, DEFAULT_UI_SCALE, GRAPHICS_QUALITY_DPR, SETTING_IDS, UI_SCALE_MAX, UI_SCALE_MIN, } from "@jgengine/core/settings/settingsModel";
-import { TOUCH_STYLES } from "@jgengine/core/input/touchScheme";
+import { DEFAULT_TOUCH_JOYSTICK_VARIANT, TOUCH_JOYSTICK_VARIANTS, TOUCH_STYLES, } from "@jgengine/core/input/touchScheme";
 /** Sentinel Controls value meaning "defer to the game's suggested touch skin". */
 export const TOUCH_STYLE_AUTO = "auto";
 /** Shell-internal: binds the SettingsStore touch-style choice to the touch renderer. @internal */
@@ -9,10 +9,22 @@ export function useTouchStyle(store, fallback) {
     const raw = store.get(SETTING_IDS.touchStyle, TOUCH_STYLE_AUTO);
     return TOUCH_STYLES.includes(raw) ? raw : fallback;
 }
+/** Shell-internal: binds the SettingsStore joystick-variant choice (fixed vs floating) to the touch renderer. @internal */
+export function useTouchJoystickVariant(store) {
+    useSettingsRevision(store);
+    const raw = store.get(SETTING_IDS.touchJoystick, DEFAULT_TOUCH_JOYSTICK_VARIANT);
+    return TOUCH_JOYSTICK_VARIANTS.includes(raw)
+        ? raw
+        : DEFAULT_TOUCH_JOYSTICK_VARIANT;
+}
 export function useSettingsRevision(store) {
-    const [rev, bump] = useReducer((n) => n + 1, 0);
-    useEffect(() => store.subscribe(() => bump()), [store]);
-    return rev;
+    const versionRef = useRef(0);
+    const subscribe = useCallback((onStoreChange) => store.subscribe(() => {
+        versionRef.current += 1;
+        onStoreChange();
+    }), [store]);
+    const getVersion = useCallback(() => versionRef.current, []);
+    return useSyncExternalStore(subscribe, getVersion, getVersion);
 }
 export function useGraphicsSettings(store, shadowsDefault) {
     useSettingsRevision(store);

package/dist/settings/settingsController.js

@@ -1,8 +1,7 @@
-import { useEffect, useReducer } from "react";
 import { actionLabel, bindingLabel } from "@jgengine/core/input/actionBindings";
 import { BUILT_IN_SETTING_CATEGORIES, busVolumeSettingId, DEFAULT_GRAPHICS_QUALITY, DEFAULT_GRAPHICS_SHADOWS, DEFAULT_MASTER_VOLUME, DEFAULT_UI_SCALE, GRAPHICS_QUALITY_OPTIONS, SETTING_IDS, UI_SCALE_MAX, UI_SCALE_MIN, } from "@jgengine/core/settings/settingsModel";
-import { TOUCH_STYLE_OPTIONS } from "@jgengine/core/input/touchScheme";
-import { TOUCH_STYLE_AUTO } from "./appliedSettings.js";
+import { DEFAULT_TOUCH_JOYSTICK_VARIANT, TOUCH_JOYSTICK_VARIANT_OPTIONS, TOUCH_STYLE_OPTIONS, } from "@jgengine/core/input/touchScheme";
+import { TOUCH_STYLE_AUTO, useSettingsRevision } from "./appliedSettings.js";
 import { useSettingsStore, } from "@jgengine/react/settings";
 import { usePlayerFov } from "../camera/PlayerFov.js";
 const DEFAULT_CATEGORY_LABELS = {
@@ -19,8 +18,7 @@ const TOUCH_STYLE_SELECT_OPTIONS = [
 export function useSettingsCategories(config) {
     const store = useSettingsStore();
     const fov = usePlayerFov();
-    const [, force] = useReducer((n) => n + 1, 0);
-    useEffect(() => store.subscribe(() => force()), [store]);
+    useSettingsRevision(store);
     const hidden = new Set(config.hide);
     const extrasFor = (category) => config.extra
         .filter((def) => def.category === category)
@@ -136,6 +134,14 @@ export function useSettingsCategories(config) {
                     options: TOUCH_STYLE_SELECT_OPTIONS,
                     set: (value) => store.set(SETTING_IDS.touchStyle, value),
                 },
+                {
+                    id: SETTING_IDS.touchJoystick,
+                    label: "Joystick",
+                    kind: "select",
+                    value: store.get(SETTING_IDS.touchJoystick, DEFAULT_TOUCH_JOYSTICK_VARIANT),
+                    options: TOUCH_JOYSTICK_VARIANT_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+                    set: (value) => store.set(SETTING_IDS.touchJoystick, value),
+                },
             ]
             : []),
         ...extrasFor("controls"),

package/dist/shellMovement.d.ts

@@ -1,5 +1,19 @@
-/** Movement action names the shell drives via the walk controller. @internal */
+/** Movement action names the shell drives via the walk controller. */
 export declare const SHELL_MOVEMENT_ACTIONS: readonly ["moveForward", "moveBack", "moveLeft", "moveRight", "jump"];
+/**
+ * Default keyboard codes for the shell walk controller (WASD + Space).
+ * Use as the base of `defineGame({ input: { ...DEFAULT_WALK_CODES, interact: ["KeyE"] } })`
+ * instead of re-typing the same five bindings in every game.
+ *
+ * @capability default-walk-codes stock WASD + jump key codes for the shell walk controller
+ */
+export declare const DEFAULT_WALK_CODES: {
+    readonly moveForward: readonly ["KeyW"];
+    readonly moveBack: readonly ["KeyS"];
+    readonly moveLeft: readonly ["KeyA"];
+    readonly moveRight: readonly ["KeyD"];
+    readonly jump: readonly ["Space"];
+};
 /**
  * True when the game's input map binds any walk-controller action — the shell owns pose
  * for those games. Games that omit all five drive pose themselves.

package/dist/shellMovement.js

@@ -1,5 +1,19 @@
-/** Movement action names the shell drives via the walk controller. @internal */
+/** Movement action names the shell drives via the walk controller. */
 export const SHELL_MOVEMENT_ACTIONS = ["moveForward", "moveBack", "moveLeft", "moveRight", "jump"];
+/**
+ * Default keyboard codes for the shell walk controller (WASD + Space).
+ * Use as the base of `defineGame({ input: { ...DEFAULT_WALK_CODES, interact: ["KeyE"] } })`
+ * instead of re-typing the same five bindings in every game.
+ *
+ * @capability default-walk-codes stock WASD + jump key codes for the shell walk controller
+ */
+export const DEFAULT_WALK_CODES = {
+    moveForward: ["KeyW"],
+    moveBack: ["KeyS"],
+    moveLeft: ["KeyA"],
+    moveRight: ["KeyD"],
+    jump: ["Space"],
+};
 /**
  * True when the game's input map binds any walk-controller action — the shell owns pose
  * for those games. Games that omit all five drive pose themselves.

package/dist/structures/GeneratedBuilding.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
+import { useDisposable } from "../render/useDisposable.js";
 const DEFAULT_PALETTE = {
     wall: "#83766a",
     window: "#8ecae6",
@@ -116,8 +117,7 @@ function bucketPartMatrices(buildings, visible) {
 }
 function BuildingKindBatch({ kind, matrices, palette, geometry, }) {
     const meshRef = useRef(null);
-    const material = useMemo(() => batchMaterialFor(kind, palette), [kind, palette]);
-    useEffect(() => () => material.dispose(), [material]);
+    const material = useDisposable(() => batchMaterialFor(kind, palette), [kind, palette]);
     useLayoutEffect(() => {
         const mesh = meshRef.current;
         if (mesh === null)
@@ -129,8 +129,7 @@ function BuildingKindBatch({ kind, matrices, palette, geometry, }) {
     return (_jsx("instancedMesh", { ref: meshRef, args: [geometry, material, matrices.length], castShadow: true, receiveShadow: true }, matrices.length));
 }
 export function InstancedBuildings({ buildings, palette, visibleKinds }) {
-    const geometry = useMemo(() => new THREE.BoxGeometry(1, 1, 1), []);
-    useEffect(() => () => geometry.dispose(), [geometry]);
+    const geometry = useDisposable(() => new THREE.BoxGeometry(1, 1, 1), []);
     const buckets = useMemo(() => {
         const visible = visibleKinds === undefined ? null : new Set(visibleKinds);
         return bucketPartMatrices(buildings, visible);

package/dist/structures/TransformGizmo.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TransformControls } from "@react-three/drei";
 import { useThree } from "@react-three/fiber";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 /** Default rotation snap increment (radians) when callers don't configure one. */
 export const DEFAULT_ROTATION_SNAP = Math.PI / 12;
 /**
@@ -15,9 +15,10 @@ export const TransformGizmo = memo(function TransformGizmo({ position, rotationY
     const draggingRef = useRef(false);
     const controls = useThree((state) => state.controls);
     const anchorKey = `${position.x}:${position.y}:${position.z}:${rotationY}:${mode}`;
-    useEffect(() => {
-        setObject(groupRef.current);
-    }, [anchorKey]);
+    const anchorRef = useCallback((node) => {
+        groupRef.current = node;
+        setObject(node);
+    }, []);
     useEffect(() => {
         const group = groupRef.current;
         if (group === null || draggingRef.current)
@@ -50,7 +51,7 @@ export const TransformGizmo = memo(function TransformGizmo({ position, rotationY
             scale: { x: current.scale.x, y: current.scale.y, z: current.scale.z },
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef }), object !== null ? (_jsx(TransformControls, { object: object, mode: mode, size: size, space: space, ...snapProps, onMouseDown: () => {
+    return (_jsxs(_Fragment, { children: [_jsx("group", { ref: anchorRef }), object !== null ? (_jsx(TransformControls, { object: object, mode: mode, size: size, space: space, ...snapProps, onMouseDown: () => {
                     draggingRef.current = true;
                     if (controls !== null && "enabled" in controls)
                         controls.enabled = false;

package/dist/terrain/CarvedTerrain.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import {} from "@react-three/fiber";
-import { useEffect, useMemo } from "react";
 import * as THREE from "three";
+import { useDisposable } from "../render/useDisposable.js";
 import { createFieldGroundGeometry } from "./terrainMath.js";
 /**
  * Renders a `TerrainField` as a deformed ground mesh — the crater/mound view for destructible terrain.
@@ -9,12 +9,8 @@ import { createFieldGroundGeometry } from "./terrainMath.js";
  * once `epoch` changes. Pair with `InstancedBodies` to see debris resting in the crater it blasted.
  */
 export function CarvedTerrain({ field, size, segments, center, colors, heightRange, paletteAt, roughness = 0.95, metalness = 0, surfaceMaterial, receiveShadow = true, epoch = 0, ...meshProps }) {
-    const geometry = useMemo(() => createFieldGroundGeometry(field, { size, segments, center, colors, heightRange, paletteAt }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [field, size, segments, center, colors, heightRange, paletteAt, epoch]);
-    const defaultMaterial = useMemo(() => new THREE.MeshStandardMaterial({ color: "#ffffff", roughness, metalness, vertexColors: true }), [metalness, roughness]);
+    const geometry = useDisposable(() => createFieldGroundGeometry(field, { size, segments, center, colors, heightRange, paletteAt }), [field, size, segments, center, colors, heightRange, paletteAt, epoch]);
+    const defaultMaterial = useDisposable(() => new THREE.MeshStandardMaterial({ color: "#ffffff", roughness, metalness, vertexColors: true }), [metalness, roughness]);
     const material = surfaceMaterial ?? defaultMaterial;
-    useEffect(() => () => geometry.dispose(), [geometry]);
-    useEffect(() => () => defaultMaterial.dispose(), [defaultMaterial]);
     return _jsx("mesh", { ...meshProps, geometry: geometry, material: material, receiveShadow: receiveShadow });
 }

package/dist/terrain/GrassField.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFrame } from "@react-three/fiber";
 import { useEffect, useMemo } from "react";
+import { useDisposable } from "../render/useDisposable.js";
 import { createGrassBladeGeometry, grassTuftCount, GRASS_TUFT_BLADES, } from "./grassGeometry.js";
 import { createGrassMaterial, } from "./grassMaterial.js";
 import { DEFAULT_GRASS_COUNT, DEFAULT_GRASS_DENSITY, resolveGrassInstanceBudget, } from "./grassBudget.js";
 export { DEFAULT_GRASS_COUNT, DEFAULT_GRASS_DENSITY, resolveGrassInstanceBudget } from "./grassBudget.js";
 export { GRASS_TUFT_BLADES } from "./grassGeometry.js";
 export function GrassField({ count = DEFAULT_GRASS_COUNT, density = DEFAULT_GRASS_DENSITY, budget, area = 40, seed = 1, segments = 4, bladeHeight, bladeWidth, bladeBend, tuftBlades = GRASS_TUFT_BLADES, tuftRadius, edgeFeather, exclude, heightAt, colorBase, colorTip, colorGround, colorVariation, wind, distanceFade, normalLift, roughness, castShadow = false, receiveShadow = true, frustumCulled = true, ...meshProps }) {
-    const geometry = useMemo(() => createGrassBladeGeometry({
+    const geometry = useDisposable(() => createGrassBladeGeometry({
         count,
         area,
         seed,
@@ -37,7 +38,6 @@ export function GrassField({ count = DEFAULT_GRASS_COUNT, density = DEFAULT_GRAS
     useFrame((state) => {
         handle.uniforms.uTime.value = state.clock.elapsedTime;
     });
-    useEffect(() => () => geometry.dispose(), [geometry]);
     useEffect(() => () => handle.material.dispose(), [handle]);
     return (_jsx("mesh", { ...meshProps, geometry: geometry, material: handle.material, castShadow: castShadow, receiveShadow: receiveShadow, frustumCulled: frustumCulled }));
 }