three-rb 0.1.0 → 0.2.0

data/docs/standalone-browser-app.md

@@ -0,0 +1,102 @@
+# Standalone Browser App
+
+This guide shows how to make a small browser app outside the three-rb repository with your own Ruby entrypoint.
+
+The current browser runtime is still alpha. A standalone app needs a small JavaScript boot file because the browser must start ruby.wasm, expose three.js constructors, and then load your Ruby file over HTTP.
+
+## Generate The App
+
+Install the gem, create a project directory, and generate a Ruby-only browser example:
+
+```sh
+mkdir hello-three-rb
+cd hello-three-rb
+
+gem install three-rb
+three-rb browser examples/browser/quickstart
+```
+
+If you installed through Bundler, run:
+
+```sh
+bundle exec three-rb browser examples/browser/quickstart
+```
+
+The generator creates:
+
+- `package.json` and `pnpm-lock.yaml`
+- `lib/`, copied from the installed gem
+- `examples/browser/shared/boot.mjs`
+- `examples/browser/quickstart/index.html`
+- `examples/browser/quickstart/boot.mjs`
+- `examples/browser/quickstart/main.rb`
+- `examples/browser/quickstart/README.md`
+
+Copying `lib/` puts the installed gem's Ruby source in the served app directory. The browser Ruby VM loads Ruby files over HTTP, so this is the current standalone workflow.
+
+Pass `--force` only when you want to overwrite generated example files:
+
+```sh
+three-rb browser examples/browser/quickstart --force
+```
+
+## Ruby Entrypoint
+
+The generated `examples/browser/quickstart/main.rb` is plain Ruby scene code. It does not require `js` or call `JS.global`:
+
+```ruby
+# frozen_string_literal: true
+
+require_relative "../../../lib/three"
+
+Three::Browser.run(starting: "Starting Ruby scene") do |app|
+  scene = Three::Scene.new
+  camera = Three::PerspectiveCamera.new(70, aspect: 1.0, near: 0.1, far: 100)
+  camera.position.z = 3
+
+  cube = Three::Mesh.new(
+    Three::BoxGeometry.new(1, 1, 1),
+    Three::MeshBasicMaterial.new(color: 0x4ed08f)
+  )
+  scene.add(cube)
+
+  renderer = Three::Renderers::ThreeJSRenderer.new(
+    canvas: "#scene",
+    antialias: true,
+    alpha: false
+  )
+  renderer.set_clear_color(0x101418, 1)
+
+  app.resize_renderer(renderer, camera)
+  renderer.render(scene, camera)
+
+  app.animation_loop(renderer) do
+    cube.rotation.x += 0.01
+    cube.rotation.y += 0.015
+    renderer.render(scene, camera)
+  end
+end
+```
+
+Keep ordinary scene code inside `Three::Browser.run`. Use `app.resize_renderer(renderer, camera)` for responsive canvas sizing, `app.animation_loop(renderer)` for animation, and `app.on_key`, `app.on_pointer`, `app.pointer_ndc`, or `app.storage` before reaching for direct JavaScript access.
+
+## Run It
+
+Install browser packages, serve the app directory, and open the page:
+
+```sh
+pnpm install
+ruby -run -e httpd . -p 8000
+```
+
+If Ruby reports that `webrick` is not found, install it once with `gem install webrick`. Ruby 3.0 and later no longer include WEBrick as a standard library.
+
+```text
+http://localhost:8000/examples/browser/quickstart/
+```
+
+Use `http://localhost:8000/...`; do not open the files with `file://`, because the runtime loads ES modules, wasm, Ruby files, and assets over HTTP.
+
+## When JavaScript Is Still Involved
+
+The generated app still includes a JavaScript boot file. That file imports three.js, registers addon constructors, starts ruby.wasm, and loads the Ruby entrypoint. Application scene code should not need `require "js"` unless it reaches outside the current three-rb browser API into custom browser APIs, unwrapped three.js addons, or application-specific JavaScript integrations. Use `Three::Browser.js` for that explicit escape hatch and keep it isolated.

