three-rb 0.1.0 → 0.2.1

data/examples/browser/ruby/main.rb

@@ -0,0 +1,313 @@
+# frozen_string_literal: true
+
+require_relative "../../../lib/three"
+
+def gem_ring(radius, y, sides, offset)
+  sides.times.map do |index|
+    angle = offset + (Math::PI * 2 * index / sides)
+    [Math.cos(angle) * radius, y, Math.sin(angle) * radius]
+  end
+end
+
+def face_normal(a, b, c)
+  ux = b[0] - a[0]
+  uy = b[1] - a[1]
+  uz = b[2] - a[2]
+  vx = c[0] - a[0]
+  vy = c[1] - a[1]
+  vz = c[2] - a[2]
+  nx = (uy * vz) - (uz * vy)
+  ny = (uz * vx) - (ux * vz)
+  nz = (ux * vy) - (uy * vx)
+  length = Math.sqrt((nx * nx) + (ny * ny) + (nz * nz))
+  return [0, 1, 0] if length.zero?
+
+  [nx / length, ny / length, nz / length]
+end
+
+def add_triangle(vertices, normals, a, b, c)
+  normal = face_normal(a, b, c)
+  [a, b, c].each do |point|
+    vertices.push(*point)
+    normals.push(*normal)
+  end
+end
+
+def add_polygon(vertices, normals, points)
+  (1...(points.length - 1)).each do |index|
+    add_triangle(vertices, normals, points[0], points[index], points[index + 1])
+  end
+end
+
+def faceted_ruby_geometry
+  sides = 10
+  step = Math::PI * 2 / sides
+  top = gem_ring(0.62, 0.58, sides, step / 2)
+  crown = gem_ring(1.02, 0.18, sides, 0)
+  girdle = gem_ring(1.15, -0.08, sides, step / 2)
+  pavilion = gem_ring(0.64, -0.48, sides, 0)
+  culet = [0, -1.05, 0]
+  vertices = []
+  normals = []
+
+  add_polygon(vertices, normals, top.reverse)
+  sides.times do |index|
+    next_index = (index + 1) % sides
+    add_polygon(vertices, normals, [top[index], top[next_index], crown[next_index], crown[index]])
+    add_polygon(vertices, normals, [crown[index], crown[next_index], girdle[next_index], girdle[index]])
+    add_polygon(vertices, normals, [girdle[index], girdle[next_index], pavilion[next_index], pavilion[index]])
+    add_triangle(vertices, normals, pavilion[next_index], pavilion[index], culet)
+  end
+
+  geometry = Three::BufferGeometry.new
+  geometry.set_attribute(:position, Three::Float32BufferAttribute.new(vertices, 3))
+  geometry.set_attribute(:normal, Three::Float32BufferAttribute.new(normals, 3))
+  geometry.compute_bounding_box
+  geometry.compute_bounding_sphere
+  geometry
+end
+
+def build_spark(size, material)
+  spark = Three::Group.new
+  spark.name = "ruby-spark"
+
+  diamond_vertices = [
+    0, size * 0.32, 0,
+    size * 0.22, 0, 0,
+    0, -size * 0.32, 0,
+    -size * 0.22, 0, 0
+  ]
+  diamond_geometry = Three::BufferGeometry.new
+  diamond_geometry.set_index([0, 1, 2, 0, 2, 3])
+  diamond_geometry.set_attribute(:position, Three::Float32BufferAttribute.new(diamond_vertices, 3))
+  diamond_geometry.set_attribute(:normal, Three::Float32BufferAttribute.new([0, 0, 1] * 4, 3))
+  diamond = Three::Mesh.new(diamond_geometry, material)
+  spark.add(diamond)
+
+  long_ray = Three::Mesh.new(Three::BoxGeometry.new(size * 0.72, size * 0.035, size * 0.035), material)
+  spark.add(long_ray)
+
+  cross_ray = Three::Mesh.new(Three::BoxGeometry.new(size * 0.5, size * 0.03, size * 0.03), material)
+  cross_ray.rotation.z = Math::PI / 2
+  spark.add(cross_ray)
+
+  slash_ray = Three::Mesh.new(Three::BoxGeometry.new(size * 0.38, size * 0.024, size * 0.024), material)
+  slash_ray.rotation.z = Math::PI / 4
+  spark.add(slash_ray)
+
+  backslash_ray = Three::Mesh.new(Three::BoxGeometry.new(size * 0.34, size * 0.02, size * 0.02), material)
+  backslash_ray.rotation.z = -Math::PI / 4
+  spark.add(backslash_ray)
+  spark
+end
+
+Three::Browser.run(starting: "Starting Ruby scene") do |app|
+  scene = Three::Scene.new
+  camera = Three::PerspectiveCamera.new(42, aspect: 1.0, near: 0.1, far: 100)
+  camera.position.set(0, 0.42, 6.9)
+
+  environment_texture = Three::Loaders::RGBELoader.new.load("/examples/browser/ruby/assets/studio.hdr")
+  scene.environment = environment_texture
+
+  scene.add(Three::AmbientLight.new(0xffffff, 0.82))
+  scene.add(Three::HemisphereLight.new(0xffffff, 0xffedf2, 1.0))
+
+  key_light = Three::DirectionalLight.new(0xffffff, 2.55)
+  key_light.position.set(3.2, 4.4, 4.8)
+  key_light.cast_shadow = true
+  key_light.shadow_map_size = [1024, 1024]
+  key_light.shadow_bias = -0.00008
+  key_light.set_shadow_camera(left: -3.2, right: 3.2, top: 2.6, bottom: -2.6, near: 0.2, far: 12)
+  scene.add(key_light)
+
+  rim_light = Three::PointLight.new(0xff89a4, 2.15, 8, 2)
+  rim_light.position.set(-2.2, 1.6, 2.8)
+  scene.add(rim_light)
+
+  cool_light = Three::PointLight.new(0xb4e6ff, 1.35, 7, 2)
+  cool_light.position.set(2.4, -0.8, 2.2)
+  scene.add(cool_light)
+
+  pin_light = Three::PointLight.new(0xffffff, 3.1, 4.4, 2)
+  pin_light.position.set(-1.6, 2.35, 3.25)
+  scene.add(pin_light)
+
+  backdrop_material = Three::MeshBasicMaterial.new(
+    color: 0x58c2ff,
+    transparent: true,
+    opacity: 0.1
+  )
+  backdrop = Three::Mesh.new(
+    Three::PlaneGeometry.new(7.2, 4.4, width_segments: 1, height_segments: 1),
+    backdrop_material
+  )
+  backdrop.position.z = -1.35
+  scene.add(backdrop)
+
+  ruby_material = Three::MeshPhysicalMaterial.new(
+    color: 0xff2d64,
+    roughness: 0.008,
+    metalness: 0,
+    opacity: 0.82,
+    transparent: true,
+    clearcoat: 1.0,
+    clearcoat_roughness: 0.006,
+    transmission: 0.98,
+    thickness: 0.58,
+    ior: 1.84,
+    dispersion: 0.42,
+    iridescence: 0.16,
+    iridescence_ior: 1.36,
+    iridescence_thickness_range: [120, 260],
+    specular_intensity: 1.0,
+    specular_color: 0xffffff,
+    attenuation_color: 0xff164b,
+    attenuation_distance: 2.05,
+    side: Three::DoubleSide,
+    vertex_colors: false
+  )
+  ruby_gem = Three::Mesh.new(faceted_ruby_geometry, ruby_material)
+  ruby_gem.position.set(0, 0.5, 0.1)
+  ruby_gem.rotation.x = -0.16
+  ruby_gem.rotation.y = 0.28
+  ruby_gem.scale.set(1.08, 1.08, 1.08)
+  ruby_gem.cast_shadow = true
+  scene.add(ruby_gem)
+
+  spark_materials = [
+    Three::MeshBasicMaterial.new(color: 0xffffff, transparent: true, opacity: 1.0),
+    Three::MeshBasicMaterial.new(color: 0xfff0a8, transparent: true, opacity: 0.98),
+    Three::MeshBasicMaterial.new(color: 0xdaf7ff, transparent: true, opacity: 0.94)
+  ]
+  sparkle_specs = [
+    [[-0.88, 1.08, 0.74], 0.2, 0.05],
+    [[1.0, 0.98, 0.8], 0.21, 1.15],
+    [[1.22, 0.36, 0.72], 0.18, 2.3],
+    [[-1.05, 0.18, 0.68], 0.17, 3.1],
+    [[0.34, 1.25, 0.74], 0.15, 4.0],
+    [[-0.32, 1.22, 0.7], 0.12, 5.2],
+    [[-0.48, 0.74, 0.96], 0.09, 0.65],
+    [[0.42, 0.68, 0.98], 0.095, 2.05],
+    [[-0.78, 0.26, 0.9], 0.08, 4.7]
+  ]
+  sparkles = sparkle_specs.each_with_index.map do |(position, size, phase), index|
+    sparkle = build_spark(size, spark_materials[index % spark_materials.length])
+    sparkle.position.set(*position)
+    sparkle.rotation.z = phase
+    scene.add(sparkle)
+    [sparkle, phase, size]
+  end
+
+  title_font = Three::Loaders::FontLoader.new.load("/node_modules/three/examples/fonts/helvetiker_regular.typeface.json")
+  title_geometry = Three::TextGeometry.new(
+    "three-rb",
+    font: title_font,
+    size: 0.48,
+    depth: 0.105,
+    curve_segments: 10,
+    bevel_enabled: true,
+    bevel_thickness: 0.018,
+    bevel_size: 0.01,
+    bevel_segments: 3
+  )
+  title_geometry.center
+  title_material = Three::MeshPhysicalMaterial.new(
+    color: 0x55ace0,
+    roughness: 0.18,
+    metalness: 0.05,
+    clearcoat: 0.72,
+    clearcoat_roughness: 0.16,
+    specular_intensity: 0.9,
+    specular_color: 0xe8fbff
+  )
+  title = Three::Mesh.new(title_geometry, title_material)
+  title.position.set(0, -1.18, 0.08)
+  title.rotation.x = -0.08
+  title.cast_shadow = true
+  scene.add(title)
+
+  accent_material = Three::MeshStandardMaterial.new(color: 0xffb3c4, roughness: 0.36, metalness: 0.08)
+  accent = Three::Mesh.new(Three::BoxGeometry.new(3.55, 0.035, 0.035), accent_material)
+  accent.position.set(0, -1.52, 0.03)
+  accent.rotation.z = -0.035
+  scene.add(accent)
+
+  renderer = Three::Renderers::ThreeJSRenderer.new(
+    canvas: "#scene",
+    antialias: true,
+    alpha: false,
+    preserveDrawingBuffer: true,
+    shadow_map_enabled: true,
+    shadow_map_type: Three::PCFSoftShadowMap
+  )
+  renderer.set_clear_color(0xffffff, 1)
+  renderer.tone_mapping = Three::ACESFilmicToneMapping
+  renderer.tone_mapping_exposure = 1.45
+
+  controls = Three::Controls::OrbitControls.new(
+    camera,
+    renderer: renderer,
+    enable_damping: true,
+    damping_factor: 0.07,
+    auto_rotate: true,
+    auto_rotate_speed: 0.72,
+    enable_pan: false
+  )
+  controls.target.set(0, 0.34, 0.08)
+
+  app.resize_renderer(renderer, camera)
+  renderer.render(scene, camera)
+
+  app.expose(
+    {
+      renderer: renderer,
+      controls: controls,
+      scene: scene,
+      camera: camera,
+      ruby_backdrop: backdrop,
+      ruby_backdrop_material: backdrop_material,
+      ruby_gem: ruby_gem,
+      ruby_geometry: ruby_gem.geometry,
+      ruby_material: ruby_material,
+      ruby_title: title,
+      ruby_title_geometry: title_geometry,
+      ruby_title_material: title_material,
+      ruby_sparkles: sparkles.map(&:first),
+      ruby_environment: environment_texture,
+      ruby_font_loaded: true,
+      ruby_frame: 0
+    },
+    renderer: renderer
+  )
+
+  frame = 0
+  renderer.animation_loop do
+    frame += 1
+    ruby_gem.rotation.y += 0.009
+    ruby_gem.rotation.z = Math.sin(frame * 0.012) * 0.045
+    title.rotation.x = -0.08 + (Math.sin(frame * 0.015) * 0.018)
+    title.rotation.y = Math.sin(frame * 0.018) * 0.055
+    title.position.y = -1.18 + (Math.sin(frame * 0.02) * 0.025)
+    title_twinkle = (Math.sin(frame * 0.048) + 1) / 2.0
+    title_material.color.set_rgb(0.28 + (0.12 * title_twinkle), 0.58 + (0.12 * title_twinkle), 0.78 + (0.14 * title_twinkle))
+    title_material.specular_intensity = 0.82 + (0.18 * title_twinkle)
+    title_material.clearcoat = 0.62 + (0.18 * title_twinkle)
+    accent.rotation.z = -0.035 + (Math.sin(frame * 0.018) * 0.008)
+    accent.position.y = -1.52 + (Math.sin((frame * 0.014) + 1.2) * 0.005)
+    accent.scale.x = 1.0 + (Math.sin(frame * 0.018) * 0.014)
+    sparkles.each_with_index do |(sparkle, phase, _size), index|
+      cycle = 156 + (index * 17)
+      flash_window = 22 + ((index % 3) * 3)
+      progress = (frame + (phase * 41).to_i) % cycle
+      burst = progress < flash_window ? Math.sin(Math::PI * progress / flash_window)**2.4 : 0
+      scale = 0.18 + (burst * 1.22)
+      sparkle.scale.set(scale, scale, scale)
+      sparkle.visible = burst > 0.08
+      sparkle.rotation.z += index.even? ? 0.026 : -0.021
+    end
+
+    app.set(:ruby_frame, frame)
+    controls.update
+    renderer.render(scene, camera)
+  end
+end

