@solidrt/3d 0.0.54 → 0.0.56

package/examples/fleet.tsx

@@ -0,0 +1,194 @@
+// A fleet of a thousand instance NODES: one `<InstancedMesh>` under the
+// stock `lit` material with `instanceColors`, so lighting, shadows, fog
+// and a per-instance tint come with no GLSL at all. Each `<Instance>`
+// declares a spring `transition`; every few seconds a signal picks the
+// next formation (grid, rings, shell, helix), the thousand `position`
+// props update, and the spatial core springs every instance to its new
+// place - the change is one signal write, and the frames after it cost
+// no JS at all (the core writes the matrix records itself). A tap on an
+// instance flips its tint: pointer events name the instance struck, and
+// however many style records change between two frames they land as ONE
+// buffer write. Drag to orbit.
+//
+// Debug commands: `formation` ({ name } sets one and parks the cycle,
+// { cycle: true } resumes; returns the current one), `state` (formation,
+// the last tapped instance, how many are flipped) and `pixel` ({ i }: the
+// scene pixel instance i projects to and what a pick there finds, for a
+// synthetic tap).
+import { createSignal, flush, For, pct, render } from "@solidrt/core"
+import { box, DirectionalLight, HemisphereLight, Instance, InstancedMesh, lit, Mesh, OrbitCamera, plane, Scene, worldPosition } from "@solidrt/3d"
+import type { InstanceNode, NodeTransition, SceneHandle, Vec3 } from "@solidrt/3d"
+import { registerDebug } from "srt:dev"
+
+type Tint = [number, number, number, number]
+
+const COUNT = 1000
+// Milliseconds between formation changes.
+const CYCLE_MS = 4000
+// The spring every instance moves by: about a second to settle, a small
+// overshoot so the fleet visibly swings into place.
+const SPRING: NodeTransition = { position: { duration: 900, bounce: 0.2 } }
+// Edge of one unit cube, and the half-width of the ground the formations
+// fit in.
+const UNIT = 0.18
+const REACH = 5
+const SKY: [number, number, number] = [0.07, 0.08, 0.1]
+// The tint a tapped instance flips to.
+const HOT: Tint = [1, 0.35, 0.2, 1]
+
+// Formations: where instance i of COUNT stands. Each is a pure function
+// of the index, so a formation change is a signal write and nothing else.
+const GRID_COLUMNS = 40
+const RING_SIZE = 100
+const RING_STEP = 0.4
+const SHELL_RADIUS = 3
+const SHELL_HEIGHT = 3.5
+const HELIX_TURNS = 12
+const HELIX_HEIGHT = 6
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5))
+const FORMATIONS: { name: string; at: (i: number) => Vec3 }[] = [
+  {
+    name: "grid",
+    at: i => {
+      let spacing = (2 * REACH) / GRID_COLUMNS
+      let rows = COUNT / GRID_COLUMNS
+      return [((i % GRID_COLUMNS) - (GRID_COLUMNS - 1) / 2) * spacing, UNIT / 2, (Math.floor(i / GRID_COLUMNS) - (rows - 1) / 2) * spacing]
+    },
+  },
+  {
+    name: "rings",
+    at: i => {
+      let ring = Math.floor(i / RING_SIZE)
+      let a = ((i % RING_SIZE) / RING_SIZE) * Math.PI * 2 + ring * 0.1
+      let r = 1.2 + ring * RING_STEP
+      return [Math.cos(a) * r, UNIT / 2, Math.sin(a) * r]
+    },
+  },
+  {
+    name: "shell",
+    at: i => {
+      // A Fibonacci sphere: evenly spread points on the shell.
+      let y = 1 - (2 * (i + 0.5)) / COUNT
+      let r = Math.sqrt(1 - y * y)
+      let a = i * GOLDEN_ANGLE
+      return [Math.cos(a) * r * SHELL_RADIUS, SHELL_HEIGHT + y * SHELL_RADIUS, Math.sin(a) * r * SHELL_RADIUS]
+    },
+  },
+  {
+    name: "helix",
+    at: i => {
+      let t = i / COUNT
+      let a = t * HELIX_TURNS * Math.PI * 2
+      return [Math.cos(a) * SHELL_RADIUS, UNIT / 2 + t * HELIX_HEIGHT, Math.sin(a) * SHELL_RADIUS]
+    },
+  },
+]
+
+// The fleet's resting tint: a gradient along the index, so the formations
+// read as one ribbon folding into the next shape.
+function gradient(i: number): Tint {
+  let t = i / COUNT
+  return [0.35 + 0.5 * t, 0.55, 0.9 - 0.6 * t, 1]
+}
+
+const INDICES = Array.from({ length: COUNT }, (_, i) => i)
+
+let [formation, setFormation] = createSignal(0)
+let tints = INDICES.map(i => createSignal<Tint>(gradient(i)))
+let flipped = new Set<number>()
+let lastTapped: number | null = null
+let parked = false
+// The handles the debug commands read: the scene and each instance node.
+let scene: SceneHandle | undefined
+let nodes: InstanceNode[] = []
+
+let flip = (i: number) => {
+  let [, setTint] = tints[i]!
+  if (flipped.has(i)) {
+    flipped.delete(i)
+    setTint(gradient(i))
+  } else {
+    flipped.add(i)
+    setTint(HOT)
+  }
+  lastTapped = i
+  console.log(`tap instance ${i}`)
+}
+
+setInterval(() => {
+  if (!parked) setFormation(f => (f + 1) % FORMATIONS.length)
+}, CYCLE_MS)
+
+registerDebug("formation", (args?: Record<string, unknown>) => {
+  if (typeof args?.name === "string") {
+    let k = FORMATIONS.findIndex(f => f.name === args.name)
+    if (k >= 0) {
+      setFormation(k)
+      parked = true
+    }
+  }
+  if (args?.cycle === true) parked = false
+  flush()
+  return { formation: FORMATIONS[formation()]!.name, parked }
+})
+registerDebug("state", () => ({ formation: FORMATIONS[formation()]!.name, tapped: lastTapped, flipped: flipped.size }))
+registerDebug("pixel", (args?: Record<string, unknown>) => {
+  let node = typeof args?.i === "number" ? nodes[args.i] : undefined
+  if (node === undefined || scene === undefined) return null
+  let at = scene.project(worldPosition(node))
+  if (at === null) return null
+  // What a pick at that pixel finds: the instance's slot, or the mesh kind.
+  let hit = scene.pick(at.x, at.y)[0]
+  return { x: at.x, y: at.y, hit: hit === undefined ? null : (hit.instance?._slot ?? hit.mesh.kind) }
+})
+
+function App() {
+  let place = (i: number): Vec3 => FORMATIONS[formation()]!.at(i)
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[SKY[0], SKY[1], SKY[2], 1]} fog={{ color: SKY, near: 12, far: 30 }} label="fleet" ref={s => (scene = s)}>
+          <OrbitCamera target={[0, 2, 0]} distance={15} elevation={0.45} azimuth={0.6} />
+          <HemisphereLight sky={[0.45, 0.47, 0.5]} ground={[0.12, 0.13, 0.11]} />
+          <DirectionalLight
+            color={[1, 0.95, 0.85]}
+            intensity={0.8}
+            position={[8, 14, 6]}
+            direction={[-8, -14, -6]}
+            castShadow
+            shadow={{
+              normalBias: 0.03,
+              camera: { left: -REACH - 1, right: REACH + 1, top: REACH + 3, bottom: -REACH - 3, near: 1, far: 40 },
+            }}
+          />
+          <Mesh
+            geometry={plane({ width: 3 * REACH, height: 3 * REACH, label: "ground" })}
+            material={lit({ color: [0.26, 0.28, 0.27] })}
+            rotation={[-Math.PI / 2, 0, 0]}
+          />
+          <InstancedMesh
+            geometry={box({ width: UNIT, height: UNIT, depth: UNIT, label: "unit" })}
+            material={lit({ instanceColors: true, specular: 0.3, shininess: 40 })}
+            capacity={COUNT}
+            castShadow
+            label="fleet"
+          >
+            <For each={INDICES}>
+              {i => (
+                <Instance
+                  position={place(i)}
+                  style={tints[i]![0]()}
+                  transition={SPRING}
+                  onPointerDown={() => flip(i)}
+                  ref={node => (nodes[i] = node)}
+                />
+              )}
+            </For>
+          </InstancedMesh>
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/fog.tsx

