solanapolis 1.0.0

package/src/components/InstancedCityPlanes.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { useRef, useEffect, useMemo, useCallback } from "react";
+import { useFrame, ThreeEvent } from "@react-three/fiber";
+import * as THREE from "three";
+import { PlacedWallet } from "@/types/wallet";
+import { getWalletWorldPosition, getBuildingDimensions, getInstanceSeed } from "@/lib/building-math";
+import { MAX_PLANES } from "@/lib/city-slots";
+import { WindowHoverInfo } from "./WindowTooltip";
+
+interface InstancedCityPlanesProps {
+  wallets: PlacedWallet[];
+  timeRef: React.MutableRefObject<number>;
+  onHoverPlane?: (info: WindowHoverInfo | null) => void;
+  onClickPlane?: (wallet: PlacedWallet, position: [number, number, number]) => void;
+  positionsRef?: React.MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+}
+
+// Each plane has a unique orbit
+interface PlaneOrbit {
+  cx: number;       // orbit center X (building X)
+  cz: number;       // orbit center Z (building Z)
+  radius: number;   // orbit radius
+  altitude: number;  // flight altitude
+  speed: number;     // angular speed (rad/s)
+  phase: number;     // starting phase
+  bankScale: number; // visual roll scale
+}
+
+const _dummy = new THREE.Object3D();
+const _color = new THREE.Color();
+
+export default function InstancedCityPlanes({
+  wallets,
+  timeRef,
+  onHoverPlane,
+  onClickPlane,
+  positionsRef,
+}: InstancedCityPlanesProps) {
+  const count = Math.min(wallets.length, MAX_PLANES);
+  const bodyRef = useRef<THREE.InstancedMesh>(null);
+  const wingRef = useRef<THREE.InstancedMesh>(null);
+  const tailRef = useRef<THREE.InstancedMesh>(null);
+  const hoveredIdx = useRef<number | null>(null);
+  const elapsedRef = useRef(0);
+
+  // Compute orbits — each plane circles above its wallet's building
+  const orbits: PlaneOrbit[] = useMemo(() => {
+    const result: PlaneOrbit[] = [];
+    for (let i = 0; i < count; i++) {
+      const w = wallets[i];
+      const dims = getBuildingDimensions(w);
+      const pos = getWalletWorldPosition(w, dims);
+      const seed = getInstanceSeed(w.address);
+      const seed2 = getInstanceSeed(w.address + "orbit");
+
+      result.push({
+        cx: pos[0],
+        cz: pos[2],
+        radius: 8 + seed * 18,          // 8–26 units orbit radius
+        altitude: 30 + seed2 * 50 + dims.height, // above building
+        speed: 0.3 + seed * 0.5,        // 0.3–0.8 rad/s
+        phase: seed2 * Math.PI * 2,     // random start angle
+        bankScale: 0.15 + seed * 0.15,  // visual bank intensity
+      });
+    }
+    return result;
+  }, [wallets, count]);
+
+  // Materials
+  const bodyMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#E35930",
+    metalness: 0.6,
+    roughness: 0.3,
+  }), []);
+
+  const wingMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#c8c8c8",
+    metalness: 0.7,
+    roughness: 0.2,
+  }), []);
+
+  const tailMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#E35930",
+    metalness: 0.5,
+    roughness: 0.35,
+  }), []);
+
+  // Instance colors — tint each plane slightly based on wallet seed
+  useEffect(() => {
+    if (!bodyRef.current || count === 0) return;
+    const bodyMesh = bodyRef.current;
+    const wingMesh = wingRef.current;
+    const tailMesh = tailRef.current;
+
+    for (let i = 0; i < count; i++) {
+      const seed = getInstanceSeed(wallets[i].address);
+      // Warm color palette: orange → coral → amber
+      const hue = 0.03 + seed * 0.06;           // 0.03–0.09
+      const sat = 0.75 + seed * 0.2;
+      const light = 0.45 + seed * 0.15;
+      _color.setHSL(hue, sat, light);
+      bodyMesh.setColorAt(i, _color);
+      tailMesh?.setColorAt(i, _color);
+
+      // Wings stay silver/gray
+      _color.setHSL(0, 0, 0.7 + seed * 0.15);
+      wingMesh?.setColorAt(i, _color);
+    }
+
+    if (bodyMesh.instanceColor) bodyMesh.instanceColor.needsUpdate = true;
+    if (wingMesh?.instanceColor) wingMesh.instanceColor.needsUpdate = true;
+    if (tailMesh?.instanceColor) tailMesh.instanceColor.needsUpdate = true;
+  }, [wallets, count]);
+
+  // Animate all planes
+  useFrame((_, delta) => {
+    if (count === 0) return;
+    const body = bodyRef.current;
+    const wing = wingRef.current;
+    const tail = tailRef.current;
+    if (!body || !wing || !tail) return;
+
+    elapsedRef.current += delta;
+    const t = elapsedRef.current;
+
+    // Prepare positions output for HUD/projectiles
+    const posOut = positionsRef ? [] as Array<{ x: number; y: number; z: number }> : null;
+
+    for (let i = 0; i < count; i++) {
+      const orb = orbits[i];
+      const angle = orb.phase + t * orb.speed;
+
+      // Position along circular orbit
+      const x = orb.cx + Math.cos(angle) * orb.radius;
+      const z = orb.cz + Math.sin(angle) * orb.radius;
+      // Gentle altitude oscillation
+      const y = orb.altitude + Math.sin(t * 0.5 + orb.phase) * 2;
+
+      if (posOut) posOut.push({ x, y, z });
+
+      // Heading — tangent to circle (perpendicular to radius)
+      const heading = angle + Math.PI / 2;
+      // Bank into the turn
+      const bank = -orb.bankScale;
+      // Gentle pitch oscillation
+      const pitch = Math.sin(t * 0.8 + orb.phase) * 0.05;
+
+      // Fuselage body (capsule-like box)
+      _dummy.position.set(x, y, z);
+      _dummy.rotation.set(pitch, heading, bank, "YXZ");
+      _dummy.scale.set(0.6, 0.5, 2.8);
+      _dummy.updateMatrix();
+      body.setMatrixAt(i, _dummy.matrix);
+
+      // Wings (wide flat box)
+      _dummy.scale.set(5.0, 0.07, 1.0);
+      _dummy.updateMatrix();
+      wing.setMatrixAt(i, _dummy.matrix);
+
+      // Tail fin (vertical)
+      _dummy.position.set(
+        x - Math.sin(heading) * 1.2,
+        y + 0.5,
+        z - Math.cos(heading) * 1.2,
+      );
+      _dummy.scale.set(0.06, 0.8, 0.5);
+      _dummy.updateMatrix();
+      tail.setMatrixAt(i, _dummy.matrix);
+    }
+
+    body.instanceMatrix.needsUpdate = true;
+    wing.instanceMatrix.needsUpdate = true;
+    tail.instanceMatrix.needsUpdate = true;
+
+    if (positionsRef && posOut) positionsRef.current = posOut;
+  });
+
+  // Pointer handlers
+  const handlePointerMove = useCallback((e: ThreeEvent<PointerEvent>) => {
+    e.stopPropagation();
+    const id = e.instanceId;
+    if (id === undefined || id >= count) { onHoverPlane?.(null); return; }
+
+    if (hoveredIdx.current !== id) {
+      hoveredIdx.current = id;
+      document.body.style.cursor = "pointer";
+    }
+
+    const w = wallets[id];
+    onHoverPlane?.({
+      address: w.address,
+      tokenIndex: 0,
+      screenX: e.nativeEvent.clientX,
+      screenY: e.nativeEvent.clientY,
+      mode: "building",
+      identityName: w.identityName,
+      identityType: w.identityType,
+      identityCategory: w.identityCategory,
+    });
+  }, [wallets, count, onHoverPlane]);
+
+  const handlePointerOut = useCallback(() => {
+    hoveredIdx.current = null;
+    document.body.style.cursor = "default";
+    onHoverPlane?.(null);
+  }, [onHoverPlane]);
+
+  const handleClick = useCallback((e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation();
+    const id = e.instanceId;
+    if (id === undefined || id >= count) return;
+    const w = wallets[id];
+    const dims = getBuildingDimensions(w);
+    const pos = getWalletWorldPosition(w, dims);
+    onClickPlane?.(w, pos);
+  }, [wallets, count, onClickPlane]);
+
+  if (count === 0) return null;
+
+  return (
+    <group>
+      {/* Fuselage bodies */}
+      <instancedMesh
+        ref={bodyRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        onPointerMove={handlePointerMove}
+        onPointerOut={handlePointerOut}
+        onClick={handleClick}
+      >
+        <capsuleGeometry args={[0.3, 1.8, 4, 8]} />
+        <primitive object={bodyMat} attach="material" />
+      </instancedMesh>
+
+      {/* Wings */}
+      <instancedMesh
+        ref={wingRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        raycast={() => { }} // no raycasting on wings - body handles it
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <primitive object={wingMat} attach="material" />
+      </instancedMesh>
+
+      {/* Tail fins */}
+      <instancedMesh
+        ref={tailRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        raycast={() => { }} // no raycasting
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <primitive object={tailMat} attach="material" />
+      </instancedMesh>
+    </group>
+  );
+}

package/src/components/InstancedHouses.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { PlacedWallet } from "@/types/wallet";
+import { createHouseMaterial } from "@/lib/house-shader";
+import {
+  CELL_SIZE, BLOCK_SIZE, BLOCK_STRIDE, BLOCKS_PER_ROW,
+  OFFSET_X, OFFSET_Z, SLOTS_PER_BLOCK, PARK_BLOCKS,
+} from "@/lib/city-constants";
+
+// Wall color palette — warm earthy tones
+const WALL_COLORS = [
+  "#d4c4a8", // cream
+  "#c9b99a", // warm tan
+  "#b8a88a", // sand
+  "#d6cbb8", // pale beige
+  "#c2b8a3", // khaki
+  "#bfc8c0", // sage grey
+  "#c4b4a0", // wheat
+  "#d0c0a0", // light gold
+  "#baa892", // dusty brown
+  "#c8c0b0", // stone
+].map((c) => new THREE.Color(c));
+
+// Roof color palette
+const ROOF_COLORS = [
+  "#8b4433", // terracotta
+  "#6b3a2a", // dark brick
+  "#5a4a3a", // warm slate
+  "#7a5a3a", // cedar brown
+  "#6a4a2a", // chocolate
+  "#4a5a4a", // moss
+  "#8a6a4a", // sienna
+  "#5a3a2a", // espresso
+].map((c) => new THREE.Color(c));
+
+function makeRng(seed: number) {
+  let s = Math.abs(seed) || 1;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return s / 2147483647;
+  };
+}
+
+export interface HouseInstance {
+  x: number;
+  z: number;
+  w: number;
+  h: number;
+  d: number;
+  roofH: number;
+  rotY: number;
+  wallColor: THREE.Color;
+  roofColor: THREE.Color;
+  hasChimney: boolean;
+}
+
+export function computeHouseSlots(occupiedSlots: Set<string>): HouseInstance[] {
+  const houses: HouseInstance[] = [];
+
+  for (let row = 0; row < BLOCKS_PER_ROW; row++) {
+    for (let col = 0; col < BLOCKS_PER_ROW; col++) {
+      if (PARK_BLOCKS.has(`${row},${col}`)) continue;
+
+      const rng = makeRng(row * 1009 + col * 2003 + 7);
+
+      for (let slot = 0; slot < SLOTS_PER_BLOCK; slot++) {
+        // Always consume RNG for every slot for stability
+        const shouldPlace = rng() < 0.15;
+        const jitterX = (rng() - 0.5) * 0.6;
+        const jitterZ = (rng() - 0.5) * 0.6;
+        const rotY = Math.floor(rng() * 4) * (Math.PI / 2);
+
+        // Independent axis variation
+        const w = 0.8 + rng() * 0.9;   // 0.8–1.7
+        const d = 0.8 + rng() * 0.9;   // 0.8–1.7
+        const h = 0.6 + rng() * 0.8;   // 0.6–1.4
+        const roofH = 0.3 + rng() * 0.5; // 0.3–0.8
+
+        const wallIdx = Math.floor(rng() * WALL_COLORS.length);
+        const roofIdx = Math.floor(rng() * ROOF_COLORS.length);
+        const hasChimney = rng() < 0.4;
+
+        if (!shouldPlace) continue;
+        if (occupiedSlots.has(`${row},${col},${slot}`)) continue;
+
+        const localRow = Math.floor(slot / 4);
+        const localCol = slot % 4;
+
+        const blockOriginX = OFFSET_X + col * BLOCK_STRIDE - BLOCK_SIZE / 2;
+        const blockOriginZ = OFFSET_Z + row * BLOCK_STRIDE - BLOCK_SIZE / 2;
+
+        const x = blockOriginX + localCol * CELL_SIZE + CELL_SIZE / 2 + jitterX;
+        const z = blockOriginZ + localRow * CELL_SIZE + CELL_SIZE / 2 + jitterZ;
+
+        houses.push({
+          x, z, w, h, d, roofH, rotY,
+          wallColor: WALL_COLORS[wallIdx],
+          roofColor: ROOF_COLORS[roofIdx],
+          hasChimney,
+        });
+      }
+    }
+  }
+
+  return houses;
+}
+
+interface InstancedHousesProps {
+  wallets: PlacedWallet[];
+  timeRef: React.MutableRefObject<number>;
+}
+
+const _dummy = new THREE.Object3D();
+const _col = new THREE.Color();
+
+export default function InstancedHouses({ wallets, timeRef }: InstancedHousesProps) {
+  const timeUniformRef = useRef<{ value: number }>({ value: 0 });
+
+  const occupiedSlots = useMemo(() => {
+    const set = new Set<string>();
+    for (const w of wallets) {
+      set.add(`${w.blockRow},${w.blockCol},${w.localSlot}`);
+    }
+    return set;
+  }, [wallets]);
+
+  const houses = useMemo(() => computeHouseSlots(occupiedSlots), [occupiedSlots]);
+  const chimneyHouses = useMemo(() => houses.filter((h) => h.hasChimney), [houses]);
+
+  // Pre-build geometries with color attributes baked in
+  const bodyGeo = useMemo(() => {
+    const geo = new THREE.BoxGeometry(1, 1, 1);
+    return geo;
+  }, []);
+
+  const roofGeo = useMemo(() => {
+    // radius = sqrt(2)/2 so the 4 corners of the pyramid base land exactly
+    // at (±0.5, ±0.5) when rotated 45° — matching the unit box edges
+    const geo = new THREE.ConeGeometry(Math.SQRT2 / 2, 1, 4);
+    // Rotate 45° around Y so pyramid edges align with box edges
+    geo.rotateY(Math.PI / 4);
+    return geo;
+  }, []);
+
+  const wallMat = useMemo(() => createHouseMaterial(timeUniformRef.current, 0.9, 1.0), []);
+  const roofMat = useMemo(() => createHouseMaterial(timeUniformRef.current, 0.8, 0.0), []);
+  const chimMat = useMemo(() => createHouseMaterial(timeUniformRef.current, 0.85, 1.0), []);
+
+  useFrame(() => {
+    timeUniformRef.current.value = timeRef.current;
+  });
+
+  // Build meshes imperatively so colors exist before first render
+  const bodyMesh = useMemo(() => {
+    if (houses.length === 0) return null;
+    const mesh = new THREE.InstancedMesh(bodyGeo, wallMat, houses.length);
+    const colors = new Float32Array(houses.length * 3);
+
+    for (let i = 0; i < houses.length; i++) {
+      const h = houses[i];
+      _dummy.position.set(h.x, h.h / 2, h.z);
+      _dummy.rotation.set(0, h.rotY, 0);
+      _dummy.scale.set(h.w, h.h, h.d);
+      _dummy.updateMatrix();
+      mesh.setMatrixAt(i, _dummy.matrix);
+
+      colors[i * 3] = h.wallColor.r;
+      colors[i * 3 + 1] = h.wallColor.g;
+      colors[i * 3 + 2] = h.wallColor.b;
+    }
+
+    mesh.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
+    mesh.instanceMatrix.needsUpdate = true;
+    mesh.frustumCulled = false;
+    return mesh;
+  }, [houses, bodyGeo, wallMat]);
+
+  const roofMesh = useMemo(() => {
+    if (houses.length === 0) return null;
+    const mesh = new THREE.InstancedMesh(roofGeo, roofMat, houses.length);
+    const colors = new Float32Array(houses.length * 3);
+
+    for (let i = 0; i < houses.length; i++) {
+      const h = houses[i];
+      _dummy.position.set(h.x, h.h + h.roofH / 2, h.z);
+      _dummy.rotation.set(0, h.rotY, 0);
+      _dummy.scale.set(h.w, h.roofH, h.d);
+      _dummy.updateMatrix();
+      mesh.setMatrixAt(i, _dummy.matrix);
+
+      colors[i * 3] = h.roofColor.r;
+      colors[i * 3 + 1] = h.roofColor.g;
+      colors[i * 3 + 2] = h.roofColor.b;
+    }
+
+    mesh.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
+    mesh.instanceMatrix.needsUpdate = true;
+    mesh.frustumCulled = false;
+    return mesh;
+  }, [houses, roofGeo, roofMat]);
+
+  const chimneyMesh = useMemo(() => {
+    if (chimneyHouses.length === 0) return null;
+    const geo = new THREE.BoxGeometry(1, 1, 1);
+    const mesh = new THREE.InstancedMesh(geo, chimMat, chimneyHouses.length);
+    const colors = new Float32Array(chimneyHouses.length * 3);
+
+    for (let i = 0; i < chimneyHouses.length; i++) {
+      const h = chimneyHouses[i];
+      const chimW = 0.12;
+      const chimH = h.roofH * 0.9;
+
+      const ox = Math.cos(h.rotY) * h.w * 0.25 - Math.sin(h.rotY) * h.d * 0.15;
+      const oz = Math.sin(h.rotY) * h.w * 0.25 + Math.cos(h.rotY) * h.d * 0.15;
+
+      _dummy.position.set(h.x + ox, h.h + chimH / 2 + h.roofH * 0.3, h.z + oz);
+      _dummy.rotation.set(0, 0, 0);
+      _dummy.scale.set(chimW, chimH, chimW);
+      _dummy.updateMatrix();
+      mesh.setMatrixAt(i, _dummy.matrix);
+
+      _col.set(h.roofColor).multiplyScalar(0.7);
+      colors[i * 3] = _col.r;
+      colors[i * 3 + 1] = _col.g;
+      colors[i * 3 + 2] = _col.b;
+    }
+
+    mesh.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
+    mesh.instanceMatrix.needsUpdate = true;
+    mesh.frustumCulled = false;
+    return mesh;
+  }, [chimneyHouses, chimMat]);
+
+  if (houses.length === 0) return null;
+
+  return (
+    <>
+      {bodyMesh && <primitive object={bodyMesh} />}
+      {roofMesh && <primitive object={roofMesh} />}
+      {chimneyMesh && <primitive object={chimneyMesh} />}
+    </>
+  );
+}

package/src/components/InstancedLampPosts.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useRef, useEffect, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { lampIntensity } from "@/lib/day-night";
+
+interface LampDatum {
+  pos: [number, number, number];
+  rotY: number;
+}
+
+interface InstancedLampPostsProps {
+  lamps: LampDatum[];
+  timeRef: React.MutableRefObject<number>;
+}
+
+const POLE_HEIGHT = 3.2;
+const ARM_LENGTH = 0.7;
+const DECAL_RADIUS = 4.5;
+
+const decalVertexShader = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+  }
+`;
+
+const decalFragmentShader = /* glsl */ `
+  uniform float uIntensity;
+  uniform vec3 uColor;
+  varying vec2 vUv;
+  void main() {
+    vec2 center = vUv - 0.5;
+    float dist = length(center) * 2.0;
+    float falloff = 1.0 - smoothstep(0.0, 1.0, dist);
+    falloff *= falloff;
+    gl_FragColor = vec4(uColor, falloff * uIntensity * 0.3);
+  }
+`;
+
+export default function InstancedLampPosts({ lamps, timeRef }: InstancedLampPostsProps) {
+  const poleRef = useRef<THREE.InstancedMesh>(null);
+  const armRef = useRef<THREE.InstancedMesh>(null);
+  const housingRef = useRef<THREE.InstancedMesh>(null);
+  const bulbRef = useRef<THREE.InstancedMesh>(null);
+  const bulbMatRef = useRef<THREE.MeshStandardMaterial>(null);
+  const decalRef = useRef<THREE.InstancedMesh>(null);
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+
+  const decalMaterialRef = useRef<THREE.ShaderMaterial | null>(null);
+  if (!decalMaterialRef.current) {
+    decalMaterialRef.current = new THREE.ShaderMaterial({
+      vertexShader: decalVertexShader,
+      fragmentShader: decalFragmentShader,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.AdditiveBlending,
+      polygonOffset: true,
+      polygonOffsetFactor: -1,
+      polygonOffsetUnits: -1,
+      uniforms: {
+        uIntensity: { value: 0 },
+        uColor: { value: new THREE.Color("#ffcc66") },
+      },
+    });
+  }
+  const decalMaterial = decalMaterialRef.current;
+
+  // Precompute arm-tip world positions for every lamp (avoids trig each frame)
+  const tipPositions = useMemo(() => {
+    return lamps.map(({ pos, rotY }) => {
+      const dx = Math.cos(rotY) * ARM_LENGTH;
+      const dz = -Math.sin(rotY) * ARM_LENGTH;
+      return new THREE.Vector3(pos[0] + dx, pos[1] + POLE_HEIGHT - 0.25, pos[2] + dz);
+    });
+  }, [lamps]);
+
+  useEffect(() => {
+    return () => {
+      decalMaterial.dispose();
+    };
+  }, [decalMaterial]);
+
+  // Set instance matrices
+  useEffect(() => {
+    const pole = poleRef.current;
+    const arm = armRef.current;
+    const housing = housingRef.current;
+    const bulb = bulbRef.current;
+    const decal = decalRef.current;
+    if (!pole || !arm || !housing || !bulb || !decal) return;
+
+    for (let i = 0; i < lamps.length; i++) {
+      const { pos, rotY } = lamps[i];
+      const [x, y, z] = pos;
+      const cosR = Math.cos(rotY);
+      const sinR = -Math.sin(rotY);
+
+      // Pole
+      dummy.position.set(x, y + POLE_HEIGHT / 2, z);
+      dummy.rotation.set(0, 0, 0);
+      dummy.scale.set(1, 1, 1);
+      dummy.updateMatrix();
+      pole.setMatrixAt(i, dummy.matrix);
+
+      // Arm
+      dummy.position.set(
+        x + cosR * ARM_LENGTH / 2,
+        y + POLE_HEIGHT - 0.05,
+        z + sinR * ARM_LENGTH / 2,
+      );
+      dummy.rotation.set(0, rotY, Math.PI / 2);
+      dummy.updateMatrix();
+      arm.setMatrixAt(i, dummy.matrix);
+
+      // Housing
+      dummy.position.set(
+        x + cosR * ARM_LENGTH,
+        y + POLE_HEIGHT - 0.15,
+        z + sinR * ARM_LENGTH,
+      );
+      dummy.rotation.set(0, rotY, 0);
+      dummy.updateMatrix();
+      housing.setMatrixAt(i, dummy.matrix);
+
+      // Bulb
+      dummy.position.set(
+        x + cosR * ARM_LENGTH,
+        y + POLE_HEIGHT - 0.22,
+        z + sinR * ARM_LENGTH,
+      );
+      dummy.rotation.set(0, 0, 0);
+      dummy.updateMatrix();
+      bulb.setMatrixAt(i, dummy.matrix);
+
+      // Decal — flat circle on the ground beneath the lamp tip
+      const tip = tipPositions[i];
+      dummy.position.set(tip.x, 0.01, tip.z);
+      dummy.rotation.set(-Math.PI / 2, 0, 0);
+      dummy.scale.set(DECAL_RADIUS, DECAL_RADIUS, 1);
+      dummy.updateMatrix();
+      decal.setMatrixAt(i, dummy.matrix);
+    }
+
+    pole.instanceMatrix.needsUpdate = true;
+    arm.instanceMatrix.needsUpdate = true;
+    housing.instanceMatrix.needsUpdate = true;
+    bulb.instanceMatrix.needsUpdate = true;
+    decal.instanceMatrix.needsUpdate = true;
+  }, [lamps, dummy, tipPositions]);
+
+  useFrame(() => {
+    const intensity = lampIntensity(timeRef.current);
+
+    // Update bulb emissive
+    if (bulbMatRef.current) {
+      bulbMatRef.current.emissiveIntensity = intensity * 2.5;
+      bulbMatRef.current.opacity = 0.3 + intensity * 0.7;
+    }
+
+    // Update decal intensity
+    decalMaterialRef.current!.uniforms.uIntensity.value = intensity;
+  });
+
+  if (lamps.length === 0) return null;
+
+  return (
+    <>
+      <instancedMesh ref={poleRef} args={[undefined!, undefined!, lamps.length]} frustumCulled={false}>
+        <cylinderGeometry args={[0.04, 0.06, POLE_HEIGHT, 6]} />
+        <meshStandardMaterial color="#555566" metalness={0.6} roughness={0.4} />
+      </instancedMesh>
+      <instancedMesh ref={armRef} args={[undefined!, undefined!, lamps.length]} frustumCulled={false}>
+        <cylinderGeometry args={[0.03, 0.03, ARM_LENGTH, 4]} />
+        <meshStandardMaterial color="#555566" metalness={0.6} roughness={0.4} />
+      </instancedMesh>
+      <instancedMesh ref={housingRef} args={[undefined!, undefined!, lamps.length]} frustumCulled={false}>
+        <boxGeometry args={[0.22, 0.12, 0.16]} />
+        <meshStandardMaterial color="#444455" metalness={0.5} roughness={0.3} />
+      </instancedMesh>
+      <instancedMesh ref={bulbRef} args={[undefined!, undefined!, lamps.length]} frustumCulled={false}>
+        <sphereGeometry args={[0.1, 6, 6]} />
+        <meshStandardMaterial
+          ref={bulbMatRef}
+          color="#ffcc66"
+          emissive="#ffcc66"
+          emissiveIntensity={0}
+          transparent
+          opacity={0.3}
+        />
+      </instancedMesh>
+
+      {/* Instanced ground decals — one additive-blended circle per lamp */}
+      <instancedMesh ref={decalRef} args={[undefined!, undefined!, lamps.length]} frustumCulled={false} renderOrder={-1} material={decalMaterial}>
+        <circleGeometry args={[1, 32]} />
+      </instancedMesh>
+    </>
+  );
+}