data/examples/browser/ruby/smoke_test.mjs

@@ -0,0 +1,126 @@
+import {
+  assertCanvasHasDimensions,
+  assertNoDiagnostics,
+  createDiagnostics,
+  createSmokePage,
+  loadPlaywright,
+  sampleCanvas,
+  startServer,
+  waitForRunning
+} from "../shared/smoke_test_helpers.mjs";
+
+async function redPixelCount(page) {
+  return page.evaluate(() => {
+    const element = document.querySelector("[data-testid='scene-canvas']");
+    const gl = element.getContext("webgl2") || element.getContext("webgl");
+    const width = element.width;
+    const height = element.height;
+    const pixels = new Uint8Array(width * height * 4);
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+
+    let count = 0;
+    for (let index = 0; index < pixels.length; index += 4) {
+      const red = pixels[index];
+      const green = pixels[index + 1];
+      const blue = pixels[index + 2];
+      if (red > 120 && red > green * 1.18 && red > blue * 1.12) count += 1;
+    }
+    return count;
+  });
+}
+
+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, { viewport: { width: 1040, height: 680 } });
+
+    await page.goto(`${server.url}/examples/browser/ruby/`, { waitUntil: "load" });
+    await waitForRunning(page, diagnostics);
+    await page.waitForTimeout(1_000);
+
+    const canvas = await sampleCanvas(page);
+    assertCanvasHasDimensions(canvas);
+    if (canvas.nonBlankPixels === 0) {
+      throw new Error(`canvas sample is blank: ${JSON.stringify(canvas)}`);
+    }
+
+    const debug = await page.evaluate(() => ({
+      frame: globalThis.__threeRbRubyFrame,
+      sceneChildren: globalThis.__threeRbScene?.children?.length,
+      rubyType: globalThis.__threeRbRubyGem?.type,
+      rubyGeometryType: globalThis.__threeRbRubyGeometry?.type,
+      rubyPositionCount: globalThis.__threeRbRubyGeometry?.attributes?.position?.count,
+      rubyMaterial: {
+        type: globalThis.__threeRbRubyMaterial?.type,
+        color: globalThis.__threeRbRubyMaterial?.color?.getHex?.(),
+        transmission: globalThis.__threeRbRubyMaterial?.transmission,
+        thickness: globalThis.__threeRbRubyMaterial?.thickness,
+        ior: globalThis.__threeRbRubyMaterial?.ior,
+        clearcoat: globalThis.__threeRbRubyMaterial?.clearcoat
+      },
+      backdropMaterial: {
+        type: globalThis.__threeRbRubyBackdropMaterial?.type,
+        color: globalThis.__threeRbRubyBackdropMaterial?.color?.getHex?.(),
+        transparent: globalThis.__threeRbRubyBackdropMaterial?.transparent,
+        opacity: globalThis.__threeRbRubyBackdropMaterial?.opacity
+      },
+      sparkleCount: globalThis.__threeRbRubySparkles?.length,
+      titleType: globalThis.__threeRbRubyTitle?.type,
+      titleGeometryType: globalThis.__threeRbRubyTitleGeometry?.type,
+      titlePositionCount: globalThis.__threeRbRubyTitleGeometry?.attributes?.position?.count,
+      fontLoaded: globalThis.__threeRbRubyFontLoaded,
+      renderInfo: globalThis.__threeRbRenderer?.info?.render
+    }));
+
+    if (debug.rubyType !== "Mesh" || debug.rubyGeometryType !== "BufferGeometry") {
+      throw new Error(`ruby gemstone was not materialized as expected: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.rubyPositionCount < 220) {
+      throw new Error(`ruby gemstone has too few facet vertices: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.rubyMaterial.type !== "MeshPhysicalMaterial" || debug.rubyMaterial.transmission < 0.7) {
+      throw new Error(`ruby material is not transmissive: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (
+      debug.backdropMaterial.type !== "MeshBasicMaterial" ||
+      debug.backdropMaterial.color !== 0x58c2ff ||
+      !debug.backdropMaterial.transparent ||
+      debug.backdropMaterial.opacity > 0.12
+    ) {
+      throw new Error(`ruby backdrop is not a subtle transparent blue: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.titleType !== "Mesh" || debug.titleGeometryType !== "TextGeometry" || !debug.fontLoaded) {
+      throw new Error(`title text geometry did not load: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.sparkleCount < 5) {
+      throw new Error(`ruby sparkles did not materialize: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.titlePositionCount < 200 || !debug.renderInfo || debug.renderInfo.triangles < 250) {
+      throw new Error(`title did not render enough geometry: ${JSON.stringify(debug, null, 2)}`);
+    }
+    if (debug.frame <= 0) {
+      throw new Error(`animation loop did not advance: ${JSON.stringify(debug, null, 2)}`);
+    }
+
+    const rubyPixels = await redPixelCount(page);
+    if (rubyPixels < 500) {
+      throw new Error(`ruby gemstone is not visibly red enough: redPixels=${rubyPixels}\n${JSON.stringify(debug, null, 2)}`);
+    }
+
+    assertNoDiagnostics(diagnostics);
+
+    console.log(`ruby smoke test passed at ${server.url}/examples/browser/ruby/`);
+  } finally {
+    await browser.close();
+    await new Promise((resolve) => server.instance.close(resolve));
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});

data/examples/browser/serialization/assets/checker.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <rect width="128" height="128" fill="#eef3f7"/>
+  <rect width="32" height="32" fill="#22313f"/>
+  <rect x="64" width="32" height="32" fill="#22313f"/>
+  <rect x="32" y="32" width="32" height="32" fill="#6ed69a"/>
+  <rect x="96" y="32" width="32" height="32" fill="#6ed69a"/>
+  <rect y="64" width="32" height="32" fill="#22313f"/>
+  <rect x="64" y="64" width="32" height="32" fill="#22313f"/>
+  <rect x="32" y="96" width="32" height="32" fill="#6ed69a"/>
+  <rect x="96" y="96" width="32" height="32" fill="#6ed69a"/>
+</svg>

data/examples/browser/serialization/main.rb

@@ -1,23 +1,12 @@
 # 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] = "Exporting Ruby scene"
+require_relative "../../../lib/three"
 
+Three::Browser.run(starting: "Exporting Ruby scene") do |app|
   source_scene = Three::Scene.new
   source_scene.name = "serialization-source"
 
-  shared_texture = Three::Loaders::TextureLoader.new.load("/examples/browser/assets/checker.svg")
+  shared_texture = Three::Loaders::TextureLoader.new.load("/examples/browser/serialization/assets/checker.svg")
   shared_texture.wrap_s = Three::RepeatWrapping
   shared_texture.wrap_t = Three::RepeatWrapping
   shared_texture.mag_filter = Three::NearestFilter
@@ -53,45 +42,34 @@ begin
   )
   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)
