@solidrt/3d 0.0.55 → 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

@@ -22,7 +22,6 @@ 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 SIZE = 720
 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]
@@ -148,8 +147,8 @@ function App() {
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]} onPointerDown={() => setMode(m => MODES[(MODES.indexOf(m) + 1) % MODES.length] ?? "linear")}>
-        <Scene width={SIZE} height={SIZE} clearColor={[SKY[0], SKY[1], SKY[2], 1]} fog={fog()} samples={4} label="fog">
+      <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]} />

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]}>

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