Instanced Field

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useMemo, useRef } from "react";4import { Canvas, useFrame, useThree } from "@react-three/fiber";5import * as THREE from "three";6 7/**8 * A field of thousands of bars that ripple away from the pointer.9 *10 * All of them are ONE draw call. A single InstancedMesh carries a per-instance11 * matrix and colour, so the GPU draws 4,000 objects as cheaply as it draws12 * one — the naive version, 4,000 separate meshes, spends its entire frame13 * budget in JavaScript issuing draw calls and never reaches 60fps on a phone.14 *15 * The ripple is computed on the CPU because each instance needs a full matrix16 * anyway, and 4,000 sin() calls is around 0.2ms — well inside budget. Moving17 * it to a vertex shader would be faster still but would cost the ability to18 * read positions back, which is what makes the pointer falloff simple.19 */20 21interface FieldProps {22  count: number;23  color: string;24  accent: string;25  amplitude: number;26  speed: number;27  radius: number;28  still: boolean;29}30 31function Bars({ count, color, accent, amplitude, speed, radius, still }: FieldProps) {32  const mesh = useRef<THREE.InstancedMesh>(null);33  const { viewport } = useThree();34 35  // Grid derived from the instance budget so the field stays square-ish36  // whatever number the caller asks for.37  const side = Math.max(2, Math.round(Math.sqrt(count)));38  const total = side * side;39 40  // Allocated once. Building these per frame would hand the garbage41  // collector a few megabytes a second and show up as periodic stutter.42  const dummy = useMemo(() => new THREE.Object3D(), []);43  const baseColor = useMemo(() => new THREE.Color(color), [color]);44  const accentColor = useMemo(() => new THREE.Color(accent), [accent]);45  const scratch = useMemo(() => new THREE.Color(), []);46  const pointer = useRef(new THREE.Vector2(999, 999));47 48  const positions = useMemo(() => {49    const list: Array<[number, number]> = [];50    const spacing = 1;51    const offset = ((side - 1) * spacing) / 2;52    for (let x = 0; x < side; x += 1) {53      for (let z = 0; z < side; z += 1) {54        list.push([x * spacing - offset, z * spacing - offset]);55      }56    }57    return list;58  }, [side]);59 60  // Colour is per-instance and static, so it is written once rather than61  // every frame.62  useEffect(() => {63    const instanced = mesh.current;64    if (!instanced) return;65    const half = (side - 1) / 2;66    positions.forEach(([x, z], i) => {67      const distance = Math.hypot(x, z) / (half * 1.42);68      scratch.copy(baseColor).lerp(accentColor, Math.max(0, 1 - distance));69      instanced.setColorAt(i, scratch);70    });71    if (instanced.instanceColor) instanced.instanceColor.needsUpdate = true;72  }, [positions, side, baseColor, accentColor, scratch]);73 74  const write = (time: number) => {75    const instanced = mesh.current;76    if (!instanced) return;77 78    positions.forEach(([x, z], i) => {79      const distance = Math.hypot(x, z);80      // Radial travelling wave — the ripple.81      let height = Math.sin(distance * 0.55 - time * speed) * amplitude;82 83      // Pointer falloff, added on top so the two read as one surface rather84      // than the cursor punching a hole through the wave.85      const toPointer = Math.hypot(x - pointer.current.x, z - pointer.current.y);86      if (toPointer < radius) {87        const influence = 1 - toPointer / radius;88        height += influence * influence * amplitude * 3.2;89      }90 91      dummy.position.set(x, height * 0.5, z);92      // Scaled on Y only, anchored at the base, so bars grow upward instead93      // of expanding through the floor.94      dummy.scale.set(1, Math.max(0.08, 0.4 + height), 1);95      dummy.updateMatrix();96      instanced.setMatrixAt(i, dummy.matrix);97    });98 99    instanced.instanceMatrix.needsUpdate = true;100  };101 102  useFrame((state) => {103    if (still) return;104    write(state.clock.elapsedTime);105  });106 107  // One composed frame for reduced motion, rather than a flat grid or an108  // empty canvas.109  useEffect(() => {110    if (still) write(2.4);111    // write closes over the current props; re-running on any of them keeps112    // the still frame in sync with the controls.113  });114 115  const onPointerMove = (event: { point: THREE.Vector3 }) => {116    if (still) return;117    pointer.current.set(event.point.x, event.point.z);118  };119 120  return (121    <>122      {/* An invisible plane large enough to catch the pointer across the123          whole field — raycasting against 4,000 instances every mousemove124          would cost far more than the animation does. */}125      <mesh126        rotation={[-Math.PI / 2, 0, 0]}127        onPointerMove={onPointerMove}128        onPointerLeave={() => pointer.current.set(999, 999)}129        visible={false}130      >131        <planeGeometry args={[viewport.width * 3, viewport.height * 3]} />132      </mesh>133 134      <instancedMesh ref={mesh} args={[undefined, undefined, total]} castShadow={false}>135        <boxGeometry args={[0.42, 1, 0.42]} />136        <meshStandardMaterial roughness={0.55} metalness={0.1} />137      </instancedMesh>138    </>139  );140}141 142export interface InstancedFieldProps {143  /** Instance budget. Rounded to the nearest square — see the cost note. */144  count?: number;145  color?: string;146  accent?: string;147  /** Wave height. */148  amplitude?: number;149  speed?: number;150  /** How far the pointer's influence reaches, in grid units. */151  radius?: number;152  still?: boolean;153  className?: string;154}155 156export function InstancedField({157  count = 3600,158  color = "#1d2114",159  accent = "#c3f53c",160  amplitude = 0.9,161  speed = 1.6,162  radius = 6,163  still = false,164  className = "",165}: InstancedFieldProps) {166  const reduced =167    still ||168    (typeof matchMedia === "function" &&169      matchMedia("(prefers-reduced-motion: reduce)").matches);170 171  return (172    <div className={`h-full w-full ${className}`}>173      <Canvas174        // Capped at 1.5: this is a dense scene and the top end of the DPR175        // range costs more than it shows.176        dpr={[1, 1.5]}177        camera={{ position: [0, 18, 26], fov: 38 }}178        // Nothing changes unless the loop runs, so a still render is a single179        // frame rather than an idling rAF.180        frameloop={reduced ? "demand" : "always"}181        gl={{ antialias: true, powerPreference: "high-performance" }}182      >183        <color attach="background" args={["#0a0b0e"]} />184        <ambientLight intensity={0.55} />185        <directionalLight position={[8, 14, 6]} intensity={1.6} />186        <Bars187          count={count}188          color={color}189          accent={accent}190          amplitude={amplitude}191          speed={speed}192          radius={radius}193          still={reduced}194        />195      </Canvas>196    </div>197  );198}199