@solidrt/3d 0.0.58 → 0.0.60

package/README.md

@@ -69,7 +69,7 @@ change - plus your own uniforms: scene-wide via `scene.setParams` (one write
 however many meshes read it), or per mesh, declaratively via the `params`
 prop on `<Mesh>` or imperatively via `setMeshParams`. `shaderMaterialClass`
 compiles one program and hands out `instance()` materials that differ only
-in params/textures - and with `instanceAttributes` it makes an instanced
+in params/textures - and with `instanceBuffers` it makes an instanced
 material. Populations come in two forms: `<InstancedMesh>` with
 `<Instance>` children (or `createInstancedMesh`/`addInstance`) draws the
 geometry once per instance NODE - each a scene node the spatial core
@@ -87,7 +87,9 @@ v1 scope: unlit color/textured materials plus `shaderMaterial` (your own
 GLSL as a first-class material), sprites (`<Sprite>` with a `sprite()`
 material: a quad facing the camera in the vertex stage, full or fixed-y
 billboarding), geometry generators (box, plane, circle,
-ring, sphere, cylinder, cone, torus, torus knot), a profile kit for custom
+ring, sphere, cylinder, cone, torus, torus knot, the platonic solids with
+`detail` subdivision, so the icosahedron is also the icosphere), a profile
+kit for custom
 solids (`extrude` with bevels, `lathe`, polyline `sweep`/`tube` with
 mitred joints, flat `shape`, with `fillet`/`roundRect`/`triangulate`
 helpers), geometry as data (`transformGeometry` bakes a placement into

package/examples/README.md

@@ -11,7 +11,12 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   over a crate (bare path points crease on the mitred bends) and a coiled
   tube (smooth-tagged helix, one continuous mesh), lit so the
   creased-vs-smooth normals actually show.
-- `lit.tsx` - the lit material and light nodes: `<HemisphereLight>` plus
+- `polyhedra.tsx` - the polyhedron family: the four platonic solids
+  flat-shaded (`detail: 0` keeps face normals), the icosahedron at
+  `detail` 1, 2 and 3 turning into the icosphere, and a wireframe pair
+  showing why - `sphere()` bunches slivers at its poles at the same
+  triangle count where the icosphere's triangles stay uniform.
+- `phong.tsx` - the Blinn-Phong material and light nodes: `<HemisphereLight>` plus
   a warm key `<DirectionalLight>` turning inside a spinning `<Group>` and
   a fixed cool fill,
   a glossy sphere (specular/shininess), a transparent glass sphere, and
@@ -21,6 +26,11 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   target: `lookAt` for a +z solid, `quatFromTo` for aiming a y-axis cone,
   and a `quatSlerp` damped follow that visibly lags; all driven from
   onFrame through refs, no per-frame signals.
+- `exits.tsx` - lifecycle animation on nodes: crates that pop in
+  (`from`) and shrink away (`exit`, an ease-in of its own) when tapped,
+  the component unmount being the `destroy` the exit rides on, a ghost
+  while it leaves; a tap on empty space toggles the whole shelf through
+  `<Show>`, and the Group's `stagger` cascades its crates out and back in.
 - `pick.tsx` - mesh pointer events under an `<OrbitCamera>`, the scene
   as the root of the walk: hover tints (enter/leave), a tap pops, a drag
   on the crate slides it over the floor without orbiting (its down claims
@@ -37,7 +47,7 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   rotation }}>`) baked in JS at startup (horizon gradient, sun disc and
   glow, no image assets), and the same cube as the environment
   (`environment={{ cube, rotation }}`) mirrored by a chrome sphere
-  (`lit({ reflectivity: 1 })`) and, blurred by shininess, a glossy knot.
+  (`phong({ reflectivity: 1 })`) and, blurred by shininess, a glossy knot.
   The sky turns and the sun light turns with it, the `rotation` knobs
   updating in place; drag to look around.
 - `standard.tsx` - the `standard` material, the sphere grid every PBR
@@ -60,12 +70,32 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   environment the ball reflects - six colored walls and four orbiting
   spheres show in it, blurred by the ball's roughness. Layers keep the
   ball out of its own probe. Drag to look around.
+- `morph.tsx` - morph targets: a sphere given two named targets with
+  `withMorphTargets` (a top-half spike, the sparse case, and a squash
+  with bent normals), drawn under `phong({ morph: true })` with weights
+  driven per frame by `setMorphWeights`, flipped through the
+  `morphWeights` prop under a `transition={{ weights }}` spring (the
+  core animates each flip), ignored by a plain material on the same
+  geometry, and per INSTANCE on a back row of six `<Instance>` blobs
+  under one `<InstancedMesh>`, each at its own blend; every morphed
+  blob's shadow morphs with it.
 - `sky-lit.tsx` - a sky-lit scene (`scene.bakeBackground`): a procedural
   GLSL sky is the background AND, baked into a prefiltered cube, the
   environment - no light nodes. Two rows of `standard` spheres, metal and
   dielectric, roughness 0 to 1 across; the sun disc bakes at 40x (the
   probe format is half float where the device renders it), so the rough
   metals carry its energy as a broad highlight. Drag to look around.
+- `scene-atlas.tsx` - four `<View3d>` tiled `into` one app-owned atlas
+  (one pass for all four, `bufferFormat()` storage) and resolved once by
+  the app: `resolveFragment()` over a `createShaderTexture` sampling the
+  atlas, `resolveParams` for its tone mapping - the recipe for any buffer
+  the library does not resolve itself.
+- `bloom.tsx` - the stock `bloom` option on sky-lit's scene with the sun
+  in frame (the disc and its mirror images bloom, the sky gradient does
+  not), composed with a custom `resolve` that declares the chain's
+  `uBloom`/`uBloomIntensity`, adds the term and a vignette, and ends in
+  `resolveColor` - the two halves of the resolve slot. Drag to look
+  around.
 - `sprites.tsx` - sprites: a ring of `"full"` billboard glows that stay
   flat to the screen and `"fixed-y"` cutout trees that only yaw toward
   the camera and stay upright as it climbs, both turned in the vertex
@@ -80,7 +110,7 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   with them.
 - `fleet.tsx` - instanced meshes, the node-backed population: one
   `<InstancedMesh>` of a thousand `<Instance>` nodes under the stock
-  `lit` material with `instanceColors` (lighting, shadows, fog and a
+  `phong` material with `instanceColors` (lighting, shadows, fog and a
   per-instance tint with no GLSL). Every few seconds a signal picks the
   next formation and the core springs every instance to its place
   through its `transition` - one signal write, zero JS per frame after
@@ -88,6 +118,11 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   instance; every style write between two frames is one buffer write).
   Drag to orbit; the `formation` and `state` debug commands drive it
   headlessly.
+- `lod.tsx` - level of detail: a thousand trees as one `<InstancedLod>`
+  (three entries, each instance at the level its own projected size
+  picks) and a hero solid as a `<Lod>` of three `lodSize` meshes
+  cross-fading through a dithered band, the camera flying over both
+  with no per-frame JS; the levels are tinted so the hand-overs show.
 - `first-person.tsx` - a first-person walk: `<FirstPersonCamera>` over
   a walled courtyard of shadow-casting pillars, driven by an input map
   the app binds (`firstPersonBindings`: WASD/arrows and the pad sticks
@@ -113,7 +148,7 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   `castShadow` sun swinging through its arc (one setTransform per frame
   on the light node), a fixed cool fill and a low rim light, `castShadow`
   meshes turning in a group throwing three crossing shadows each, the
-  ground and the casters receiving through plain `lit` (the default);
+  ground and the casters receiving through plain `phong` (the default);
   each shadow camera follows its light's world matrix, each map is
   rendered by an internal view.
 - `cascades.tsx` - cascaded shadow maps: a sun with `shadow: { cascades:
@@ -148,6 +183,17 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   second index buffer) and `setGeometry`/`setMaterial` swap it onto the
   live mesh, no node touched. Space, a tap on the rover, or the `wire`
   debug command (`{ mode: "solid" | "wireframe" | "edges" }`) cycles.
