The court in code: from one photo to a two-megabyte cat you can walk around

build: {
  target: "es2022",
  sourcemap: false,
  cssMinify: true,
  rollupOptions: {
    input: pages,          // 25 HTML entries: main, about, shop, youtube, app, ... liveCams, press
    output: {
      manualChunks(id) {
        // RectAreaLightUniformsLib carries the two LTC lookup tables as
        // inline float literals: 246kB of the 895kB three chunk, a quarter of
        // the bytes the browser has to parse before the court can start.
        // Its own chunk downloads in parallel and keeps that parse cost off
        // the critical three bundle.
        if (/RectAreaLight(UniformsLib|TexturesLib)/.test(id)) return "three-ltc";
        if (id.includes("node_modules/three")) return "three";
      },
    },
  },
},

three-DYkD2aq_.js        649,811    the three.js core chunk (every WebGL page)
three-ltc-B0L8g37D.js    247,242    the LTC tables (home, about, shop only)
boot-CO58UEj6.js          22,254    shared site boot: splash, phone shell, analytics guard
shopCourt-LZGzyf3U.js     22,047    the shop room
room-43kbheUX.js          19,561    walls, floor, furniture, lights
main-DMbFNgQ4.js          14,831    home page entry
court-BtiekMw8.js         13,342    the court scene: camera rig, live cams, tick loop
dither-o52Mov_j.js         5,804
quality-Cjv-_xYg.js        1,762

function preloadThreeChunk() {
  return {
    name: "preload-three-chunk",
    transformIndexHtml: {
      order: "post" as const,
      handler(html, ctx) {
        if (!ctx.bundle) return html;
        const rel = relative(__dirname, ctx.filename || "").replace(/\\/g, "/");
        if (!["index.html", "about/index.html", "shop/index.html"].includes(rel)) return html;
        const chunks = Object.values(ctx.bundle).filter(
          (chunk) => chunk.type === "chunk" && (chunk.name === "three" || chunk.name === "three-ltc"),
        );
        if (!chunks.length) return html;
        const hrefs = chunks.map((chunk) => `/${chunk.fileName}`).filter((href) => !html.includes(`href="${href}"`));
        if (!hrefs.length) return html;
        const snippet = `<script>!function(){var d=navigator.connection&&navigator.connection.saveData;var phone=!(matchMedia("(min-width: 900px) and (pointer: fine)").matches)&&(innerWidth<820||matchMedia("(pointer: coarse)").matches||d);if(phone)return;${JSON.stringify(hrefs)}.forEach(function(h){var l=document.createElement("link");l.rel="modulepreload";l.href=h;document.head.appendChild(l)});}();</script>`;
        return html.replace("</head>", `    ${snippet}\n  </head>`);
      },
    },
  };
}

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";

function meshoptReady(): Promise<void> {
  const ready = (MeshoptDecoder as { ready?: Promise<void> }).ready;
  return ready ?? Promise.resolve();
}

let loader: GLTFLoader | null = null;

export async function createGltfLoader(): Promise<GLTFLoader> {
  await meshoptReady();
  if (loader) return loader;
  loader = new GLTFLoader();
  loader.setMeshoptDecoder(MeshoptDecoder);
  return loader;
}

/** Cache-busted GLB URLs. Bump the query when textures or meshes change. */
export const HELEN_SIT_GLB = "/models/helen-sit-v2.glb?v=mv1";
export const HELEN_SIT_HQ_GLB = "/models/helen-sit.glb?v=sithq1";
export const HELEN_STAND_GLB = "/models/helen-standing.glb?v=mv4";
export const HELEN_MORSE_BUST = "/models/helen-morse-bust.glb?v=b10";
export const CHARLES_MORSE_BUST = "/models/charles-morse-bust.glb?v=b10";

// helenMesh.ts
const SIT_STD = HELEN_SIT_GLB;
const STANDING = HELEN_STAND_GLB;

export function helenSitUrl() {
  const max = document.documentElement.dataset.courtmax === "1";
  const coarse = window.matchMedia("(pointer: coarse)").matches || window.innerWidth < 820;
  if (max && !coarse) return HELEN_SIT_HQ_GLB;
  return SIT_STD;
}

export async function loadHelenMesh(opts) {
  const loader = await createGltfLoader();
  try {
    const gltf = await loader.loadAsync(helenSitUrl());
    return fitHelen(gltf.scene, "sit", opts);
  } catch (err) {
    console.warn("[court] sitting mesh missing, trying standing", err);
    try {
      const gltf = await loader.loadAsync(STANDING);
      return fitHelen(gltf.scene, "stand", opts);
    } catch (err2) {
      console.warn("[court] helen mesh missing", err2);
      return null;
    }
  }
}

export function createCamFeeds(): CamHandle[] {
  return CAMERAS.map((cam) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    const texture = new THREE.Texture(img);
    texture.colorSpace = THREE.SRGBColorSpace;
    texture.minFilter = THREE.LinearFilter;
    img.onload = () => { texture.needsUpdate = true; };
    img.src = cam.poster;
    const handle: CamHandle = { id: cam.id, texture, img, live: false };
    announceCamStatus(handle);
    return handle;
  });
}

