@solidrt/3d 0.0.55 → 0.0.57

package/examples/model-load.tsx

@@ -0,0 +1,95 @@
+// Async model loading: loadModel + <Loading>. The same rover as
+// model.tsx, but read from assets/ at runtime instead of riding in the
+// bundle - the shape every app with real content ends up needing. Bake
+// the asset once and drop it in your app's assets tree:
+//
+//   bunx srt tool 3d/model examples/model.glb -o assets/model.srtm
+//
+// (loadGltf("assets/model.glb") has the exact same async shape; the bake
+// just removes the runtime parse.)
+//
+// TWO rules make the async read work, both enforced by the runtime:
+//
+// 1. Read the async value only inside a TRACKING scope whose result JSX
+//    reads back - the memo pattern below. Reading it straight in the
+//    component body (`let model = loaded()`) throws
+//    PENDING_ASYNC_UNTRACKED_READ: outside tracking there is nothing to
+//    suspend and retry.
+// 2. The component under <Loading> creates NO elements of its own before
+//    the suspending read. An element built ahead of a suspend is orphaned
+//    when the boundary discards and retries the subtree, and orphaned
+//    subtrees are never freed (the dev leak sentinel reports them). So
+//    the window/view shell lives in App ABOVE the boundary, and Rover
+//    suspends at `loaded()` before building any JSX.
+
+import { createMemo, createSignal, Loading, onFrame, pct, render } from "@solidrt/core"
+import { createTexture } from "@solidrt/core/gpu"
+import type { TextureId } from "@solidrt/core/gpu"
+import { add, DirectionalLight, equirectToCube, Group, loadModel, PerspectiveCamera, Scene } from "@solidrt/3d"
+import type { Model, SceneNode } from "@solidrt/3d"
+
+// The same gradient environment as model.tsx: the default `standard`
+// materials want one (a baked HDRI in a real app, see environment.tsx).
+const ENV_FACE = 16
+const ENV_ROWS: [number, number, number][] = [
+  [96, 122, 168],
+  [176, 190, 210],
+  [120, 105, 90],
+  [60, 52, 45],
+]
+
+function gradientEnvironment(): TextureId {
+  let px = new Uint8Array(2 * ENV_ROWS.length * 4)
+  ENV_ROWS.forEach((c, y) => {
+    for (let x = 0; x < 2; x++) px.set([c[0], c[1], c[2], 255], (y * 2 + x) * 4)
+  })
+  let panorama = createTexture(px, 2, ENV_ROWS.length, { format: "rgba8-srgb", filter: "linear" })
+  return equirectToCube(panorama, ENV_FACE, { format: "rgba8-srgb", mipmap: true, label: "gradient-env" })
+}
+
+function Rover(props: { turn: () => number }) {
+  // The async value: a memo returning a Promise. Its read below suspends
+  // until the file is read and the model built, then resumes under the
+  // <Loading> boundary in App.
+  let loaded = createMemo(() => loadModel("assets/model.srtm", { label: "rover" }))
+
+  // Everything derived from the model - framing, mounting - happens in
+  // this memo, AFTER the suspending read, so nothing here runs or builds
+  // until the model exists. The memo returns the scene JSX; the component
+  // returns the memo read and nothing else.
+  let scene = createMemo(() => {
+    let model: Model = loaded()
+    let cube = gradientEnvironment()
+    let b = model.bounds
+    let center: [number, number, number] = [(b[0]! + b[3]!) / 2, (b[1]! + b[4]!) / 2, (b[2]! + b[5]!) / 2]
+    let radius = Math.hypot(b[3]! - b[0]!, b[4]! - b[1]!, b[5]! - b[2]!) / 2
+    return (
+      <Scene clearColor={[0.1, 0.11, 0.14, 1]} environment={{ cube }} samples={4} label="model-load">
+        <PerspectiveCamera fov={40} position={[center[0] + radius * 1.4, center[1] + radius * 1.1, center[2] + radius * 2.2]} lookAt={center} />
+        <DirectionalLight direction={[0.5, -0.8, 0.3]} color={[1, 0.95, 0.85]} intensity={0.9} />
+        <Group rotation={[0, props.turn(), 0]} ref={(g: SceneNode) => add(g, model)} />
+      </Scene>
+    )
+  })
+
+  return <>{scene()}</>
+}
+
+function App() {
+  let [t, setT] = createSignal(0)
+  onFrame(tick => setT(tick / 1000))
+
+  // The shell above the boundary; the fallback is plain UI and may be
+  // anything - it is created and torn down by <Loading> itself.
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Loading fallback={<text fontSize={24} color="#8899aa">Loading rover...</text>}>
+          <Rover turn={() => t() / 3} />
+        </Loading>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/model.tsx

@@ -6,16 +6,43 @@
 // through loadGltf (same parser, read with flux:fs) or, baked once with
 // `srt tool 3d/model`, through loadModel (no parsing at all). Every part
 // keeps its node name and is an ordinary mesh: pointer events, transforms
-// and materials work per part.
+// and materials work per part. The materials are createModel's default
+// `standard` from the file's PBR factors, so the scene carries an
+// environment: the steel reflects it and every part takes its diffuse
+// ambient from it (a metal with nothing to reflect renders near black) -
+// here a sky-to-ground gradient built at startup, in an app usually a
+// baked HDRI (see environment.tsx).
 
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
-import { add, createModel, DirectionalLight, Group, HemisphereLight, parseGltf, PerspectiveCamera, Scene, setVisible } from "@solidrt/3d"
+import { createTexture } from "@solidrt/core/gpu"
+import type { TextureId } from "@solidrt/core/gpu"
+import { add, createModel, DirectionalLight, equirectToCube, Group, parseGltf, PerspectiveCamera, Scene, setVisible } from "@solidrt/3d"
 import type { SceneNode } from "@solidrt/3d"
 import modelBytes from "./model.glb" with { type: "binary" }
 
-const SIZE = 720
+// Face edge of the gradient environment cube: a gradient needs no detail.
+const ENV_FACE = 16
+// The gradient, zenith to nadir, sRGB bytes: sky, horizon, ground, below.
+const ENV_ROWS: [number, number, number][] = [
+  [96, 122, 168],
+  [176, 190, 210],
+  [120, 105, 90],
+  [60, 52, 45],
+]
+
+// A tiny equirectangular panorama (2 columns, one row per band, linear
+// filtering between) turned into the cube the scene lights by.
+function gradientEnvironment(): TextureId {
+  let px = new Uint8Array(2 * ENV_ROWS.length * 4)
+  ENV_ROWS.forEach((c, y) => {
+    for (let x = 0; x < 2; x++) px.set([c[0], c[1], c[2], 255], (y * 2 + x) * 4)
+  })
+  let panorama = createTexture(px, 2, ENV_ROWS.length, { format: "rgba8-srgb", filter: "linear" })
+  return equirectToCube(panorama, ENV_FACE, { format: "rgba8-srgb", mipmap: true, label: "gradient-env" })
+}
 
 function App() {
+  let cube = gradientEnvironment()
   let [t, setT] = createSignal(0)
   onFrame(tick => setT(tick / 1000))
 
@@ -25,10 +52,10 @@ function App() {
   let center: [number, number, number] = [(b[0]! + b[3]!) / 2, (b[1]! + b[4]!) / 2, (b[2]! + b[5]!) / 2]
   let radius = Math.hypot(b[3]! - b[0]!, b[4]! - b[1]!, b[5]! - b[2]!) / 2
 
-  // Parts are named after the glTF nodes: a click hides that part, a
-  // click on the body brings everything back.
+  // Parts are named after the glTF nodes: a tap hides that part, a tap
+  // on the body brings everything back.
   for (let part of model.parts) {
-    part.mesh.onPointerDown = () => {
+    part.mesh.onTap = () => {
       if (part.name === "body") for (let p of model.parts) setVisible(p.mesh, true)
       else setVisible(part.mesh, false)
     }
@@ -36,10 +63,9 @@ function App() {
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} clearColor={[0.1, 0.11, 0.14, 1]} samples={4} label="model">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.1, 0.11, 0.14, 1]} environment={{ cube }} samples={4} label="model">
           <PerspectiveCamera fov={40} position={[center[0] + radius * 1.4, center[1] + radius * 1.1, center[2] + radius * 2.2]} lookAt={center} />
-          <HemisphereLight sky={[0.45, 0.5, 0.6]} ground={[0.2, 0.17, 0.14]} />
           <DirectionalLight direction={[0.5, -0.8, 0.3]} color={[1, 0.95, 0.85]} intensity={0.9} />
           <Group rotation={[0, t() / 3, 0]} ref={(g: SceneNode) => add(g, model)} />
         </Scene>

package/examples/pick.tsx

@@ -1,62 +1,136 @@
-// Mesh pointer events: hover to tint (enter/leave), click to pop (down),
-// with a Group seeing its children's clicks through bubbling and one mesh
-// stopping the walk. The scene is STATIC - no onFrame - so it renders only
-// when an event changes something: picking is demand-driven like
-// everything else. Events flow because the built-in <Scene> leaf carries
-// scene.handlers (default on); hit testing runs over the scene's BVH, so a
-// pointer move costs O(log meshes).
+// Mesh pointer events under an orbit control, the scene as the root of
+// the walk: hover tints (enter/leave), a TAP pops (a down may be the start
+// of an orbit drag, so the pop waits for the release), a drag on the
+// crate slides it over the floor and never orbits - its down claims the
+// press, so the orbit control's feed, listening at the root, sees none
+// of it - while a drag anywhere else orbits and a wheel zooms; the ring
+// claims the wheel to spin itself; a tap on empty space un-pops
+// everything (the scene's own onTap with `mesh` null, the deselect
+// idiom). The Group hears the cone's downs through bubbling (the crate's
+// claim stops the walk at the crate). The scene is STATIC - no onFrame - so it renders only when an event changes
+// something, and the orbit runs frames only while it glides; hit testing
+// runs over the scene's BVH, so a pointer move costs O(log meshes).
 //
 // The volume tier is honest about its shape: hits test each mesh's
 // bounding box, so hovering just outside the ball's silhouette (inside its
 // box corners) still counts. Triangle-accurate hits are a later tier.
+//
+// Debug commands: `state` (the orbit pose, the crate's position, the
+// ring's spin, the popped and hovered names) and `pixel` ({ name }: the
+// WINDOW pixel a mesh's position projects to, for a synthetic tap).
 
-import { createSignal, pct, render } from "@solidrt/core"
-import { box, cone, Group, Mesh, PerspectiveCamera, plane, Scene, setMeshParams, setTransform, sphere, torus, unlit } from "@solidrt/3d"
-import type { Geometry, ScenePointerEvent, Vec3 } from "@solidrt/3d"
-
-const SIZE = 720
+import { createInputMap, createPointerFeed, createSignal, displayScale, pct, render } from "@solidrt/core"
+import { box, cone, getRotation, Group, Mesh, OrbitCamera, orbitActions, orbitBindings, PerspectiveCamera, plane, Scene, setMeshParams, setTransform, sphere, torus, unlit, useScene } from "@solidrt/3d"
+import type { Geometry, MeshNode, NodePointerEvent, NodeTapEvent, NodeWheelEvent, OrbitCameraHandle, SceneHandle, Vec3 } from "@solidrt/3d"
+import { registerDebug } from "srt:dev"
 
 type Color = [number, number, number]
 
+// How much a popped mesh grows.
+const POP_SCALE = 1.25
+// Radians of ring spin per wheel pixel.
+const WHEEL_SPIN = 0.01
+// The orbit's starting pose: the old fixed camera at [0, 2.6, 5] looking
+// at the scene's middle.
+const ORBIT_TARGET: Vec3 = [0, 0.4, 0]
+const ORBIT_DISTANCE = 5.5
+const ORBIT_ELEVATION = 0.42
+
 let [hovered, setHovered] = createSignal("nothing")
-let popped = new Set<object>()
+// Popped meshes and the scale they pop back to.
+let popped = new Map<MeshNode, number>()
+let meshes: Record<string, MeshNode> = {}
+let orbit!: OrbitCameraHandle
+let scene!: SceneHandle
+
+let unpopAll = () => {
+  for (let [mesh, base] of popped) setTransform(mesh, { scale: base })
+  popped.clear()
+}
 
 /** A pickable mesh: unlit color that brightens on hover, scale-pop on
- * click. setMeshParams writes raw uniform values, so the tint premultiplies
- * here (alpha 1: the rgb passes through). */
-function Pickable(p: { name: string; color: Color; geometry: Geometry; position: Vec3; scale?: number; stop?: boolean }) {
+ * tap; `drag` slides it over the floor (claiming the press), `spin`
+ * turns it on the wheel (claiming the wheel). setMeshParams writes raw
+ * uniform values, so the tint premultiplies here (alpha 1: the rgb passes
+ * through). */
+function Pickable(p: { name: string; color: Color; geometry: Geometry; position: Vec3; scale?: number; drag?: boolean; spin?: boolean }) {
+  let scene = useScene().scene
   let lift = (up: number): [number, number, number, number] => [
     Math.min(p.color[0] + up, 1),
     Math.min(p.color[1] + up, 1),
     Math.min(p.color[2] + up, 1),
     1,
   ]
+  // The floor point under the pointer at the mesh's height: the camera
+  // ray through the event's scene pixel meets the plane y = mesh y.
+  let floorPoint = (e: NodePointerEvent): [number, number] | null => {
+    let ray = scene.screenRay(e.x, e.y)
+    if (Math.abs(ray.direction[1]) < 1e-6) return null
+    let t = (e.mesh.position[1] - ray.origin[1]) / ray.direction[1]
+    if (t < 0) return null
+    return [ray.origin[0] + t * ray.direction[0], ray.origin[2] + t * ray.direction[2]]
+  }
+  // The mesh's offset from the grabbed floor point while a drag is on.
+  let grab: [number, number] | null = null
+  let spin = 0
   return (
     <Mesh
       geometry={p.geometry}
       material={unlit({ color: p.color })}
       position={p.position}
       scale={p.scale}
-      onPointerEnter={(e: ScenePointerEvent) => {
+      ref={m => (meshes[p.name] = m)}
+      onPointerEnter={(e: NodePointerEvent) => {
         setHovered(p.name)
         setMeshParams(e.mesh, { uColor: lift(0.25) })
-        console.log(`enter ${p.name}`)
       }}
-      onPointerLeave={(e: ScenePointerEvent) => {
+      onPointerLeave={(e: NodePointerEvent) => {
         setHovered("nothing")
         setMeshParams(e.mesh, { uColor: lift(0) })
-        console.log(`leave ${p.name}`)
       }}
-      onPointerDown={(e: ScenePointerEvent) => {
-        let pop = !popped.has(e.mesh)
-        if (pop) popped.add(e.mesh)
-        else popped.delete(e.mesh)
-        setTransform(e.mesh, { scale: pop ? (p.scale ?? 1) * 1.25 : (p.scale ?? 1) })
+      onTap={(e: NodeTapEvent) => {
+        let base = popped.get(e.mesh)
+        if (base === undefined) {
+          popped.set(e.mesh, p.scale ?? 1)
+          setTransform(e.mesh, { scale: (p.scale ?? 1) * POP_SCALE })
+        } else {
+          popped.delete(e.mesh)
+          setTransform(e.mesh, { scale: base })
+        }
         let pt = e.point!
-        console.log(`down ${p.name} at ${pt[0].toFixed(2)},${pt[1].toFixed(2)},${pt[2].toFixed(2)} d=${e.distance!.toFixed(2)}`)
-        // The cone demonstrates stopping the bubble: its group never hears it.
-        if (p.stop) e.stopPropagation()
+        console.log(`tap ${p.name} x${e.tapCount} at ${pt[0].toFixed(2)},${pt[1].toFixed(2)},${pt[2].toFixed(2)} d=${e.distance!.toFixed(2)}`)
       }}
+      onPointerDown={
+        p.drag
+          ? (e: NodePointerEvent) => {
+              let f = floorPoint(e)
+              if (f === null) return
+              grab = [e.mesh.position[0] - f[0], e.mesh.position[2] - f[1]]
+              // The claim: this press is the crate's, the orbit never sees it.
+              e.stopPropagation()
+            }
+          : undefined
+      }
+      onPointerMove={
+        p.drag
+          ? (e: NodePointerEvent) => {
+              if (grab === null) return
+              let f = floorPoint(e)
+              if (f === null) return
+              setTransform(e.mesh, { position: [f[0] + grab[0], e.mesh.position[1], f[1] + grab[1]] })
+            }
+          : undefined
+      }
+      onPointerUp={p.drag ? () => (grab = null) : undefined}
+      onWheel={
+        p.spin
+          ? (e: NodeWheelEvent) => {
+              spin += e.deltaY * WHEEL_SPIN
+              setTransform(e.mesh, { rotation: [0, spin, 0] })
+              e.stopPropagation()
+            }
+          : undefined
+      }
     />
   )
 }
@@ -67,27 +141,61 @@ function App() {
   let ball = sphere({ radius: 0.45 })
   let spike = cone({ radius: 0.45, height: 1 })
   let ring = torus({ radius: 0.4, tube: 0.14 })
+  // The orbit control's input: the scene leaf's pointer feed, bound to
+  // the standard orbit actions (drag rotates, wheel and pinch zoom).
+  let pointer = createPointerFeed()
+  let input = createInputMap(orbitActions)
+  input.bind(orbitBindings({ pointer }))
+
+  registerDebug("state", () => ({
+    pose: orbit.pose(),
+    crate: meshes.crate?.position,
+    ringSpin: meshes.ring ? getRotation(meshes.ring)[1] : null,
+    popped: Object.keys(meshes).filter(n => popped.has(meshes[n]!)),
+    hovered: hovered(),
+  }))
+  // The scene fills the window at device density, so a scene pixel over
+  // the display scale is a window pixel.
+  registerDebug("pixel", (args?: { name?: string }) => {
+    let mesh = meshes[args?.name ?? ""]
+    if (!mesh) return null
+    let p = scene.project(mesh.position)
+    if (p === null) return null
+    return { x: p.x / displayScale(), y: p.y / displayScale() }
+  })
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} clearColor={[0.07, 0.07, 0.1, 1]} label="pick">
-          <PerspectiveCamera fov={55} position={[0, 2.6, 5]} lookAt={[0, 0.4, 0]} />
+      <view width={pct(100)} height={pct(100)}>
+        <Scene
+          clearColor={[0.07, 0.07, 0.1, 1]}
+          label="pick"
+          pointer={pointer}
+          ref={s => (scene = s)}
+          onTap={e => {
+            if (e.mesh !== null) return
+            console.log(`tap on nothing at ${e.x.toFixed(0)},${e.y.toFixed(0)}: un-pop`)
+            unpopAll()
+          }}
+        >
+          <PerspectiveCamera fov={55} />
+          <OrbitCamera input={input} target={ORBIT_TARGET} distance={ORBIT_DISTANCE} elevation={ORBIT_ELEVATION} ref={o => (orbit = o)} />
           <Mesh geometry={floor} material={unlit({ color: [0.15, 0.16, 0.2] })} rotation={[-Math.PI / 2, 0, 0]} />
-          {/* The group hears every child click that is not stopped. */}
-          <Group onPointerDown={() => console.log("group saw down")}>
-            <Pickable name="crate" color={[0.85, 0.3, 0.3]} geometry={crate} position={[-1.6, 0.4, 0]} scale={0.8} />
-            <Pickable name="cone" color={[0.35, 0.65, 0.9]} geometry={spike} position={[1.6, 0.5, 0]} stop />
+          {/* The group hears the cone's downs through bubbling; the crate's
+              claim stops the walk at the crate, so the group never sees those. */}
+          <Group onPointerDown={e => console.log(`group saw down on ${e.mesh === meshes.crate ? "crate" : "cone"}`)}>
+            <Pickable name="crate" color={[0.85, 0.3, 0.3]} geometry={crate} position={[-1.6, 0.4, 0]} scale={0.8} drag />
+            <Pickable name="cone" color={[0.35, 0.65, 0.9]} geometry={spike} position={[1.6, 0.5, 0]} />
           </Group>
           <Pickable name="ball" color={[0.9, 0.8, 0.35]} geometry={ball} position={[0, 0.45, 0]} />
-          <Pickable name="ring" color={[0.5, 0.85, 0.5]} geometry={ring} position={[0.9, 0.35, -1.6]} />
+          <Pickable name="ring" color={[0.5, 0.85, 0.5]} geometry={ring} position={[0.9, 0.35, -1.6]} spin />
         </Scene>
         <view position="absolute" x={0} y={0} padding={16} gap={4}>
           <text color="#eef4ff" fontSize={22} fontWeight={700}>
             {`hover: ${hovered()}`}
           </text>
           <text color="#8fa6c8" fontSize={13}>
-            hover tints, click pops - a static scene, rendered only on change
+            hover tints, tap pops, drag the crate; drag elsewhere orbits, wheel zooms (over the ring: spins it), tap nothing to un-pop
           </text>
         </view>
       </view>

package/examples/probe.tsx

@@ -0,0 +1,107 @@
+// A reflection probe: `scene.createReflectionProbe` renders the scene into
+// a cube map from a point, and that cube is the environment a chrome ball
+// at the same point mirrors - Three's CubeCamera, Unity's and Godot's
+// realtime ReflectionProbe. Six colored walls make a room, four glowing
+// spheres orbit the ball, and the probe re-renders every frame (six scene
+// passes) so the orbit shows in the chrome. Layers keep the ball out of
+// its own probe: the room and the orbiters live on layers 1 and 2, the
+// ball on layer 1 only, and the probe looks at layer 2. Each update also
+// prefilters the faces into the roughness chain (the default), so the
+// ball's satin finish blurs the room the way a baked environment would;
+// `prefilter: false` would keep a sharp mirror at a sixth of the passes
+// (the chain is the frame's largest GPU item; see AGENTS.md). Drag to
+// look around.
+
+import { createInputMap, createPointerFeed, createSignal, gamepad, onFrame, pct, render } from "@solidrt/core"
+import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, standard, unlit } from "@solidrt/3d"
+import type { ReflectionProbe, SceneHandle } from "@solidrt/3d"
+import type { Vec3 } from "@solidrt/3d/math"
+
+// Half the room's edge.
+const ROOM = 5
+// The orbiters' radius, orbit radius and speed (radians per second).
+const ORBITER_RADIUS = 0.35
+const ORBIT = 2
+const ORBIT_SPEED = 0.8
+// The chrome ball's radius and its satin roughness (0 is a mirror).
+const BALL = 1
+const BALL_ROUGHNESS = 0.2
+// The probe's face edge.
+const PROBE_SIZE = 128
+// Layer bits: the scene camera sees both, the probe only ROOM_LAYER.
+const BALL_LAYER = 1
+const ROOM_LAYER = 2
+
+// Wall colors (sRGB), one per face: +X, -X, +Y, -Y, +Z, -Z.
+const WALL_COLORS: [number, number, number][] = [
+  [0.75, 0.3, 0.25],
+  [0.25, 0.6, 0.35],
+  [0.85, 0.85, 0.9],
+  [0.3, 0.28, 0.26],
+  [0.25, 0.4, 0.75],
+  [0.8, 0.7, 0.3],
+]
+// Each wall's position and the rotation that turns the plane's front inward.
+const WALLS: { position: Vec3; rotation: Vec3 }[] = [
+  { position: [ROOM, 0, 0], rotation: [0, -Math.PI / 2, 0] },
+  { position: [-ROOM, 0, 0], rotation: [0, Math.PI / 2, 0] },
+  { position: [0, ROOM, 0], rotation: [Math.PI / 2, 0, 0] },
+  { position: [0, -ROOM, 0], rotation: [-Math.PI / 2, 0, 0] },
+  { position: [0, 0, ROOM], rotation: [0, Math.PI, 0] },
+  { position: [0, 0, -ROOM], rotation: [0, 0, 0] },
+]
+const ORBITER_COLORS: [number, number, number][] = [
+  [1, 0.4, 0.2],
+  [0.3, 0.9, 1],
+  [1, 0.9, 0.3],
+  [0.7, 0.4, 1],
+]
+
+function App() {
+  // The camera's input: the scene leaf's gestures and any pad, bound to the
+  // orbit control's actions - the app wires devices, the component takes
+  // the map (ARCHITECTURE.md).
+  let pointer = createPointerFeed()
+  let input = createInputMap(orbitActions)
+  input.bind(orbitBindings({ pointer, gamepad: gamepad() }))
+  let [t, setT] = createSignal(0)
+  let scene: SceneHandle | undefined
+  let probe: ReflectionProbe | undefined
+  onFrame(tick => {
+    setT(tick / 1000)
+    if (scene !== undefined && probe === undefined) {
+      probe = scene.createReflectionProbe({ position: [0, 0, 0], size: PROBE_SIZE, layers: ROOM_LAYER, label: "ball-probe" })
+      scene.setEnvironment({ cube: probe.cube })
+    }
+    probe?.update()
+  })
+  let wall = plane({ width: ROOM * 2, height: ROOM * 2 })
+  let walls = WALL_COLORS.map(color => unlit({ color }))
+  let orbiter = sphere({ radius: ORBITER_RADIUS, widthSegments: 24, heightSegments: 16 })
+  let orbiters = ORBITER_COLORS.map(color => unlit({ color }))
+  let ball = standard({ color: [1, 1, 1], metalness: 1, roughness: BALL_ROUGHNESS })
+  let orbitPosition = (i: number): Vec3 => {
+    let a = t() * ORBIT_SPEED + (i * Math.PI) / 2
+    return [Math.cos(a) * ORBIT, Math.sin(a * 1.7) * 0.8, Math.sin(a) * ORBIT]
+  }
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.05, 0.05, 0.06, 1]} samples={4} label="probe-demo" ref={s => (scene = s)} pointer={pointer}>
+          <OrbitCamera input={input} target={[0, 0, 0]} azimuth={0.5} elevation={0.2} distance={4} />
+          <HemisphereLight sky={[0.6, 0.65, 0.7]} ground={[0.3, 0.28, 0.26]} intensity={0.6} />
+          <DirectionalLight direction={[0.4, -0.8, 0.3]} intensity={0.8} />
+          {WALLS.map((w, i) => (
+            <Mesh geometry={wall} material={walls[i]!} position={w.position} rotation={w.rotation} layers={BALL_LAYER | ROOM_LAYER} />
+          ))}
+          {ORBITER_COLORS.map((_, i) => (
+            <Mesh geometry={orbiter} material={orbiters[i]!} position={orbitPosition(i)} layers={BALL_LAYER | ROOM_LAYER} />
+          ))}
+          <Mesh geometry={sphere({ radius: BALL, widthSegments: 64, heightSegments: 48 })} material={ball} layers={BALL_LAYER} />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/scene-background.tsx

@@ -10,8 +10,6 @@ import { pct, render } from "@solidrt/core"
 import { glsl } from "@solidrt/core/gpu"
 import { box, Mesh, PerspectiveCamera, Scene, sphere, torusKnot, unlit } from "@solidrt/3d"
 
-const SIZE = 720
-
 // A radial night-sky gradient with hash grain so the ramp does not band.
 let BACKDROP = glsl`
   void main() {
@@ -28,8 +26,8 @@ let BACKDROP = glsl`
 function App() {
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} background={BACKDROP} label="backdrop-demo">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene background={BACKDROP} label="backdrop-demo">
           <PerspectiveCamera fov={55} position={[0, 1.8, 4.4]} lookAt={[0, 0.4, 0]} />
           <Mesh geometry={torusKnot({ radius: 0.7, tube: 0.2, tubularSegments: 128, radialSegments: 16 })} material={unlit({ color: [0.85, 0.55, 0.25] })} position={[0, 0.9, 0]} />
           <Mesh geometry={box()} material={unlit({ color: [0.3, 0.5, 0.8] })} position={[-1.5, 0.4, -0.5]} scale={0.8} />

package/examples/scene-basic.tsx

@@ -11,8 +11,6 @@
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { box, Group, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
 
-const SIZE = 720
-
 function App() {
   let [spin, setSpin] = createSignal(0)
   onFrame(tick => setSpin(tick / 2000))
@@ -26,8 +24,8 @@ function App() {
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} clearColor={[0.07, 0.07, 0.1, 1]} label="scene-basic">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.07, 0.1, 1]} label="scene-basic">
           <PerspectiveCamera fov={55} position={[0, 1.6, 3.6]} lookAt={[0, 0.3, 0]} />
           <Mesh
             geometry={floor}