+  Under it the debug helpers: `gridHelper` on the rover's floor and
+  `axesHelper` at the origin through one `unlit({ vertexColors: true })`,
+  and `box3Helper` around its bounds, turning with it.
+- `normals.tsx` - normals as data: three cylinders from one triangle
+  soup (`toNonIndexed` of a cylinder) shaded by `withNormals` at crease
+  angles 0, 60 and 180 (flat, rims kept, rims blended), each welded back
+  to an indexed mesh, and a rippling sphere on the per-frame loop
+  (`fillAttribute` positions, `computeVertexNormals` in place,
+  `updateVertices`). `normalsHelper` lines on every mesh, the sphere's
+  refreshed in place each frame; space or the `helpers` debug command
+  (`{ on?: boolean }`) toggles them.
 - `model-load.tsx` - the same rover loaded ASYNC with `loadModel` from
   `assets/` under a `<Loading>` boundary: the async read lives in a memo,
   a second memo derives the scene JSX after that read, and the shell

package/examples/bloom.tsx

@@ -0,0 +1,113 @@
+// Bloom, the stock option and its composition with a custom resolve. The
+// scene renders into its linear buffer (`scene.hdrTexture`, half float
+// where the device renders it), so radiance above 1 is there to spread:
+// `bloom={{ threshold, intensity, radius }}` runs a threshold pass and a
+// separable blur chain over the buffer at a quarter of the target's size
+// and the resolve adds the result back before `resolveColor` exposes,
+// tone maps and encodes - Godot's glow in its tonemap pass, Unity's
+// Bloom, Three's UnrealBloomPass before OutputPass. The custom `resolve`
+// here shows the composition: it declares the stock chain's two names,
+// `uBloom` and `uBloomIntensity` (start from BLOOM_RESOLVE in `/glsl`),
+// adds the term and darkens the corners before the stock display stage.
+// The sky is sky-lit's (a 40x sun disc, baked into the environment) with
+// the sun in frame, so the disc and its mirror images on the sharp
+// metals bloom and the sky's gradient does not. 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"
+
+const COUNT = 6
+const RADIUS = 0.45
+const GAP = 1.15
+// The sun sits in front of the camera, low over the horizon, so its disc
+// is in frame: the disc blooms in the backdrop, its mirror images on the
+// sharp metals bloom with it.
+const SUN: Vec3 = normalize([-0.35, 0.3, -1])
+const BAKE_SIZE = 128
+// Radiance below the threshold stays out of the bloom (1 = anything
+// brighter than a white surface lit to 1); the intensity is how much of
+// the blurred excess is added, the radius how many blur rounds spread it.
+const BLOOM = { threshold: 1.0, intensity: 0.6, radius: 2 }
+// How much the corners darken in the custom resolve's vignette.
+const VIGNETTE = 0.6
+
+const SKY = glsl`
+  uniform vec3 uSunDir;
+  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 = vec4(col, 1.0);
+  }
+`
+
+// The custom resolve: the stock bloom's term (the scene binds uBloom and
+// writes uBloomIntensity on this target), then a vignette, then the stock
+// display stage. The scene is opaque, so the bloom is added to
+// premultiplied color as is.
+const VIGNETTE_RESOLVE = glsl`
+  uniform sampler2D uBloom;
+  uniform float uBloomIntensity;
+  const float VIGNETTE = ${VIGNETTE.toFixed(2)};
+  void main() {
+    vec4 s = texture(uScene, vUV);
+    vec3 rgb = s.rgb + texture(uBloom, vUV).rgb * uBloomIntensity;
+    vec2 c = vUV - 0.5;
+    rgb *= 1.0 - VIGNETTE * dot(c, c);
+    fragColor = resolveColor(rgb, s.a);
+  }
+`
+
+function App() {
+  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 })
+  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="bloom"
+          ref={lit}
+          pointer={pointer}
+          bloom={BLOOM}
+          resolve={VIGNETTE_RESOLVE}
+        >
+          <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/cascades.tsx

