three-rb 0.1.0

data/examples/browser/gltf/main.rb

@@ -0,0 +1,105 @@
+# 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.15, 4.0)
+
+  scene.add(Three::AmbientLight.new(0xffffff, 0.65))
+
+  key_light = Three::DirectionalLight.new(0xffffff, 1.0)
+  key_light.position.set(2.5, 3.0, 4.0)
+  scene.add(key_light)
+
+  renderer = Three::Renderers::ThreeJSRenderer.new(
+    canvas: "#scene",
+    antialias: true,
+    alpha: false,
+    preserveDrawingBuffer: true
+  )
+  renderer.set_clear_color(0x11151a, 1)
+
+  gltf = Three::Loaders::GLTFLoader.new(backend: renderer.backend).load("/examples/browser/assets/animated_triangle.gltf")
+  model = gltf.scene
+  model.position.x = -0.75
+  model.scale.set(1.2, 1.2, 1.2)
+  scene.add(model)
+
+  draco_decoder_path = "/node_modules/three/examples/jsm/libs/draco/gltf/"
+  compressed_gltf = Three::Loaders::GLTFLoader.new(
+    backend: renderer.backend,
+    draco_decoder_path: draco_decoder_path
+  ).load("/examples/browser/assets/compressed_triangle.gltf")
+  compressed_model = compressed_gltf.scene
+  compressed_model.position.x = 1.05
+  compressed_model.scale.set(0.82, 0.82, 0.82)
+  scene.add(compressed_model)
+
+  clock = Three::Clock.new
+  mixer = Three::AnimationMixer.new(model, backend: renderer.backend)
+  action = mixer.clip_action(gltf.animations.first)
+  action.play
+
+  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[:__threeRbGltfRootScene] = renderer.backend.materialize(scene)
+  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
+  JS.global[:__threeRbGltfScene] = renderer.backend.materialize(model)
+  JS.global[:__threeRbCompressedGltfScene] = renderer.backend.materialize(compressed_model)
+  JS.global[:__threeRbCompressedGltfDecoderPath] = draco_decoder_path
+  JS.global[:__threeRbGltfAnimations] = gltf.animations.length
+  JS.global[:__threeRbGltfAnimationName] = gltf.animations.first&.name
+  JS.global[:__threeRbGltfAnimationDuration] = gltf.animations.first&.duration
+  JS.global[:__threeRbGltfMixer] = mixer.handle
+  JS.global[:__threeRbGltfAction] = action.handle
+  JS.global[:__threeRbGltfFrame] = 0
+  JS.global[:__threeRbGltfAnimationTime] = 0
+  JS.global[:__threeRbDisposeGltf] = proc do
+    mixer.stop_all_action
+    mixer.uncache_root
+    renderer.dispose_subtree(model, remove: true, dispose_textures: true)
+    renderer.dispose_subtree(compressed_model, remove: true, dispose_textures: true)
+    JS.global[:__threeRbGltfDisposed] = true
+  end
+
+  frame = 0
+  renderer.animation_loop do
+    frame += 1
+    delta = clock.get_delta
+    mixer.update(delta)
+    JS.global[:__threeRbGltfAnimationTime] = JS.global[:__threeRbGltfAnimationTime].to_f + delta
+    JS.global[:__threeRbGltfFrame] = 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/gltf/smoke_test.mjs