@@ -0,0 +1,173 @@
+// Scene fog, all three forms over one valley: a camera on a hillside
+// panning slowly across a floor of pines between two ridges, the far
+// ridge near the camera's far plane. LINEAR fog (`{ near, far }`,
+// Three's Fog) is a clear band then a fade, and hides the clip when
+// `far` sits at the camera's; EXP2 (`{ density }`, Three's FogExp2 /
+// Unity's default) thickens from the first metre with no band and
+// never quite closes; HEIGHT (`heightFalloff` on either) fills the
+// valley floor and thins on the way up, so the hilltops and the sky
+// stay clear while the pines below drown - per fragment height, the
+// cheap tier. Fog is one shared-params write per change, whatever the
+// mesh count, and every standard material takes it; the two suns show
+// the opt-out: the left one is `unlit({ fog: false })` and stays
+// bright in every mode, the right one fogs like everything else.
+//
+// A click cycles linear -> exp2 -> height -> off. The `fog` debug
+// command sets the mode and its knobs (`{ mode: "linear" | "exp2" |
+// "height" | "off", near, far, density, height, falloff }`) and returns
+// the state; `pan` parks the camera (`{ t: seconds }`), so a capture
+// repeats.
+import { createSignal, flush, onFrame, pct, render } from "@solidrt/core"
+import { registerDebug } from "srt:dev"
+import { cone, cylinder, DirectionalLight, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
+import type { FogOptions, Vec3 } from "@solidrt/3d"
+
+const FAR = 400
+// The sky, shared by the clear and the fog so the horizon has no band.
+const SKY: [number, number, number] = [0.72, 0.78, 0.86]
+// The camera: on the near hillside, panning slowly across the valley.
+const EYE: Vec3 = [-40, 42, 140]
+const PAN_PERIOD = 60
+// How far the look-at point swings left and right of the valley axis.
+const PAN_SWING = 70
+// The linear band, the exp2 thickness and the height layer.
+const NEAR = 40
+const LINEAR_FAR = FAR
+const DENSITY = 0.006
+const HEIGHT = 10
+const HEIGHT_FALLOFF = 0.12
+
+type Mode = "linear" | "exp2" | "height" | "off"
+const MODES: Mode[] = ["linear", "exp2", "height", "off"]
+
+let [mode, setMode] = createSignal<Mode>("linear")
+let [near, setNear] = createSignal(NEAR)
+let [far, setFar] = createSignal(LINEAR_FAR)
+let [density, setDensity] = createSignal(DENSITY)
+let [height, setHeight] = createSignal(HEIGHT)
+let [falloff, setFalloff] = createSignal(HEIGHT_FALLOFF)
+let [time, setTime] = createSignal(0)
+let parked: number | null = null
+
+let num = (v: unknown, set: (n: number) => void) => {
+  if (typeof v === "number") set(v)
+}
+
+registerDebug("fog", (args?: Record<string, unknown>) => {
+  if (typeof args?.mode === "string" && MODES.includes(args.mode as Mode)) setMode(args.mode as Mode)
+  num(args?.near, setNear)
+  num(args?.far, setFar)
+  num(args?.density, setDensity)
+  num(args?.height, setHeight)
+  num(args?.falloff, setFalloff)
+  flush()
+  return { mode: mode(), near: near(), far: far(), density: density(), height: height(), falloff: falloff() }
+})
+registerDebug("pan", (args?: Record<string, unknown>) => {
+  if (typeof args?.t === "number") {
+    parked = args.t
+    setTime(args.t)
+  } else if (args?.t === null) {
+    parked = null
+  }
+  flush()
+  return { t: time(), parked: parked !== null }
+})
+
+function fog(): FogOptions | undefined {
+  switch (mode()) {
+    case "linear":
+      return { color: SKY, near: near(), far: far() }
+    case "exp2":
+      return { color: SKY, density: density() }
+    case "height":
+      return { color: SKY, density: density(), height: height(), heightFalloff: falloff() }
+    case "off":
+      return undefined
+  }
+}
+
+// The two ridges: flattened spheres sunk into the ground, and the height
+// they give the ground at (x, z) so the pines stand on them.
+type Hill = { position: Vec3; scale: Vec3 }
+let hills: Hill[] = [
+  { position: [-90, -8, 120], scale: [110, 44, 90] },
+  { position: [60, -6, -140], scale: [150, 40, 90] },
+  { position: [-140, -10, -60], scale: [90, 36, 120] },
+  { position: [150, -4, 40], scale: [80, 26, 70] },
+]
+function groundHeight(x: number, z: number): number {
+  let y = 0
+  for (let h of hills) {
+    let dx = (x - h.position[0]) / h.scale[0]
+    let dz = (z - h.position[2]) / h.scale[2]
+    let r = 1 - dx * dx - dz * dz
+    if (r > 0) y = Math.max(y, h.position[1] + h.scale[1] * Math.sqrt(r))
+  }
+  return y
+}
+
+// The pines, on a jittered grid over the valley and up the ridges.
+type Pine = { position: Vec3; size: number }
+let pines: Pine[] = []
+let step = 18
+for (let i = -12; i <= 12; i++) {
+  for (let j = -12; j <= 12; j++) {
+    let x = i * step + ((i * 7 + j * 13) % 9) - 4
+    let z = j * step + ((i * 11 + j * 5) % 9) - 4
+    let y = groundHeight(x, z)
+    // No pines on the near hillside under the camera, none above the tree line.
+    if (y > 30 || (x < -20 && z > 90)) continue
+    let size = 5 + ((i * 3 + j * 5 + 20) % 5)
+    pines.push({ position: [x, y, z], size })
+  }
+}
+
+function App() {
+  onFrame(tick => {
+    if (parked === null) setTime(tick / 1000)
+  })
+  let lookAt = () => {
+    let a = Math.sin((time() / PAN_PERIOD) * 2 * Math.PI)
+    return [a * PAN_SWING, 6, -60] as Vec3
+  }
+
+  let ground = lit({ color: [0.36, 0.48, 0.3] })
+  let rock = lit({ color: [0.5, 0.47, 0.42] })
+  let needles = lit({ color: [0.16, 0.36, 0.22] })
+  let trunk = lit({ color: [0.35, 0.25, 0.16] })
+  let sunLit = unlit({ color: [1, 0.92, 0.6], fog: false })
+  let sunFogged = unlit({ color: [1, 0.92, 0.6] })
+
+  let floor = plane({ width: 800, height: 800 })
+  let hill = sphere({ radius: 1, widthSegments: 48, heightSegments: 24 })
+  let crown = cone({ radius: 0.5, height: 1, radialSegments: 10 })
+  let stem = cylinder({ radiusTop: 0.08, radiusBottom: 0.1, height: 1, radialSegments: 6 })
+  let sun = sphere({ radius: 14, widthSegments: 24, heightSegments: 12 })
+
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)} onPointerDown={() => setMode(m => MODES[(MODES.indexOf(m) + 1) % MODES.length] ?? "linear")}>
+        <Scene clearColor={[SKY[0], SKY[1], SKY[2], 1]} fog={fog()} samples={4} label="fog">
+          <PerspectiveCamera fov={55} near={0.5} far={FAR} position={EYE} lookAt={lookAt()} />
+          <HemisphereLight sky={[0.55, 0.62, 0.75]} ground={[0.28, 0.24, 0.2]} />
+          <DirectionalLight color={[0.9, 0.85, 0.75]} rotation={[-0.9, 0.6, 0]} />
+          <Mesh geometry={floor} material={ground} rotation={[-Math.PI / 2, 0, 0]} />
+          {hills.map(h => (
+            <Mesh geometry={hill} material={rock} position={h.position} scale={h.scale} />
+          ))}
+          {pines.map(p => (
+            <>
+              <Mesh geometry={stem} material={trunk} position={[p.position[0], p.position[1] + p.size * 0.15, p.position[2]]} scale={[p.size, p.size * 0.3, p.size]} />
+              <Mesh geometry={crown} material={needles} position={[p.position[0], p.position[1] + p.size * 0.3 + p.size * 0.5, p.position[2]]} scale={[p.size * 0.9, p.size, p.size * 0.9]} />
+            </>
+          ))}
+          <Mesh geometry={sun} material={sunLit} position={[-30, 100, -220]} />
+          <Mesh geometry={sun} material={sunFogged} position={[30, 100, -220]} />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/instanced.tsx

