three-rb 0.1.0 → 0.2.1

data/examples/browser/picking/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 picking scene"
+require_relative "../../../lib/three"
 
+Three::Browser.run(starting: "Starting picking scene") do |app|
   scene = Three::Scene.new
   camera = Three::PerspectiveCamera.new(60, aspect: 1.0, near: 0.1, far: 100)
   camera.position.z = 4
@@ -40,25 +29,15 @@ 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
-
   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)
+  app.resize_renderer(renderer, camera)
+  canvas = app.element(renderer.dom_element)
+  canvas.on("click") do |event|
+    pointer.set(*canvas.pointer_ndc(event))
     raycaster.set_from_camera(pointer, camera)
     hits = raycaster.intersect_objects(pickables, recursive: false)
     hit = hits.find(&:object)
@@ -71,43 +50,38 @@ begin
     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
+      app.set(:picked_name, selected.name)
+      app.set(:picked_distance, hit.distance)
+      app.set(:picked_point, hit.point.to_a)
     else
-      JS.global[:__threeRbPickedName] = nil
-      JS.global[:__threeRbPickedDistance] = nil
-      JS.global[:__threeRbPickedPoint] = nil
+      app.set(:picked_name, nil)
+      app.set(:picked_distance, nil)
+      app.set(:picked_point, nil)
     end
 
-    JS.global[:__threeRbPickCount] = JS.global[:__threeRbPickCount].to_i + 1
+    app.increment(:pick_count)
     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
+  app.expose(
+    {
+      renderer: renderer,
+      scene: scene,
+      camera: camera,
+      left_cube: left_cube,
+      right_cube: right_cube,
+      raycaster: raycaster,
+      pick_count: 0,
+      picking_frame: 0
+    },
+    renderer: renderer
+  )
 
   renderer.animation_loop do
-    JS.global[:__threeRbPickingFrame] = JS.global[:__threeRbPickingFrame].to_i + 1
+    app.increment(:picking_frame)
     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/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/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/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
@@ -54,7 +43,7 @@ begin
     Three::PointsMaterial.new(color: 0xffcc4d, size: 12, size_attenuation: false)
   )
 
-  sprite_texture = Three::Loaders::TextureLoader.new.load("/examples/browser/assets/checker.svg")
+  sprite_texture = Three::Loaders::TextureLoader.new.load("/examples/browser/primitives/assets/checker.svg")
   sprite_material = Three::SpriteMaterial.new(
     color: 0xffffff,
     map: sprite_texture,
@@ -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,24 @@
+# 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.
+
+Its HDR environment file lives under `examples/browser/ruby/assets/` with the sample.
+
+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>