three-rb 0.1.0 → 0.2.0

data/examples/browser/postprocessing/main.rb

@@ -1,19 +1,8 @@
 # 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 postprocessing scene"
+require_relative "../../../lib/three"
 
+Three::Browser.run(starting: "Starting postprocessing scene") do |app|
   scene = Three::Scene.new
   camera = Three::PerspectiveCamera.new(52, aspect: 1.0, near: 0.1, far: 100)
   camera.position.set(0, 0.15, 5.2)
@@ -65,37 +54,35 @@ begin
   right_accent.position.set(1.25, 0.52, 0.15)
   scene.add(right_accent)
 
-  resize = proc do
-    width = [viewport[:clientWidth].to_i, 1].max
-    height = [viewport[:clientHeight].to_i, 1].max
-
-    camera.aspect = width.to_f / height
+  app.on_resize do |width, height, aspect|
+    camera.aspect = aspect
     camera.update_projection_matrix
     renderer.set_size(width, height)
     composer.set_size(width, height)
   end
-
-  resize.call
-  window.call(:addEventListener, "resize", resize)
   composer.render(scene, camera)
 
-  JS.global[:__threeRbRenderer] = renderer.handle
-  JS.global[:__threeRbPostComposer] = composer.handle
-  JS.global[:__threeRbPostRenderPass] = render_pass.handle
-  JS.global[:__threeRbPostBloomPass] = bloom_pass.handle
-  JS.global[:__threeRbPostDotScreenPass] = dot_screen_pass.handle
-  JS.global[:__threeRbPostOutputPass] = output_pass.handle
-  JS.global[:__threeRbScene] = renderer.backend.materialize(scene)
-  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
-  JS.global[:__threeRbPostCore] = renderer.backend.materialize(core)
-  JS.global[:__threeRbPostRing] = renderer.backend.materialize(ring)
-  JS.global[:__threeRbPostLeftAccent] = renderer.backend.materialize(left_accent)
-  JS.global[:__threeRbPostRightAccent] = renderer.backend.materialize(right_accent)
-  JS.global[:__threeRbPostFrame] = 0
+  app.expose(
+    {
+      renderer: renderer,
+      post_composer: composer,
+      post_render_pass: render_pass,
+      post_bloom_pass: bloom_pass,
+      post_dot_screen_pass: dot_screen_pass,
+      post_output_pass: output_pass,
+      scene: scene,
+      camera: camera,
+      post_core: core,
+      post_ring: ring,
+      post_left_accent: left_accent,
+      post_right_accent: right_accent,
+      post_frame: 0
+    },
+    renderer: renderer
+  )
 
   renderer.animation_loop do
-    frame = JS.global[:__threeRbPostFrame].to_i + 1
-    JS.global[:__threeRbPostFrame] = frame
+    frame = app.increment(:post_frame)
 
     core.rotation.y += 0.014
     ring.rotation.z += 0.01
@@ -108,10 +95,4 @@ begin
 
     composer.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/primitives/main.rb

@@ -1,19 +1,8 @@
 # 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 primitives scene"
+require_relative "../../../lib/three"
 
+Three::Browser.run(starting: "Starting primitives scene") do |app|
   scene = Three::Scene.new
   camera = Three::PerspectiveCamera.new(55, aspect: 1.0, near: 0.1, far: 100)
   camera.position.z = 4
@@ -77,40 +66,28 @@ 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)
-
-  JS.global[:__threeRbRenderer] = renderer.handle
-  JS.global[:__threeRbScene] = renderer.backend.materialize(scene)
-  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
-  JS.global[:__threeRbLine] = renderer.backend.materialize(line)
-  JS.global[:__threeRbPoints] = renderer.backend.materialize(points)
-  JS.global[:__threeRbSprite] = renderer.backend.materialize(sprite)
-  JS.global[:__threeRbSpriteMaterial] = renderer.backend.materialize(sprite_material)
-  JS.global[:__threeRbSpriteTexture] = renderer.backend.materialize(sprite_texture)
-  JS.global[:__threeRbPrimitivesFrame] = 0
+  app.expose(
+    {
+      renderer: renderer,
+      scene: scene,
+      camera: camera,
+      line: line,
+      points: points,
+      sprite: sprite,
+      sprite_material: sprite_material,
+      sprite_texture: sprite_texture,
+      primitives_frame: 0
+    },
+    renderer: renderer
+  )
 
   renderer.animation_loop do
-    JS.global[:__threeRbPrimitivesFrame] = JS.global[:__threeRbPrimitivesFrame].to_i + 1
+    app.increment(:primitives_frame)
     line.rotation.z += 0.004
     points.rotation.y += 0.012
     sprite_material.rotation += 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/ruby/README.md

@@ -0,0 +1,22 @@
+# three-rb Ruby Example
+
+This browser example is the first visual sample for three-rb. It builds a faceted red gemstone in Ruby with `BufferGeometry`, renders it with `MeshPhysicalMaterial`, and adds an extruded `three-rb` title through the three.js `TextGeometry` addon.
+
+Run it from the repository root:
+
+```sh
+pnpm install
+ruby -run -e httpd . -p 8000
+```
+
+Then open:
+
+```text
+http://localhost:8000/examples/browser/ruby/
+```
+
+Run its smoke test:
+
+```sh
+pnpm test:browser:ruby
+```

data/examples/browser/ruby/boot.mjs

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

data/examples/browser/ruby/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 ruby</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family:
+          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+          "Segoe UI", sans-serif;
+        background: #f8fbff;
+        color: #243142;
+      }
+
+      * {
+        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(104, 143, 168, 0.045) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(104, 143, 168, 0.045) 1px, transparent 1px),
+          linear-gradient(155deg, #ffffff 0%, #f8fdff 44%, #fff9fb 74%, #f5fbf2 100%);
+        background-size: 36px 36px, 36px 36px, 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(84, 105, 130, 0.18);
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 0.78);
+        box-shadow: 0 14px 34px rgba(53, 72, 94, 0.16);
+        color: #243142;
+        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: #f0b83e;
+        box-shadow: 0 0 14px rgba(240, 184, 62, 0.72);
+      }
+
+      .status-dot[data-state="running"] {
+        background: #cf1748;
+        box-shadow: 0 0 14px rgba(207, 23, 72, 0.72);
+      }
+
+      .status-dot[data-state="error"] {
+        background: #d64040;
+        box-shadow: 0 0 14px rgba(214, 64, 64, 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/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/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