@@ -1,64 +1,89 @@
 // Instanced meshes: one draw entry covering a whole population. A material
-// class declares `instanceAttributes`, createInstancedMesh (here via the
-// <InstancedMesh> component) supplies one interleaved record per instance,
+// class declares `instanceAttributes`, createRecordMesh (here via the
+// <RecordMesh> component) supplies one interleaved record per instance,
 // and the vertex stage reads each record through the matching `in`
 // variables. Two meshes share the one class: 400 scattered "rocks" and a
 // breathing ring of "pines" - each is ONE entry and ONE uModel however
 // many instances it draws, so the spinning group below moves both fleets
 // with two matrix writes per frame.
 //
-// setInstanceCount is the population dial (the pines breathe); records are
+// setRecordCount is the population dial (the pines breathe); records are
 // data, not matrices - position/scale/tint here, whatever your shader
 // wants in general. The explicit `bounds` cover the scatter so picking
 // still works (one conservative box around the population; omit bounds and
 // the mesh simply never picks).
+//
+// The fleets CAST: the class declares `shadowVertex` - its vertex stage
+// reduced to the position math, instance placement included - and with it
+// `castShadow` on an RecordMesh works like on any mesh (without it the
+// shadow views skip instanced meshes). The lit ground receives; both
+// populations throw shadows from the one casting sun, and the breathing
+// pines' shadows appear and vanish with them.
+//
+// The fleets are also lit, shadowed and fogged exactly like the ground,
+// with no lighting code of their own: the class pairs its instanced
+// vertex stage with the stock `litFragment` (the fragment `lit` compiles),
+// which is the first tier of custom looks - a vertex stage that writes
+// the lit varyings gets the whole scene for free. The per-instance tint
+// rides the `vertexColors` path as vColor.
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { glsl } from "@solidrt/core/gpu"
 import {
   box,
   cone,
+  DirectionalLight,
   Group,
-  InstancedMesh,
+  HemisphereLight,
+  RecordMesh,
+  lit,
   Mesh,
   PerspectiveCamera,
   plane,
   Scene,
-  setInstanceCount,
+  setRecordCount,
   shaderMaterialClass,
-  unlit,
 } from "@solidrt/3d"