data/examples/browser/README.md

@@ -11,9 +11,12 @@ pnpm install
 ruby -run -e httpd . -p 8000
 ```
 
+If Ruby reports that `webrick` is not found, install it once with `gem install webrick`. Ruby 3.0 and later no longer include WEBrick as a standard library.
+
 Open an example URL:
 
 ```text
+http://localhost:8000/examples/browser/ruby/
 http://localhost:8000/examples/browser/cube/
 http://localhost:8000/examples/browser/composition/
 http://localhost:8000/examples/browser/textures/
@@ -39,6 +42,7 @@ Run one smoke test by using the command listed in the table below.
 
 | Example | Primary APIs covered | Smoke command | Why it exists |
 | --- | --- | --- | --- |
+| `examples/browser/ruby/` | `BufferGeometry`, `Float32BufferAttribute`, `MeshPhysicalMaterial`, `RGBELoader`, `FontLoader`, `TextGeometry`, `OrbitControls`, shadows | `pnpm test:browser:ruby` | Provides the first visual sample: a Ruby-authored faceted red gemstone with a three-dimensional `three-rb` title. |
 | `examples/browser/cube/` | `Scene`, `PerspectiveCamera`, `BoxGeometry`, `Mesh`, `MeshBasicMaterial`, `ThreeJSRenderer`, animation loop | `pnpm test:browser:cube` | Verifies the smallest Ruby-authored scene can boot through ruby.wasm and draw nonblank WebGL pixels through the three.js renderer path. |
 | `examples/browser/composition/` | `OrthographicCamera`, ambient/directional/point/hemisphere lights, shadows, `ShadowMaterial`, `Group`, `InstancedMesh`, `TextureLoader`, `OrbitControls`, material/texture disposal | `pnpm test:browser:composition` | Exercises the broad scene-composition path used by richer browser scenes, including dynamic material updates and camera controls. |
 | `examples/browser/textures/` | `TextureLoader`, `RGBELoader`, repeat/wrap/filter/UV-transform settings, `MeshPhysicalMaterial`, `MeshMatcapMaterial`, `MeshToonMaterial`, physical, matcap, and toon texture slots, scene environment | `pnpm test:browser:textures` | Verifies browser texture loading, HDR environment synchronization, and the current material texture bridge. |
@@ -52,3 +56,5 @@ Run one smoke test by using the command listed in the table below.
 ## Adding Browser Coverage
 
 New browser-facing features should add or extend one of these examples and include deterministic smoke coverage. Prefer extending an existing example when the feature strengthens the same workflow; add a new example when it introduces a distinct API surface such as a new loader family, render target workflow, or postprocessing pipeline.
+
+Keep new Ruby entrypoints Ruby-only: use `Three::Browser.run`, `app.resize_renderer`, `app.on_resize`, `app.animation_loop`, `app.element`, `app.on_key`, `app.on_pointer`, `app.pointer_ndc`, `app.storage`, and `app.expose` instead of `require "js"` or direct `JS.global` calls. If a feature needs browser or three.js APIs that are not wrapped yet, add a small Ruby helper or backend method first. Use `Three::Browser.js` only as an explicit escape hatch and keep it isolated from scene construction code.

data/examples/browser/composition/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(-3, 3, 1.8, -1.8, near: 0.1, far: 100)
   camera.position.z = 5
@@ -131,9 +120,7 @@ begin
   )
   controls.target.set(0, 0, 0)
 
-  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.8
     view_width = view_height * width.to_f / height
 
