@rune-kit/rune 2.10.0 → 2.12.0

package/extensions/gamedev/skills/physics-engine.md

@@ -1,89 +1,89 @@
----
-name: "physics-engine"
-pack: "@rune/gamedev"
-description: "Physics integration — Rapier.js, rigid bodies, constraints, raycasting, collision callbacks, deterministic simulation."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# physics-engine
-
-Physics integration — Rapier.js, rigid bodies, constraints, raycasting, collision callbacks, deterministic simulation.
-
-#### Workflow
-
-**Step 1 — Detect physics setup**
-Use Grep to find physics libraries: `rapier`, `cannon`, `ammo`, `@dimforge/rapier3d`, `RigidBody`, `Collider`. Read physics initialization and body creation to understand: engine choice, world configuration, and collision handling.
-
-**Step 2 — Audit physics configuration**
-Check for: physics step tied to render frame (non-deterministic), missing collision groups (everything collides with everything), no sleep threshold (wasted CPU on static objects), raycasts without max distance (expensive), and missing body cleanup on entity destroy.
-
-**Step 3 — Emit optimized physics**
-Emit: Rapier.js (WASM, deterministic) setup with proper collision groups, sleep thresholds, event-driven collision callbacks, and raycasting utility.
-
-#### Example
-
-```typescript
-// Rapier.js (WASM) — setup with collision groups and raycasting
-import RAPIER from '@dimforge/rapier3d-compat';
-
-await RAPIER.init();
-const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 });
-
-// Collision groups: player=0x0001, enemy=0x0002, ground=0x0004, projectile=0x0008
-const GROUPS = { PLAYER: 0x0001, ENEMY: 0x0002, GROUND: 0x0004, PROJECTILE: 0x0008 };
-
-// Ground — static, collides with everything
-const groundBody = world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(0, 0, 0));
-world.createCollider(
-  RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
-    .setCollisionGroups((GROUPS.GROUND << 16) | 0xFFFF),
-  groundBody,
-);
-
-// Player — dynamic, collides with ground + enemy (not own projectiles)
-const playerBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0));
-world.createCollider(
-  RAPIER.ColliderDesc.capsule(0.5, 0.3)
-    .setCollisionGroups((GROUPS.PLAYER << 16) | (GROUPS.GROUND | GROUPS.ENEMY))
-    .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS),
-  playerBody,
-);
-
-// Raycast utility
-function raycast(origin: RAPIER.Vector3, direction: RAPIER.Vector3, maxDist = 100) {
-  const ray = new RAPIER.Ray(origin, direction);
-  const hit = world.castRay(ray, maxDist, true);
-  if (hit) {
-    const point = ray.pointAt(hit.timeOfImpact);
-    return { point, normal: hit.normal, collider: hit.collider };
-  }
-  return null;
-}
-```
-
-#### Collision Event Handling
-
-```typescript
-// Event-driven collision callbacks — no polling
-const eventQueue = new RAPIER.EventQueue(true);
-
-// In fixed update step:
-world.step(eventQueue);
-
-eventQueue.drainCollisionEvents((handle1, handle2, started) => {
-  const body1 = world.getRigidBody(world.getCollider(handle1).parent()!);
-  const body2 = world.getRigidBody(world.getCollider(handle2).parent()!);
-
-  const entity1 = entityMap.get(body1.handle);
-  const entity2 = entityMap.get(body2.handle);
-
-  if (started) {
-    entity1?.onCollisionEnter(entity2);
-    entity2?.onCollisionEnter(entity1);
-  } else {
-    entity1?.onCollisionExit(entity2);
-    entity2?.onCollisionExit(entity1);
-  }
-});
-```
+---
+name: "physics-engine"
+pack: "@rune/gamedev"
+description: "Physics integration — Rapier.js, rigid bodies, constraints, raycasting, collision callbacks, deterministic simulation."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# physics-engine
+
+Physics integration — Rapier.js, rigid bodies, constraints, raycasting, collision callbacks, deterministic simulation.
+
+#### Workflow
+
+**Step 1 — Detect physics setup**
+Use Grep to find physics libraries: `rapier`, `cannon`, `ammo`, `@dimforge/rapier3d`, `RigidBody`, `Collider`. Read physics initialization and body creation to understand: engine choice, world configuration, and collision handling.
+
+**Step 2 — Audit physics configuration**
+Check for: physics step tied to render frame (non-deterministic), missing collision groups (everything collides with everything), no sleep threshold (wasted CPU on static objects), raycasts without max distance (expensive), and missing body cleanup on entity destroy.
+
+**Step 3 — Emit optimized physics**
+Emit: Rapier.js (WASM, deterministic) setup with proper collision groups, sleep thresholds, event-driven collision callbacks, and raycasting utility.
+
+#### Example
+
+```typescript
+// Rapier.js (WASM) — setup with collision groups and raycasting
+import RAPIER from '@dimforge/rapier3d-compat';
+
+await RAPIER.init();
+const world = new RAPIER.World({ x: 0, y: -9.81, z: 0 });
+
+// Collision groups: player=0x0001, enemy=0x0002, ground=0x0004, projectile=0x0008
+const GROUPS = { PLAYER: 0x0001, ENEMY: 0x0002, GROUND: 0x0004, PROJECTILE: 0x0008 };
+
+// Ground — static, collides with everything
+const groundBody = world.createRigidBody(RAPIER.RigidBodyDesc.fixed().setTranslation(0, 0, 0));
+world.createCollider(
+  RAPIER.ColliderDesc.cuboid(50, 0.1, 50)
+    .setCollisionGroups((GROUPS.GROUND << 16) | 0xFFFF),
+  groundBody,
+);
+
+// Player — dynamic, collides with ground + enemy (not own projectiles)
+const playerBody = world.createRigidBody(RAPIER.RigidBodyDesc.dynamic().setTranslation(0, 5, 0));
+world.createCollider(
+  RAPIER.ColliderDesc.capsule(0.5, 0.3)
+    .setCollisionGroups((GROUPS.PLAYER << 16) | (GROUPS.GROUND | GROUPS.ENEMY))
+    .setActiveEvents(RAPIER.ActiveEvents.COLLISION_EVENTS),
+  playerBody,
+);
+
+// Raycast utility
+function raycast(origin: RAPIER.Vector3, direction: RAPIER.Vector3, maxDist = 100) {
+  const ray = new RAPIER.Ray(origin, direction);
+  const hit = world.castRay(ray, maxDist, true);
+  if (hit) {
+    const point = ray.pointAt(hit.timeOfImpact);
+    return { point, normal: hit.normal, collider: hit.collider };
+  }
+  return null;
+}
+```
+
+#### Collision Event Handling
+
+```typescript
+// Event-driven collision callbacks — no polling
+const eventQueue = new RAPIER.EventQueue(true);
+
+// In fixed update step:
+world.step(eventQueue);
+
+eventQueue.drainCollisionEvents((handle1, handle2, started) => {
+  const body1 = world.getRigidBody(world.getCollider(handle1).parent()!);
+  const body2 = world.getRigidBody(world.getCollider(handle2).parent()!);
+
+  const entity1 = entityMap.get(body1.handle);
+  const entity2 = entityMap.get(body2.handle);
+
+  if (started) {
+    entity1?.onCollisionEnter(entity2);
+    entity2?.onCollisionEnter(entity1);
+  } else {
+    entity1?.onCollisionExit(entity2);
+    entity2?.onCollisionExit(entity1);
+  }
+});
+```

