three-rb 0.1.0

data/examples/browser/cube/main.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+require "js"
+
+begin
+  JS.global[:__threeReady].await
+
+  require_relative "../../../lib/three"
+
+  document = JS.global[:document]
+  window = JS.global[:window]
+  viewport = document.call(:querySelector, "#viewport")
+  status = document.call(:querySelector, "#status")
+  status_dot = document.call(:querySelector, "#status-dot")
+  status[:textContent] = "Starting Ruby scene"
+
+  scene = Three::Scene.new
+  camera = Three::PerspectiveCamera.new(70, aspect: 1.0, near: 0.1, far: 100)
+  camera.position.z = 3
+
+  geometry = Three::BoxGeometry.new(1, 1, 1)
+  material = Three::MeshBasicMaterial.new(color: 0x4ed08f)
+  cube = Three::Mesh.new(geometry, material)
+  scene.add(cube)
+
+  renderer = Three::Renderers::ThreeJSRenderer.new(
+    canvas: "#scene",
+    antialias: true,
+    alpha: false,
+    preserveDrawingBuffer: true
+  )
+  renderer.set_clear_color(0x101418, 1)
+
+  resize = proc do
+    width = [viewport[:clientWidth].to_i, 1].max
+    height = [viewport[:clientHeight].to_i, 1].max
+
+    camera.aspect = width.to_f / height
+    camera.update_projection_matrix
+    renderer.set_size(width, height)
+  end
+
+  resize.call
+  window.call(:addEventListener, "resize", resize)
+  renderer.render(scene, camera)
+  JS.global[:__threeRbRenderer] = renderer.handle
+  JS.global[:__threeRbScene] = renderer.backend.materialize(scene)
+  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
+  JS.global[:__threeRbCube] = renderer.backend.materialize(cube)
+
+  renderer.animation_loop do
+    cube.rotation.x += 0.01
+    cube.rotation.y += 0.015
+    renderer.render(scene, camera)
+  end
+
+  status[:textContent] = "Running"
+  status_dot[:dataset][:state] = "running"
+rescue StandardError => error
+  JS.global.call(:__threeRbBootFailed, error.message) if JS.global[:__threeRbBootFailed]
+  raise
+end

data/examples/browser/cube/smoke_test.mjs

