@solidrt/3d 0.0.60 → 0.0.62

package/examples/cascades.tsx

@@ -11,9 +11,12 @@
 // tile of the scene's one atlas, so the pass count is unchanged.
 //
 // A click cycles 1..4 cascades (1 = the box, widened over the field).
-// The `cascades` debug command sets the count and the shadow distance
-// (`{ count, distance }`; the range the cascades split, the camera's far
-// by default - pulling it in sharpens every cascade) and `fly` parks the
+// The `cascades` debug command sets the count, the shadow distance and
+// the splits (`{ count, distance, splits }`; the range the cascades
+// split, the camera's far by default - pulling it in sharpens every
+// cascade; `splits` the count - 1 fractions of it, null for the
+// practical split - pulling the first in sharpens the pillars at the
+// camera's feet at the horizon's cost) and `fly` parks the
 // flight (`{ t: seconds }`), so a capture repeats. The field is fogged
 // toward the sky color from FOG_NEAR to FOG_FAR, inside the camera's far
 // plane, so the far pillars sink into the horizon instead of clipping
@@ -38,6 +41,7 @@ const FOG_FAR = 150
 
 let [cascades, setCascades] = createSignal(3)
 let [distance, setDistance] = createSignal<number | null>(null)
+let [splits, setSplits] = createSignal<number[] | null>(null)
 // The flight clock, in seconds; `parked` holds it.
 let [time, setTime] = createSignal(0)
 let parked: number | null = null
