@solidrt/3d 0.0.55 → 0.0.57

package/examples/scene-views.tsx

@@ -1,14 +1,25 @@
 // One scene, three renderings: the built-in leaf from a perspective
-// camera, plus two `scene.createView` targets - a top-down ORTHOGRAPHIC
-// map (`ortho` on setCamera) and a side silhouette drawn with an
+// camera, plus two `<View3d>`s - a top-down ORTHOGRAPHIC map (`ortho` in
+// the view's `camera`) and a side silhouette drawn with an
 // `overrideMaterial`. The group spins from ONE signal: each mesh is one
 // core node whose flush writes its world matrix into every target's entry
 // at once, so the extra views cost the app nothing per frame (and the
 // light set fans out to them too - the map is lit like the main view).
-// Views die with the scene.
+// A view is a Scene child: it renders its own `<texture>` leaf where it
+// sits, so the two stack in the column beside the scene's leaf, and it
+// dies with the scene.
+//
+// Layers and per-view fog: the marker disc is on layer bit 2, so the
+// main render (mask 1) and the silhouette never draw it - only the map,
+// whose mask admits both bits. The scene is fogged; `fog={null}` on the
+// map keeps the top-down view clear (its fog names are view-owned, so
+// scene-wide fog writes never clobber them).
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
-import { box, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
-import type { SceneHandle } from "@solidrt/3d"
+import { box, circle, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit, View3d } from "@solidrt/3d"
+
+// Layer bits: the world everything defaults to, and the map-only markers.
+const WORLD_LAYER = 1
+const MARKER_LAYER = 2
 
 const MAIN = 720
 const SIDE = 360
@@ -20,57 +31,17 @@ function App() {
   let cube = box()
   let floor = plane({ width: 6, height: 6, label: "floor" })
   let ball = sphere({ radius: 0.35 })
-  // `ref` runs before `output`, so the handle is set when the views are
-  // created there; both callbacks run once, untracked - no signals needed.
-  let scene!: SceneHandle
+  let marker = circle({ radius: 0.3, label: "marker" })
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[MAIN + SIDE, MAIN]}>
+      <view width={pct(100)} height={pct(100)} designSize={[MAIN + SIDE, MAIN]} flexDirection="row">
         <Scene
           width={MAIN}
           height={MAIN}
           clearColor={[0.07, 0.07, 0.1, 1]}
+          fog={{ color: [0.07, 0.07, 0.1], near: 2.5, far: 9 }}
           label="scene-views"
-          ref={s => (scene = s)}
-          output={tex => {
-            // The map: straight down from y = 10, world -z toward the top of
-            // the leaf, seven world units across at any depth.
-            let map = scene.createView({ width: SIDE, height: SIDE, clearColor: [0.05, 0.08, 0.06, 1], label: "map" })
-            map.setCamera({
-              position: [0, 10, 0],
-              target: [0, 0, 0],
-              up: [0, 0, -1],
-              ortho: { left: -3.5, right: 3.5, top: 3.5, bottom: -3.5 },
-              near: 0.1,
-              far: 20,
-            })
-            // The silhouette: every mesh drawn flat amber, from the side. The
-            // floor is edge-on here, a single line at the bottom.
-            let side = scene.createView({
-              width: SIDE,
-              height: SIDE,
-              clearColor: [0.1, 0.06, 0.05, 1],
-              overrideMaterial: unlit({ color: [0.95, 0.75, 0.3] }),
-              label: "silhouette",
-            })
-            side.setCamera({
-              position: [6, 1, 0],
-              target: [0, 0.6, 0],
-              ortho: { left: -2.4, right: 2.4, top: 2.4, bottom: -2.4 },
-              near: 0.1,
-              far: 20,
-            })
-            return (
-              <view flexDirection="row" width={MAIN + SIDE} height={MAIN}>
-                <texture src={tex} width={MAIN} height={MAIN} />
-                <view flexDirection="column" width={SIDE} height={MAIN}>
-                  <texture src={map.texture} width={SIDE} height={SIDE} />
-                  <texture src={side.texture} width={SIDE} height={SIDE} />
-                </view>
-              </view>
-            )
-          }}
         >
           <PerspectiveCamera fov={55} position={[0, 1.6, 3.6]} lookAt={[0, 0.3, 0]} />
           <HemisphereLight sky={[0.6, 0.7, 0.9]} ground={[0.25, 0.2, 0.15]} intensity={0.6} />
@@ -85,7 +56,56 @@ function App() {
               scale={[0.5, 1.4, 0.5]}
             />
             <Mesh geometry={ball} material={lit({ color: [0.35, 0.65, 0.9] })} position={[1.1, 0.35, 0]} />
+            {/* The ball's map marker: drawn by the map view alone. */}
+            <Mesh
+              geometry={marker}
+              material={unlit({ color: [0.95, 0.25, 0.2] })}
+              layers={MARKER_LAYER}
+              position={[1.1, 2, 0]}
+              rotation={[-Math.PI / 2, 0, 0]}
+            />
           </Group>
+          {/* The two views' leaves stack beside the scene's: a laid-out
+              element among Scene children renders where it sits, and the
+              views inside it stay Scene children through context. */}
+          <view flexDirection="column" width={SIDE} height={MAIN}>
+            {/* The map: straight down from y = 10, world -z toward the top
+                of the leaf, seven world units across at any depth. Its mask
+                also admits the marker layer, and `fog={null}` keeps it clear
+                while the main view fades to the horizon. */}
+            <View3d
+              width={SIDE}
+              height={SIDE}
+              clearColor={[0.05, 0.08, 0.06, 1]}
+              layers={WORLD_LAYER | MARKER_LAYER}
+              fog={null}
+              label="map"
+              camera={{
+                position: [0, 10, 0],
+                target: [0, 0, 0],
+                up: [0, 0, -1],
+                ortho: { left: -3.5, right: 3.5, top: 3.5, bottom: -3.5 },
+                near: 0.1,
+                far: 20,
+              }}
+            />
+            {/* The silhouette: every mesh drawn flat amber, from the side.
+                The floor is edge-on here, a single line at the bottom. */}
+            <View3d
+              width={SIDE}
+              height={SIDE}
+              clearColor={[0.1, 0.06, 0.05, 1]}
+              overrideMaterial={unlit({ color: [0.95, 0.75, 0.3] })}
+              label="silhouette"
+              camera={{
+                position: [6, 1, 0],
+                target: [0, 0.6, 0],
+                ortho: { left: -2.4, right: 2.4, top: 2.4, bottom: -2.4 },
+                near: 0.1,
+                far: 20,
+              }}
+            />
+          </view>
         </Scene>
       </view>
     </window>

package/examples/shadows.tsx

@@ -21,8 +21,6 @@ import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { box, cylinder, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, setTransform, sphere, torusKnot } from "@solidrt/3d"
 import type { DirectionalLightNode } from "@solidrt/3d"
 
-const SIZE = 720
-
 function App() {
   let [t, setT] = createSignal(0)
   let sun!: DirectionalLightNode
@@ -43,8 +41,8 @@ function App() {
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} clearColor={[0.55, 0.65, 0.8, 1]} samples={4} label="shadows">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.55, 0.65, 0.8, 1]} samples={4} label="shadows">
           <PerspectiveCamera fov={45} position={[0, 4, 7]} lookAt={[0, 0.5, 0]} />
           <HemisphereLight sky={[0.45, 0.5, 0.6]} ground={[0.2, 0.18, 0.15]} />
           <DirectionalLight

package/examples/sky-lit.tsx

@@ -0,0 +1,92 @@
+// A sky-lit scene: the background is a procedural GLSL sky (a horizon
+// gradient, a sun disc and its glow, written along the view ray), and
+// `scene.bakeBackground()` renders that same fragment into a cube and
+// prefilters it into the roughness chain the scene's environment samples -
+// Godot's sky-to-radiance bake: the sky both draws behind the meshes and
+// lights them, with no light nodes at all. A row of `standard` spheres,
+// metal above, dielectric below, roughness 0 to 1 across: the sharp ones
+// mirror the sun and horizon, the rough ones catch the sky's soft
+// gradient. The sky is a scene param (uSunDir), so the bake sees the same
+// sun the backdrop draws. Drag to look around.
+
+import { createInputMap, createPointerFeed, gamepad, pct, render } from "@solidrt/core"
+import { glsl } from "@solidrt/core/gpu"
+import { Mesh, OrbitCamera, orbitActions, orbitBindings, Scene, sphere, standard } from "@solidrt/3d"
+import type { SceneHandle } from "@solidrt/3d"
+import { normalize } from "@solidrt/3d/math"
+import type { Vec3 } from "@solidrt/3d/math"
+
+// Spheres per row, their radius and spacing.
+const COUNT = 6
+const RADIUS = 0.45
+const GAP = 1.15
+// The sun's direction: high and on the camera's side, so its reflection
+// lands on the spheres' upper right - a sharp disc on the mirror, a broad
+// bright highlight on the rough metals (the HDR bake keeps the disc's
+// energy, which an 8-bit probe would clamp to white).
+const SUN: Vec3 = normalize([0.6, 0.5, 0.6])
+// The bake's face edge: 128 is the environment default; the sun disc
+// blurs into its glow at this size, which is what a rough surface wants.
+const BAKE_SIZE = 128
+
+// Horizon gradient (zenith blue to a pale horizon, a dark ground), a sun
+// disc with a glow. Linear colors in, the output stage encodes for the
+// screen and leaves them linear for the bake.
+const SKY = glsl`
+  uniform vec3 uSunDir;
+  // Cosine of the disc's angular radius (about 2 degrees), the glow's
+  // falloff exponent and the disc's radiance (well above 1: a low-key
+  // sun, real ones are far brighter still).
+  const float SUN_DISC = 0.9994;
+  const float SUN_GLOW = 24.0;
+  const float SUN_RADIANCE = 40.0;
+  void main() {
+    vec3 d = normalize(vRay);
+    vec3 zenith = vec3(0.08, 0.22, 0.55);
+    vec3 horizon = vec3(0.65, 0.72, 0.85);
+    vec3 ground = vec3(0.05, 0.045, 0.04);
+    float h = clamp(d.y, -1.0, 1.0);
+    vec3 col = h >= 0.0 ? mix(horizon, zenith, pow(h, 0.6)) : mix(horizon, ground, pow(-h, 0.2));
+    float s = max(dot(d, uSunDir), 0.0);
+    col += vec3(1.0, 0.85, 0.6) * pow(s, SUN_GLOW) * 0.6;
+    if (s > SUN_DISC) col = vec3(1.0, 0.87, 0.67) * SUN_RADIANCE;
+    fragColor = outputColor(col, 1.0);
+  }
+`
+
+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 spheres: { position: Vec3; material: ReturnType<typeof standard> }[] = []
+  for (let i = 0; i < COUNT; i++) {
+    let roughness = i / (COUNT - 1)
+    let x = (i - (COUNT - 1) / 2) * GAP
+    spheres.push({ position: [x, GAP / 2, 0], material: standard({ color: [0.95, 0.93, 0.88], metalness: 1, roughness }) })
+    spheres.push({ position: [x, -GAP / 2, 0], material: standard({ color: [0.8, 0.15, 0.1], metalness: 0, roughness }) })
+  }
+  let geometry = sphere({ radius: RADIUS, widthSegments: 48, heightSegments: 32 })
+  // The ref hands out the scene with its props applied (the background
+  // is set), so the bake happens right here, before the first frame.
+  let lit = (scene: SceneHandle) => {
+    scene.setParams({ uSunDir: SUN })
+    scene.setEnvironment({ cube: scene.bakeBackground(BAKE_SIZE) })
+  }
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene background={SKY} toneMapping="aces" samples={4} label="sky-lit" ref={lit} pointer={pointer}>
+          <OrbitCamera input={input} target={[0, 0, 0]} azimuth={0.3} elevation={0.15} distance={7} />
+          {spheres.map(s => (
+            <Mesh geometry={geometry} material={s.material} position={s.position} />
+          ))}
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/skybox.tsx

@@ -0,0 +1,134 @@
+// A skybox and its reflections: the scene's background sampled from a
+// cube map along each pixel's view ray - `<Scene background={{ cube,
+// intensity?, rotation? }}>`, Three's `scene.background = cubeTexture` -
+// and the same cube as the scene's environment (`environment={{ cube,
+// rotation }}`, Three's `scene.environment`), which every lit material
+// with `reflectivity` mirrors: the chrome sphere sharply, the brass knot
+// blurred by its shininess. The cube map is baked in JS at startup (a
+// horizon gradient, a sun disc and its glow), so the example ships no
+// image assets; a photographed sky is the same createCubeTexture call
+// with six decoded faces in Three's px, nx, py, ny, pz, nz order, or
+// equirectToCube on a panorama. The sky turns slowly and the sun light
+// turns with it: `rotation` is a reactive prop the scene updates in
+// place, no recompile. Drag to look around, wheel to zoom.
+import { createInputMap, createPointerFeed, createSignal, gamepad, onFrame, pct, render } from "@solidrt/core"
+import { createCubeTexture } from "@solidrt/core/gpu"
+import { box, DirectionalLight, HemisphereLight, lit, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, torusKnot } from "@solidrt/3d"
+import { normalize } from "@solidrt/3d/math"
+import type { Vec3 } from "@solidrt/3d/math"
+
+// Face edge in texels; the sun disc is the finest feature, and mipmaps
+// keep the horizon smooth when it shrinks toward a screen pixel.
+const FACE = 128
+// The sun's direction in the unrotated sky.
+const SUN: Vec3 = normalize([0.6, 0.35, -0.7])
+// Cosine of the disc's angular radius (1.5 degrees).
+const SUN_DISC = Math.cos((1.5 * Math.PI) / 180)
+// Glow falloff exponent around the disc (higher = tighter).
+const SUN_GLOW = 40
+// How fast the sky turns about y, radians per second.
+const TURN_SPEED = 0.06
+// How quickly the ground band darkens below the horizon (per unit of -y).
+const GROUND_FALL = 4
+
+type Rgb = [number, number, number]
+const ZENITH: Rgb = [0.16, 0.34, 0.74]
+const HORIZON: Rgb = [0.8, 0.87, 0.95]
+const GROUND: Rgb = [0.3, 0.27, 0.24]
+const SUN_COLOR: Rgb = [1, 0.95, 0.82]
+
+let mix = (a: Rgb, b: Rgb, t: number): Rgb => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]
+
+// The sky's color along a world direction.
+function sky(d: Vec3): Rgb {
+  let y = d[1]
+  let rgb = y >= 0 ? mix(HORIZON, ZENITH, Math.sqrt(y)) : mix(HORIZON, GROUND, Math.min(1, -y * GROUND_FALL))
+  let s = d[0] * SUN[0] + d[1] * SUN[1] + d[2] * SUN[2]
+  if (s > 0) {
+    // The disc is the glow at full strength: added to the sky it clamps
+    // to white, and the warm tint shows in the halo around it.
+    let g = s > SUN_DISC ? 1 : Math.pow(s, SUN_GLOW)
+    rgb = [rgb[0] + SUN_COLOR[0] * g, rgb[1] + SUN_COLOR[1] * g, rgb[2] + SUN_COLOR[2] * g]
+  }
+  return [Math.min(1, rgb[0]), Math.min(1, rgb[1]), Math.min(1, rgb[2])]
+}
+
+// The world direction whose lookup lands on face i's texel (s, t), t = 0
+// the first row: the GL cube-map table, which is also what the library
+// samples with (no flip) - so the texel holds the sky in that direction.
+function texelDirection(face: number, s: number, t: number): Vec3 {
+  let a = 2 * s - 1
+  let b = 2 * t - 1
+  let d: Vec3 =
+    face === 0 ? [1, -b, -a] : face === 1 ? [-1, -b, a] : face === 2 ? [a, 1, b] : face === 3 ? [a, -1, -b] : face === 4 ? [a, -b, 1] : [-a, -b, -1]
+  return normalize(d)
+}
+
+function bakeSky(): Uint8Array[] {
+  let faces: Uint8Array[] = []
+  for (let face = 0; face < 6; face++) {
+    let px = new Uint8Array(FACE * FACE * 4)
+    for (let row = 0; row < FACE; row++) {
+      for (let col = 0; col < FACE; col++) {
+        let rgb = sky(texelDirection(face, (col + 0.5) / FACE, (row + 0.5) / FACE))
+        let i = (row * FACE + col) * 4
+        px[i] = Math.round(rgb[0] * 255)
+        px[i + 1] = Math.round(rgb[1] * 255)
+        px[i + 2] = Math.round(rgb[2] * 255)
+        px[i + 3] = 255
+      }
+    }
+    faces.push(px)
+  }
+  return faces
+}
+
+// The sun's direction once the sky has turned by `angle` about y (the same
+// turn a node with rotation [0, angle, 0] applies).
+function turnedSun(angle: number): Vec3 {
+  let c = Math.cos(angle)
+  let s = Math.sin(angle)
+  return [SUN[0] * c + SUN[2] * s, SUN[1], -SUN[0] * s + SUN[2] * c]
+}
+
+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 cube = createCubeTexture(bakeSky(), FACE, { format: "rgba8-srgb", mipmap: true, label: "sky" })
+  let [turn, setTurn] = createSignal(0)
+  let last = 0
+  onFrame(tick => {
+    if (last !== 0) setTurn(turn() + ((tick - last) / 1000) * TURN_SPEED)
+    last = tick
+  })
+  let sun = () => turnedSun(turn())
+
+  let ground = lit({ color: [0.36, 0.4, 0.3] })
+  // Glossy: a blurred reflection (shininess 48) at a dielectric's face-on
+  // weight, rising toward the silhouette.
+  let brass = lit({ color: [0.85, 0.6, 0.3], specular: 0.6, shininess: 48, reflectivity: 0.15 })
+  let stone = lit({ color: [0.6, 0.6, 0.62] })
+  // Chrome: the environment itself, sharp.
+  let chrome = lit({ color: [1, 1, 1], specular: 1, shininess: 400, reflectivity: 1 })
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene background={{ cube, rotation: turn() }} environment={{ cube, rotation: turn() }} label="skybox-demo" pointer={pointer}>
+          <OrbitCamera input={input} azimuth={0.4} elevation={0.12} distance={7} />
+          <HemisphereLight sky={[0.5, 0.6, 0.8]} ground={[0.3, 0.27, 0.24]} />
+          <DirectionalLight direction={[-sun()[0], -sun()[1], -sun()[2]]} color={SUN_COLOR} intensity={0.9} />
+          <Mesh geometry={plane({ width: 12, height: 12 })} material={ground} rotation={[-Math.PI / 2, 0, 0]} />
+          <Mesh geometry={torusKnot({ radius: 0.7, tube: 0.22, tubularSegments: 128, radialSegments: 16 })} material={brass} position={[0, 1.2, 0]} />
+          <Mesh geometry={box()} material={stone} position={[-2, 0.5, -0.5]} />
+          <Mesh geometry={sphere({ radius: 0.6, widthSegments: 48, heightSegments: 32 })} material={chrome} position={[2, 0.6, -0.5]} />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/sprites.tsx