@@ -0,0 +1,99 @@
+import {
+  assertCanvasHasDimensions,
+  assertNoDiagnostics,
+  createDiagnostics,
+  createSmokePage,
+  loadPlaywright,
+  sampleCanvas,
+  startServer,
+  waitForRunning
+} from "../shared/smoke_test_helpers.mjs";
+
+async function main() {
+  const { chromium } = await loadPlaywright();
+  const server = await startServer();
+  const browser = await chromium.launch({ headless: process.env.HEADLESS !== "0" });
+  const diagnostics = createDiagnostics();
+
+  try {
+    const page = await createSmokePage(browser, diagnostics);
+
+    await page.goto(`${server.url}/examples/browser/cube/`, { waitUntil: "load" });
+    await waitForRunning(page, diagnostics);
+    await page.waitForTimeout(1_000);
+
+    const canvas = await sampleCanvas(page);
+    assertCanvasHasDimensions(canvas);
+    if (canvas.nonBlankPixels === 0) {
+      const debug = await page.evaluate(() => ({
+        sceneChildren: globalThis.__threeRbScene?.children?.length,
+        cubeType: globalThis.__threeRbCube?.type,
+        cubeVisible: globalThis.__threeRbCube?.visible,
+        cubeParentType: globalThis.__threeRbCube?.parent?.type,
+        cubePosition: globalThis.__threeRbCube?.position?.toArray?.(),
+        cubeScale: globalThis.__threeRbCube?.scale?.toArray?.(),
+        geometryType: globalThis.__threeRbCube?.geometry?.type,
+        geometryBoundingSphere: globalThis.__threeRbCube?.geometry?.boundingSphere,
+        materialType: globalThis.__threeRbCube?.material?.type,
+        materialKeys: globalThis.__threeRbCube?.material ? Object.keys(globalThis.__threeRbCube.material).slice(0, 20) : undefined,
+        materialColorType: globalThis.__threeRbCube?.material?.color?.constructor?.name,
+        materialColor: globalThis.__threeRbCube?.material?.color?.getHex?.(),
+        materialSide: globalThis.__threeRbCube?.material?.side,
+        materialOpacity: globalThis.__threeRbCube?.material?.opacity,
+        materialTransparent: globalThis.__threeRbCube?.material?.transparent,
+        materialVisible: globalThis.__threeRbCube?.material?.visible,
+        cameraType: globalThis.__threeRbCamera?.type,
+        cameraPosition: globalThis.__threeRbCamera?.position?.toArray?.(),
+        cameraFov: globalThis.__threeRbCamera?.fov,
+        cameraAspect: globalThis.__threeRbCamera?.aspect,
+        cameraNear: globalThis.__threeRbCamera?.near,
+        cameraFar: globalThis.__threeRbCamera?.far,
+        domElementSize: globalThis.__threeRbRenderer?.domElement && {
+          width: globalThis.__threeRbRenderer.domElement.width,
+          height: globalThis.__threeRbRenderer.domElement.height,
+          clientWidth: globalThis.__threeRbRenderer.domElement.clientWidth,
+          clientHeight: globalThis.__threeRbRenderer.domElement.clientHeight
+        },
+        rendererInfo: globalThis.__threeRbRenderer?.info?.render,
+        renderHelperType: typeof globalThis.__threeRbRender,
+        renderHelperCount: globalThis.__threeRbRenderCount,
+        renderHelperFrameCount: globalThis.__threeRbRenderFrameCount,
+        currentSceneChildren: globalThis.__threeRbCurrentScene?.children?.length,
+        currentCameraPosition: globalThis.__threeRbCurrentCamera?.position?.toArray?.(),
+        currentRendererMatches: globalThis.__threeRbCurrentRenderer === globalThis.__threeRbRenderer,
+        currentSceneMatches: globalThis.__threeRbCurrentScene === globalThis.__threeRbScene,
+        currentCameraMatches: globalThis.__threeRbCurrentCamera === globalThis.__threeRbCamera
+      }));
+      const direct = await page.evaluate(() => {
+        const renderer = globalThis.__threeRbRenderer;
+        renderer.setClearColor(0xff0000, 1);
+        renderer.clear(true, true, true);
+        renderer.render(globalThis.__threeRbScene, globalThis.__threeRbCamera);
+
+        const gl = renderer.domElement.getContext("webgl2") || renderer.domElement.getContext("webgl");
+        const corner = new Uint8Array(4);
+        const center = new Uint8Array(4);
+        gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, corner);
+        gl.readPixels(Math.floor(renderer.domElement.width / 2), Math.floor(renderer.domElement.height / 2), 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, center);
+        return { corner: Array.from(corner), center: Array.from(center), info: renderer.info.render };
+      });
+      throw new Error(`canvas sample is blank: ${JSON.stringify(canvas)} directClearPixel=${JSON.stringify(direct)}\n${JSON.stringify(debug, null, 2)}`);
+    }
+
+    const renderInfo = await page.evaluate(() => globalThis.__threeRbRenderer?.info?.render);
+    if (!renderInfo || renderInfo.triangles < 12) {
+      throw new Error(`renderer did not draw the cube triangles: ${JSON.stringify(renderInfo)}`);
+    }
+    assertNoDiagnostics(diagnostics);
+
+    console.log(`cube smoke test passed at ${server.url}/examples/browser/cube/`);
+  } finally {
+    await browser.close();
+    await new Promise((resolve) => server.instance.close(resolve));
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

data/examples/browser/cubemap/README.md

@@ -0,0 +1,23 @@
+# Browser Cubemap Example
+
+This example renders a Ruby-authored scene through ruby.wasm and the JavaScript three.js renderer. It focuses on `CubeTextureLoader`, `CubeTexture`, and scene `background`/`environment` synchronization.
+
+## Run
+
+From the repository root:
+
+```sh
+ruby -run -e httpd . -p 8000
+```
+
+Open:
+
+```text
+http://127.0.0.1:8000/examples/browser/cubemap/
+```
+
+## Smoke Test
+
+```sh
+pnpm test:browser:cubemap
+```

data/examples/browser/cubemap/boot.mjs

@@ -0,0 +1,6 @@
+import { bootRubyExample } from "../shared/boot.mjs";
+
+await bootRubyExample({
+  main: "examples/browser/cubemap/main",
+  clearColor: 0x10151b
+});

data/examples/browser/cubemap/index.html

@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>three-rb cubemap</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+        background: #10151b;
+        color: #eef3f7;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      body {
+        display: grid;
+        place-items: stretch;
+        overflow: hidden;
+      }
+
+      .viewport {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-width: 320px;
+        min-height: 320px;
+        background:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(135deg, #10151b 0%, #1b2430 45%, #151719 100%);
+        background-size: 34px 34px, 34px 34px, auto;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .hud {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        max-width: calc(100% - 32px);
+        padding: 8px 10px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 6px;
+        background: rgba(8, 12, 16, 0.74);
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
+        color: #dce7ef;
+        font-size: 13px;
+        line-height: 1.3;
+        backdrop-filter: blur(10px);
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        flex: 0 0 auto;
+        border-radius: 999px;
+        background: #f2b84b;
+        box-shadow: 0 0 14px rgba(242, 184, 75, 0.72);
+      }
+
+      .status-dot[data-state="running"] {
+        background: #60d394;
+        box-shadow: 0 0 14px rgba(96, 211, 148, 0.72);
+      }
+
+      .status-dot[data-state="error"] {
+        background: #f15b5b;
+        box-shadow: 0 0 14px rgba(241, 91, 91, 0.72);
+      }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "@bjorn3/browser_wasi_shim": "/node_modules/@bjorn3/browser_wasi_shim/dist/index.js",
+          "@ruby/wasm-wasi/browser": "/node_modules/@ruby/wasm-wasi/dist/esm/browser.js",
+          "three": "/node_modules/three/build/three.module.js",
+          "three/addons/": "/node_modules/three/examples/jsm/"
+        }
+      }
+    </script>
+    <script type="module">
+      const status = document.querySelector("#status");
+      const statusDot = document.querySelector("#status-dot");
+
+      globalThis.__threeRbSetStatus = (message, state) => {
+        if (status) status.textContent = message;
+        if (statusDot) statusDot.dataset.state = state;
+      };
+
+      globalThis.__threeRbBootFailed = (message) => {
+        globalThis.__threeRbSetStatus(message, "error");
+      };
+
+      globalThis.addEventListener("error", (event) => {
+        globalThis.__threeRbBootFailed(event.message || "Browser error");
+      });
+
+      globalThis.addEventListener("unhandledrejection", (event) => {
+        const reason = event.reason;
+        globalThis.__threeRbBootFailed(reason && reason.message ? reason.message : "Ruby boot failed");
+      });
+
+      globalThis.setTimeout(() => {
+        if (status && status.textContent === "Loading ruby.wasm") {
+          status.textContent = "Still loading ruby.wasm";
+        }
+      }, 15000);
+
+      globalThis.__threeRbSetStatus("Loading ruby.wasm", "loading");
+    </script>
+  </head>
+  <body>
+    <main id="viewport" class="viewport">
+      <canvas id="scene" data-testid="scene-canvas"></canvas>
+      <div class="hud" aria-live="polite">
+        <span id="status-dot" class="status-dot" data-state="loading"></span>
+        <span id="status" data-testid="status">Loading ruby.wasm</span>
+      </div>
+    </main>
+    <script type="module" src="./boot.mjs"></script>
+  </body>
+</html>

