@solidrt/3d 0.0.48 → 0.0.50

package/AGENTS.md

@@ -11,7 +11,7 @@ blendMode and pointer events like any element. Design rationale:
 
 - Two layers. The imperative core is Solid-free: `createScene`,
   `createMesh(geometry, material)`, `add`/`remove`, `setTransform`,
-  `lookAt`, `getRotation`, `setVisible` - plain objects with dirty flags, batched to a
+  `lookAt`, `getRotation`, `setVisible`, `setRenderOrder` - plain objects with dirty flags, batched to a
   microtask,
   one `setDrawParams` (uModel, plus uNormal for materials declaring it)
   per changed mesh and ONE `setTargetParams` (the shared uViewProj +
@@ -42,16 +42,22 @@ blendMode and pointer events like any element. Design rationale:
   lazy, shared, and app-lifetime (owner-scoped free would break sharing);
   `disposeGeometry` frees them.
 - Materials dedupe hard: one program + one pipeline per material CLASS
-  (unlit color, unlit map), `depth: true` + `cull: "back"`; an instance is
+  (unlit color, unlit map, each opaque or transparent), `depth: true` +
+  `cull: "back"`; an instance is
   just per-entry uniforms (`uColor`) and bindings (`uMap`).
+- The pure pieces (`math.ts`, `bvh.ts`, `order.ts`) have check rigs in
+  `checks/`, run headless on flux from the repo root:
+  `bunx srt bundle -f --stdout packages/3d/checks/<name>-check.ts | target/release/flux - [seed]`.
+  They print PASS or FAIL lines and throw on failure (the flux binary exits
+  0 either way - read the output). Extend the rig when you change the module.
 
 ## Components
 
 | Component | Props |
 | --- | --- |
-| `Scene` | `width`, `height` (target pixels), `clearColor?`, `label?`, `ref?(scene)`, `output?(texture)` |
-| `Group` | `position?`, `rotation?` (Euler radians, XYZ order), `quaternion?` (either, not both), `scale?` (number = uniform), `visible?`, `ref?(node)` |
-| `Mesh` | `geometry`, `material`, transforms as Group, `params?` (per-mesh uniforms, merge semantics - no unset), `ref?(mesh)` |
+| `Scene` | `width`, `height` (target pixels), `clearColor?`, `background?` (fragment GLSL), `label?`, `ref?(scene)`, `output?(texture)`, `events?` (mesh pointer events, default on) |
+| `Group` | `position?`, `rotation?` (Euler radians, XYZ order), `quaternion?` (either, not both), `scale?` (number = uniform), `visible?`, pointer events (below), `ref?(node)` |
+| `Mesh` | `geometry`, `material`, transforms as Group, `params?` (per-mesh uniforms, merge semantics - no unset), pointer events (below), `ref?(mesh)` |
 | `PerspectiveCamera` | `fov?` (vertical DEGREES, default 60), `near?`, `far?`, `position?`, `lookAt?`, `up?` |
 
 Output composition: without `output`, `Scene` emits a minimal
@@ -102,6 +108,40 @@ immediately, so set-then-project in one tick is exact. `scene.viewProj(out?)`
 copies the view-projection matrix for batch work. Never rebuild the
 camera matrices by hand for a HUD.
 
+Picking: `scene.pick(x, y)` is project()'s inverse - the camera ray
+through a scene pixel, returning `Hit[]` (`{ mesh, distance, point }`,
+world units, nearest first; every hit along the ray, not just the front
+one). `scene.raycast(origin, direction)` is the world-space primitive
+under it. The volume tier: hits test each mesh's local bounding box,
+transformed exactly under any node transform (non-uniform scale
+included), so results are conservative - a ray through a knot's hole
+still hits (no `face`/`uv` fields until a triangle tier exists).
+Broadphase is a dynamic AABB tree (BVH) the sync walk keeps current from
+its own dirty set - maintenance is O(changed), a query O(log meshes) -
+so per-pointer-move picking puts no ceiling on scene size. Both methods
+flush pending writes first (the lookAt/project immediacy contract), and
+both skip invisible meshes.
+
+Mesh pointer events - the element vocabulary one tree deeper:
+`onPointerDown/Move/Up/Enter/Leave` as plain fields on any node (and as
+Mesh/Group props). The nearest hit mesh is the target; down/move/up
+bubble mesh -> ancestor groups (`stopPropagation()` stops the walk);
+enter/leave fire on the mesh alone, pairing on hover changes. A
+pointer-down CAPTURES its mesh until the up: moves and the up keep
+dispatching to it off-mesh (the platform's captured-drag rule), with
+`point`/`distance` null while the ray misses it. The event carries the
+element fields (pointerId, pointerType, button, modifiers) plus `mesh`,
+`currentTarget`, `point`, `distance`, and `x`/`y` in scene pixels.
+Wiring: the built-in `<Scene>` leaf carries `scene.handlers`
+automatically (opt out: `events={false}`); an `output` leaf or
+imperative composition spreads `{...scene.handlers}` onto the element
+showing the texture. `scene.handlers` assumes that leaf is LAID OUT at
+the target size - true for the built-in leaf and a d-texture at natural
+size, under any ancestor transforms or viewBox fits (the hit test
+undoes them; localX/localY arrive in the leaf's layout frame). A leaf
+laid out at a different size (the supersampling pattern) uses
+`scene.handlersFor(() => ({ width, height }))` with its layout size.
+
 Geometry: `box(w?, h?, d?)`; `plane(w?, h?)`, `circle(radius?, seg?)` and
 `ring(inner?, outer?, seg?)` (XY, facing +z - rotate `[-Math.PI/2, 0, 0]`
 for a floor); `sphere(radius?, wSeg?, hSeg?)`;
@@ -160,7 +200,10 @@ Materials:
   at shaderMaterial() creation. The rest is opt-in by declare-and-use:
   `uniform vec3 uCamPos` (the camera's world position, shared and written
   with uViewProj - the specular/fresnel view vector is
-  `normalize(uCamPos - worldPos)`) and `uniform mat4 uNormal` (the world
+  `normalize(uCamPos - worldPos)`), `uniform vec3 uCamRight` / `uCamUp`
+  (the camera's world-space view axes, shared likewise - a billboard is
+  `center + uCamRight * x + uCamUp * y`; do NOT rebuild them from
+  uViewProj rows, that carries the clip flip) and `uniform mat4 uNormal` (the world
   inverse-transpose, written beside uModel for this material's meshes;
   take `mat3(uNormal)` - correct under non-uniform scale, where
   mat3(uModel) bends normals off the surface). Attributes come from the
@@ -174,6 +217,29 @@ Materials:
   with the `Mesh` `params` prop (same merge semantics - a key that
   disappears from the object keeps its old value; for per-frame values
   prefer `ref` + setMeshParams from onFrame, the setTransform split).
+  Scene-wide values (a clock, a sun direction, fog) go through
+  `scene.setParams({ uTime })` instead - one write for every mesh.
+- `shaderMaterialClass({ vertex, fragment, ...pipeline state })` - the
+  class/instance split for your own GLSL: compiles once, and
+  `cls.instance({ params?, textures? })` returns a Material sharing that
+  pipeline with its own values. `dispose()` lives on the class alone.
+  `shaderMaterial(opts)` is exactly a class with one instance (its
+  `dispose` forwards to the class).
+
+Background: `scene.setBackground(source | null)`, the `background` option
+on createScene, and the reactive `Scene` prop. Fragment GLSL drawn as the
+FIRST entry of the scene's own pass (attributeless fullscreen triangle,
+depth off) - one target instead of a backdrop texture stacked under the
+scene, with no separate resize plumbing. The source gets the
+shader-target fragment contract exactly (vUV 0..1 top-left origin,
+iResolution, fragColor; no `#version` line = the standard preamble), so
+a `createShaderTexture` backdrop ports verbatim. Three's
+`scene.background = color` is `clearColor` here; a texture-id form can
+widen the signature later (a branded TextureId is a number, so
+`string | TextureId` disambiguates at runtime). No app-driven uniforms:
+a background is static art - anything animated is a mesh's own
+shaderMaterial (or, until blend factors land, a separate shader texture
+underneath, which translucent grounds also still need).
 
 Lighting GLSL (`@solidrt/3d/glsl`): exported string constants composed
 into shaderMaterial sources with plain template literals - `LIT_VERTEX`
@@ -197,10 +263,30 @@ system.
   and show mesh interiors.
 - `visible: false` keeps the entry, drawn with `instanceCount: 0` (a
   cheap off switch). Hidden meshes skip uModel writes; the fresh matrix is
-  written on unhide.
-- Alpha does not blend in v1: pipelines are opaque (`blend: "none"`), a
-  translucent color overwrites. Transparency waits on blend factors +
-  sorting (research note, staging step 4).
+  written on unhide. A freshly attached entry starts off the same way and
+  sync() turns it on when it writes uModel - never add one live: it has no
+  world matrix yet, and drawn before the sync microtask it flashes at the
+  world origin for a frame.
+- Transparency is an EXPLICIT material flag, Three's rule: `unlit({ color:
+  [r, g, b, 0.5] })` still draws opaque; `unlit({ ..., transparent: true })`
+  (or `shaderMaterial({ transparent: true })`) builds the pipeline with
+  `blend: "alpha"` and `depthWrite: false` (depth test stays on, so it hides
+  behind opaques without occluding other translucents). The one inference:
+  a `shaderMaterial` with any `blend` but "none" is transparent unless told
+  `transparent: false` - every blended draw belongs after the opaques, and
+  back-to-front is harmless for add/multiply. The scene owns the
+  order: background, opaque meshes by `renderOrder` then add order,
+  transparent meshes by `renderOrder` then back-to-front by the CENTER of
+  the mesh's world bounds in view space (not the origin: off-origin geometry
+  sorts by where it is; not the nearest bounds point: a big translucent
+  ground plane would cover the small translucents on it) - one `setDrawOrder` from sync() whenever the list changed, a
+  renderOrder changed, or (with two or more transparent meshes) the camera
+  or a transparent mesh moved, and skipped when the resort lands on the
+  permutation already issued. Per-mesh sort only: one non-convex translucent
+  mesh still overlaps itself in vertex order, and two large interpenetrating
+  translucents can sort wrong (center distance, not per-pixel) - that is the
+  engine contract, no OIT. A `shaderMaterial({ transparent: true })`
+  fragment must write PREMULTIPLIED output (`vec4(rgb * a, a)`).
 - Rotation is stored as a QUATERNION (`node.quaternion`, `[x, y, z, w]`,
   always unit). There is exactly one rotation field: no `node.rotation`
   shadowing it, because a second field is a second thing to go stale (an
@@ -277,9 +363,36 @@ system.
   camera writes (uEye-style per-mesh params are exactly the O(scene) cost
   the shared channel removed). Scene scale honestly: hundreds to a
   few thousand objects, bounded by the interpreter, not the GPU.
+- SCENE-WIDE uniforms go through that same shared channel via
+  `scene.setParams({ uTime })`, and this is the single highest-leverage
+  pattern in the library. It merges an app-owned name in beside
+  uViewProj/uCamPos/uCamRight/uCamUp - names merge, a target tolerates
+  zero coverage, neither side clobbers the other. One write per frame
+  however many meshes read it, with the motion itself in vertex shaders
+  off that one clock. `params`/`setMeshParams` is the PER-MESH answer and
+  is O(meshes) per frame; reach for it only when the value genuinely
+  differs per mesh. (`scene.texture` IS the draw target id, so
+  `setTargetParams(scene.texture, ...)` is the same write - setParams is
+  the sanctioned spelling.)
+- Vec3/Quat arguments are COPIED IN everywhere (`setTransform`, `lookAt`,
+  `setCamera`, params), so ONE scratch array reused every frame is safe -
+  allocating three arrays per node per frame is pure waste. The node's own
+  `position`/`quaternion`/`scale` are the live arrays: read them, do not
+  hand them out and do not mutate them (that write does not sync).
+- `setTransform` early-outs on an unchanged value (rotation compared AFTER
+  euler conversion), so driving every node unconditionally from `onFrame`
+  costs only the compare for nodes that did not move. Compares are exact,
+  like `setVisible`.
+- Per-generator conventions - orientation, UV mapping, which axis a solid
+  stands on, what a cap looks like - live on each generator's doc comment,
+  not here. They are consistent (`plane`/`circle`/`ring` face +z, `torus`
+  lies flat with the hole on y, discs and cylinder caps get a PLANAR disc
+  map inscribed in the unit square) but the doc comment is the source.
 - Entry rebuild order: `setGeometry`/`setMaterial` re-add the entry at the
-  list END. Irrelevant while everything is opaque + depth-tested; revisit
-  when transparency lands.
+  list END and dirty the order, so the next sync() re-sorts and the mesh
+  keeps its place. `_transparent` on the mesh is the flag AS ATTACHED
+  (setMaterial swaps `mesh.material` before the rebuild, so _detach must
+  not read the new material's flag).
 - `lathe` takes a CLOSED profile (a cross-section with thickness, or run
   to the axis at x = 0) - it is a solid of revolution, NOT Three's open
   polyline shell. An "open" outline must be closed by the author;
@@ -290,7 +403,14 @@ system.
   compile twice - no dedupe by source value (deliberate; hidden
   content-keyed caches are the anti-pattern the GPU layer avoids). Create
   one per look at app scope, share across meshes, `dispose()` when done
-  for good.
+  for good. Looks that differ only in params/textures are ONE
+  `shaderMaterialClass` and many `instance()`s - the app-owned split, not
+  a cache. A class instance has no `dispose` of its own; disposing the
+  class invalidates every instance.
+- A parameterised class whose variants (mapped/unmapped, ...) are SEPARATE
+  classes must have every variant reference every shared uniform it is
+  seeded with: a declared-but-unused per-entry name compiles out and
+  throws at add(). Open item: `okf/backlog/gpu-inactive-uniform-two-tier.md`.
 - The standard-set contract is checked TEXTUALLY at shaderMaterial()
   creation (uModel and uViewProj must appear in the vertex source) and
   strictly at add() for the per-entry names: a uModel or uNormal that is
@@ -304,3 +424,32 @@ system.
   vertex source - a comment counts - selects the "colored" layout, and
   the material then rejects standard geometry at add(). Do not mention
   aColor you do not read.
+- Picking is the VOLUME tier: a hit means the ray crossed the mesh's
+  transformed bounding box, not its surface. Never present `point` as a
+  surface point (it is the box-entry point), and never add a
+  triangle-accurate path in JS - per-triangle rays at mesh scale are
+  interpreter-hostile; that tier is core work (BVH descent per the
+  differentiators ladder).
+- `scene.handlers` vs `handlersFor`: localX/localY arrive in the leaf's
+  LAYOUT frame (every ancestor transform and viewBox fit is already
+  undone by the element hit test). `handlers` therefore assumes leaf
+  layout == target pixels; scaling by `getBoundingBox` would be WRONG -
+  the box composes transforms, and it would double-correct the built-in
+  leaf under a viewBox. Only a leaf whose layout size deliberately
+  differs from the target (supersampling) needs `handlersFor`, fed the
+  layout size the app itself set.
+- Hover (enter/leave) reacts to pointer MOTION only: a mesh animating
+  under a still pointer fires nothing until the next move - the same
+  limit the element hit test has (hit-test-per-frame is an open platform
+  item). Do not poll pick() per frame to fake it.
+- Geometry local bounds cache on the Geometry (like its GPU buffers):
+  geometry is immutable after creation. Mutating `vertices` after a mesh
+  used them leaves stale bounds AND a stale GPU buffer - make a new
+  Geometry instead.
+- The background covers the whole target with depth off, drawn first: it
+  REPLACES the clearColor visually (the clear still runs; you just never
+  see it), and a `transparent: true` mesh blends over it in-pass since the
+  background is always entry zero.
+- The background pipeline/program are SCENE-OWNED (unlike shared
+  material pipelines): setBackground(null), replacement, and dispose()
+  destroy them. Do not hand the background's pipeline to anything else.

package/README.md

@@ -51,10 +51,23 @@ Three's `Euler` default, and `getRotation(node)` reads one back. The
 verbs: `quatFromAxisAngle`, `quatMultiply`, and `quatSlerp` (smooth
 tracking, damped follows) round out `quatFromTo`; `examples/aim.tsx`
 shows each aiming style live.
+
+Meshes take pointer events like elements do: `onPointerDown/Move/Up/
+Enter/Leave` props on `<Mesh>` and `<Group>`, with bubbling, capture on
+drag, and hover enter/leave pairs - hit testing runs over a BVH the
+scene maintains incrementally, so events put no ceiling on scene size.
+Underneath sit `scene.pick(x, y)` (the camera ray through a pixel,
+`project()`'s inverse) and `scene.raycast(origin, direction)`; hits are
+bounding-box accurate in v1. A scene also takes a `background` - fragment
+GLSL drawn inside its own pass behind the meshes, replacing the stacked
+backdrop-texture pattern.
 Custom materials get a standard uniform set - per-mesh `uModel`/`uNormal`,
-shared `uViewProj`/`uCamPos`, each written once per change - plus your own
-uniforms per mesh, declaratively via the `params` prop on `<Mesh>` or
-imperatively via `setMeshParams` - and
+shared `uViewProj`/`uCamPos`/`uCamRight`/`uCamUp`, each written once per
+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
 `@solidrt/3d/glsl` exports the lighting pieces (hemisphere, lambert,
 blinn, fresnel, a standard vertex stage) to compose your own lit looks
 from plain template literals.
@@ -67,8 +80,9 @@ mitred joints, flat `shape`, with `fillet`/`roundRect`/`triangulate`
 helpers), a per-vertex data channel
 (`withColors` adds an `aColor` vec4 - tint, baked AO, any four scalars -
 to any geometry, for materials that read it), one perspective camera
-with an orbit control (`createOrbitCamera`: drag, pinch/wheel zoom, auto-orbit).
-Lights, transparency, model loading and picking are
+with an orbit control (`createOrbitCamera`: drag, pinch/wheel zoom, auto-orbit),
+mesh picking with pointer events, and scene backgrounds.
+Lights, transparency and model loading are
 staged next - see `okf/research/scene-graph-3d.md` for the roadmap. Full
 usage notes and traps: [AGENTS.md](AGENTS.md); runnable examples:
 [examples/](examples/).

package/examples/README.md

@@ -15,3 +15,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.
+- `pick.tsx` - mesh pointer events: hover tints (enter/leave), click
+  pops (down), a Group hearing its children's clicks through bubbling
+  and one mesh stopping the walk; a STATIC scene rendered only when an
+  event changes something, with hit testing over the scene's BVH.
+- `scene-background.tsx` - a fragment-GLSL background drawn inside the
+  scene's own pass (`<Scene background>`): one target, no stacked
+  backdrop texture, no resize plumbing; the source is shader-target
+  compatible verbatim.

package/examples/pick.tsx

@@ -0,0 +1,98 @@
+// Mesh pointer events: hover to tint (enter/leave), click to pop (down),
+// with a Group seeing its children's clicks through bubbling and one mesh
+// stopping the walk. The scene is STATIC - no onFrame - so it renders only
+// when an event changes something: picking is demand-driven like
+// everything else. Events flow because the built-in <Scene> leaf carries
+// scene.handlers (default on); hit testing runs over the scene's BVH, so a
+// pointer move costs O(log meshes).
+//
+// The volume tier is honest about its shape: hits test each mesh's
+// bounding box, so hovering just outside the ball's silhouette (inside its
+// box corners) still counts. Triangle-accurate hits are a later tier.
+
+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")
+let popped = new Set<object>()
+
+/** A pickable mesh: unlit color that brightens on hover, scale-pop on
+ * click. setMeshParams writes raw uniform values, so the tint premultiplies
+ * here (alpha 1: the rgb passes through). */
+function Pickable(p: { name: string; color: Color; geometry: Geometry; position: Vec3; scale?: number; stop?: boolean }) {
+  let lift = (up: number): [number, number, number, number] => [
+    Math.min(p.color[0] + up, 1),
+    Math.min(p.color[1] + up, 1),
+    Math.min(p.color[2] + up, 1),
+    1,
+  ]
+  return (
+    <Mesh
+      geometry={p.geometry}
+      material={unlit({ color: p.color })}
+      position={p.position}
+      scale={p.scale}
+      onPointerEnter={(e: ScenePointerEvent) => {
+        setHovered(p.name)
+        setMeshParams(e.mesh, { uColor: lift(0.25) })
+        console.log(`enter ${p.name}`)
+      }}
+      onPointerLeave={(e: ScenePointerEvent) => {
+        setHovered("nothing")
+        setMeshParams(e.mesh, { uColor: lift(0) })
+        console.log(`leave ${p.name}`)
+      }}
+      onPointerDown={(e: ScenePointerEvent) => {
+        let pop = !popped.has(e.mesh)
+        if (pop) popped.add(e.mesh)
+        else popped.delete(e.mesh)
+        setTransform(e.mesh, { scale: pop ? (p.scale ?? 1) * 1.25 : (p.scale ?? 1) })
+        let pt = e.point!
+        console.log(`down ${p.name} at ${pt[0].toFixed(2)},${pt[1].toFixed(2)},${pt[2].toFixed(2)} d=${e.distance!.toFixed(2)}`)
+        // The cone demonstrates stopping the bubble: its group never hears it.
+        if (p.stop) e.stopPropagation()
+      }}
+    />
+  )
+}
+
+function App() {
+  let floor = plane(8, 8, "floor")
+  let crate = box()
+  let ball = sphere(0.45)
+  let spike = cone(0.45, 1)
+  let ring = torus(0.4, 0.14)
+
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)} viewBox={[SIZE, SIZE]}>
+        <Scene width={SIZE} height={SIZE} 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. */}
+          <Group onPointerDown={() => console.log("group saw down")}>
+            <Pickable name="crate" color={[0.85, 0.3, 0.3]} geometry={crate} position={[-1.6, 0.4, 0]} scale={0.8} />
+            <Pickable name="cone" color={[0.35, 0.65, 0.9]} geometry={spike} position={[1.6, 0.5, 0]} stop />
+          </Group>
+          <Pickable name="ball" color={[0.9, 0.8, 0.35]} geometry={ball} position={[0, 0.45, 0]} />
+          <Pickable name="ring" color={[0.5, 0.85, 0.5]} geometry={ring} position={[0.9, 0.35, -1.6]} />
+        </Scene>
+        <view position="absolute" x={0} y={0} padding={16} gap={4}>
+          <text color="#eef4ff" fontSize={22} fontWeight={700}>
+            {`hover: ${hovered()}`}
+          </text>
+          <text color="#8fa6c8" fontSize={13}>
+            hover tints, click pops - a static scene, rendered only on change
+          </text>
+        </view>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/examples/scene-background.tsx

@@ -0,0 +1,43 @@
+// A scene background: fragment GLSL drawn as the first entry of the
+// scene's own pass - no second target, no stacked texture layers, no
+// resize plumbing. The source below uses only the shader-target contract
+// (vUV, iResolution, fragColor), so it would work unchanged in
+// createShaderTexture; here it costs nothing extra - the one scene pass
+// paints backdrop and meshes together, and a static scene still renders
+// zero passes when idle.
+
+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() {
+    float d = distance(vUV, vec2(0.5, 0.35));
+    vec3 near = vec3(0.10, 0.13, 0.22);
+    vec3 far = vec3(0.02, 0.03, 0.06);
+    vec3 col = mix(near, far, smoothstep(0.05, 0.9, d));
+    float n = fract(sin(dot(vUV * iResolution, vec2(12.9898, 78.233))) * 43758.5453);
+    col += (n - 0.5) * 0.012;
+    fragColor = vec4(col, 1.0);
+  }
+`
+
+function App() {
+  return (
+    <window>
+      <view width={pct(100)} height={pct(100)} viewBox={[SIZE, SIZE]}>
+        <Scene width={SIZE} height={SIZE} background={BACKDROP} label="backdrop-demo">
+          <PerspectiveCamera fov={55} position={[0, 1.8, 4.4]} lookAt={[0, 0.4, 0]} />
+          <Mesh geometry={torusKnot(0.7, 0.2, 128, 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} />
+          <Mesh geometry={sphere(0.4)} material={unlit({ color: [0.4, 0.75, 0.45] })} position={[1.5, 0.4, -0.5]} />
+        </Scene>
+      </view>
+    </window>
+  )
+}
+
+render(() => <App />)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.48",
+  "version": "0.0.50",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -16,7 +16,7 @@
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.31",
-    "@solidrt/core": "0.0.48"
+    "@solidjs/signals": "2.0.0-rc.0",
+    "@solidrt/core": "0.0.50"
   }
 }