@@ -9,8 +9,6 @@ import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { createTexture } from "@solidrt/core/gpu"
 import { box, Group, Mesh, PerspectiveCamera, plane, Scene, sprite, Sprite, unlit } from "@solidrt/3d"
 
-const SIZE = 720
-
 // A soft disc, alpha falling off from the center; premultiplied like every
 // texture the engine samples.
 function glow(): ReturnType<typeof createTexture> {
@@ -25,7 +23,7 @@ function glow(): ReturnType<typeof createTexture> {
       data.set([255 * a, 240 * a, 200 * a, 255 * a], (y * n + x) * 4)
     }
   }
-  return createTexture(data, n, n)
+  return createTexture(data, n, n, { format: "rgba8-srgb" })
 }
 
 // A cutout tree: green triangle over a brown trunk, transparent elsewhere.
@@ -43,7 +41,7 @@ function tree(): ReturnType<typeof createTexture> {
       data.set([rgb[0]!, rgb[1]!, rgb[2]!, a], (y * n + x) * 4)
     }
   }
-  return createTexture(data, n, n)
+  return createTexture(data, n, n, { format: "rgba8-srgb" })
 }
 
 function App() {
@@ -68,8 +66,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="sprites">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.07, 0.1, 1]} label="sprites">
           <PerspectiveCamera fov={50} position={eye()} lookAt={[0, 0.6, 0]} />
           <Mesh
             geometry={plane({ width: 8, height: 8 })}