data/examples/browser/cubemap/main.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+require "js"
+
+begin
+  JS.global[:__threeReady].await
+
+  require_relative "../../../lib/three"
+
+  document = JS.global[:document]
+  window = JS.global[:window]
+  viewport = document.call(:querySelector, "#viewport")
+  status = document.call(:querySelector, "#status")
+  status_dot = document.call(:querySelector, "#status-dot")
+  status[:textContent] = "Starting Ruby scene"
+
+  scene = Three::Scene.new
+  camera = Three::PerspectiveCamera.new(45, aspect: 1.0, near: 0.1, far: 100)
+  camera.position.set(0, 0.7, 4.0)
+
+  cube_sources = Array.new(6, "/examples/browser/assets/checker.svg")
+  cube_texture = Three::Loaders::CubeTextureLoader.new.load(cube_sources)
+  scene.background = cube_texture
+  scene.environment = cube_texture
+
+  scene.add(Three::AmbientLight.new(0xffffff, 0.3))
+
+  key_light = Three::DirectionalLight.new(0xffffff, 1.2)
+  key_light.position.set(3.0, 4.0, 5.0)
+  scene.add(key_light)
+
+  material = Three::MeshStandardMaterial.new(
+    color: 0xf4f1e8,
+    roughness: 0.18,
+    metalness: 0.38
+  )
+  mesh = Three::Mesh.new(Three::SphereGeometry.new(1.05, width_segments: 32, height_segments: 18), material)
+  mesh.rotation.y = 0.4
+  scene.add(mesh)
+
+  renderer = Three::Renderers::ThreeJSRenderer.new(
+    canvas: "#scene",
+    antialias: true,
+    alpha: false,
+    preserveDrawingBuffer: true
+  )
+  renderer.set_clear_color(0x10151b, 1)
+
+  resize = proc do
+    width = [viewport[:clientWidth].to_i, 1].max
+    height = [viewport[:clientHeight].to_i, 1].max
+
+    camera.aspect = width.to_f / height
+    camera.update_projection_matrix
+    renderer.set_size(width, height)
+  end
+
+  resize.call
+  window.call(:addEventListener, "resize", resize)
+  renderer.render(scene, camera)
+
+  JS.global[:__threeRbRenderer] = renderer.handle
+  JS.global[:__threeRbCubemapScene] = renderer.backend.materialize(scene)
+  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
+  JS.global[:__threeRbCubemapMesh] = renderer.backend.materialize(mesh)
+  JS.global[:__threeRbCubemapMaterial] = renderer.backend.materialize(material)
+  JS.global[:__threeRbCubeTexture] = renderer.backend.materialize(cube_texture)
+  JS.global[:__threeRbCubemapFrame] = 0
+
+  frame = 0
+  renderer.animation_loop do
+    frame += 1
+    mesh.rotation.y += 0.01
+    mesh.rotation.x = Math.sin(frame * 0.02) * 0.08
+    JS.global[:__threeRbCubemapFrame] = frame
+    renderer.render(scene, camera)
+  end
+
+  status[:textContent] = "Running"
+  status_dot[:dataset][:state] = "running"
+rescue StandardError => error
+  JS.global.call(:__threeRbBootFailed, error.message) if JS.global[:__threeRbBootFailed]
+  raise
+end