export function startCamFeeds(handles: CamHandle[]) {
  handles.forEach((handle, index) => {
    window.setTimeout(() => void refreshCam(handle), 80 + index * 220);
  });
}

export async function refreshCam(handle: CamHandle) {
  const cam = CAMERAS.find((c) => c.id === handle.id);
  if (!cam) return;
  const bust = `${cam.live}?t=${Date.now()}`;
  let live = false;
  try {
    await loadImage(handle.img, bust);
    live = true;
  } catch {
    try {
      await loadImage(handle.img, cam.local);
    } catch {
      setCamLive(handle, false);
      return;
    }
  }
  try {
    if (handle.img.decode) await handle.img.decode();
  } catch { /* decode optional */ }
  handle.texture.needsUpdate = true;
  setCamLive(handle, live);
}

camTimer += dt;
camSlow += dt;
if (watching && watchMat && camTimer > 2.2) {
  camTimer = 0;
  const active = handles.find((h) => h.texture === watchMat.map);
  if (active) void refreshCam(active);          // the camera you are standing at: every 2.2 s
}
// Refreshing all four cameras on the same frame meant four JPEG decodes and
// four GPU texture uploads landing together - a visible hitch every eight
// seconds. Round-robin one camera per slice instead, same overall cadence.
const camPeriod = watching ? 12 : 8;
if (handles.length && camSlow > camPeriod / handles.length) {
  camSlow = 0;
  for (let i = 0; i < handles.length; i++) {
    camCursor = (camCursor + 1) % handles.length;
    const h = handles[camCursor];
    if (watching && watchMat && h.texture === watchMat.map) continue;
    void refreshCam(h);
    break;
  }
}

export function createAdaptiveScaler(renderer, quality, size = () => ({ width: innerWidth, height: innerHeight })) {
  const STEP = 0.15;
  const GOOD_MS = 13.5; // comfortably inside a 60fps budget
  const BAD_MS = 21;    // sustained sub-50fps
  const WINDOW = 45;    // frames per decision
  const COOLDOWN = 1.1; // seconds between changes

  let scale = quality.dpr;
  let acc = 0, frames = 0, cooldown = 1.5, settled = 0;

  const apply = () => {
    const { width, height } = size();
    renderer.setPixelRatio(scale);
    renderer.setSize(width, height);
  };
  const set = (next: number) => {
    const clamped = Math.max(quality.dprMin, Math.min(quality.dprMax, Number(next.toFixed(3))));
    if (Math.abs(clamped - scale) < 0.01) return false;
    scale = clamped;
    apply();
    cooldown = COOLDOWN;
    return true;
  };

  return {
    sample(dt: number) {
      if (cooldown > 0) { cooldown -= dt; return; }
      // Ignore stalls from tab switches and texture uploads; they say nothing
      // about the resolution the machine can sustain.
      if (dt > 0.12) return;
      acc += dt * 1000;
      frames += 1;
      if (frames < WINDOW) return;
      const avg = acc / frames;
      acc = 0; frames = 0;
      if (avg > BAD_MS) {
        settled = 0;
        set(scale - STEP);
      } else if (avg < GOOD_MS && scale < quality.dprMax) {
        // Require two clean windows before spending pixels.
        settled += 1;
        if (settled >= 2) { settled = 0; set(scale + STEP); }
      } else {
        settled = 0;
      }
    },
    apply,
    current: () => scale,
  };
}

import * as THREE from "three";

let installed = false;

export function installOutputDither() {
  if (installed) return;
  installed = true;

  const chunk = THREE.ShaderChunk.colorspace_fragment;
  if (typeof chunk !== "string" || chunk.includes("helenDither")) return;

  THREE.ShaderChunk.colorspace_fragment = `${chunk}
  {
    // Interleaved gradient noise (Jimenez). Range [0,1), no temporal term.
    // highp explicitly: the multiply needs the precision to stay uniform.
    highp vec2 helenPix = gl_FragCoord.xy;
    highp float helenDither = fract( 52.9829189 * fract( dot( helenPix, vec2( 0.06711056, 0.00583715 ) ) ) );
    gl_FragColor.rgb += ( helenDither - 0.5 ) / 255.0;
  }
`;
}

// Building the PMREM environment swaps scene.environment, which invalidates
// every material in the scene and forces a full shader recompile. Doing that
// 50ms after reveal dropped a multi-hundred-millisecond freeze exactly where
// the first camera move lands. Build it before the compile pass instead, so
// shaders are compiled once, already lit the way they will be shown.
phase("pre-env");
upgradeEnv();                                  // PMREMGenerator.fromScene(new RoomEnvironment(), 0.04)
phase("env");
await compileScene(renderer, scene, camera, "court");   // renderer.compileAsync, falls back to compile
phase("compiled");
renderer.render(scene, camera);
phase("first-render");
tick();
overlay.classList.add("is-ready");

void decorateCourt();                           // portraits and busts arrive after reveal, then compileScene again
if (!isAbout) window.setTimeout(() => startCamFeeds(handles), 120);
void helenMeshPromise.then((mesh) => { if (!disposed && mesh) bindHelen(mesh); });