three-rb 0.1.0 → 0.2.0

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/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] = "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"
 
@@ -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.startsWith("/examples/browser/assets/");
+}
+
 async function compileWasm(url) {
   const response = fetch(url);
   if (WebAssembly.compileStreaming) {

data/examples/browser/textures/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 Ruby scene"
+require_relative "../../../lib/three"
 
+Three::Browser.run(starting: "Starting Ruby scene") do |app|
   scene = Three::Scene.new
   camera = Three::OrthographicCamera.new(-2.5, 2.5, 1.6, -1.6, near: 0.1, far: 100)
   camera.position.z = 5
@@ -91,9 +80,7 @@ begin
   )
   renderer.set_clear_color(0x11161a, 1)
 
-  resize = proc do
-    width = [viewport[:clientWidth].to_i, 1].max
-    height = [viewport[:clientHeight].to_i, 1].max
+  app.resize_renderer(renderer, camera) do |width, height, _aspect|
     view_height = 3.4
     view_width = view_height * width.to_f / height
 
@@ -102,25 +89,26 @@ begin
     camera.top = view_height / 2
     camera.bottom = -view_height / 2
     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[:__threeRbTexturedMesh] = renderer.backend.materialize(mesh)
-  JS.global[:__threeRbTextureMaterial] = renderer.backend.materialize(material)
-  JS.global[:__threeRbMatcapMesh] = renderer.backend.materialize(matcap_mesh)
-  JS.global[:__threeRbMatcapMaterial] = renderer.backend.materialize(matcap_material)
-  JS.global[:__threeRbToonMesh] = renderer.backend.materialize(toon_mesh)
-  JS.global[:__threeRbToonMaterial] = renderer.backend.materialize(toon_material)
-  JS.global[:__threeRbTextureExampleTexture] = renderer.backend.materialize(texture)
-  JS.global[:__threeRbTextureExampleEnvironment] = renderer.backend.materialize(environment_texture)
-  JS.global[:__threeRbTextureExampleFrame] = 0
+  app.expose(
+    {
+      renderer: renderer,
+      scene: scene,
+      camera: camera,
+      textured_mesh: mesh,
+      texture_material: material,
+      matcap_mesh: matcap_mesh,
+      matcap_material: matcap_material,
+      toon_mesh: toon_mesh,
+      toon_material: toon_material,
+      texture_example_texture: texture,
+      texture_example_environment: environment_texture,
+      texture_example_frame: 0
+    },
+    renderer: renderer
+  )
 
   frame = 0
   renderer.animation_loop do
@@ -130,13 +118,7 @@ begin
     matcap_mesh.rotation.x += 0.005
     matcap_mesh.rotation.y -= 0.009
     toon_mesh.rotation.y += 0.012
-    JS.global[:__threeRbTextureExampleFrame] = frame
+    app.set(:texture_example_frame, 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/exe/three-rb

@@ -0,0 +1,55 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "optparse"
+require "three/generators/browser_example"
+
+def usage
+  <<~TEXT
+    Usage:
+      three-rb browser PATH [--force]
+
+    Commands:
+      browser PATH   Generate a Ruby-only browser example at PATH.
+
+    Example:
+      three-rb browser examples/browser/quickstart
+  TEXT
+end
+
+command = ARGV.shift
+
+case command
+when "browser", "browser-example"
+  options = { force: false }
+  parser = OptionParser.new do |opts|
+    opts.banner = "Usage: three-rb #{command} PATH [--force]"
+    opts.on("--force", "Overwrite generated example files") { options[:force] = true }
+    opts.on("-h", "--help", "Show help") do
+      puts opts
+      exit 0
+    end
+  end
+  begin
+    parser.parse!(ARGV)
+  rescue OptionParser::ParseError => error
+    warn error.message
+    warn parser
+    exit 1
+  end
+  target = ARGV.shift
+
+  unless target
+    warn parser
+    exit 1
+  end
+
+  Three::Generators::BrowserExample.new(target: target, force: options[:force]).call
+when "-h", "--help", nil
+  puts usage
+  exit(command ? 0 : 1)
+else
+  warn "Unknown command: #{command}"
+  warn usage
+  exit 1
+end

data/lib/three/backends/threejs/materialization.rb

@@ -30,6 +30,10 @@ module Three
             @adapter.load_rgbe_texture(object.source, texture_parameters(object))
           when Texture
             @adapter.load_texture(object.source, texture_parameters(object))
+          when FogExp2
+            @adapter.new_fog_exp2(object.color.hex, object.density)
+          when Fog
+            @adapter.new_fog(object.color.hex, object.near, object.far)
           when AmbientLight
             @adapter.new_ambient_light(object.color.hex, object.intensity)
           when DirectionalLight
@@ -67,6 +71,8 @@ module Three
               parameters[:theta_start],
               parameters[:theta_length]
             )
+          when TextGeometry
+            @adapter.new_text_geometry(object.text, text_geometry_parameters(object))
           when BufferGeometry
             build_buffer_geometry(object)
           when LineBasicMaterial

data/lib/three/backends/threejs/parameters.rb

@@ -89,6 +89,23 @@ module Three
             matrix: texture.matrix.to_a
           }
         end
+
+        def text_geometry_parameters(geometry)
+          parameters = geometry.parameters
+          {
+            font: parameters[:font].handle,
+            size: parameters[:size],
+            depth: parameters[:depth],
+            curveSegments: parameters[:curve_segments],
+            steps: parameters[:steps],
+            bevelEnabled: parameters[:bevel_enabled],
+            bevelThickness: parameters[:bevel_thickness],
+            bevelSize: parameters[:bevel_size],
+            bevelOffset: parameters[:bevel_offset],
+            bevelSegments: parameters[:bevel_segments],
+            direction: parameters[:direction]
+          }
+        end
       end
 
       include Parameters