@solidrt/3d 0.0.51 → 0.0.52

package/examples/sweep-paths.tsx

@@ -3,13 +3,12 @@
 // over the crate's edges like real webbing - while smooth-tagged points
 // share averaged normals, so the helix sweeps into ONE continuous coil
 // (per-segment boxes with unmitred gaps are exactly what this replaces).
-// tube() is the round-profile shorthand. Lit materials on purpose:
+// tube() is the round-profile shorthand. lit() materials on purpose:
 // creased vs smooth joints differ only in normals, which unlit color
 // would hide.
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
-import { box, Group, Mesh, PerspectiveCamera, plane, roundRect, Scene, shaderMaterial, sweep, tube, unlit } from "@solidrt/3d"
+import { box, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, roundRect, Scene, sweep, tube, unlit } from "@solidrt/3d"
 import type { SweepPath } from "@solidrt/3d"
-import { HEMISPHERE, LAMBERT, LIT_VERTEX } from "@solidrt/3d/glsl"
 
 const SIZE = 720
 
@@ -17,23 +16,6 @@ function App() {
   let [spin, setSpin] = createSignal(0)
   onFrame(tick => setSpin(tick / 4000))
 
-  // One hemisphere + lambert look per color (a material instance is the
-  // pipeline handle, so each look is created once and shared).
-  let lit = (r: number, g: number, b: number) =>
-    shaderMaterial({
-      vertex: LIT_VERTEX,
-      fragment: `
-        in vec3 vNormal;
-        ${HEMISPHERE}
-        ${LAMBERT}
-        void main() {
-          vec3 n = normalize(vNormal);
-          vec3 l = normalize(vec3(0.5, 0.8, 0.4));
-          vec3 base = vec3(${r}, ${g}, ${b});
-          fragColor = vec4(base * (hemisphere(n, vec3(0.45), vec3(0.22)) + 0.8 * lambert(n, l)), 1.0);
-        }`,
-    })
-
   // The strap hugs the crate at half its thickness; every bend is a bare
   // (sharp) point, so each fold creases exactly on a crate edge.
   let o = 0.013
@@ -45,7 +27,7 @@ function App() {
     [-0.3 + o, o, 0],
     [0.15, o, 0],
   ]
-  let strap = sweep(roundRect(0.3, 0.026, 0.008), strapPath, "strap")
+  let strap = sweep(roundRect(0.3, 0.026, 0.008), strapPath, { label: "strap" })
 
   // A smooth-tagged helix: one continuous tube, not a stack of segments.
   let coilPath: SweepPath = []
@@ -53,22 +35,24 @@ function App() {
     let a = (i / 60) * Math.PI * 5
     coilPath.push({ p: [0.85 + Math.cos(a) * 0.35, 0.055 + i * 0.0095, Math.sin(a) * 0.35], smooth: true })
   }
-  let coil = tube(coilPath, 0.05, 12, "coil")
+  let coil = tube(coilPath, { radius: 0.05, radialSegments: 12, label: "coil" })
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} viewBox={[SIZE, SIZE]}>
+      <view width={pct(100)} height={pct(100)} designSize={[SIZE, SIZE]}>
         <Scene width={SIZE} height={SIZE} clearColor={[0.07, 0.07, 0.1, 1]} label="sweep-paths">
           <PerspectiveCamera fov={55} position={[0, 1.9, 3.9]} lookAt={[0, 0.35, 0]} />
+          <HemisphereLight sky={[0.45, 0.45, 0.45]} ground={[0.22, 0.22, 0.22]} />
+          <DirectionalLight direction={[-0.5, -0.8, -0.4]} intensity={0.8} />
           <Mesh
-            geometry={plane(6, 6, "floor")}
+            geometry={plane({ width: 6, height: 6, label: "floor" })}
             material={unlit({ color: [0.16, 0.17, 0.22] })}
             rotation={[-Math.PI / 2, 0, 0]}
           />
           <Group rotation={[0, spin(), 0]}>