package/examples/standard.tsx

@@ -0,0 +1,138 @@
+// The standard material: the sphere grid every PBR engine's docs open
+// with - metalness down the rows, roughness across the columns - under a
+// baked sky as background and environment (the skybox example's bake) and
+// a warm sun casting shadows. What to look for: the bare-metal row IS the
+// environment, sharp at the left and blurred toward the right, tinted by
+// the base color and dark wherever the sky is; the dielectric row keeps
+// its diffuse color and shows the sky as a faint gloss, a mirror highlight
+// at the left that widens to the right and brightens toward every
+// silhouette; the rows between blend the two. standard takes lit's base,
+// maps, cutout, shadow, emissive and fog options - only the Blinn-Phong
+// knobs are gone, replaced by metalness/roughness and their packed maps.
+// Light intensities read as lit's: 1 lights a white matte surface to 1.
+// Drag to look around.
+
+import { createInputMap, createPointerFeed, gamepad, pct, render } from "@solidrt/core"
+import { createCubeTexture } from "@solidrt/core/gpu"
+import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, standard } from "@solidrt/3d"
+import { normalize } from "@solidrt/3d/math"
+import type { Vec3 } from "@solidrt/3d/math"
+
+// Metalness steps down the rows, roughness across the columns.
+const ROWS = 4
+const COLS = 6
+// Sphere radius and grid pitch, world units.
+const RADIUS = 0.42
+const PITCH = 1.05
+// The spheres' base color, sRGB: a warm red that reads as paint and as metal.
+const COLOR: [number, number, number] = [0.8, 0.25, 0.2]
+// Height of the bottom row's centers above the ground.
+const LIFT = 0.6
+// Face edge of the baked sky in texels.
+const FACE = 128
+// The sun's direction (toward it).
+const SUN: Vec3 = normalize([0.6, 0.45, -0.7])
+// How far out the sun light sits, so its shadow camera covers the grid.
+const SUN_DISTANCE = 12
+// Cosine of the sun disc's angular radius (1.5 degrees).
+const SUN_DISC = Math.cos((1.5 * Math.PI) / 180)
+// Glow falloff exponent around the disc (higher = tighter).
+const SUN_GLOW = 40
+// How quickly the ground band darkens below the horizon (per unit of -y).
+const GROUND_FALL = 4
+
+type Rgb = [number, number, number]
+const ZENITH: Rgb = [0.16, 0.34, 0.74]
+const HORIZON: Rgb = [0.8, 0.87, 0.95]
+const GROUND: Rgb = [0.3, 0.27, 0.24]
+const SUN_COLOR: Rgb = [1, 0.95, 0.82]
+
+let mix = (a: Rgb, b: Rgb, t: number): Rgb => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]
+
+// The sky's color along a world direction.
+function sky(d: Vec3): Rgb {
+  let y = d[1]
+  let rgb = y >= 0 ? mix(HORIZON, ZENITH, Math.sqrt(y)) : mix(HORIZON, GROUND, Math.min(1, -y * GROUND_FALL))
+  let s = d[0] * SUN[0] + d[1] * SUN[1] + d[2] * SUN[2]
+  if (s > 0) {
+    let g = s > SUN_DISC ? 1 : Math.pow(s, SUN_GLOW)
+    rgb = [rgb[0] + SUN_COLOR[0] * g, rgb[1] + SUN_COLOR[1] * g, rgb[2] + SUN_COLOR[2] * g]
+  }
+  return [Math.min(1, rgb[0]), Math.min(1, rgb[1]), Math.min(1, rgb[2])]
+}
+
+// The world direction whose lookup lands on face i's texel (s, t) - the
+// GL cube-map table, no flip (see skybox.tsx).
+function texelDirection(face: number, s: number, t: number): Vec3 {
+  let a = 2 * s - 1
+  let b = 2 * t - 1
+  let d: Vec3 =
+    face === 0 ? [1, -b, -a] : face === 1 ? [-1, -b, a] : face === 2 ? [a, 1, b] : face === 3 ? [a, -1, -b] : face === 4 ? [a, -b, 1] : [-a, -b, -1]
+  return normalize(d)
+}
+
+function bakeSky(): Uint8Array[] {
+  let faces: Uint8Array[] = []
+  for (let face = 0; face < 6; face++) {
+    let px = new Uint8Array(FACE * FACE * 4)
+    for (let row = 0; row < FACE; row++) {
+      for (let col = 0; col < FACE; col++) {
+        let rgb = sky(texelDirection(face, (col + 0.5) / FACE, (row + 0.5) / FACE))
+        let i = (row * FACE + col) * 4
+        px[i] = Math.round(rgb[0] * 255)
+        px[i + 1] = Math.round(rgb[1] * 255)
+        px[i + 2] = Math.round(rgb[2] * 255)
+        px[i + 3] = 255
+      }
+    }
+    faces.push(px)
+  }
+  return faces
+}
+
+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 cube = createCubeTexture(bakeSky(), FACE, { format: "rgba8-srgb", mipmap: true, label: "sky" })
+  let ball = sphere({ radius: RADIUS, widthSegments: 48, heightSegments: 32 })
+  let ground = standard({ color: [0.32, 0.33, 0.3], roughness: 0.9 })
+  // One material per cell: metalness by row (top row bare metal, bottom
+  // row dielectric), roughness by column (mirror at the left).
+  let cells: { material: ReturnType<typeof standard>; position: Vec3 }[] = []
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      cells.push({
+        material: standard({ color: COLOR, metalness: 1 - r / (ROWS - 1), roughness: c / (COLS - 1) }),
+        position: [(c - (COLS - 1) / 2) * PITCH, LIFT + (ROWS - 1 - r) * PITCH, 0],
+      })
+    }
+  }
+  let center: Vec3 = [0, LIFT + ((ROWS - 1) * PITCH) / 2, 0]
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene background={{ cube }} environment={{ cube }} samples={4} label="standard-demo" pointer={pointer}>
+          <OrbitCamera input={input} target={center} azimuth={0.25} elevation={0.15} distance={9} />
+          <HemisphereLight sky={[0.5, 0.6, 0.8]} ground={[0.3, 0.27, 0.24]} intensity={0.5} />
+          <DirectionalLight
+            position={[SUN[0] * SUN_DISTANCE, SUN[1] * SUN_DISTANCE, SUN[2] * SUN_DISTANCE]}
+            direction={[-SUN[0], -SUN[1], -SUN[2]]}
+            color={SUN_COLOR}
+            intensity={1}
+            castShadow
+          />
+          <Mesh geometry={plane({ width: 16, height: 16 })} material={ground} rotation={[-Math.PI / 2, 0, 0]} />
+          {cells.map(cell => (
+            <Mesh geometry={ball} material={cell.material} position={cell.position} castShadow />
+          ))}
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/sweep-paths.tsx

@@ -10,8 +10,6 @@ import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { box, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, roundRect, Scene, sweep, tube, unlit } from "@solidrt/3d"
 import type { SweepPath } from "@solidrt/3d"
 
-const SIZE = 720
-
 function App() {
   let [spin, setSpin] = createSignal(0)
   onFrame(tick => setSpin(tick / 4000))
@@ -39,8 +37,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="sweep-paths">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.07, 0.1, 1]} label="sweep-paths">
           <PerspectiveCamera fov={55} position={[0, 1.9, 3.9]} lookAt={[0, 0.35, 0]} />
           <HemisphereLight sky={[0.45, 0.45, 0.45]} ground={[0.22, 0.22, 0.22]} />
           <DirectionalLight direction={[-0.5, -0.8, -0.4]} intensity={0.8} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -18,7 +18,7 @@
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.4",
-    "@solidrt/core": "0.0.55"
+    "@solidjs/signals": "2.0.0-rc.6",
+    "@solidrt/core": "0.0.57"
   }
 }