Find and fix what makes a three.js scene slow or broken.

import {
  PerformanceMonitor, wrapAnimationLoop,
} from "@zkmake/three-meter";
import { mountPerfHud }
  from "@zkmake/three-meter/ui";

const monitor =
  new PerformanceMonitor({ renderer });
mountPerfHud(monitor);
renderer.setAnimationLoop(
  wrapAnimationLoop(monitor, render),
);

import { PerfHud, PerfSampler }
  from "@zkmake/three-meter/react";

<>
  <Canvas>
    <PerfSampler />
    {/* scene */}
  </Canvas>
  <PerfHud />
</>;

import { mountTexturePanel }
  from "@zkmake/three-textures/ui";

const panel =
  mountTexturePanel({ scene, renderer });
// later: panel.dispose()

import { TexturePanel }
  from "@zkmake/three-textures/react";

<Canvas>
  {import.meta.env.DEV && <TexturePanel />}
  {/* … */}
</Canvas>;

import { mountCameraPanel }
  from "@zkmake/three-cameras/ui";

const panel =
  mountCameraPanel({ scene, renderer });
// later: panel.dispose()

import { CameraPanel }
  from "@zkmake/three-cameras/react";

<Canvas>
  <CameraPanel />
  {/* … */}
</Canvas>;

import { findBadGeometry, findZFighting }
  from "@zkmake/three-audit";

test("no z-fighting or NaNs", () => {
  expect(findZFighting(mill)).toEqual([]);
  expect(findBadGeometry(mill)).toEqual([]);
});

// No React parts: it runs in tests and CI.
import { findBadGeometry, findZFighting }
  from "@zkmake/three-audit";

test("no z-fighting or NaNs", () => {
  expect(findZFighting(mill)).toEqual([]);
  expect(findBadGeometry(mill)).toEqual([]);
});

import { bake, chunkInstances }
  from "@zkmake/three-batch";

// dozens of meshes, one draw per material
const undo = bake(station);
// culling cells for a world-wide field
scene.add(
  chunkInstances(grass, { size: 128 }),
);

import { Baked }
  from "@zkmake/three-batch/react";

// dozens of meshes, one draw per material
<Baked name="station">
  <mesh geometry={wall} material={brick} />
  <mesh geometry={roof} material={slate} />
</Baked>;