-            <Mesh geometry={box(1, 0.6, 0.8)} material={lit(0.55, 0.42, 0.28)} position={[-0.8, 0.3, 0]} />
-            <Mesh geometry={strap} material={lit(0.9, 0.55, 0.2)} />
-            <Mesh geometry={coil} material={lit(0.45, 0.6, 0.8)} />
+            <Mesh geometry={box({ width: 1, height: 0.6, depth: 0.8 })} material={lit({ color: [0.55, 0.42, 0.28] })} position={[-0.8, 0.3, 0]} />
+            <Mesh geometry={strap} material={lit({ color: [0.9, 0.55, 0.2] })} />
+            <Mesh geometry={coil} material={lit({ color: [0.45, 0.6, 0.8] })} />
           </Group>
         </Scene>
       </view>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.51",
+  "version": "0.0.52",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -14,10 +14,11 @@
   "files": [
     "src/",
     "examples/",
+    "demos/",
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.0",
-    "@solidrt/core": "0.0.51"
+    "@solidjs/signals": "2.0.0-rc.1",
+    "@solidrt/core": "0.0.52"
   }
 }

package/src/components.tsx

@@ -10,15 +10,20 @@ import { createContext, createEffect, onCleanup, untrack, useContext } from "@so
 import type { Element, ParentComponent, TextureId, VoidComponent } from "@solidrt/core"
 import {
   add,
+  createDirectionalLight,
   createGroup,
+  createHemisphereLight,
   createInstancedMesh,
   createMesh,
   createScene,
+  createSprite,
   disposeInstances,
   remove,
   setGeometry,
   setInstanceCount,
   setInstances,
+  setLight,
+  setCastShadow,
   setMaterial,
   setMeshParams,
   setRenderOrder,
@@ -26,7 +31,7 @@ import {
   setVisible,
 } from "./scene.ts"
 import type { ShaderParams } from "@solidrt/core/gpu"
-import type { InstancedMesh as InstancedMeshNode, Mesh as MeshNode, Scene as SceneHandle, SceneNode, ScenePointerEvent } from "./scene.ts"
+import type { DirectionalLight as DirectionalLightNode, HemisphereLight as HemisphereLightNode, InstancedMesh as InstancedMeshNode, Mesh as MeshNode, Scene as SceneHandle, SceneNode, ScenePointerEvent, ShadowOptions } from "./scene.ts"
 import type { Geometry } from "./geometry.ts"
 import type { Material } from "./material.ts"
 import type { Quat, Vec3 } from "./math.ts"
@@ -103,6 +108,9 @@ export type SceneProps = {
    * `scene.background = color` is `clearColor` here. */
   background?: string
   label?: string
+  /** Multisample count (1, 2, 4 or 8; default 1): anti-aliased mesh edges.
+   * Fixed at creation. */
+  samples?: 1 | 2 | 4 | 8
   ref?: (scene: SceneHandle) => void
   /**
    * Compose the output yourself: called once (untracked) with the scene's
@@ -131,7 +139,7 @@ export type SceneProps = {
  */
 export let Scene: ParentComponent<SceneProps> = props => {
   let scene = untrack(() =>
-    createScene(props.width, props.height, { clearColor: props.clearColor, label: props.label }),
+    createScene(props.width, props.height, { clearColor: props.clearColor, label: props.label, samples: props.samples }),
   )
   createEffect(
     () => [props.width, props.height] as const,
@@ -186,19 +194,14 @@ export type MeshProps = TransformProps & PointerEventProps & {
   params?: ShaderParams
   /** Explicit draw-order key (setRenderOrder as a prop); default 0. */
   renderOrder?: number
+  /** Draw into the scene's shadow map (setCastShadow as a prop); default
+   * false. Needs a `castShadow` DirectionalLight to show. */
+  castShadow?: boolean
   ref?: (mesh: MeshNode) => void
 }
 
-/** One draw entry: geometry drawn with a material at a transform. */
-export let Mesh: VoidComponent<MeshProps> = props => {
-  let ctx = useContext(SceneContext)
-  let mesh = untrack(() => createMesh(props.geometry, props.material))
-  add(ctx.parent, mesh)
-  createEffect(
-    () => props.geometry,
-    g => setGeometry(mesh, g),
-    { defer: true },
-  )
+// The mesh-side props Mesh and Sprite share (Sprite has no geometry).
+function syncMesh(mesh: MeshNode, props: SpriteProps): void {
   createEffect(
     () => props.material,
     m => setMaterial(mesh, m),
@@ -217,6 +220,43 @@ export let Mesh: VoidComponent<MeshProps> = props => {
   syncNode(mesh, props)
   untrack(() => props.ref)?.(mesh)
   onCleanup(() => remove(mesh))
+}
+
+/** One draw entry: geometry drawn with a material at a transform. */
+export let Mesh: VoidComponent<MeshProps> = props => {
+  let ctx = useContext(SceneContext)
+  let mesh = untrack(() => createMesh(props.geometry, props.material))
+  add(ctx.parent, mesh)
+  createEffect(
+    () => props.geometry,
+    g => setGeometry(mesh, g),
+    { defer: true },
+  )
+  createEffect(
+    () => props.castShadow,
+    c => setCastShadow(mesh, c === true),
+  )
+  syncMesh(mesh, props)
+  return null
+}
+
+export type SpriteProps = TransformProps & PointerEventProps & {
+  /** A `sprite()` material (any material draws, only a sprite one turns). */
+  material: Material
+  /** Per-mesh uniforms, merge semantics - as on Mesh. */
+  params?: ShaderParams
+  /** Explicit draw-order key (setRenderOrder as a prop); default 0. */
+  renderOrder?: number
+  ref?: (mesh: MeshNode) => void
+}
+
+/** A camera-facing unit quad (createSprite as a component): no geometry
+ * prop, `scale` is its world size, rotation is ignored. */
+export let Sprite: VoidComponent<SpriteProps> = props => {
+  let ctx = useContext(SceneContext)
+  let mesh = untrack(() => createSprite(props.material))
+  add(ctx.parent, mesh)
+  syncMesh(mesh, props)
   return null
 }
 
@@ -225,8 +265,8 @@ export type InstancedMeshProps = TransformProps & PointerEventProps & {
   /** Must declare instanceAttributes (shaderMaterialClass). */
   material: Material
   /** Interleaved per-instance records (stride = the material's instance
-   * attributes summed). Reactive, but the buffer's CAPACITY is fixed by the
-   * first value - a later array may hold at most that many records. */
+   * attributes summed). Reactive; a later array larger than the buffer
+   * grows it (capacity doubles into a replacement buffer). */
   records: Float32Array
   /** How many records draw; default all of the latest `records`. */
   count?: number
@@ -312,3 +352,59 @@ export let PerspectiveCamera: VoidComponent<PerspectiveCameraProps> = props => {
   )
   return null
 }
+
+export type HemisphereLightProps = { sky?: Vec3; ground?: Vec3; intensity?: number; ref?: (light: HemisphereLightNode) => void }
+
+/** The scene's ambient term as a node (createHemisphereLight); one per
+ * scene, the last mounted wins. */
+export let HemisphereLight: VoidComponent<HemisphereLightProps> = props => {
+  let ctx = useContext(SceneContext)
+  let light = untrack(() => createHemisphereLight({ sky: props.sky, ground: props.ground, intensity: props.intensity }))
+  add(ctx.parent, light)
+  createEffect(
+    () => [props.sky, props.ground, props.intensity] as const,
+    ([sky, ground, intensity]) => setLight(light, { sky, ground, intensity }),
+  )
+  untrack(() => props.ref)?.(light)
+  onCleanup(() => remove(light))
+  return null
+}
+
+export type DirectionalLightProps = TransformProps & {
+  /** Travel direction in the node's local space; default [0, -1, 0]. */
+  direction?: Vec3
+  color?: Vec3
+  intensity?: number
+  /** Render a shadow map from this light (any directional light may;
+   * each is a pass). Its shadow camera sits at the light's WORLD
+   * position, so give a casting light a `position` above the scene. */
+  castShadow?: boolean
+  /** Shadow-map options (mapSize, bias, normalBias, camera frustum),
+   * merged key by key. */
+  shadow?: ShadowOptions
+  ref?: (light: DirectionalLightNode) => void
+}
+
+/** A directional light node (createDirectionalLight): a parent Group's
+ * rotation turns it; up to MAX_LIGHTS per scene, in mount order. */
+export let DirectionalLight: VoidComponent<DirectionalLightProps> = props => {
+  let ctx = useContext(SceneContext)
+  let light = untrack(() =>
+    createDirectionalLight({
+      direction: props.direction,
+      color: props.color,
+      intensity: props.intensity,
+      castShadow: props.castShadow,
+      shadow: props.shadow,
+    }),
+  )
+  add(ctx.parent, light)
+  syncNode(light, props)
+  createEffect(
+    () => [props.direction, props.color, props.intensity, props.castShadow, props.shadow] as const,
+    ([direction, color, intensity, castShadow, shadow]) => setLight(light, { direction, color, intensity, castShadow, shadow }),
+  )
+  untrack(() => props.ref)?.(light)
+  onCleanup(() => remove(light))
+  return null
+}

package/src/geometry-gpu.ts

@@ -1,6 +1,9 @@
 // Geometry on the GPU: the lazy buffer step for geometry.ts's data. Buffers
-// are created on first acquire and shared by every mesh and scene drawing
-// the geometry; each draw entry holds one reference, and the buffers are
+// (and the picking shape - the spatial core's own copy of positions, UVs
+// and indices for the triangle narrowphase, one per geometry however many
+// meshes share it) are created on first acquire and shared by every mesh
+// and scene drawing the geometry; each draw entry holds one reference, and
+// the buffers are
 // freed when the last reference is released - deferred to a microtask, so
 // a same-tick entry rebuild (a material swap, a geometry that comes right
 // back) keeps its upload. The handles and the reference count live in a
@@ -10,6 +13,9 @@
 
 import { createBuffer, destroyBuffer } from "@solidrt/core/gpu"
 import type { BufferId, IndexFormat } from "@solidrt/core/gpu"
+import { createShape, destroyShape } from "flux:spatial"
+import type { ShapeId } from "flux:spatial"
+import { layoutStride } from "./geometry.ts"
 import type { Geometry } from "./geometry.ts"
 
 /** An acquired reference to a geometry's GPU buffers: what a draw entry
@@ -20,6 +26,8 @@ export type GeometryBuffers = {
   buffer: BufferId
   index: BufferId
   indexFormat: IndexFormat
+  /** The picking shape (positions at 0, uv at 6 of every layout). */
+  shape: ShapeId
 }
 
 type GpuEntry = GeometryBuffers & { geometry: Geometry; refs: number }
@@ -44,6 +52,7 @@ export function acquireGeometryBuffers(geometry: Geometry): GeometryBuffers {
         label: geometry.label ? geometry.label + "-indices" : undefined,
       }),
       indexFormat: geometry.indices instanceof Uint32Array ? "uint32" : "uint16",
+      shape: createShape(geometry.vertices, layoutStride(geometry.layout), 0, 6, geometry.indices),
       refs: 0,
     }
     entries.set(geometry, entry)
@@ -67,6 +76,7 @@ export function releaseGeometryBuffers(acquired: GeometryBuffers): void {
     entries.delete(entry.geometry)
     destroyBuffer(entry.buffer)
     destroyBuffer(entry.index)
+    destroyShape(entry.shape)
   })
 }
 
@@ -83,4 +93,5 @@ export function disposeGeometry(geometry: Geometry): void {
   entries.delete(geometry)
   destroyBuffer(entry.buffer)
   destroyBuffer(entry.index)
+  destroyShape(entry.shape)
 }