data/examples/browser/cubemap/smoke_test.mjs

@@ -0,0 +1,91 @@
+import {
+  assertNoDiagnostics,
+  assertNonBlankCanvas,
+  createDiagnostics,
+  createSmokePage,
+  loadPlaywright,
+  sampleCanvas,
+  startServer,
+  waitForRunning
+} from "../shared/smoke_test_helpers.mjs";
+
+async function main() {
+  const { chromium } = await loadPlaywright();
+  const server = await startServer();
+  const browser = await chromium.launch({ headless: process.env.HEADLESS !== "0" });
+  const diagnostics = createDiagnostics();
+
+  try {
+    const page = await createSmokePage(browser, diagnostics);
+
+    await page.goto(`${server.url}/examples/browser/cubemap/`, { waitUntil: "load" });
+    await waitForRunning(page, diagnostics);
+    await page.waitForFunction(
+      () => {
+        const texture = globalThis.__threeRbCubeTexture;
+        return texture?.isCubeTexture === true &&
+          Array.isArray(texture.image) &&
+          texture.image.length === 6 &&
+          texture.image.every((image) => image?.complete === true);
+      },
+      null,
+      { timeout: 10_000 }
+    );
+    await page.waitForTimeout(1_000);
+
+    assertNonBlankCanvas(await sampleCanvas(page));
+
+    const scene = await page.evaluate(() => ({
+      frame: globalThis.__threeRbCubemapFrame,
+      renderInfo: globalThis.__threeRbRenderer?.info?.render,
+      cameraType: globalThis.__threeRbCamera?.type,
+      sceneChildren: globalThis.__threeRbCubemapScene?.children?.length,
+      meshType: globalThis.__threeRbCubemapMesh?.type,
+      geometryType: globalThis.__threeRbCubemapMesh?.geometry?.type,
+      materialType: globalThis.__threeRbCubemapMesh?.material?.type,
+      materialRoughness: globalThis.__threeRbCubemapMaterial?.roughness,
+      materialMetalness: globalThis.__threeRbCubemapMaterial?.metalness,
+      cubeTextureType: globalThis.__threeRbCubeTexture?.isCubeTexture,
+      cubeTextureImageCount: globalThis.__threeRbCubeTexture?.image?.length,
+      backgroundType: globalThis.__threeRbCubemapScene?.background?.isCubeTexture,
+      environmentType: globalThis.__threeRbCubemapScene?.environment?.isCubeTexture
+    }));
+
+    if (scene.cameraType !== "PerspectiveCamera") {
+      throw new Error(`expected a PerspectiveCamera cubemap view: ${JSON.stringify(scene)}`);
+    }
+    if (scene.meshType !== "Mesh" || scene.geometryType !== "SphereGeometry") {
+      throw new Error(`expected a sphere mesh: ${JSON.stringify(scene)}`);
+    }
+    if (scene.materialType !== "MeshStandardMaterial") {
+      throw new Error(`expected MeshStandardMaterial: ${JSON.stringify(scene)}`);
+    }
+    if (scene.materialRoughness !== 0.18 || scene.materialMetalness !== 0.38) {
+      throw new Error(`expected configured material values: ${JSON.stringify(scene)}`);
+    }
+    if (scene.cubeTextureType !== true || scene.cubeTextureImageCount !== 6) {
+      throw new Error(`expected a loaded cube texture: ${JSON.stringify(scene)}`);
+    }
+    if (scene.backgroundType !== true || scene.environmentType !== true) {
+      throw new Error(`expected scene background and environment cube textures: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.renderInfo || scene.renderInfo.triangles < 500) {
+      throw new Error(`renderer did not draw the cubemap scene: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.frame) {
+      throw new Error(`cubemap example animation did not advance: ${JSON.stringify(scene)}`);
+    }
+
+    assertNoDiagnostics(diagnostics);
+
+    console.log(`cubemap smoke test passed at ${server.url}/examples/browser/cubemap/`);
+  } finally {
+    await browser.close();
+    await new Promise((resolve) => server.instance.close(resolve));
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

data/examples/browser/gltf/README.md

@@ -0,0 +1,23 @@
+# Browser glTF Example
+
+This example renders small glTF assets through ruby.wasm and the JavaScript three.js renderer. It focuses on `GLTFLoader`, optional `DRACOLoader` decoder configuration for compressed geometry, adding loaded external scenes to the Ruby-authored scene graph, playing loaded clips through `AnimationMixer`, and disposing loaded subtrees.
+
+## Run
+
+From the repository root:
+
+```sh
+ruby -run -e httpd . -p 8000
+```
+
+Open:
+
+```text
+http://127.0.0.1:8000/examples/browser/gltf/
+```
+
+## Smoke Test
+
+```sh
+pnpm test:browser:gltf
+```

data/examples/browser/gltf/boot.mjs

@@ -0,0 +1,6 @@
+import { bootRubyExample } from "../shared/boot.mjs";
+
+await bootRubyExample({
+  main: "examples/browser/gltf/main",
+  clearColor: 0x11151a
+});

data/examples/browser/gltf/index.html

@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>three-rb glTF</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+        background: #11151a;
+        color: #eef3f7;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+
+      body {
+        display: grid;
+        place-items: stretch;
+        overflow: hidden;
+      }
+
+      .viewport {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-width: 320px;
+        min-height: 320px;
+        background:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(135deg, #11151a 0%, #182125 48%, #171719 100%);
+        background-size: 34px 34px, 34px 34px, auto;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .hud {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        max-width: calc(100% - 32px);
+        padding: 8px 10px;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 6px;
+        background: rgba(8, 12, 16, 0.74);
+        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
+        color: #dce7ef;
+        font-size: 13px;
+        line-height: 1.3;
+        backdrop-filter: blur(10px);
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        flex: 0 0 auto;
+        border-radius: 999px;
+        background: #f2b84b;
+        box-shadow: 0 0 14px rgba(242, 184, 75, 0.72);
+      }
+
+      .status-dot[data-state="running"] {
+        background: #60d394;
+        box-shadow: 0 0 14px rgba(96, 211, 148, 0.72);
+      }
+
+      .status-dot[data-state="error"] {
+        background: #f15b5b;
+        box-shadow: 0 0 14px rgba(241, 91, 91, 0.72);
+      }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "@bjorn3/browser_wasi_shim": "/node_modules/@bjorn3/browser_wasi_shim/dist/index.js",
+          "@ruby/wasm-wasi/browser": "/node_modules/@ruby/wasm-wasi/dist/esm/browser.js",
+          "three": "/node_modules/three/build/three.module.js",
+          "three/addons/": "/node_modules/three/examples/jsm/"
+        }
+      }
+    </script>
+    <script type="module">
+      const status = document.querySelector("#status");
+      const statusDot = document.querySelector("#status-dot");
+
+      globalThis.__threeRbSetStatus = (message, state) => {
+        if (status) status.textContent = message;
+        if (statusDot) statusDot.dataset.state = state;
+      };
+
+      globalThis.__threeRbBootFailed = (message) => {
+        globalThis.__threeRbSetStatus(message, "error");
+      };
+
+      globalThis.addEventListener("error", (event) => {
+        globalThis.__threeRbBootFailed(event.message || "Browser error");
+      });
+
+      globalThis.addEventListener("unhandledrejection", (event) => {
+        const reason = event.reason;
+        globalThis.__threeRbBootFailed(reason && reason.message ? reason.message : "Ruby boot failed");
+      });
+
+      globalThis.setTimeout(() => {
+        if (status && status.textContent === "Loading ruby.wasm") {
+          status.textContent = "Still loading ruby.wasm";
+        }
+      }, 15000);
+
+      globalThis.__threeRbSetStatus("Loading ruby.wasm", "loading");
+    </script>
+  </head>
+  <body>
+    <main id="viewport" class="viewport">
+      <canvas id="scene" data-testid="scene-canvas"></canvas>
+      <div class="hud" aria-live="polite">
+        <span id="status-dot" class="status-dot" data-state="loading"></span>
+        <span id="status" data-testid="status">Loading ruby.wasm</span>
+      </div>
+    </main>
+    <script type="module" src="./boot.mjs"></script>
+  </body>
+</html>