@@ -0,0 +1,162 @@
+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/gltf/`, { waitUntil: "load" });
+    await waitForRunning(page, diagnostics);
+    await page.waitForFunction(
+      () => globalThis.__threeRbGltfScene?.children?.length > 0 &&
+        globalThis.__threeRbCompressedGltfScene?.children?.length > 0,
+      null,
+      { timeout: 10_000 }
+    );
+    await page.waitForTimeout(1_000);
+
+    assertNonBlankCanvas(await sampleCanvas(page));
+
+    const scene = await page.evaluate(() => ({
+      frame: globalThis.__threeRbGltfFrame,
+      animationTime: globalThis.__threeRbGltfAnimationTime,
+      animationCount: globalThis.__threeRbGltfAnimations,
+      animationName: globalThis.__threeRbGltfAnimationName,
+      animationDuration: globalThis.__threeRbGltfAnimationDuration,
+      actionTime: globalThis.__threeRbGltfAction?.time,
+      animatedNodeQuaternion: globalThis.__threeRbGltfScene?.children?.[0]?.quaternion?.toArray?.(),
+      renderInfo: globalThis.__threeRbRenderer?.info?.render,
+      cameraType: globalThis.__threeRbCamera?.type,
+      rootChildren: globalThis.__threeRbGltfRootScene?.children?.length,
+      gltfType: globalThis.__threeRbGltfScene?.type,
+      gltfIsObject3D: globalThis.__threeRbGltfScene?.isObject3D,
+      gltfChildren: globalThis.__threeRbGltfScene?.children?.length,
+      compressedGltfType: globalThis.__threeRbCompressedGltfScene?.type,
+      compressedGltfIsObject3D: globalThis.__threeRbCompressedGltfScene?.isObject3D,
+      compressedGltfChildren: globalThis.__threeRbCompressedGltfScene?.children?.length,
+      compressedGeometryAttributes: Object.keys(globalThis.__threeRbCompressedGltfScene?.children?.[0]?.geometry?.attributes || {}),
+      compressedDecoderPath: globalThis.__threeRbCompressedGltfDecoderPath
+    }));
+
+    if (scene.cameraType !== "PerspectiveCamera") {
+      throw new Error(`expected a PerspectiveCamera glTF view: ${JSON.stringify(scene)}`);
+    }
+    if (scene.gltfIsObject3D !== true || scene.gltfChildren < 1) {
+      throw new Error(`expected a loaded glTF Object3D scene: ${JSON.stringify(scene)}`);
+    }
+    if (scene.compressedGltfIsObject3D !== true || scene.compressedGltfChildren < 1) {
+      throw new Error(`expected a Draco-compressed glTF Object3D scene: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.compressedGeometryAttributes.includes("position") || !scene.compressedDecoderPath.endsWith("/draco/gltf/")) {
+      throw new Error(`Draco-compressed glTF geometry was not decoded: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.renderInfo || scene.renderInfo.triangles < 1) {
+      throw new Error(`renderer did not draw the glTF triangle: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.frame) {
+      throw new Error(`glTF example animation did not advance: ${JSON.stringify(scene)}`);
+    }
+    if (scene.animationCount !== 1 || scene.animationName !== "TriangleSpin" || scene.animationDuration !== 2) {
+      throw new Error(`glTF animation metadata was not exposed: ${JSON.stringify(scene)}`);
+    }
+    if (!(scene.animationTime > 0) || !(scene.actionTime > 0)) {
+      throw new Error(`AnimationMixer did not advance the glTF action: ${JSON.stringify(scene)}`);
+    }
+    if (!scene.animatedNodeQuaternion || Math.abs(scene.animatedNodeQuaternion[1]) < 0.05) {
+      throw new Error(`glTF animated node quaternion did not change: ${JSON.stringify(scene)}`);
+    }
+
+    const disposal = await page.evaluate(() => {
+      const root = globalThis.__threeRbGltfScene;
+      const compressedRoot = globalThis.__threeRbCompressedGltfScene;
+      const rootScene = globalThis.__threeRbGltfRootScene;
+      const stats = {
+        geometries: 0,
+        materials: 0,
+        textures: 0,
+        geometryDisposeEvents: 0,
+        materialDisposeEvents: 0,
+        textureDisposeEvents: 0
+      };
+
+      [root, compressedRoot].forEach((loadedRoot) => loadedRoot.traverse((object) => {
+        if (object.geometry) {
+          stats.geometries += 1;
+          object.geometry.addEventListener("dispose", () => {
+            stats.geometryDisposeEvents += 1;
+          });
+        }
+
+        const materials = Array.isArray(object.material) ? object.material : [object.material].filter(Boolean);
+        for (const material of materials) {
+          stats.materials += 1;
+          material.addEventListener("dispose", () => {
+            stats.materialDisposeEvents += 1;
+          });
+
+          if (material.map) {
+            stats.textures += 1;
+            material.map.addEventListener("dispose", () => {
+              stats.textureDisposeEvents += 1;
+            });
+          }
+        }
+      }));
+
+      globalThis.__threeRbDisposeGltf();
+
+      return {
+        ...stats,
+        disposed: globalThis.__threeRbGltfDisposed,
+        rootParent: root.parent?.type ?? null,
+        compressedRootParent: compressedRoot.parent?.type ?? null,
+        rootSceneStillContainsRoot: rootScene.children.includes(root),
+        rootSceneStillContainsCompressedRoot: rootScene.children.includes(compressedRoot)
+      };
+    });
+
+    if (
+      disposal.disposed !== true ||
+      disposal.rootParent !== null ||
+      disposal.compressedRootParent !== null ||
+      disposal.rootSceneStillContainsRoot ||
+      disposal.rootSceneStillContainsCompressedRoot
+    ) {
+      throw new Error(`dispose_subtree did not detach the glTF root: ${JSON.stringify(disposal)}`);
+    }
+    if (disposal.geometries < 1 || disposal.geometryDisposeEvents !== disposal.geometries) {
+      throw new Error(`dispose_subtree did not dispose loaded geometries: ${JSON.stringify(disposal)}`);
+    }
+    if (disposal.materials < 1 || disposal.materialDisposeEvents !== disposal.materials) {
+      throw new Error(`dispose_subtree did not dispose loaded materials: ${JSON.stringify(disposal)}`);
+    }
+    if (disposal.textureDisposeEvents !== disposal.textures) {
+      throw new Error(`dispose_subtree did not dispose loaded textures: ${JSON.stringify(disposal)}`);
+    }
+
+    assertNoDiagnostics(diagnostics);
+
+    console.log(`glTF smoke test passed at ${server.url}/examples/browser/gltf/`);
+  } finally {
+    await browser.close();
+    await new Promise((resolve) => server.instance.close(resolve));
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

data/examples/browser/picking/README.md

@@ -0,0 +1,33 @@
+# Browser Picking Example
+
+This example uses `Three::Raycaster` to pick Ruby-authored meshes from browser click coordinates, map three.js intersections back to Ruby `Object3D` instances, and update the selected mesh material.
+
+Install browser dependencies and serve the repository root over HTTP:
+
+```sh
+pnpm install
+ruby -run -e httpd . -p 8000
+```
+
+Then open:
+
+```text
+http://localhost:8000/examples/browser/picking/
+```
+
+The repository root must be served, not only this directory, because `boot.mjs` loads browser packages from `node_modules/` and `main.rb` loads the library source from `lib/`.
+
+## Browser Smoke Test
+
+Install the optional Node dependency and browser binary:
+
+```sh
+pnpm install
+pnpm exec playwright install chromium
+```
+
+Run the browser smoke test:
+
+```sh
+pnpm test:browser:picking
+```

data/examples/browser/picking/boot.mjs

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

data/examples/browser/picking/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 picking</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+        background: #101418;
+        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.035) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+          linear-gradient(135deg, #101418 0%, #172026 52%, #0f1215 100%);
+        background-size: 32px 32px, 32px 32px, 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(10, 14, 18, 0.72);
+        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: #4ed08f;
+        box-shadow: 0 0 14px rgba(78, 208, 143, 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>
+    <script type="module" src="./boot.mjs"></script>
+  </head>
+  <body>
+    <main class="viewport" id="viewport">
+      <canvas id="scene" data-testid="scene-canvas"></canvas>
+      <div class="hud" aria-live="polite">
+        <span class="status-dot" id="status-dot"></span>
+        <span id="status" data-testid="status">Loading ruby.wasm</span>
+      </div>
+    </main>
+  </body>
+</html>

data/examples/browser/picking/main.rb

@@ -0,0 +1,113 @@
+# 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 picking scene"
+
+  scene = Three::Scene.new
+  camera = Three::PerspectiveCamera.new(60, aspect: 1.0, near: 0.1, far: 100)
+  camera.position.z = 4
+
+  geometry = Three::BoxGeometry.new(0.82, 0.82, 0.82)
+  idle_color = 0x4ed08f
+  picked_color = 0xffcc4d
+
+  left_material = Three::MeshBasicMaterial.new(color: idle_color)
+  right_material = Three::MeshBasicMaterial.new(color: idle_color)
+  left_cube = Three::Mesh.new(geometry, left_material)
+  left_cube.name = "left-cube"
+  left_cube.position.x = -0.75
+  right_cube = Three::Mesh.new(geometry, right_material)
+  right_cube.name = "right-cube"
+  right_cube.position.x = 0.75
+  scene.add(left_cube, right_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
+
+  pointer = Three::Vector2.new
+  raycaster = Three::Raycaster.new(backend: renderer.backend)
+  pickables = [left_cube, right_cube]
+  selected = nil
+
+  pick = proc do |event|
+    rect = renderer.dom_element.call(:getBoundingClientRect)
+    x = ((event[:clientX].to_f - rect[:left].to_f) / rect[:width].to_f) * 2 - 1
+    y = -(((event[:clientY].to_f - rect[:top].to_f) / rect[:height].to_f) * 2 - 1)
+    pointer.set(x, y)
+    raycaster.set_from_camera(pointer, camera)
+    hits = raycaster.intersect_objects(pickables, recursive: false)
+    hit = hits.find(&:object)
+
+    if selected
+      selected.material.color.set_hex(idle_color)
+      selected = nil
+    end
+
+    if hit
+      selected = hit.object
+      selected.material.color.set_hex(picked_color)
+      JS.global[:__threeRbPickedName] = selected.name
+      JS.global[:__threeRbPickedDistance] = hit.distance
+      JS.global[:__threeRbPickedPoint] = hit.point.to_a
+    else
+      JS.global[:__threeRbPickedName] = nil
+      JS.global[:__threeRbPickedDistance] = nil
+      JS.global[:__threeRbPickedPoint] = nil
+    end
+
+    JS.global[:__threeRbPickCount] = JS.global[:__threeRbPickCount].to_i + 1
+    renderer.render(scene, camera)
+  end
+
+  resize.call
+  window.call(:addEventListener, "resize", resize)
+  renderer.dom_element.call(:addEventListener, "click", pick)
+  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[:__threeRbLeftCube] = renderer.backend.materialize(left_cube)
+  JS.global[:__threeRbRightCube] = renderer.backend.materialize(right_cube)
+  JS.global[:__threeRbRaycaster] = raycaster.handle
+  JS.global[:__threeRbPickCount] = 0
+  JS.global[:__threeRbPickingFrame] = 0
+
+  renderer.animation_loop do
+    JS.global[:__threeRbPickingFrame] = JS.global[:__threeRbPickingFrame].to_i + 1
+    left_cube.rotation.y += 0.01
+    right_cube.rotation.y -= 0.01
+    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/picking/smoke_test.mjs

@@ -0,0 +1,78 @@
+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/picking/`, { waitUntil: "load" });
+    await waitForRunning(page, diagnostics);
+    await page.waitForTimeout(1_000);
+
+    assertNonBlankCanvas(await sampleCanvas(page));
+
+    const rect = await page.locator("[data-testid='scene-canvas']").boundingBox();
+    if (!rect) throw new Error("scene canvas bounding box is unavailable");
+
+    await page.mouse.click(rect.x + rect.width * 0.4, rect.y + rect.height * 0.5);
+    await page.waitForFunction(() => globalThis.__threeRbPickedName === "left-cube", null, { timeout: 5_000 });
+
+    const leftPick = await page.evaluate(() => ({
+      pickCount: globalThis.__threeRbPickCount,
+      pickedName: globalThis.__threeRbPickedName,
+      pickedDistance: globalThis.__threeRbPickedDistance,
+      pickedPoint: globalThis.__threeRbPickedPoint,
+      leftColor: globalThis.__threeRbLeftCube?.material?.color?.getHex?.(),
+      rightColor: globalThis.__threeRbRightCube?.material?.color?.getHex?.(),
+      renderInfo: globalThis.__threeRbRenderer?.info?.render
+    }));
+
+    if (leftPick.leftColor !== 0xffcc4d || leftPick.rightColor !== 0x4ed08f || !(leftPick.pickedDistance > 0)) {
+      throw new Error(`left pick did not update the expected mesh: ${JSON.stringify(leftPick)}`);
+    }
+
+    await page.mouse.click(rect.x + rect.width * 0.6, rect.y + rect.height * 0.5);
+    await page.waitForFunction(() => globalThis.__threeRbPickedName === "right-cube", null, { timeout: 5_000 });
+
+    const rightPick = await page.evaluate(() => ({
+      frame: globalThis.__threeRbPickingFrame,
+      pickCount: globalThis.__threeRbPickCount,
+      pickedName: globalThis.__threeRbPickedName,
+      leftColor: globalThis.__threeRbLeftCube?.material?.color?.getHex?.(),
+      rightColor: globalThis.__threeRbRightCube?.material?.color?.getHex?.(),
+      renderInfo: globalThis.__threeRbRenderer?.info?.render
+    }));
+
+    if (rightPick.leftColor !== 0x4ed08f || rightPick.rightColor !== 0xffcc4d || rightPick.pickCount < 2) {
+      throw new Error(`right pick did not update the expected mesh: ${JSON.stringify(rightPick)}`);
+    }
+    if (!rightPick.renderInfo || rightPick.renderInfo.triangles < 24 || !rightPick.frame) {
+      throw new Error(`picking scene did not render or animate: ${JSON.stringify(rightPick)}`);
+    }
+
+    assertNoDiagnostics(diagnostics);
+
+    console.log(`picking smoke test passed at ${server.url}/examples/browser/picking/`);
+  } finally {
+    await browser.close();
+    await new Promise((resolve) => server.instance.close(resolve));
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

data/examples/browser/postprocessing/README.md

@@ -0,0 +1,26 @@
+# three-rb postprocessing browser example
+
+This example renders a Ruby-authored scene through ruby.wasm, the JavaScript three.js renderer, and an explicit postprocessing pipeline. It focuses on `Three::Postprocessing::EffectComposer`, `RenderPass`, `UnrealBloomPass`, `DotScreenPass`, `OutputPass`, composer sizing, pass property and uniform updates, and rendering through `composer.render(scene, camera)`.
+
+## Run
+
+From the repository root:
+
+```sh
+pnpm install
+ruby -run -e httpd . -p 8000
+```
+
+Open:
+
+```text
+http://localhost:8000/examples/browser/postprocessing/
+```
+
+## Smoke Test
+
+```sh
+pnpm test:browser:postprocessing
+```
+
+The smoke test serves the repository root, waits for the Ruby scene to reach `Running`, samples the WebGL canvas for nonblank pixels, verifies that the composer owns a render pass and bloom pass, checks bloom pass settings, and confirms animation frames are rendered through the composer path.

data/examples/browser/postprocessing/boot.mjs

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