@@ -20,7 +20,7 @@
 // (`examples/fog.tsx` is the fog tour).
 import { createSignal, flush, onFrame, pct, render } from "@solidrt/core"
 import { registerDebug } from "srt:dev"
-import { box, DirectionalLight, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere } from "@solidrt/3d"
+import { box, DirectionalLight, HemisphereLight, phong, Mesh, PerspectiveCamera, plane, Scene, sphere } from "@solidrt/3d"
 import type { Geometry, Vec3 } from "@solidrt/3d"
 
 const FIELD = 260
@@ -90,9 +90,9 @@ function App() {
     return [Math.sin(a) * RADIUS, 1.5, Math.cos(a) * RADIUS]
   }
 
-  let ground = lit({ color: [0.5, 0.55, 0.45] })
-  let stone = lit({ color: [0.75, 0.7, 0.62] })
-  let ball = lit({ color: [0.85, 0.35, 0.3], specular: 0.4, shininess: 30 })
+  let ground = phong({ color: [0.5, 0.55, 0.45] })
+  let stone = phong({ color: [0.75, 0.7, 0.62] })
+  let ball = phong({ color: [0.85, 0.35, 0.3], specular: 0.4, shininess: 30 })
 
   return (
     <window>

package/examples/collision.tsx

@@ -21,7 +21,7 @@ import {
   firstPersonActions,
   firstPersonBindings,
   HemisphereLight,
-  lit,
+  phong,
   Mesh,
   moveAndSlide,
   PerspectiveCamera,
@@ -88,11 +88,11 @@ function App() {
   let stopFall: (() => void) | null = null
   let pickups: MeshNode[] = []
 
-  let dim = lit({ color: [0.55, 0.45, 0.2] })
-  let bright = lit({ color: [1, 0.85, 0.3], specular: 0.8, shininess: 60 })
-  let ground = lit({ color: [0.48, 0.52, 0.46] })
-  let stone = lit({ color: [0.72, 0.7, 0.66] })
-  let brick = lit({ color: [0.6, 0.34, 0.28] })
+  let dim = phong({ color: [0.55, 0.45, 0.2] })
+  let bright = phong({ color: [1, 0.85, 0.3], specular: 0.8, shininess: 60 })
+  let ground = phong({ color: [0.48, 0.52, 0.46] })
+  let stone = phong({ color: [0.72, 0.7, 0.66] })
+  let brick = phong({ color: [0.6, 0.34, 0.28] })
 
   // Every move ends here: the walker's new eye, the ground state, and the
   // pickups in reach of its feet (an include-list query, so the level

package/examples/exits.tsx

@@ -0,0 +1,96 @@
+// Lifecycle animation on scene nodes, the element tree's vocabulary one
+// tree deeper: every crate declares `from` (it pops in from scale zero on
+// a bouncy spring) and `exit` (it shrinks away on an ease-in of its own,
+// the exit's motion, not the enter's run backwards). Tap a crate: the
+// component unmounts and `destroy` lets the node go - it stays drawn
+// while it leaves, a ghost no tap or pick reaches, then frees; a fresh
+// crate takes the slot a moment later. Tap empty space: the whole shelf
+// unmounts through `<Show>`, and the Group's `stagger` spaces the crates'
+// exits by their order, then their enters when it comes back. No settle
+// callbacks, no closing signals; the scene is static between events.
+//
+// Debug commands: `state` (the live crate ids), `pixel` ({ index }: the
+// WINDOW pixel a crate projects to, for a synthetic tap).
+import { createSignal, For, pct, render, Show } from "@solidrt/core"
+import { box, Group, Mesh, PerspectiveCamera, plane, Scene, unlit } from "@solidrt/3d"
+import type { NodeTransition, SceneHandle, SceneTapEvent, Vec3 } from "@solidrt/3d"
+import { registerDebug } from "srt:dev"
+
+const COUNT = 5
+// Crate spacing along x, and the pause before a tapped-away crate is
+// replaced.
+const SPACING = 1.6
+const RESPAWN_MS = 700
+// Enters bounce in over POP_MS; exits ease in over half of it; the shelf
+// cascades its crates STAGGER_MS apart.
+const POP_MS = 400
+const STAGGER_MS = 70
+
+const CRATE: NodeTransition = {
+  scale: {
+    duration: POP_MS,
+    bounce: 0.45,
+    from: [0, 0, 0],
+    exit: { value: [0, 0, 0], curve: "ease-in", duration: POP_MS / 2 },
+  },
+}
+
+// Each crate is keyed by a spawn id, so a respawn is a new node (its own
+// enter) and never a write to the old one.
+let nextId = 0
+let [crates, setCrates] = createSignal<{ id: number; slot: number }[]>(
+  Array.from({ length: COUNT }, (_, slot) => ({ id: nextId++, slot })),
+)
+let [shelf, setShelf] = createSignal(true)
+let scene!: SceneHandle
+let slotX = (slot: number) => (slot - (COUNT - 1) / 2) * SPACING
+let hue = (slot: number): [number, number, number] => [0.4 + 0.5 * (slot / COUNT), 0.35, 0.85 - 0.5 * (slot / COUNT)]
+
+let pop = (id: number, slot: number) => {
+  setCrates(list => list.filter(c => c.id !== id))
+  setTimeout(() => setCrates(list => [...list, { id: nextId++, slot }]), RESPAWN_MS)
+}
+
+function App() {
+  registerDebug("state", () => ({ shelf: shelf(), crates: crates() }))
+  registerDebug("pixel", (args?: { index?: number }) => {
+    let p = scene.project([slotX(args?.index ?? 0), 0.5, 0])
+    return p === null ? null : { x: p.x, y: p.y }
+  })
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)}>
+        <Scene
+          width={800}
+          height={500}
+          clearColor={[0.07, 0.07, 0.09, 1]}
+          label="exits"
+          ref={s => (scene = s)}
+          onTap={(e: SceneTapEvent) => {
+            if (e.mesh === null) setShelf(v => !v)
+          }}
+        >
+          <PerspectiveCamera fov={50} position={[0, 4, 9]} lookAt={[0, 0.5, 0]} />
+          <Mesh geometry={plane({ width: 12, height: 6 })} material={unlit({ color: [0.16, 0.17, 0.2] })} rotation={[-Math.PI / 2, 0, 0]} />
+          <Show when={shelf()}>
+            <Group transition={{ stagger: STAGGER_MS }}>
+              <For each={crates()}>
+                {c => (
+                  <Mesh
+                    geometry={box()}
+                    material={unlit({ color: hue(c.slot) })}
+                    position={[slotX(c.slot), 0.5, 0] as Vec3}
+                    transition={CRATE}
+                    onTap={() => pop(c.id, c.slot)}
+                  />
+                )}
+              </For>
+            </Group>
+          </Show>
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/first-person.tsx

@@ -11,7 +11,7 @@
 // command reads and sets the pose for headless checks.
 import { createInputMap, createPointerFeed, createSignal, gamepad, keyboard, lockPointer, onFrame, pct, pointerLocked, render } from "@solidrt/core"
 import type { PointerEvent } from "@solidrt/core"
-import { box, cylinder, DirectionalLight, FirstPersonCamera, firstPersonActions, firstPersonBindings, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene } from "@solidrt/3d"
+import { box, cylinder, DirectionalLight, FirstPersonCamera, firstPersonActions, firstPersonBindings, HemisphereLight, phong, Mesh, PerspectiveCamera, plane, Scene } from "@solidrt/3d"
 import type { FirstPersonCameraHandle, Vec3 } from "@solidrt/3d"
 import { registerDebug } from "srt:dev"
 
@@ -65,10 +65,10 @@ function App() {
     return camera.pose()
   })
 
-  let ground = lit({ color: [0.5, 0.52, 0.48] })
-  let stone = lit({ color: [0.75, 0.72, 0.66] })
-  let brick = lit({ color: [0.6, 0.32, 0.26] })
-  let gold = lit({ color: [0.9, 0.75, 0.3], specular: 0.5, shininess: 40 })
+  let ground = phong({ color: [0.5, 0.52, 0.48] })
+  let stone = phong({ color: [0.75, 0.72, 0.66] })
+  let brick = phong({ color: [0.6, 0.32, 0.26] })
+  let gold = phong({ color: [0.9, 0.75, 0.3], specular: 0.5, shininess: 40 })
 
   let pillars = Array.from({ length: PILLARS }, (_, i) => {
     let a = (i / PILLARS) * Math.PI * 2

package/examples/fleet.tsx

@@ -1,5 +1,5 @@
 // A fleet of a thousand instance NODES: one `<InstancedMesh>` under the
-// stock `lit` material with `instanceColors`, so lighting, shadows, fog
+// stock `phong` 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`
@@ -16,7 +16,7 @@
 // scene pixel instance i projects to and what a pick there finds, for a
 // synthetic tap).
 import { createInputMap, createPointerFeed, createSignal, flush, For, gamepad, pct, render } from "@solidrt/core"
-import { box, DirectionalLight, HemisphereLight, Instance, InstancedMesh, lit, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, worldPosition } from "@solidrt/3d"
+import { box, DirectionalLight, HemisphereLight, Instance, InstancedMesh, phong, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, worldPosition } from "@solidrt/3d"
 import type { InstanceNode, NodeTransition, SceneHandle, Vec3 } from "@solidrt/3d"
 import { registerDebug } from "srt:dev"
 
@@ -169,12 +169,12 @@ function App() {
           />
           <Mesh
             geometry={plane({ width: 3 * REACH, height: 3 * REACH, label: "ground" })}
-            material={lit({ color: [0.26, 0.28, 0.27] })}
+            material={phong({ 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 })}
+            material={phong({ instanceColors: true, specular: 0.3, shininess: 40 })}
             capacity={COUNT}
             castShadow
             label="fleet"

package/examples/fog.tsx

@@ -19,7 +19,7 @@
 // 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 { cone, cylinder, DirectionalLight, HemisphereLight, phong, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
 import type { FogOptions, Vec3 } from "@solidrt/3d"
 
 const FAR = 400
@@ -132,10 +132,10 @@ function App() {
     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 ground = phong({ color: [0.36, 0.48, 0.3] })
+  let rock = phong({ color: [0.5, 0.47, 0.42] })
+  let needles = phong({ color: [0.16, 0.36, 0.22] })
+  let trunk = phong({ 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] })