+  app.resize_renderer(renderer, camera)
   renderer.render(scene, camera)
 
   left = scene.get_object_by_name("loaded-left")
   right = scene.get_object_by_name("loaded-right")
 
-  JS.global[:__threeRbRenderer] = renderer.handle
-  JS.global[:__threeRbScene] = renderer.backend.materialize(scene)
-  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
-  JS.global[:__threeRbSerializedJson] = json
-  JS.global[:__threeRbLoadedLeft] = renderer.backend.materialize(left)
-  JS.global[:__threeRbLoadedRight] = renderer.backend.materialize(right)
-  JS.global[:__threeRbLoadedSharedGeometry] = left.geometry.equal?(right.geometry)
-  JS.global[:__threeRbLoadedSharedMaterial] = left.material.equal?(right.material)
-  JS.global[:__threeRbLoadedSharedTexture] = left.material.map.equal?(right.material.map)
-  JS.global[:__threeRbSerializationFrame] = 0
+  app.expose(
+    {
+      renderer: renderer,
+      scene: scene,
+      camera: camera,
+      serialized_json: json,
+      loaded_left: left,
+      loaded_right: right,
+      loaded_shared_geometry: left.geometry.equal?(right.geometry),
+      loaded_shared_material: left.material.equal?(right.material),
+      loaded_shared_texture: left.material.map.equal?(right.material.map),
+      serialization_frame: 0
+    },
+    renderer: renderer
+  )
 
   renderer.animation_loop do