package/extensions/gamedev/skills/scene-management.md

@@ -1,146 +1,146 @@
----
-name: "scene-management"
-pack: "@rune/gamedev"
-description: "Scene transitions, preloading, serialization — stack-based SceneManager with fade transitions, asset preloading before enter, and level JSON serialization."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# scene-management
-
-Scene transitions, preloading, serialization — stack-based SceneManager with fade transitions, asset preloading before enter, and level JSON serialization.
-
-#### Workflow
-
-**Step 1 — Detect scene structure**
-Use Grep to find scene code: `Scene`, `GameState`, `StateMachine`, `push`, `pop`, `replace`. Read to understand: how scenes transition, whether assets are preloaded, and how scene data is persisted.
-
-**Step 2 — Audit scene management**
-Check for: abrupt scene switches with no transition (jarring UX), assets loaded mid-scene causing stutters, no scene stack (can't return to previous state), missing cleanup on exit.
-
-**Step 3 — Emit SceneManager**
-Emit: stack-based SceneManager with fade in/out, asset preloading tied to scene.assets[], push/pop/replace operations, and level serialization/deserialization.
-
-#### Scene Stack with Transitions and Preloading
-
-```typescript
-// Scene manager — stack-based, asset preloading, fade transitions
-interface Scene {
-  name: string;
-  assets: string[]; // asset keys to preload before entering
-  onEnter(data?: unknown): void;
-  onExit(): void;
-  update(dt: number): void;
-  render(ctx: CanvasRenderingContext2D): void;
-}
-
-class SceneManager {
-  private stack: Scene[] = [];
-  private loader: AssetLoader;
-  private transitioning = false;
-  private fadeAlpha = 0;
-  private fadeDir: 1 | -1 = 1;
-
-  constructor(loader: AssetLoader) { this.loader = loader; }
-
-  get current(): Scene | undefined { return this.stack[this.stack.length - 1]; }
-
-  async push(scene: Scene, data?: unknown) {
-    if (this.transitioning) return;
-    this.transitioning = true;
-
-    await this.fadeOut();
-    await this.preloadScene(scene);
-    this.stack.push(scene);
-    scene.onEnter(data);
-    await this.fadeIn();
-
-    this.transitioning = false;
-  }
-
-  async pop() {
-    if (this.transitioning || this.stack.length <= 1) return;
-    this.transitioning = true;
-
-    await this.fadeOut();
-    this.current?.onExit();
-    this.stack.pop();
-    await this.fadeIn();
-
-    this.transitioning = false;
-  }
-
-  async replace(scene: Scene, data?: unknown) {
-    if (this.transitioning) return;
-    this.transitioning = true;
-
-    await this.fadeOut();
-    this.current?.onExit();
-    this.stack.pop();
-    await this.preloadScene(scene);
-    this.stack.push(scene);
-    scene.onEnter(data);
-    await this.fadeIn();
-
-    this.transitioning = false;
-  }
-
-  private async preloadScene(scene: Scene) {
-    // Preload only assets not already cached
-    await Promise.all(scene.assets.map(key => this.loader.load(key, `/assets/${key}`)));
-  }
-
-  renderTransition(ctx: CanvasRenderingContext2D, w: number, h: number) {
-    if (this.fadeAlpha > 0) {
-      ctx.save();
-      ctx.globalAlpha = this.fadeAlpha;
-      ctx.fillStyle = '#000';
-      ctx.fillRect(0, 0, w, h);
-      ctx.restore();
-    }
-  }
-
-  private fadeOut(): Promise<void> {
-    return new Promise(resolve => {
-      this.fadeDir = 1;
-      const interval = setInterval(() => {
-        this.fadeAlpha = Math.min(1, this.fadeAlpha + 0.05);
-        if (this.fadeAlpha >= 1) { clearInterval(interval); resolve(); }
-      }, 16);
-    });
-  }
-
-  private fadeIn(): Promise<void> {
-    return new Promise(resolve => {
-      this.fadeDir = -1;
-      const interval = setInterval(() => {
-        this.fadeAlpha = Math.max(0, this.fadeAlpha - 0.05);
-        if (this.fadeAlpha <= 0) { clearInterval(interval); resolve(); }
-      }, 16);
-    });
-  }
-}
-
-// Level serialization — save/load level state as JSON
-interface LevelData {
-  name: string;
-  entities: Array<{ type: string; x: number; y: number; props: Record<string, unknown> }>;
-  tilemap: number[][];
-}
-
-function serializeLevel(world: World): LevelData {
-  const entities: LevelData['entities'] = [];
-  for (const id of world.query(Position)) {
-    const pos = world.getComponent(id, Position)!;
-    entities.push({ type: 'generic', x: pos.x, y: pos.y, props: {} });
-  }
-  return { name: 'level1', entities, tilemap: [] };
-}
-
-function deserializeLevel(data: LevelData, world: World) {
-  for (const e of data.entities) {
-    const id = world.createEntity();
-    world.addComponent(id, new Position(e.x, e.y));
-  }
-}
-```
+---
+name: "scene-management"
+pack: "@rune/gamedev"
+description: "Scene transitions, preloading, serialization — stack-based SceneManager with fade transitions, asset preloading before enter, and level JSON serialization."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# scene-management
+
+Scene transitions, preloading, serialization — stack-based SceneManager with fade transitions, asset preloading before enter, and level JSON serialization.
+
+#### Workflow
+
+**Step 1 — Detect scene structure**
+Use Grep to find scene code: `Scene`, `GameState`, `StateMachine`, `push`, `pop`, `replace`. Read to understand: how scenes transition, whether assets are preloaded, and how scene data is persisted.
+
+**Step 2 — Audit scene management**
+Check for: abrupt scene switches with no transition (jarring UX), assets loaded mid-scene causing stutters, no scene stack (can't return to previous state), missing cleanup on exit.
+
+**Step 3 — Emit SceneManager**
+Emit: stack-based SceneManager with fade in/out, asset preloading tied to scene.assets[], push/pop/replace operations, and level serialization/deserialization.
+
+#### Scene Stack with Transitions and Preloading
+
+```typescript
+// Scene manager — stack-based, asset preloading, fade transitions
+interface Scene {
+  name: string;
+  assets: string[]; // asset keys to preload before entering
+  onEnter(data?: unknown): void;
+  onExit(): void;
+  update(dt: number): void;
+  render(ctx: CanvasRenderingContext2D): void;
+}
+
+class SceneManager {
+  private stack: Scene[] = [];
+  private loader: AssetLoader;
+  private transitioning = false;
+  private fadeAlpha = 0;
+  private fadeDir: 1 | -1 = 1;
+
+  constructor(loader: AssetLoader) { this.loader = loader; }
+
+  get current(): Scene | undefined { return this.stack[this.stack.length - 1]; }
+
+  async push(scene: Scene, data?: unknown) {
+    if (this.transitioning) return;
+    this.transitioning = true;
+
+    await this.fadeOut();
+    await this.preloadScene(scene);
+    this.stack.push(scene);
+    scene.onEnter(data);
+    await this.fadeIn();
+
+    this.transitioning = false;
+  }
+
+  async pop() {
+    if (this.transitioning || this.stack.length <= 1) return;
+    this.transitioning = true;
+
+    await this.fadeOut();
+    this.current?.onExit();
+    this.stack.pop();
+    await this.fadeIn();
+
+    this.transitioning = false;
+  }
+
+  async replace(scene: Scene, data?: unknown) {
+    if (this.transitioning) return;
+    this.transitioning = true;
+
+    await this.fadeOut();
+    this.current?.onExit();
+    this.stack.pop();
+    await this.preloadScene(scene);
+    this.stack.push(scene);
+    scene.onEnter(data);
+    await this.fadeIn();
+
+    this.transitioning = false;
+  }
+
+  private async preloadScene(scene: Scene) {
+    // Preload only assets not already cached
+    await Promise.all(scene.assets.map(key => this.loader.load(key, `/assets/${key}`)));
+  }
+
+  renderTransition(ctx: CanvasRenderingContext2D, w: number, h: number) {
+    if (this.fadeAlpha > 0) {
+      ctx.save();
+      ctx.globalAlpha = this.fadeAlpha;
+      ctx.fillStyle = '#000';
+      ctx.fillRect(0, 0, w, h);
+      ctx.restore();
+    }
+  }
+
+  private fadeOut(): Promise<void> {
+    return new Promise(resolve => {
+      this.fadeDir = 1;
+      const interval = setInterval(() => {
+        this.fadeAlpha = Math.min(1, this.fadeAlpha + 0.05);
+        if (this.fadeAlpha >= 1) { clearInterval(interval); resolve(); }
+      }, 16);
+    });
+  }
+
+  private fadeIn(): Promise<void> {
+    return new Promise(resolve => {
+      this.fadeDir = -1;
+      const interval = setInterval(() => {
+        this.fadeAlpha = Math.max(0, this.fadeAlpha - 0.05);
+        if (this.fadeAlpha <= 0) { clearInterval(interval); resolve(); }
+      }, 16);
+    });
+  }
+}
+
+// Level serialization — save/load level state as JSON
+interface LevelData {
+  name: string;
+  entities: Array<{ type: string; x: number; y: number; props: Record<string, unknown> }>;
+  tilemap: number[][];
+}
+
+function serializeLevel(world: World): LevelData {
+  const entities: LevelData['entities'] = [];
+  for (const id of world.query(Position)) {
+    const pos = world.getComponent(id, Position)!;
+    entities.push({ type: 'generic', x: pos.x, y: pos.y, props: {} });
+  }
+  return { name: 'level1', entities, tilemap: [] };
+}
+
+function deserializeLevel(data: LevelData, world: World) {
+  for (const e of data.entities) {
+    const id = world.createEntity();
+    world.addComponent(id, new Position(e.x, e.y));
+  }
+}
+```

package/extensions/gamedev/skills/threejs-patterns.md

@@ -1,90 +1,90 @@
----
-name: "threejs-patterns"
-pack: "@rune/gamedev"
-description: "Three.js patterns — scene setup, React Three Fiber integration, PBR materials, post-processing, performance optimization."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# threejs-patterns
-
-Three.js patterns — scene setup, React Three Fiber integration, PBR materials, post-processing, performance optimization.
-
-#### Workflow
-
-**Step 1 — Detect Three.js setup**
-Use Grep to find Three.js usage: `THREE.`, `useThree`, `useFrame`, `Canvas`, `@react-three/fiber`, `@react-three/drei`. Read the main scene file to understand: renderer setup, scene graph structure, camera type, and lighting model.
-
-**Step 2 — Audit performance**
-Check for: objects created inside `useFrame` (GC pressure), missing `dispose()` on unmount (memory leak), no frustum culling on large scenes, textures without power-of-two dimensions, unoptimized geometry (too many draw calls), and missing LOD for distant objects.
-
-**Step 3 — Emit optimized scene**
-Emit: properly structured R3F scene with declarative lights, memoized geometries, disposal on unmount, instanced meshes for repeated objects, and post-processing pipeline.
-
-#### Example
-
-```tsx
-// React Three Fiber — optimized scene with instancing and post-processing
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls, Environment, useGLTF, Instances, Instance } from '@react-three/drei';
-import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
-import { useRef, useMemo } from 'react';
-
-function InstancedTrees({ count = 500 }) {
-  const positions = useMemo(() =>
-    Array.from({ length: count }, () => [
-      (Math.random() - 0.5) * 100,
-      0,
-      (Math.random() - 0.5) * 100,
-    ] as [number, number, number]),
-  [count]);
-
-  return (
-    <Instances limit={count}>
-      <cylinderGeometry args={[0.2, 0.4, 3]} />
-      <meshStandardMaterial color="#4a7c59" />
-      {positions.map((pos, i) => <Instance key={i} position={pos} />)}
-    </Instances>
-  );
-}
-
-function GameScene() {
-  return (
-    <Canvas camera={{ position: [0, 10, 20], fov: 60 }} gl={{ antialias: true }}>
-      <ambientLight intensity={0.3} />
-      <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
-      <Environment preset="sunset" />
-      <InstancedTrees count={500} />
-      <OrbitControls maxPolarAngle={Math.PI / 2.2} />
-      <EffectComposer>
-        <Bloom intensity={0.3} luminanceThreshold={0.8} />
-        <Vignette offset={0.3} darkness={0.6} />
-      </EffectComposer>
-    </Canvas>
-  );
-}
-```
-
-#### LOD (Level of Detail) Pattern
-
-```typescript
-import * as THREE from 'three';
-
-// Swap geometry based on camera distance
-function buildLODMesh(
-  highGeo: THREE.BufferGeometry,
-  midGeo: THREE.BufferGeometry,
-  lowGeo: THREE.BufferGeometry,
-  material: THREE.Material,
-): THREE.LOD {
-  const lod = new THREE.LOD();
-  lod.addLevel(new THREE.Mesh(highGeo, material), 0);    // < 20 units
-  lod.addLevel(new THREE.Mesh(midGeo, material), 20);    // 20–80 units
-  lod.addLevel(new THREE.Mesh(lowGeo, material), 80);    // > 80 units
-  return lod;
-}
-
-// In render loop — LOD auto-updates based on camera distance
-// scene.add(buildLODMesh(highGeo, midGeo, lowGeo, mat));
-// lod.update(camera); // call once per frame
-```
+---
+name: "threejs-patterns"
+pack: "@rune/gamedev"
+description: "Three.js patterns — scene setup, React Three Fiber integration, PBR materials, post-processing, performance optimization."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# threejs-patterns
+
+Three.js patterns — scene setup, React Three Fiber integration, PBR materials, post-processing, performance optimization.
+
+#### Workflow
+
+**Step 1 — Detect Three.js setup**
+Use Grep to find Three.js usage: `THREE.`, `useThree`, `useFrame`, `Canvas`, `@react-three/fiber`, `@react-three/drei`. Read the main scene file to understand: renderer setup, scene graph structure, camera type, and lighting model.
+
+**Step 2 — Audit performance**
+Check for: objects created inside `useFrame` (GC pressure), missing `dispose()` on unmount (memory leak), no frustum culling on large scenes, textures without power-of-two dimensions, unoptimized geometry (too many draw calls), and missing LOD for distant objects.
+
+**Step 3 — Emit optimized scene**
+Emit: properly structured R3F scene with declarative lights, memoized geometries, disposal on unmount, instanced meshes for repeated objects, and post-processing pipeline.
+
+#### Example
+
+```tsx
+// React Three Fiber — optimized scene with instancing and post-processing
+import { Canvas, useFrame } from '@react-three/fiber';
+import { OrbitControls, Environment, useGLTF, Instances, Instance } from '@react-three/drei';
+import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
+import { useRef, useMemo } from 'react';
+
+function InstancedTrees({ count = 500 }) {
+  const positions = useMemo(() =>
+    Array.from({ length: count }, () => [
+      (Math.random() - 0.5) * 100,
+      0,
+      (Math.random() - 0.5) * 100,
+    ] as [number, number, number]),
+  [count]);
+
+  return (
+    <Instances limit={count}>
+      <cylinderGeometry args={[0.2, 0.4, 3]} />
+      <meshStandardMaterial color="#4a7c59" />
+      {positions.map((pos, i) => <Instance key={i} position={pos} />)}
+    </Instances>
+  );
+}
+
+function GameScene() {
+  return (
+    <Canvas camera={{ position: [0, 10, 20], fov: 60 }} gl={{ antialias: true }}>
+      <ambientLight intensity={0.3} />
+      <directionalLight position={[10, 20, 10]} intensity={1} castShadow />
+      <Environment preset="sunset" />
+      <InstancedTrees count={500} />
+      <OrbitControls maxPolarAngle={Math.PI / 2.2} />
+      <EffectComposer>
+        <Bloom intensity={0.3} luminanceThreshold={0.8} />
+        <Vignette offset={0.3} darkness={0.6} />
+      </EffectComposer>
+    </Canvas>
+  );
+}
+```
+
+#### LOD (Level of Detail) Pattern
+
+```typescript
+import * as THREE from 'three';
+
+// Swap geometry based on camera distance
+function buildLODMesh(
+  highGeo: THREE.BufferGeometry,
+  midGeo: THREE.BufferGeometry,
+  lowGeo: THREE.BufferGeometry,
+  material: THREE.Material,
+): THREE.LOD {
+  const lod = new THREE.LOD();
+  lod.addLevel(new THREE.Mesh(highGeo, material), 0);    // < 20 units
+  lod.addLevel(new THREE.Mesh(midGeo, material), 20);    // 20–80 units
+  lod.addLevel(new THREE.Mesh(lowGeo, material), 80);    // > 80 units
+  return lod;
+}
+
+// In render loop — LOD auto-updates based on camera distance
+// scene.add(buildLODMesh(highGeo, midGeo, lowGeo, mat));
+// lod.update(camera); // call once per frame
+```