@@ -142,51 +129,50 @@ 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[:__threeRbControls] = controls.handle
-  JS.global[:__threeRbScene] = renderer.backend.materialize(scene)
-  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
-  JS.global[:__threeRbAmbientLight] = renderer.backend.materialize(ambient_light)
-  JS.global[:__threeRbDirectionalLight] = renderer.backend.materialize(key_light)
-  JS.global[:__threeRbPointLight] = renderer.backend.materialize(point_light)
-  JS.global[:__threeRbHemisphereLight] = renderer.backend.materialize(hemisphere_light)
-  JS.global[:__threeRbPlane] = renderer.backend.materialize(backdrop)
-  JS.global[:__threeRbShadowCatcher] = renderer.backend.materialize(shadow_catcher)
-  JS.global[:__threeRbShadowMaterial] = renderer.backend.materialize(shadow_material)
-  JS.global[:__threeRbRig] = renderer.backend.materialize(rig)
-  JS.global[:__threeRbPrimaryMesh] = renderer.backend.materialize(primary)
-  JS.global[:__threeRbSatelliteMesh] = renderer.backend.materialize(satellite)
-  JS.global[:__threeRbSphereMesh] = renderer.backend.materialize(orb)
-  JS.global[:__threeRbPhongMesh] = renderer.backend.materialize(highlight)
-  JS.global[:__threeRbInstancedMesh] = renderer.backend.materialize(instanced_field)
-  JS.global[:__threeRbInstancedMaterial] = renderer.backend.materialize(instanced_material)
-  JS.global[:__threeRbTexture] = renderer.backend.materialize(primary_texture)
-  JS.global[:__threeRbChangingMaterial] = renderer.backend.materialize(primary_material)
-  JS.global[:__threeRbLambertMaterial] = renderer.backend.materialize(primary_material)
-  JS.global[:__threeRbNormalMaterial] = renderer.backend.materialize(satellite_material)
-  JS.global[:__threeRbStandardMaterial] = renderer.backend.materialize(orb_material)
-  JS.global[:__threeRbPhongMaterial] = renderer.backend.materialize(highlight_material)
-  JS.global[:__threeRbMaterialDisposeEvent] = false
-  JS.global[:__threeRbTextureDisposeEvent] = false
+  app.expose(
+    {
+      renderer: renderer,
+      controls: controls,
+      scene: scene,
+      camera: camera,
+      ambient_light: ambient_light,
+      directional_light: key_light,
+      point_light: point_light,
+      hemisphere_light: hemisphere_light,
+      plane: backdrop,
+      shadow_catcher: shadow_catcher,
+      shadow_material: shadow_material,
+      rig: rig,
+      primary_mesh: primary,
+      satellite_mesh: satellite,
+      sphere_mesh: orb,
+      phong_mesh: highlight,
+      instanced_mesh: instanced_field,
+      instanced_material: instanced_material,
+      texture: primary_texture,
+      changing_material: primary_material,
+      lambert_material: primary_material,
+      normal_material: satellite_material,
+      standard_material: orb_material,
+      phong_material: highlight_material,
+      material_dispose_event: false,
+      texture_dispose_event: false
+    },
+    renderer: renderer
+  )
 
   disposable_texture = Three::Loaders::TextureLoader.new.load("/examples/browser/assets/checker.svg")
   disposable_material = Three::MeshBasicMaterial.new(map: disposable_texture)
-  disposable_texture_handle = renderer.backend.materialize(disposable_texture)
-  disposable_material_handle = renderer.backend.materialize(disposable_material)
-  disposable_texture_handle.call(:addEventListener, "dispose", proc { JS.global[:__threeRbTextureDisposeEvent] = true })
-  disposable_material_handle.call(:addEventListener, "dispose", proc { JS.global[:__threeRbMaterialDisposeEvent] = true })
+  renderer.on_dispose(disposable_texture) { app.set(:texture_dispose_event, true) }
+  renderer.on_dispose(disposable_material) { app.set(:material_dispose_event, true) }
   renderer.dispose(disposable_material, dispose_textures: true)
