Triangle LED Hero

import type { Gpu, Surface, Target } from 'vgpu';
import type { BrowserRendererOptions, ExampleRenderer, RenderSize, ThumbnailOptions } from '../../lib/example-renderer';
import { createHeroRenderer, type HeroRenderer } from './scene-renderer';
import { DEFAULT_BRUSH } from './settings';
import { brushState, heroStateForActiveClick, simulationBrushState } from './sim-sizing';
import { isPointInsideTriangle } from './triangle-hit';
import { DEFAULT_TRIANGLE_LED_CONTROLS, isTriangleLedMode, type TriangleLedControls } from './types';
import { clock, frame, frameLoop, surface } from "vgpu";
 
export function createRenderer(options: BrowserRendererOptions<TriangleLedControls>): ExampleRenderer<TriangleLedControls> {
  let disposed = false;
  let reportedError = false;
  let gpu: Gpu | undefined;
  let canvasSurface: Surface | undefined;
  let scene: HeroRenderer | undefined;
  let loop: { stop(): void } | undefined;
  let observer: ResizeObserver | undefined;
  let input: ReturnType<typeof installCanvasInput> | undefined;
  let resizeFrame = 0;
  let resizeGeneration = 0;
  let pendingSize: RenderSize | undefined;
  let lastDpr = typeof window === 'undefined' ? 1 : window.devicePixelRatio;
  let controls = { ...(options.initialControls ?? DEFAULT_TRIANGLE_LED_CONTROLS) };
  if (!isTriangleLedMode(controls.mode)) controls = { ...DEFAULT_TRIANGLE_LED_CONTROLS };
 
  const fail = (error: unknown) => {
    if (disposed) return;
    if (!reportedError) {
      reportedError = true;
      try { options.onError?.(error); } catch { /* Error reporting must not bypass teardown. */ }
    }
    dispose();
  };
  const applyResize = () => {
    resizeFrame = 0;
    const size = pendingSize;
    pendingSize = undefined;
    if (disposed || !size || !scene || !canvasSurface) return;
    const generation = ++resizeGeneration;
    try {
      scene.rebuild({ width: size.width, height: size.height, dpr: canvasSurface.dpr });
      scene.setOutputTarget(canvasSurface);
      void scene.prewarm().catch((error: unknown) => {
        if (disposed || generation !== resizeGeneration) return;
        fail(error);
      });
    } catch (error) {
      if (disposed || generation !== resizeGeneration) return;
      fail(error);
    }
  };
  const resize = (size: RenderSize) => {
    if (disposed || size.width <= 0 || size.height <= 0) return;
    pendingSize = size;
    if (!resizeFrame) resizeFrame = requestAnimationFrame(applyResize);
  };
  const measure = () => {
    const rect = options.canvas.getBoundingClientRect();
    resize({ width: rect.width, height: rect.height, dpr: Math.min(2, Math.max(1, window.devicePixelRatio || 1)) });
  };
  const onWindowResize = () => {
    if (window.devicePixelRatio === lastDpr) return;
    lastDpr = window.devicePixelRatio;
    measure();
  };
  const setControls = (next: Readonly<TriangleLedControls>) => {
    if (disposed || !isTriangleLedMode(next.mode) || next.mode === controls.mode) return;
    controls = { mode: next.mode };
    scene?.setHero(heroStateForActiveClick(controls.mode));
  };
  const dispose = () => {
    if (disposed) return;
    disposed = true;
    resizeGeneration++;
    loop?.stop();
    loop = undefined;
    if (resizeFrame) cancelAnimationFrame(resizeFrame);
    resizeFrame = 0;
    pendingSize = undefined;
    observer?.disconnect();
    observer = undefined;
    if (typeof window !== 'undefined') window.removeEventListener('resize', onWindowResize);
    input?.dispose();
    input = undefined;
    scene?.destroy();
    scene = undefined;
    canvasSurface?.dispose();
    canvasSurface = undefined;
    gpu?.dispose();
    gpu = undefined;
  };
  const initialize = async () => {
    const { init } = await import('vgpu');
    if (disposed) return;
    const nextGpu = await init();
    if (disposed) { nextGpu.dispose(); return; }
    gpu = nextGpu;
    canvasSurface = surface(gpu, options.canvas, { dpr: [1, 2] });
    const nextScene = createHeroRenderer(gpu, { theme: 'dark', css: cssSizeOf(options.canvas, canvasSurface.dpr) });
    scene = nextScene;
    nextScene.setOutputTarget(canvasSurface);
    nextScene.setHero(heroStateForActiveClick(controls.mode));
    await nextScene.prewarm();
    if (disposed) { nextScene.destroy(); return; }
    input = installCanvasInput(options.canvas);
    observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
    observer?.observe(options.canvas);
    window.addEventListener('resize', onWindowResize);
    measure();
    const time = clock(gpu);
    loop = frameLoop(gpu, (currentFrame) => {
      if (disposed || !scene || !input || !gpu) return;
      scene.setBrush(input.brush());
      scene.setRgbDeployActive(input.rgbDeployActive());
      scene.renderFrame(currentFrame, { time: time.time, dt: time.deltaTime });
    });
  };
  const ready = initialize().catch((error: unknown) => {
    if (disposed) return;
    fail(error);
    throw error;
  });
  return { ready, setControls, invalidate() {}, resize, dispose };
}
 