-import type { InstancedMeshNode } from "@solidrt/3d"
-import { HEMISPHERE } from "@solidrt/3d/glsl"
-
-const SIZE = 720
+import type { RecordMeshNode } from "@solidrt/3d"
+import { litFragment } from "@solidrt/3d/glsl"
 
+// The lit varyings (vWorldPos, vNormal, vUv, and vColor for the tint), as
+// LIT_VERTEX writes them, from an instanced placement.
 const INSTANCE_VERTEX = glsl`
   in vec3 aPos;
   in vec3 aNormal;
+  in vec2 aUV;
   in vec3 iPos;
   in float iScale;
   in vec3 iTint;
+  out vec3 vWorldPos;
   out vec3 vNormal;
-  out vec3 vTint;
+  out vec2 vUv;
+  out vec4 vColor;
   uniform mat4 uModel;
   uniform mat4 uViewProj;
+  uniform mat4 uNormal;
 
   void main() {
-    vec3 p = aPos * iScale + iPos;
-    gl_Position = uViewProj * uModel * vec4(p, 1.0);
-    vNormal = mat3(uModel) * aNormal;
-    vTint = iTint;
+    vec4 world = uModel * vec4(aPos * iScale + iPos, 1.0);
+    gl_Position = uViewProj * world;
+    vWorldPos = world.xyz;
+    vNormal = mat3(uNormal) * aNormal;
+    vUv = aUV;
+    vColor = vec4(iTint, 1.0);
   }
 `
 
