@solidrt/3d 0.0.54 → 0.0.56

package/examples/materials.tsx

@@ -0,0 +1,150 @@
+// The surface maps on lit(), all procedural so the example is
+// self-contained. normalMap bends the lighting per texel with NO tangent
+// channel (the frame comes from screen-space derivatives) - the flat
+// plane and the sphere both show relief from one bump texture.
+// emissive/emissiveMap add light the lights do not provide (the window
+// grid stays lit on the dark side). specularMap masks the highlight
+// (the striped sphere is chrome on the bright bands, rubber between).
+// mapTransform scrolls the belt's uv per frame with one setMeshParams
+// write - per MATERIAL, Godot's uv1_offset/scale, not Three's
+// per-texture transform. lightMap adds a baked glow by the aUV2 channel
+// (withAttribute) at zero light cost.
+
+import { createSignal, onFrame, pct, render } from "@solidrt/core"
+import { createTexture } from "@solidrt/core/gpu"
+import { box, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, setMeshParams, sphere, withAttribute } from "@solidrt/3d"
+import type { MeshNode } from "@solidrt/3d"
+
+// A tangent-space normal map from a procedural height field (a grid of
+// round bumps): finite-difference the height, pack the normal as
+// OpenGL-style rgb. What every baked normal map contains, minus the
+// authoring tool.
+function bumpNormalMap() {
+  let n = 128
+  const BUMPS = 4 // bump grid cells per texture edge
+  let height = (x: number, y: number): number => {
+    let u = ((x * BUMPS) / n) % 1
+    let v = ((y * BUMPS) / n) % 1
+    let dx = u - 0.5
+    let dy = v - 0.5
+    let d = Math.sqrt(dx * dx + dy * dy)
+    return d < 0.35 ? Math.cos((d / 0.35) * Math.PI * 0.5) : 0
+  }
+  const STRENGTH = 3 // height units per texel step: how steep the bumps read
+  let data = new Uint8Array(n * n * 4)
+  for (let y = 0; y < n; y++) {
+    for (let x = 0; x < n; x++) {
+      let sx = (height(x + 1, y) - height(x - 1, y)) * STRENGTH
+      let sy = (height(x, y + 1) - height(x, y - 1)) * STRENGTH
+      let inv = 1 / Math.sqrt(sx * sx + sy * sy + 1)
+      data.set([((-sx * inv) * 0.5 + 0.5) * 255, ((-sy * inv) * 0.5 + 0.5) * 255, (inv * 0.5 + 0.5) * 255, 255], (y * n + x) * 4)
+    }
+  }
+  return createTexture(data, n, n, { wrap: "repeat", mipmap: true })
+}
+
+// A window grid: dark wall, warm lit windows - the emissive map.
+function windowMap() {
+  let n = 64
+  let data = new Uint8Array(n * n * 4)
+  for (let y = 0; y < n; y++) {
+    for (let x = 0; x < n; x++) {
+      let on = (x >> 3) % 2 === 1 && (y >> 3) % 2 === 1 && (x & 7) > 1 && (x & 7) < 6 && (y & 7) > 1 && (y & 7) < 6
+      data.set(on ? [255, 190, 90, 255] : [0, 0, 0, 255], (y * n + x) * 4)
+    }
+  }
+  return createTexture(data, n, n, { format: "rgba8-srgb", mipmap: true })
+}
+
+// Vertical stripes in the red channel: the specular mask.
+function stripeMap() {
+  let n = 64
+  let data = new Uint8Array(n * n * 4)
+  for (let y = 0; y < n; y++) {
+    for (let x = 0; x < n; x++) {
+      let v = (x >> 3) & 1 ? 255 : 0
+      data.set([v, v, v, 255], (y * n + x) * 4)
+    }
+  }
+  return createTexture(data, n, n, { wrap: "repeat", mipmap: true })
+}
+
+// Chevrons for the scrolling belt.
+function chevronMap() {
+  let n = 64
+  let data = new Uint8Array(n * n * 4)
+  for (let y = 0; y < n; y++) {
+    for (let x = 0; x < n; x++) {
+      let on = ((x + Math.abs(y - n / 2)) >> 3) & 1
+      data.set(on ? [235, 220, 60, 255] : [40, 40, 45, 255], (y * n + x) * 4)
+    }
+  }
+  return createTexture(data, n, n, { format: "rgba8-srgb", wrap: "repeat", mipmap: true })
+}
+
+// A radial warm glow, the stand-in for an offline lightmap bake.
+function bakedGlowMap() {
+  let n = 64
+  let data = new Uint8Array(n * n * 4)
+  for (let y = 0; y < n; y++) {
+    for (let x = 0; x < n; x++) {
+      let dx = x / n - 0.5
+      let dy = y / n - 0.5
+      let g = Math.max(0, 1 - Math.sqrt(dx * dx + dy * dy) * 2.2)
+      data.set([255 * g, 180 * g, 90 * g, 255], (y * n + x) * 4)
+    }
+  }
+  return createTexture(data, n, n, { mipmap: true })
+}
+
+function App() {
+  let [t, setT] = createSignal(0)
+  let beltMesh: MeshNode | undefined
+  onFrame(tick => {
+    setT(tick / 1000)
+    // The scrolling belt: one per-frame uniform write, the setTransform
+    // split - structure through signals, frame-rate values through refs.
+    if (beltMesh !== undefined) setMeshParams(beltMesh, { uMapTransform: [3, 1, tick / 1500, 0] })
+  })
+
+  let bumps = bumpNormalMap()
+  let bumpy = lit({ color: [0.75, 0.5, 0.3], normalMap: bumps, specular: 0.5, shininess: 40 })
+  let flat = lit({ color: [0.75, 0.5, 0.3], specular: 0.5, shininess: 40 })
+  let city = lit({ color: [0.25, 0.28, 0.34], emissiveMap: windowMap() })
+  let striped = lit({ color: [0.2, 0.22, 0.26], specularMap: stripeMap(), shininess: 90 })
+  let belt = lit({ map: chevronMap(), mapTransform: { repeat: [3, 1] } })
+  // The ground carries its own uv2 island (here just the 0..1 plane UVs
+  // recomputed from position) and adds the "baked" glow with no light.
+  let groundGeometry = withAttribute(plane({ width: 8, height: 8 }), { name: "aUV2", format: "vec2" }, (_i, pos) => [
+    pos[0] / 8 + 0.5,
+    pos[1] / 8 + 0.5,
+  ])
+  let ground = lit({ color: [0.45, 0.45, 0.5], lightMap: bakedGlowMap(), lightMapIntensity: 1.5 })
+
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.06, 0.06, 0.09, 1]} samples={4} label="materials">
+          <PerspectiveCamera fov={50} position={[0, 2.8, 5.2]} lookAt={[0, 0.5, 0]} />
+          <HemisphereLight sky={[0.3, 0.33, 0.4]} ground={[0.1, 0.09, 0.08]} />
+          <Group rotation={[0, t() / 2, 0]}>
+            <DirectionalLight direction={[0.7, -0.8, 0.2]} color={[1, 0.95, 0.85]} intensity={1} />
+          </Group>
+          <Mesh geometry={groundGeometry} material={ground} rotation={[-Math.PI / 2, 0, 0]} />
+          <Mesh geometry={sphere({ radius: 0.55 })} material={bumpy} position={[-1.7, 0.55, 0.6]} />
+          <Mesh geometry={sphere({ radius: 0.55 })} material={flat} position={[-1.7, 0.55, -0.9]} />
+          <Mesh geometry={box({ width: 1, height: 1.6, depth: 1 })} material={city} position={[0, 0.8, -0.6]} rotation={[0, t() / 3, 0]} />
+          <Mesh geometry={sphere({ radius: 0.55 })} material={striped} position={[1.7, 0.55, -0.6]} rotation={[0, t() / 2, 0]} />
+          <Mesh
+            geometry={box({ width: 2.2, height: 0.12, depth: 0.7 })}
+            material={belt}
+            position={[0.6, 0.06, 1.6]}
+            ref={mesh => (beltMesh = mesh)}
+          />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

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))
 