-    JS.global[:__threeRbSerializationFrame] = JS.global[:__threeRbSerializationFrame].to_i + 1
+    app.increment(:serialization_frame)
     left.rotation.x += 0.012
     left.rotation.y += 0.018
     right.rotation.x -= 0.01
     right.rotation.y += 0.014
     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/shared/boot.mjs

@@ -3,6 +3,8 @@ import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
 import { HDRLoader } from "three/addons/loaders/HDRLoader.js";
+import { FontLoader } from "three/addons/loaders/FontLoader.js";
+import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
@@ -20,6 +22,8 @@ export async function bootRubyExample({ main, clearColor }) {
     globalThis.THREE_GLTF_LOADER = GLTFLoader;
     globalThis.THREE_DRACO_LOADER = DRACOLoader;
     globalThis.THREE_RGBE_LOADER = HDRLoader;
+    globalThis.THREE_FONT_LOADER = FontLoader;
+    globalThis.THREE_TEXT_GEOMETRY = TextGeometry;
     globalThis.THREE_ORBIT_CONTROLS = OrbitControls;
     globalThis.THREE_EFFECT_COMPOSER = EffectComposer;
     globalThis.THREE_RENDER_PASS = RenderPass;
@@ -50,17 +54,45 @@ export async function bootRubyExample({ main, clearColor }) {
     globalThis.rubyVM = vm;
 
     setStatus("Starting Ruby VM", "loading");
-    await vm.evalAsync(`
-      require "js/require_remote/relative_shim"
-      JS::RequireRemote.instance.base_url = "/"
-      JS::RequireRemote.instance.load(${JSON.stringify(main)})
-    `);
+    await withNoStoreRubySourceFetch(async () => {
+      await vm.evalAsync(`
+        require "js/require_remote/relative_shim"
+        JS::RequireRemote.instance.base_url = "/"
+        JS::RequireRemote.instance.load(${JSON.stringify(main)})
+      `);
+    });
   } catch (error) {
     bootFailed(error && error.message ? error.message : "Ruby boot failed");
     throw error;
   }
 }
 