@@ -45,8 +49,9 @@ let parked: number | null = null
 registerDebug("cascades", (args?: Record<string, unknown>) => {
   if (typeof args?.count === "number") setCascades(args.count)
   if (typeof args?.distance === "number" || args?.distance === null) setDistance(args.distance)
+  if (Array.isArray(args?.splits) || args?.splits === null) setSplits(args.splits as number[] | null)
   flush()
-  return { cascades: cascades(), distance: distance() }
+  return { cascades: cascades(), distance: distance(), splits: splits() }
 })
 registerDebug("fly", (args?: Record<string, unknown>) => {
   if (typeof args?.t === "number") {
@@ -116,6 +121,7 @@ function App() {
               normalBias: 0.08,
               cascades: cascades(),
               distance: distance(),
+              splits: splits(),
               // The box tier's frustum, when cascades is 1: the whole field.
               camera: { left: -FIELD / 2, right: FIELD / 2, top: FIELD / 2, bottom: -FIELD / 2, near: 1, far: 400 },
             }}

package/examples/pick.tsx

@@ -3,10 +3,12 @@
 // of an orbit drag, so the pop waits for the release), a drag on the
 // crate slides it over the floor and never orbits - its down claims the
 // press, so the orbit control's feed, listening at the root, sees none
-// of it - while a drag anywhere else orbits and a wheel zooms; the ring
-// claims the wheel to spin itself; a tap on empty space un-pops
-// everything (the scene's own onTap with `mesh` null, the deselect
-// idiom). The Group hears the cone's downs through bubbling (the crate's
+// of it - while a drag anywhere else orbits and a wheel zooms toward
+// what is under the cursor (the component's default `anchor="pick"`: the
+// scene under the pointer, else the plane at the target's depth; a
+// double tap glides the pivot to the mesh under it); the ring claims the
+// wheel to spin itself; a tap on empty space un-pops everything (the
+// scene's own onTap with `mesh` null, the deselect idiom). The Group hears the cone's downs through bubbling (the crate's
 // claim stops the walk at the crate). The scene is STATIC - no onFrame - so it renders only when an event changes
 // something, and the orbit runs frames only while it glides; hit testing
 // runs over the scene's BVH, so a pointer move costs O(log meshes).

package/examples/sprites.tsx

@@ -3,7 +3,8 @@
 // billboard modes side by side: "full" glows that stay flat to the screen
 // whatever the camera does, and "fixed-y" trees that only yaw to follow
 // the camera and stay upright as it climbs - the classic upright sprite.
-// The spinning cube is the reference solid; the sprites' `scale` is their
+// Two mapless puffs over the cube use the radial shape instead of a
+// texture. The spinning cube is the reference solid; the sprites' `scale` is their
 // world size, and their (ignored) rotation is never set.
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
 import { createTexture } from "@solidrt/core/gpu"
@@ -59,6 +60,9 @@ function App() {
 
   let glows = sprite({ map: glow(), color: [1, 0.85, 0.5] })
   let trees = sprite({ map: tree(), billboard: "fixed-y" })
+  // The same soft disc with no texture at all: the radial shape, a soft
+  // puff at falloff 2, glowing additively.
+  let puffs = sprite({ shape: "radial", falloff: 2, color: [0.45, 0.7, 1], blend: "add" })
   let ringPositions = Array.from({ length: 8 }, (_, i) => {
     let a = (i / 8) * Math.PI * 2
     return [Math.cos(a) * 1.4, 0.9 + Math.sin(a * 2) * 0.3, Math.sin(a) * 1.4] as [number, number, number]
@@ -84,6 +88,8 @@ function App() {
           <Sprite material={trees} position={[2.4, 0.9, 0.5]} scale={[1.4, 1.8, 1]} />
           <Sprite material={trees} position={[0.8, 0.7, -2.6]} scale={[1, 1.4, 1]} />
           <Sprite material={trees} position={[-1.5, 0.6, 2.2]} scale={[0.9, 1.2, 1]} />
+          <Sprite material={puffs} position={[0, 1.6, 0]} scale={0.9} />
+          <Sprite material={puffs} position={[-0.6, 2.1, 0.4]} scale={0.6} />
         </Scene>
       </view>
     </window>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -8,6 +8,7 @@
   "main": "src/index.ts",
   "exports": {
     ".": "./src/index.ts",
+    "./model": "./src/model-data.ts",
     "./math": "./src/math.ts",
     "./glsl": "./src/glsl.ts"
   },
@@ -18,7 +19,7 @@
     "AGENTS.md"
   ],
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-rc.8",
-    "@solidrt/core": "0.0.60"
+    "@solidjs/signals": "2.0.0-rc.9",
+    "@solidrt/core": "0.0.62"
   }
 }

package/src/components/context.tsx

@@ -3,10 +3,21 @@ import type { Element, PointerFeed } from "@solidrt/core"
 import type { SceneNode } from "../node.ts"
 import type { Scene as SceneHandle } from "../scene.ts"
 import type { CameraState, CameraUpdate } from "../camera.ts"
+import type { Hit, QueryOptions, ScreenRay } from "../scene.ts"
+import type { Vec3 } from "../math.ts"
 
 /** The camera state a camera control drives: the scene, or a view (both
- * expose setCamera, camera() and size()). */
-export type CameraTarget = { setCamera(update: CameraUpdate): void; camera(): CameraState; size(): { width: number; height: number } }
+ * expose setCamera, camera(), size(), and the projection the control
+ * components build their anchor, focus and occlusion hooks from). */
+export type CameraTarget = {
+  setCamera(update: CameraUpdate): void
+  camera(): CameraState
+  size(): { width: number; height: number }
+  pick(x: number, y: number): Hit[]
+  unproject(x: number, y: number, w: number, out?: Vec3): Vec3
+  screenRay(x: number, y: number): ScreenRay
+  raycast(origin: Vec3, direction: Vec3, opts?: QueryOptions): Hit[]
+}
 
 export type SceneCtx = { scene: SceneHandle; parent: SceneNode; viewport: CameraTarget; pointer: PointerFeed | null }
 export let SceneContext = createContext<SceneCtx>()

package/src/components/first-person-camera.tsx

@@ -10,7 +10,7 @@ const MAX_WALK_DT = 0.1
 
 export type FirstPersonCameraProps = FirstPersonCameraOptions & {
   /** The input map driving the control (InputMap.drive): its `look`,
-   * `move` and `rise` actions, or the ones `actions` names. Live: a new
+   * `move`, `rise` and `boost` actions, or the ones `actions` names. Live: a new
    * map reconnects. Without one the control moves only through `ref`. */
   input?: InputMap<any>
   /** Action names per axis when the map's differ (null skips an axis). */

package/src/components/index.ts

@@ -39,6 +39,8 @@ export { OrbitCamera } from "./orbit-camera.tsx"
 export type { OrbitCameraProps } from "./orbit-camera.tsx"
 export { FirstPersonCamera } from "./first-person-camera.tsx"
 export type { FirstPersonCameraProps } from "./first-person-camera.tsx"
+export { Shot, Shots } from "./shots.tsx"
+export type { ShotProps, ShotsProps } from "./shots.tsx"
 export { HemisphereLight } from "./hemisphere-light.tsx"
 export type { HemisphereLightProps } from "./hemisphere-light.tsx"
 export { DirectionalLight } from "./directional-light.tsx"

package/src/components/instanced-mesh.tsx

@@ -6,13 +6,16 @@ import type { TransformProps, PointerEventProps } from "./node-props.ts"
 import { syncMesh } from "./mesh.tsx"
 import type { PopulatedMeshProps } from "./mesh.tsx"
 import { add, destroy, setMorphWeights } from "../node.ts"
-import type { MorphWeights } from "../node.ts"
+import type { MorphWeights, SceneNode } from "../node.ts"
 import { addInstance, createInstancedMesh, disposeInstances, setCastShadow, setGeometry, setInstanceStyle } from "../mesh.ts"
 import type { InstancedMesh as InstancedMeshNode, InstanceNode } from "../mesh.ts"
 import type { Geometry } from "../geometry.ts"
 import type { Material } from "../material.ts"
 
-export type InstancedMeshProps = PopulatedMeshProps & {
+// The mesh's own node is never a hit target (its instances are the
+// leaves that pick, its bounds cull only), so like a Group it bubbles
+// and omits the hover pair.
+export type InstancedMeshProps = Omit<PopulatedMeshProps, "onPointerEnter" | "onPointerLeave"> & {
   geometry: Geometry
   /** An instanced material: a stock one with `instanced` (or
    * `instanceColors`, for a per-instance tint), or a class declaring
@@ -29,6 +32,14 @@ export type InstancedMeshProps = PopulatedMeshProps & {
   bounds?: ArrayLike<number>
   /** Debug label for the record buffers. */
   label?: string
+  /** The node the instance records are relative to (default the mesh;
+   * fixed at creation): an ANCESTOR the mesh sits under at identity, so
+   * `<Instance mesh={...}>` children may live under any node of that
+   * ancestor's subtree instead of inside this element - a population
+   * whose copies ride a hierarchy the mesh is not the root of. Take the
+   * ancestor from its `ref`; the chain between it and the mesh must stay
+   * identity (see createInstancedMesh's `anchor`). */
+  anchor?: SceneNode
   /** Draw into the scene's shadow map (setCastShadow as a prop); default
    * false. The stock instanced materials cast; a custom class needs a
    * `shadowVertex`. */
@@ -52,7 +63,7 @@ export let InstancedMeshContext = createContext<InstancedMeshNode | null>(null)
 export let InstancedMesh: ParentComponent<InstancedMeshProps> = props => {
   let ctx = useContext(SceneContext)
   let mesh = untrack(() =>
-    createInstancedMesh(props.geometry, props.material, { capacity: props.capacity, bounds: props.bounds, label: props.label }),
+    createInstancedMesh(props.geometry, props.material, { capacity: props.capacity, bounds: props.bounds, anchor: props.anchor, label: props.label }),
   )
   add(ctx.parent, mesh)
   createEffect(
@@ -89,6 +100,12 @@ export type InstanceProps = TransformProps & PointerEventProps & {
    * material: by name (keys merge) or every weight in target order; a
    * `weights` entry in `transition` animates each change. */
   morphWeights?: MorphWeights
+  /** The population this instance belongs to when it is NOT nested inside
+   * its `<InstancedMesh>` (fixed at creation): a mesh created with an
+   * `anchor`, whose instances may sit under any node of the anchor's
+   * subtree - take it from the mesh's `ref`. Absent, the enclosing
+   * `<InstancedMesh>` is the population. */
+  mesh?: InstancedMeshNode
   ref?: (instance: InstanceNode) => void
 }
 
@@ -97,12 +114,14 @@ export type InstanceProps = TransformProps & PointerEventProps & {
  * component): a node placed under the nearest `<Group>` or `<Instance>`
  * inside the mesh, with the transform, transition and pointer props of
  * a `<Group>` plus `style`. Children (a `<Mesh>` headlight under a car
- * instance) mount under it. Throws outside an `<InstancedMesh>`.
+ * instance) mount under it. Throws outside an `<InstancedMesh>` unless
+ * `mesh` names one (an anchored population's instance placed elsewhere
+ * in the anchor's subtree).
  */
 export let Instance: ParentComponent<InstanceProps> = props => {
   let ctx = useContext(SceneContext)
-  let mesh = useContext(InstancedMeshContext)
-  if (mesh === null) throw new Error("<Instance> must be inside an <InstancedMesh>")
+  let mesh = untrack(() => props.mesh) ?? useContext(InstancedMeshContext)
+  if (mesh === null) throw new Error("<Instance> must be inside an <InstancedMesh>, or name its population with `mesh`")
   let instance = addInstance(mesh, undefined, ctx.parent)
   syncNode(instance, props)
   createEffect(

package/src/components/lod.tsx

@@ -59,7 +59,9 @@ export let Lod: ParentComponent<LodProps> = props => {
   return <LodContext value={registry}>{provide(ctx, node, props)}</LodContext>
 }
 
-export type InstancedLodProps = PopulatedMeshProps & {
+// Bubbling pointer props only, as InstancedMesh: the group's node is not
+// a hit target.
+export type InstancedLodProps = Omit<PopulatedMeshProps, "onPointerEnter" | "onPointerLeave"> & {
   /** The levels nearest first, each what the population draws at it and
    * the per-instance projected size below which it hands over (see
    * createInstancedLod); fixed at creation. */

package/src/components/orbit-camera.tsx

@@ -1,21 +1,50 @@
 import { createEffect, merge, onFrame, untrack, useContext } from "@solidrt/core"
 import type { InputMap, VoidComponent } from "@solidrt/core"
+import type { Vec2 } from "@solidrt/core/input"
 import { SceneContext } from "./context.tsx"
 import { createOrbitCamera } from "../orbit.ts"
 import type { OrbitAxes, OrbitCamera as OrbitCameraHandle, OrbitCameraOptions } from "../orbit.ts"
+import type { Vec3 } from "../math.ts"
+import type { Mesh } from "../mesh.ts"
 
 // Cap on the frame loop's per-frame dt in seconds, so the first tick after
 // a suspended stretch (a resumed app, a reload) cannot leap the pose.
 const MAX_ORBIT_DT = 0.1
+// Default occlusion radius, world units: the sphere the eye keeps clear
+// of an obstacle (Babylon's collisionRadius is 0.5; a near plane's worth).
+const OCCLUSION_RADIUS = 0.2
 
 export type OrbitCameraProps = OrbitCameraOptions & {
+  /** How the zoom and `focus` map a screen point to the world (the
+   * built-in `zoomAnchor`; a `zoomAnchor` prop overrides it): "pick"
+   * (the default) picks the scene under the point and falls back to the
+   * plane at the target's depth when nothing is hit, "plane" uses that
+   * plane only (cheaper; a scene whose geometry is not what the user
+   * zooms at), false zooms toward the target. */
+  anchor?: "pick" | "plane" | false
+  /** Re-seat the pivot at what the view centre looks at when a drag
+   * begins (the built-in `rotateAnchor`, a pick; a `rotateAnchor` prop
+   * overrides it): Blender's auto-depth. Off by default - a drag orbits
+   * the target as it is, and a double tap (`focus`) re-seats it
+   * explicitly - because a re-seat changes `distance` on every press,
+   * which a viewer reading the pose does not expect. */
+  repivot?: boolean
+  /** The occlusion constraint (the built-in `occluder`): keep the eye
+   * `radius` clear of whatever the scene raycast finds between the
+   * target and the eye - a wall behind a third-person camera. Hits
+   * within `minDistance` of the target are ignored (default: the
+   * radius), so the followed character's own mesh, which the ray starts
+   * inside, does not pull the camera in (Cinemachine's rule); `layers`
+   * and `meshes` filter the query further (scene.raycast's options). */
+  occlusion?: { radius?: number; minDistance?: number; layers?: number; meshes?: Mesh[] }
   /** The input map driving the control (InputMap.drive): its `rotate`,
-   * `zoom` and `pan` actions, or the ones `actions` names. Live: a new
-   * map reconnects. Without one the control moves only through `ref`. */
+   * `zoom`, `pan` and `focus` actions, or the ones `actions` names. Live:
+   * a new map reconnects. Without one the control moves only through
+   * `ref`. */
   input?: InputMap<any>
   /** Action names per axis when the map's differ (null skips an axis). */
   actions?: Partial<Record<keyof OrbitAxes, string | null>>
-  /** The control's handle (pose()/set()/glideTo()/fit()/eye()/
+  /** The control's handle (pose()/set()/glideTo()/fit()/follow()/eye()/
    * orbiting()/active(), the verbs, `axes` - also the debug command
    * shape). */
   ref?: (orbit: OrbitCameraHandle) => void
@@ -30,19 +59,75 @@ export type OrbitCameraProps = OrbitCameraOptions & {
  * (target, azimuth, elevation, distance) are initial values - change the
  * pose at runtime through `ref`'s set() or the verbs; every other prop is
  * live, forwarded to the control as a getter and read where it applies,
- * so a clamp, a rate, `damping` or an anchor callback follows its prop,
- * and a clamp change (`clampPose` included) re-clamps the pose at once.
- * The frame loop runs only while `active()` (auto-orbit on, a glide or
- * damped wheel notch in flight, or an axis rate driving); a camera moved
- * by drags alone leaves the app demand-driven idle.
+ * so a clamp, a rate, `damping`, the follow's zones or an anchor callback
+ * follows its prop, and a clamp change (`clampPose` included) re-clamps
+ * the pose at once. The projection-dependent hooks are built here from
+ * the owner's pick, unproject and raycast (`anchor`, `repivot`,
+ * `occlusion`), since the component sits where the projection is. The frame loop runs only
+ * while `active()` (auto-orbit on, a glide, follow, shake or occlusion
+ * return in flight, or an axis rate driving); a camera moved by drags
+ * alone leaves the app demand-driven idle.
  */
 export let OrbitCamera: VoidComponent<OrbitCameraProps> = props => {
   let ctx = useContext(SceneContext)
+  let viewport = ctx.viewport
+  let mode = () => props.anchor ?? "pick"
+  // The world point under a focal (a fraction of the owner's size): the
+  // nearest pick, else the point on the plane at the target's depth.
+  let pointAt = (focal: Vec2, view: { eye: Vec3; target: Vec3 }): Vec3 | null => {
+    let m = mode()
+    if (m === false) return null
+    let size = viewport.size()
+    let x = focal[0] * size.width
+    let y = focal[1] * size.height
+    if (m === "pick") {
+      let hit = viewport.pick(x, y)[0]
+      if (hit) return hit.point
+    }
+    let depth = Math.hypot(view.target[0] - view.eye[0], view.target[1] - view.eye[1], view.target[2] - view.eye[2])
+    return viewport.unproject(x, y, depth)
+  }
+  let zoomAnchor = (focal: Vec2, view: { eye: Vec3; target: Vec3 }): Vec3 | null => pointAt(focal, view)
+  // The pivot re-seat: what the view centre looks at, a pick.
+  let rotateAnchor = (): Vec3 | null => {
+    if (!props.repivot) return null
+    let size = viewport.size()
+    let hit = viewport.pick(size.width / 2, size.height / 2)[0]
+    return hit ? hit.point : null
+  }
+  let occluder = (target: Vec3, eye: Vec3): number | null => {
+    let o = props.occlusion
+    if (!o) return null
+    let dx = eye[0] - target[0]
+    let dy = eye[1] - target[1]
+    let dz = eye[2] - target[2]
+    let len = Math.hypot(dx, dy, dz)
+    if (!(len > 0)) return null
+    let radius = o.radius ?? OCCLUSION_RADIUS
+    let near = o.minDistance ?? radius
+    for (let hit of viewport.raycast(target, [dx / len, dy / len, dz / len], { layers: o.layers, meshes: o.meshes })) {
+      if (hit.distance < near) continue
+      if (hit.distance >= len) return null
+      return Math.max(hit.distance - radius, 0)
+    }
+    return null
+  }
   // The control keeps this object and reads each option where it applies,
   // so the props go through as getters (merge), never a spread: a spread
-  // would snapshot every prop once and a change could only remount.
-  let options: OrbitCameraOptions = merge(props, {})
-  let orbit = untrack(() => createOrbitCamera(ctx.viewport, options))
+  // would snapshot every prop once and a change could only remount. A
+  // hook prop overrides the built-in one.
+  let options: OrbitCameraOptions = merge(props, {
+    get zoomAnchor() {
+      return props.zoomAnchor ?? zoomAnchor
+    },
+    get rotateAnchor() {
+      return props.rotateAnchor ?? rotateAnchor
+    },
+    get occluder() {
+      return props.occluder ?? occluder
+    },
+  })
+  let orbit = untrack(() => createOrbitCamera(viewport, options))
   createEffect(
     () => props.input,
     input => (input ? input.drive(orbit.axes, untrack(() => props.actions)) : undefined),
@@ -60,16 +145,16 @@ export let OrbitCamera: VoidComponent<OrbitCameraProps> = props => {
       })
     },
   )
-  // A clamp prop change re-clamps the pose at once (set({}) applies the
-  // clamps and pushes, and writes no pose field, so a glide in flight
-  // keeps running) - the update() call a Three OrbitControls app makes
-  // after setting minDistance, done by the prop. Deferred: the creation
-  // already clamped and pushed the initial pose. Untracked: the control
-  // reads the clamps through the getters while it applies them, and the
-  // apply wants the values of that moment (the compute above is what
-  // tracks them).
+  // A clamp or lane prop change re-clamps the pose and pushes at once
+  // (set({}) applies the clamps and the lanes, and writes no pose field,
+  // so a glide in flight keeps running) - the update() call a Three
+  // OrbitControls app makes after setting minDistance, done by the prop.
+  // Deferred: the creation already clamped and pushed the initial pose.
+  // Untracked: the control reads the options through the getters while
+  // it applies them, and the apply wants the values of that moment (the
+  // compute above is what tracks them).
   createEffect(
-    () => [options.minDistance, options.maxDistance, options.minElevation, options.maxElevation, options.clampPose],
+    () => [options.minDistance, options.maxDistance, options.minElevation, options.maxElevation, options.clampPose, options.offset, options.occluder],
     () => untrack(() => orbit.set({})),
     { defer: true },
   )

package/src/components/shots.tsx

@@ -0,0 +1,93 @@
+import { createContext, createEffect, onCleanup, onFrame, untrack, useContext } from "@solidrt/core"
+import type { Element, ParentComponent } from "@solidrt/core"
+import { SceneContext } from "./context.tsx"
+import { createShots } from "../shots.ts"
+import type { ShotsHandle } from "../shots.ts"
+
+// Cap on the blend loop's per-frame dt in seconds, so the first tick
+// after a suspended stretch cannot leap a blend to its end.
+const MAX_BLEND_DT = 0.1
+
+let ShotsContext = createContext<ShotsHandle>()
+
+export type ShotsProps = {
+  /** The default blend time in seconds when the live shot changes
+   * (0.5); 0 cuts. */
+  blend?: number
+  /** The blender's handle (activate/deactivate/live/camera). */
+  ref?: (shots: ShotsHandle) => void
+  children?: Element
+}
+
+export type ShotProps = {
+  name: string
+  /** The enabled shot with the highest priority is live (default 0;
+   * the most recently enabled wins a tie). Read at mount. */
+  priority?: number
+  /** Whether the shot takes part (default true); live: false withdraws
+   * it and the next by priority goes live, blended. */
+  active?: boolean
+  /** This shot's own blend time when it goes live or withdraws
+   * (default: the container's). */
+  blend?: number
+  children?: Element
+}
+
+/**
+ * createShots as a Scene (or View3d) child: owns the enclosing camera
+ * and blends between its `<Shot>` children (Cinemachine's virtual
+ * cameras), each of which provides a context whose `viewport` is the
+ * shot's recording target - so an `<OrbitCamera>` or
+ * `<FirstPersonCamera>` inside a `<Shot>` drives that shot, not the
+ * scene. The blend runs on frames only while one is in flight. A shot's
+ * picks and raycasts (`anchor`, `occlusion`) go through the owner's
+ * actual camera, which is the shot's own only while it is live and at
+ * rest.
+ */
+export let Shots: ParentComponent<ShotsProps> = props => {
+  let ctx = useContext(SceneContext)
+  let shots = untrack(() => createShots(ctx.viewport, { blend: props.blend }))
+  createEffect(
+    () => shots.active(),
+    on => {
+      if (!on) return
+      let last: number | null = null
+      return onFrame(tick => {
+        let now = tick / 1000
+        let dt = last === null ? 0 : Math.min(now - last, MAX_BLEND_DT)
+        last = now
+        shots.update(dt)
+      })
+    },
+  )
+  untrack(() => props.ref)?.(shots)
+  return <ShotsContext value={shots}>{props.children}</ShotsContext>
+}
+
+export let Shot: ParentComponent<ShotProps> = props => {
+  let shots = useContext(ShotsContext)
+  let ctx = useContext(SceneContext)
+  let owner = ctx.viewport
+  let name = untrack(() => props.name)
+  let target = untrack(() => shots.shot(name, { priority: props.priority }))
+  // The shot's context: its own camera, the owner's projection.
+  let viewport = {
+    setCamera: target.setCamera,
+    camera: target.camera,
+    size: () => owner.size(),
+    pick: (x: number, y: number) => owner.pick(x, y),
+    unproject: (x: number, y: number, w: number, out?: [number, number, number]) => owner.unproject(x, y, w, out),
+    screenRay: (x: number, y: number) => owner.screenRay(x, y),
+    raycast: (origin: [number, number, number], direction: [number, number, number], opts?: Parameters<typeof owner.raycast>[2]) => owner.raycast(origin, direction, opts),
+  }
+  createEffect(
+    () => props.active ?? true,
+    on => {
+      let blend = untrack(() => props.blend)
+      if (on) shots.activate(name, { blend })
+      else shots.deactivate(name, { blend })
+    },
+  )
+  onCleanup(() => shots.remove(name, { blend: untrack(() => props.blend) }))
+  return <SceneContext value={{ scene: ctx.scene, parent: ctx.parent, viewport, pointer: ctx.pointer }}>{props.children}</SceneContext>
+}