@@ -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

@@ -14,8 +14,6 @@ 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
-
 type Color = [number, number, number]
 
 let [hovered, setHovered] = createSignal("nothing")
@@ -70,8 +68,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="pick">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.07, 0.1, 1]} label="pick">
           <PerspectiveCamera fov={55} position={[0, 2.6, 5]} lookAt={[0, 0.4, 0]} />
           <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. */}

package/examples/probe.tsx

@@ -0,0 +1,101 @@
+// 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 { createSignal, onFrame, pct, render } from "@solidrt/core"
+import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, 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() {
+  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)}>
+          <OrbitCamera 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}

package/examples/scene-views.tsx

@@ -6,10 +6,20 @@
 // 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.
+//
+// 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 { box, circle, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
 import type { SceneHandle } 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,6 +30,7 @@ function App() {
   let cube = box()
   let floor = plane({ width: 6, height: 6, label: "floor" })
   let ball = sphere({ radius: 0.35 })
+  let marker = circle({ radius: 0.3, label: "marker" })
   // `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
@@ -31,12 +42,22 @@ function App() {
           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" })
+            // 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.
+            let map = scene.createView({
+              width: SIDE,
+              height: SIDE,
+              clearColor: [0.05, 0.08, 0.06, 1],
+              layers: WORLD_LAYER | MARKER_LAYER,
+              fog: null,
+              label: "map",
+            })
             map.setCamera({
               position: [0, 10, 0],
               target: [0, 0, 0],
@@ -85,6 +106,14 @@ 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>
         </Scene>
       </view>

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,86 @@
+// 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 { pct, render } from "@solidrt/core"
+import { glsl } from "@solidrt/core/gpu"
+import { Mesh, OrbitCamera, 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() {
+  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}>
+          <OrbitCamera 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 />)