+async function withNoStoreRubySourceFetch(callback) {
+  const originalFetch = globalThis.fetch;
+  globalThis.fetch = (input, init = {}) => {
+    if (!shouldBypassCache(input)) return originalFetch(input, init);
+
+    return originalFetch(input, { ...init, cache: "no-store" });
+  };
+
+  try {
+    return await callback();
+  } finally {
+    globalThis.fetch = originalFetch;
+  }
+}
+
+function shouldBypassCache(input) {
+  const rawUrl = typeof input === "string" ? input : input?.url;
+  if (!rawUrl) return false;
+
+  const { pathname } = new URL(rawUrl, globalThis.location?.href || "http://localhost/");
+  if (pathname.startsWith("/lib/")) return true;
+  if (!pathname.startsWith("/examples/browser/")) return false;
+
+  return !pathname.includes("/assets/");
+}
+
 async function compileWasm(url) {
   const response = fetch(url);
   if (WebAssembly.compileStreaming) {

data/examples/browser/textures/assets/checker.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
+  <rect width="128" height="128" fill="#eef3f7"/>
+  <rect width="32" height="32" fill="#22313f"/>
+  <rect x="64" width="32" height="32" fill="#22313f"/>
+  <rect x="32" y="32" width="32" height="32" fill="#6ed69a"/>
+  <rect x="96" y="32" width="32" height="32" fill="#6ed69a"/>
+  <rect y="64" width="32" height="32" fill="#22313f"/>
+  <rect x="64" y="64" width="32" height="32" fill="#22313f"/>
+  <rect x="32" y="96" width="32" height="32" fill="#6ed69a"/>
+  <rect x="96" y="96" width="32" height="32" fill="#6ed69a"/>
+</svg>

data/examples/browser/textures/assets/studio.hdr

@@ -0,0 +1,5 @@
+#?RADIANCE
+FORMAT=32-bit_rle_rgbe
+
+-Y 2 +X 2
+~~~~~~~~~~~~~~~~