-const INSTANCE_FRAGMENT = glsl`
-  in vec3 vNormal;
-  in vec3 vTint;
-  ${HEMISPHERE}
+// The shadow pass's view of the same placement: aPos * iScale + iPos and
+// nothing else - no normal, no tint. The depth fragment is the engine's.
+const INSTANCE_SHADOW_VERTEX = glsl`
+  in vec3 aPos;
+  in vec3 iPos;
+  in float iScale;
+  uniform mat4 uModel;
+  uniform mat4 uViewProj;
 
   void main() {
-    vec3 c = vTint * hemisphere(normalize(vNormal), vec3(1.05, 1.0, 0.95), vec3(0.35, 0.32, 0.3));
-    fragColor = vec4(c, 1.0);
+    gl_Position = uViewProj * uModel * vec4(aPos * iScale + iPos, 1.0);
   }
 `
 
@@ -106,33 +131,44 @@ const PINE_COUNT = 48
 
 function App() {
   let [spin, setSpin] = createSignal(0)
-  let pinesMesh!: InstancedMeshNode
+  let pinesMesh!: RecordMeshNode
   onFrame(tick => {
     setSpin(tick / 6000)
     // The population dial: draw the first N records. The buffer holds the
     // full ring; only the draw range moves, one setDrawRange per change.
     let n = Math.round(PINE_COUNT * (0.5 + 0.5 * Math.sin(tick / 900)))
-    if (pinesMesh) setInstanceCount(pinesMesh, n)
+    if (pinesMesh) setRecordCount(pinesMesh, n)
   })
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
-        <Scene width={SIZE} height={SIZE} clearColor={[0.07, 0.08, 0.1, 1]} label="instanced">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.08, 0.1, 1]} fog={{ color: [0.07, 0.08, 0.1], near: 5, far: 13 }} label="instanced">
           <PerspectiveCamera fov={55} position={[0, 3.2, 5.4]} lookAt={[0, 0.2, 0]} />
-          <Mesh geometry={plane({ width: 9, height: 9, label: "meadow" })} material={unlit({ color: [0.16, 0.18, 0.16] })} rotation={[-Math.PI / 2, 0, 0]} />
+          <HemisphereLight sky={[0.4, 0.42, 0.45]} ground={[0.12, 0.13, 0.11]} />
+          <DirectionalLight
+            color={[1, 0.95, 0.85]}
+            intensity={0.7}
+            position={[4, 3.5, 3]}
+            direction={[-4, -3.5, -3]}
+            castShadow
+            shadow={{ normalBias: 0.02, camera: { near: 1, far: 20 } }}
+          />
+          <Mesh geometry={plane({ width: 9, height: 9, label: "meadow" })} material={lit({ color: [0.24, 0.27, 0.24] })} rotation={[-Math.PI / 2, 0, 0]} />
           <Group rotation={[0, spin(), 0]}>
-            <InstancedMesh
+            <RecordMesh
               geometry={box({ label: "rock" })}
-              material={instancedLook.instance()}
+              material={instancedLook.instance({ params: LOOK })}
               records={rocks(400)}
               bounds={[-3.9, 0, -3.9, 3.9, 0.2, 3.9]}
+              castShadow
             />
-            <InstancedMesh
+            <RecordMesh
               geometry={cone({ radius: 0.3, height: 1, radialSegments: 10, label: "pine" })}
-              material={instancedLook.instance()}
+              material={instancedLook.instance({ params: LOOK })}
               records={pines(PINE_COUNT)}
               bounds={[-2.8, 0, -2.8, 2.8, 0.8, 2.8]}
+              castShadow
               ref={m => (pinesMesh = m)}
             />
           </Group>
@@ -143,10 +179,14 @@ function App() {
 }
 
 // One class, one compiled pipeline; each mesh gets its own instance() so
-// per-mesh uniforms stay independent (none are used here).
+// per-mesh uniforms stay independent. The fragment is the stock lit one,
+// so the instance carries lit's per-entry uniforms: a white base (the
+// tint arrives per instance through vColor) and a modest highlight.
+const LOOK = { uColor: [1, 1, 1, 1], uSpecular: 0.25, uShininess: 30 }
 let instancedLook = shaderMaterialClass({
   vertex: INSTANCE_VERTEX,
-  fragment: INSTANCE_FRAGMENT,
+  shadowVertex: INSTANCE_SHADOW_VERTEX,
+  fragment: litFragment({ vertexColors: true }),
   instanceAttributes: [
     { name: "iPos", format: "vec3" },
     { name: "iScale", format: "f32" },

package/examples/lamps.tsx

@@ -0,0 +1,92 @@
+// Spot and point lights: a dark courtyard under three lamps.
+//   - A warm SOFT spot (angle 26, penumbra 0.4) swings from a rig above
+//     the crates - ONE setTransform on the parent group per frame, and
+//     the pool of light sweeps the floor with a wide fading rim
+//     (uLightDir/uLightPos are core-driven, so the moving lamp costs no
+//     per-frame JS beyond the rig rotation).
+//   - A cool HARD spot (angle 11, penumbra 0.05) stands still, aimed by
+//     its `direction` prop at the knot on the pedestal: a crisp disc of
+//     light with a sharp rim, for contrast with the soft one.
+//   - A blue point bulb orbits between the crates on its own rig: light
+//     in every direction, no cone, falling off on the floor around it -
+//     and casting: the crates throw blue-edged shadows that wheel
+//     around the courtyard as the bulb passes.
+// Everything casts: a perspective map of each spot's cone (one shadow
+// slot each) and the bulb's six face maps (six slots) - together
+// exactly the MAX_SHADOW_MAPS budget of 8, all tiles of the scene's
+// one atlas. Faces outside every cone and
+// range stay near-black - the hemisphere idles at 0.05.
+//
+// Intensity under the default decay 2 behaves like candela: the light
+// that reaches a face is `intensity / d^2`, so a lamp 5 units up needs
+// intensity ~40 for a bright pool, not ~2. `distance` then windows the
+// falloff to zero so the pool ends instead of trailing off forever.
+import { onFrame, pct, render } from "@solidrt/core"
+import { box, cylinder, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, PointLight, Scene, setTransform, SpotLight, torusKnot } from "@solidrt/3d"
+import type { SceneNode } from "@solidrt/3d"
+
+function App() {
+  let swing!: SceneNode
+  let orbit!: SceneNode
+  onFrame(tick => {
+    // The lamp sways about z so its pool sweeps left-right; the bulb
+    // circles the crates on its own axis.
+    setTransform(swing, { rotation: [0, 0, Math.sin(tick / 2000) * 0.35] })
+    setTransform(orbit, { rotation: [0, tick / 1500, 0] })
+  })
+
+  let ground = lit({ color: [0.6, 0.6, 0.62] })
+  let crate = lit({ color: [0.7, 0.55, 0.4] })
+  let gold = lit({ color: [0.9, 0.75, 0.3], specular: 0.6, shininess: 50 })
+
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.02, 0.02, 0.03, 1]} samples={4} label="lamps">
+          <PerspectiveCamera fov={50} position={[0, 5, 8]} lookAt={[0, 0.5, 0]} />
+          <HemisphereLight sky={[0.05, 0.05, 0.06]} ground={[0.02, 0.02, 0.02]} />
+          <Group ref={g => (swing = g)} position={[0, 5, 0]}>
+            <SpotLight
+              color={[1, 0.85, 0.6]}
+              intensity={40}
+              angle={26}
+              penumbra={0.4}
+              distance={14}
+              castShadow
+              shadow={{ normalBias: 0.03 }}
+            />
+          </Group>
+          <SpotLight
+            position={[-4.5, 5, 1]}
+            direction={[1.3, -5, -2.2]}
+            color={[0.7, 0.85, 1]}
+            intensity={35}
+            angle={11}
+            penumbra={0.05}
+            distance={12}
+            castShadow
+            shadow={{ mapSize: 512, normalBias: 0.03 }}
+          />
+          <Group ref={g => (orbit = g)}>
+            <PointLight
+              position={[2.6, 1, 0]}
+              color={[0.4, 0.6, 1]}
+              intensity={3}
+              distance={8}
+              castShadow
+              shadow={{ mapSize: 512, normalBias: 0.03 }}
+            />
+          </Group>
+          <Mesh geometry={plane({ width: 20, height: 20 })} material={ground} rotation={[-Math.PI / 2, 0, 0]} />
+          <Mesh geometry={box()} material={crate} position={[-1.2, 0.5, 0]} castShadow />
+          <Mesh geometry={box()} material={crate} position={[1.6, 0.5, 0.8]} rotation={[0, 0.6, 0]} castShadow />
+          <Mesh geometry={box({ width: 0.8, height: 1.6, depth: 0.8 })} material={crate} position={[0.3, 0.8, -1.5]} castShadow />
+          <Mesh geometry={cylinder({ radiusTop: 0.35, radiusBottom: 0.45, height: 1 })} material={ground} position={[-3.2, 0.5, -1.2]} castShadow />
+          <Mesh geometry={torusKnot({ radius: 0.35, tube: 0.12 })} material={gold} position={[-3.2, 1.5, -1.2]} castShadow />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/lit.tsx

@@ -14,8 +14,6 @@ import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { createTexture } from "@solidrt/core/gpu"
 import { box, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, Scene, sphere, torusKnot, plane } from "@solidrt/3d"
 
-const SIZE = 720
-
 function checker(): ReturnType<typeof createTexture> {
   let n = 64
   let data = new Uint8Array(n * n * 4)
@@ -25,7 +23,7 @@ function checker(): ReturnType<typeof createTexture> {
       data.set([v, v, v, 255], (y * n + x) * 4)
     }
   }
-  return createTexture(data, n, n, { wrap: "repeat", mipmap: true })
+  return createTexture(data, n, n, { format: "rgba8-srgb", wrap: "repeat", mipmap: true })
 }
 
 function App() {
@@ -41,8 +39,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]} samples={4} label="lit">
+      <view width={pct(100)} height={pct(100)}>
+        <Scene clearColor={[0.07, 0.07, 0.1, 1]} samples={4} label="lit">
           <PerspectiveCamera fov={50} position={[0, 2.6, 5]} lookAt={[0, 0.4, 0]} />
           <HemisphereLight sky={[0.35, 0.38, 0.45]} ground={[0.12, 0.1, 0.08]} />
           <Group rotation={[0, t(), 0]}>