export async function renderThumbnail(gpu: Gpu, target: Target, opts: ThumbnailOptions = {}): Promise<void> {
  const scene = createHeroRenderer(gpu, { theme: 'dark', css: { width: target.size[0], height: target.size[1], dpr: 1 } });
  try {
    scene.setOutputTarget(target);
    scene.setHero(heroStateForActiveClick(DEFAULT_TRIANGLE_LED_CONTROLS.mode));
    scene.setRgbDeployActive(false);
    scene.setBrush(brushState(DEFAULT_BRUSH));
    await scene.prewarm();
    const warmupFrames = opts.warmupFrames ?? 90;
    const dt = opts.dt ?? 1 / 60;
    let time = opts.time ?? 0;
    for (let i = 0; i < warmupFrames; i++) {
      time += dt;
      frame(gpu, (currentFrame) => scene.renderFrame(currentFrame, { time, dt }));
    }
  } finally {
    await Promise.allSettled([
      Promise.resolve().then(() => gpu.gpu.queue.onSubmittedWorkDone()),
      Promise.resolve().then(() => gpu.settled()),
    ]);
    try { scene.destroy(); } catch { /* Preserve the original render failure. */ }
  }
}
 
function cssSizeOf(canvas: HTMLCanvasElement, dpr: Surface['dpr']) {
  const rect = canvas.getBoundingClientRect();
  return {
    width: Math.max(1, rect.width || canvas.clientWidth || canvas.width / dpr),
    height: Math.max(1, rect.height || canvas.clientHeight || canvas.height / dpr),
    dpr,
  };
}
 
function installCanvasInput(canvas: HTMLCanvasElement) {
  let currentBrush = brushState(DEFAULT_BRUSH);
  let deployActive = false;
  let activePointer: number | undefined;
  const previousTouchAction = canvas.style.touchAction;
  canvas.style.touchAction = 'none';
 
  const leave = () => { currentBrush = brushState(DEFAULT_BRUSH); };
  const update = (event: PointerEvent) => {
    if (!event.isPrimary || (activePointer !== undefined && event.pointerId !== activePointer)) return false;
    const rect = canvas.getBoundingClientRect();
    const width = Math.max(1, rect.width);
    const height = Math.max(1, rect.height);
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    if (x < 0 || x > width || y < 0 || y > height) { leave(); return false; }
    currentBrush = simulationBrushState(DEFAULT_BRUSH, {
      x,
      y,
      active: true,
      inside: isPointInsideTriangle({ x, y }, { width, height }),
      isMouse: event.pointerType === 'mouse',
    }, height);
    return true;
  };
  const down = (event: PointerEvent) => {
    if (!event.isPrimary || activePointer !== undefined) return;
    activePointer = event.pointerId;
    canvas.setPointerCapture?.(event.pointerId);
    update(event);
  };
  const move = (event: PointerEvent) => { update(event); };
  const up = (event: PointerEvent) => {
    if (!event.isPrimary || (activePointer !== undefined && event.pointerId !== activePointer)) return;
    if (update(event)) deployActive = !deployActive;
    if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
    activePointer = undefined;
  };
  const cancel = (event: PointerEvent) => {
    if (event.pointerId !== activePointer) return;
    if (canvas.hasPointerCapture?.(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
    activePointer = undefined;
    leave();
  };
  const pointerLeave = () => { if (activePointer === undefined) leave(); };
  canvas.addEventListener('pointerdown', down);
  canvas.addEventListener('pointermove', move, { passive: true });
  canvas.addEventListener('pointerup', up, { passive: true });
  canvas.addEventListener('pointercancel', cancel);
  canvas.addEventListener('pointerleave', pointerLeave);
  return {
    brush: () => currentBrush,
    rgbDeployActive: () => deployActive,
    dispose() {
      canvas.removeEventListener('pointerdown', down);
      canvas.removeEventListener('pointermove', move);
      canvas.removeEventListener('pointerup', up);
      canvas.removeEventListener('pointercancel', cancel);
      canvas.removeEventListener('pointerleave', pointerLeave);
      if (activePointer !== undefined && canvas.hasPointerCapture?.(activePointer)) canvas.releasePointerCapture(activePointer);
      activePointer = undefined;
      canvas.style.touchAction = previousTouchAction;
    },
  };
}