-  JS.global[:__threeRbMaterialHandleCachedAfterDispose] = renderer.backend.handles.key?(disposable_material.uuid)
-  JS.global[:__threeRbTextureHandleCachedAfterDispose] = renderer.backend.handles.key?(disposable_texture.uuid)
-  JS.global[:__threeRbInitialMaterialColor] = primary_material.color.hex
-  JS.global[:__threeRbCompositionFrame] = 0
+  app.set(:material_handle_cached_after_dispose, renderer.cached?(disposable_material))
+  app.set(:texture_handle_cached_after_dispose, renderer.cached?(disposable_texture))
+  app.set(:initial_material_color, primary_material.color.hex)
+  app.set(:composition_frame, 0)
 
   frame = 0
   renderer.animation_loop do
@@ -203,14 +189,8 @@ begin
     pulse = (Math.sin(frame * 0.045) + 1) / 2.0
     primary_material.color.set_rgb(0.25 + (0.35 * pulse), 0.55 + (0.25 * pulse), 0.42)
 
-    JS.global[:__threeRbCompositionFrame] = frame
+    app.set(:composition_frame, frame)
     controls.update
     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/cube/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::PerspectiveCamera.new(70, aspect: 1.0, near: 0.1, far: 100)
   camera.position.z = 3
@@ -31,32 +20,13 @@ 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[:__threeRbCube] = renderer.backend.materialize(cube)
+  app.expose({ renderer: renderer, scene: scene, camera: camera, cube: cube }, renderer: renderer)
 
   renderer.animation_loop do
     cube.rotation.x += 0.01
     cube.rotation.y += 0.015
     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/cubemap/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::PerspectiveCamera.new(45, aspect: 1.0, near: 0.1, far: 100)
   camera.position.set(0, 0.7, 4.0)
@@ -46,39 +35,27 @@ begin
   )
   renderer.set_clear_color(0x10151b, 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[:__threeRbCubemapScene] = renderer.backend.materialize(scene)
-  JS.global[:__threeRbCamera] = renderer.backend.materialize(camera)
-  JS.global[:__threeRbCubemapMesh] = renderer.backend.materialize(mesh)
-  JS.global[:__threeRbCubemapMaterial] = renderer.backend.materialize(material)
-  JS.global[:__threeRbCubeTexture] = renderer.backend.materialize(cube_texture)
-  JS.global[:__threeRbCubemapFrame] = 0
+  app.expose(
+    {
+      renderer: renderer,
+      cubemap_scene: scene,
+      camera: camera,
+      cubemap_mesh: mesh,
+      cubemap_material: material,
+      cube_texture: cube_texture,
+      cubemap_frame: 0
+    },
+    renderer: renderer
+  )
 
   frame = 0
   renderer.animation_loop do
     frame += 1
     mesh.rotation.y += 0.01
     mesh.rotation.x = Math.sin(frame * 0.02) * 0.08
-    JS.global[:__threeRbCubemapFrame] = frame
+    app.set(:cubemap_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/examples/browser/gltf/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::PerspectiveCamera.new(45, aspect: 1.0, near: 0.1, far: 100)
   camera.position.set(0, 0.15, 4.0)
@@ -53,53 +42,44 @@ begin
   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)
+  app.resize_renderer(renderer, camera)
   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
+  app.expose(
+    {
+      renderer: renderer,
+      gltf_root_scene: scene,
+      camera: camera,
+      gltf_scene: model,
+      compressed_gltf_scene: compressed_model,
+      compressed_gltf_decoder_path: draco_decoder_path,
+      gltf_animations: gltf.animations.length,
+      gltf_animation_name: gltf.animations.first&.name,
+      gltf_animation_duration: gltf.animations.first&.duration,
+      gltf_mixer: mixer,
+      gltf_action: action,
+      gltf_frame: 0,
+      gltf_animation_time: 0
+    },
+    renderer: renderer
+  )
+  app.set(:dispose_gltf, 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
+    app.set(:gltf_disposed, true)
+  end)
 
   frame = 0
+  animation_time = 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
+    animation_time += delta
+    app.set(:gltf_animation_time, animation_time)
+    app.set(:gltf_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/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