@jgengine/shell 0.18.1 → 0.21.0

package/dist/audio/synthEngine.js

@@ -7,48 +7,90 @@ export function createNoiseBuffer(ctx) {
         data[i] = Math.random() * 2 - 1;
     return buf;
 }
-function realizeTone(ctx, out, voice, cueGain, at) {
+function realizeTone(ctx, out, voice, cueGain, at, ended) {
     const t = at + (voice.delay ?? 0);
     const peak = (voice.gain ?? 1) * cueGain;
     const attack = voice.attack ?? 0.012;
     const osc = ctx.createOscillator();
-    osc.type = voice.wave ?? "sine";
-    osc.frequency.setValueAtTime(voice.freq, t);
-    if (voice.slideTo !== undefined)
-        osc.frequency.exponentialRampToValueAtTime(Math.max(1, voice.slideTo), t + voice.duration);
-    const sustainEnd = Math.max(attack, voice.sustain ?? 0);
-    const g = ctx.createGain();
-    g.gain.setValueAtTime(0, t);
-    g.gain.linearRampToValueAtTime(peak, t + attack);
-    if (sustainEnd > attack)
-        g.gain.setValueAtTime(peak, t + sustainEnd);
-    g.gain.exponentialRampToValueAtTime(0.001, t + Math.max(voice.duration, sustainEnd + 0.001));
-    osc.connect(g).connect(out);
-    osc.start(t);
-    osc.stop(t + voice.duration + 0.05);
+    const nodes = [];
+    const stop = trackVoice(osc, nodes, ended);
+    try {
+        osc.type = voice.wave ?? "sine";
+        osc.frequency.setValueAtTime(voice.freq, t);
+        if (voice.slideTo !== undefined)
+            osc.frequency.exponentialRampToValueAtTime(Math.max(1, voice.slideTo), t + voice.duration);
+        const sustainEnd = Math.max(attack, voice.sustain ?? 0);
+        const g = ctx.createGain();
+        nodes.push(g);
+        g.gain.setValueAtTime(0, t);
+        g.gain.linearRampToValueAtTime(peak, t + attack);
+        if (sustainEnd > attack)
+            g.gain.setValueAtTime(peak, t + sustainEnd);
+        g.gain.exponentialRampToValueAtTime(0.001, t + Math.max(voice.duration, sustainEnd + 0.001));
+        osc.connect(g).connect(out);
+        osc.start(t);
+        osc.stop(t + voice.duration + 0.05);
+        return stop;
+    }
+    catch (error) {
+        stop();
+        throw error;
+    }
 }
-function realizeNoise(ctx, out, noiseBuf, voice, cueGain, at) {
+function realizeNoise(ctx, out, noiseBuf, voice, cueGain, at, ended) {
     const t = at + (voice.delay ?? 0);
     const peak = (voice.gain ?? 1) * cueGain;
     const decay = voice.decay ?? 0.9;
     const src = ctx.createBufferSource();
-    src.buffer = noiseBuf;
-    src.playbackRate.value = 0.8 + Math.random() * 0.4;
-    // The shared buffer is 1 s and playback starts at a random offset inside it, so any voice longer
-    // than the remainder used to run off the end and go silent early. Wrapping keeps it noise throughout;
-    // the `duration` argument to start() still ends the voice on time.
-    src.loop = true;
-    const filter = ctx.createBiquadFilter();
-    filter.type = voice.filterType ?? "lowpass";
-    filter.frequency.value = voice.filterFreq;
-    const sustain = Math.max(0, voice.sustain ?? 0);
-    const g = ctx.createGain();
-    g.gain.setValueAtTime(peak, t);
-    if (sustain > 0)
-        g.gain.setValueAtTime(peak, t + sustain);
-    g.gain.exponentialRampToValueAtTime(0.001, t + Math.max(voice.duration * decay, sustain + 0.001));
-    src.connect(filter).connect(g).connect(out);
-    src.start(t, Math.random() * 0.5, voice.duration);
+    const nodes = [];
+    const stop = trackVoice(src, nodes, ended);
+    try {
+        src.buffer = noiseBuf;
+        src.playbackRate.value = 0.8 + Math.random() * 0.4;
+        // Loop the shared 1-second buffer so a random offset cannot truncate a longer voice.
+        src.loop = true;
+        const filter = ctx.createBiquadFilter();
+        nodes.push(filter);
+        filter.type = voice.filterType ?? "lowpass";
+        filter.frequency.value = voice.filterFreq;
+        const sustain = Math.max(0, voice.sustain ?? 0);
+        const g = ctx.createGain();
+        nodes.push(g);
+        g.gain.setValueAtTime(peak, t);
+        if (sustain > 0)
+            g.gain.setValueAtTime(peak, t + sustain);
+        g.gain.exponentialRampToValueAtTime(0.001, t + Math.max(voice.duration * decay, sustain + 0.001));
+        src.connect(filter).connect(g).connect(out);
+        src.start(t, Math.random() * 0.5, voice.duration);
+        return stop;
+    }
+    catch (error) {
+        stop();
+        throw error;
+    }
+}
+function trackVoice(source, nodes, ended) {
+    let disposed = false;
+    function cleanup() {
+        if (disposed)
+            return;
+        disposed = true;
+        source.onended = null;
+        source.disconnect();
+        for (const node of nodes)
+            node.disconnect();
+        ended();
+    }
+    source.onended = cleanup;
+    return () => {
+        if (disposed)
+            return;
+        try {
+            source.stop();
+        }
+        catch { }
+        cleanup();
+    };
 }
 /**
  * Realise a procedural cue on Web Audio: every voice is scheduled at
@@ -58,10 +100,33 @@ function realizeNoise(ctx, out, noiseBuf, voice, cueGain, at) {
 export function realizeSynthPatch(ctx, out, noiseBuf, patch) {
     const cueGain = patch.gain ?? 1;
     const at = ctx.currentTime;
-    for (const voice of patch.voices) {
-        if (voice.kind === "tone")
-            realizeTone(ctx, out, voice, cueGain, at);
-        else
-            realizeNoise(ctx, out, noiseBuf, voice, cueGain, at);
+    let remaining = patch.voices.length;
+    const callbacks = [];
+    const stops = [];
+    function ended() {
+        remaining -= 1;
+        if (remaining === 0)
+            for (const callback of callbacks.splice(0))
+                callback();
+    }
+    try {
+        for (const voice of patch.voices) {
+            stops.push(voice.kind === "tone"
+                ? realizeTone(ctx, out, voice, cueGain, at, ended)
+                : realizeNoise(ctx, out, noiseBuf, voice, cueGain, at, ended));
+        }
     }
+    catch (error) {
+        for (const stop of stops)
+            stop();
+        throw error;
+    }
+    return {
+        stop() { for (const stop of stops)
+            stop(); },
+        onEnded(callback) { if (remaining === 0)
+            callback();
+        else
+            callbacks.push(callback); },
+    };
 }

package/dist/camera/GameCameraRig.js

@@ -5,10 +5,11 @@ import { GameFirstPersonCamera } from "./GameFirstPersonCamera.js";
 import { GameInspectionCamera } from "./GameInspectionCamera.js";
 import { GameOrbitCamera } from "./GameOrbitCamera.js";
 import { resolveDirectedCamera } from "./rigMath.js";
-import { resolveRigKind, turntableAsObserver } from "./rigResolve.js";
+import { resolveRigKind, resolveRuntimeCameraConfig, turntableAsObserver } from "./rigResolve.js";
 import { CameraShakeContext, createCameraShakeChannel } from "./shakeChannel.js";
 export { resolveRigKind } from "./rigResolve.js";
 export function GameCameraRig({ yawRef, pitchRef, config, onDragChange, pointerControls, panKeysEnabled, director, viewmodel, }) {
+    config = resolveRuntimeCameraConfig(config, director?.rig());
     const channel = useMemo(() => createCameraShakeChannel(config?.shake?.decayPerSecond), [config?.shake?.decayPerSecond]);
     const directorVersionRef = useRef(0);
     const subscribeDirector = useCallback((onStoreChange) => {
@@ -37,7 +38,7 @@ export function GameCameraRig({ yawRef, pitchRef, config, onDragChange, pointerC
         const kind = resolveRigKind(config);
         switch (kind) {
             case "first":
-                return (_jsx(GameFirstPersonCamera, { yawRef: yawRef, pitchRef: pitchRef, config: config?.firstPerson, followEntityId: followEntityId ?? undefined, viewmodel: viewmodel }));
+                return (_jsx(GameFirstPersonCamera, { yawRef: yawRef, pitchRef: pitchRef, config: config?.firstPerson, followEntityId: followEntityId ?? undefined, viewmodel: viewmodel, weapon: config?.weapon }));
             case "topDown":
                 return _jsx(TopDownRig, { yawRef: yawRef, pitchRef: pitchRef, config: config, followEntityId: followEntityId });
             case "rts":

package/dist/camera/GameFirstPersonCamera.d.ts

@@ -1,9 +1,9 @@
 import { type ComponentType, type MutableRefObject } from "react";
 import * as THREE from "three";
-import type { FirstPersonCameraConfig } from "@jgengine/core/game/playableGame";
+import type { CameraWeaponView, FirstPersonCameraConfig } from "@jgengine/core/game/playableGame";
 import type { EntityRenderCues } from "@jgengine/core/combat/renderCues";
-/** World position of the first-person weapon muzzle, or false when no viewmodel is mounted. */
-export declare function readFirstPersonMuzzle(target: THREE.Vector3): boolean;
+/** Presentation muzzle in world space; camera-scoped when supplied, false leaves target unchanged. */
+export declare function readFirstPersonMuzzle(target: THREE.Vector3, camera?: THREE.Camera): boolean;
 /** Props handed to a custom viewmodel component (#542): a live cue ref (velocity/bob/firing/reloading/recoil/hit) for the followed entity, driven from your own `useFrame` — read `cuesRef.current` there rather than storing it as render state. */
 export interface ViewmodelProps {
     cuesRef: MutableRefObject<EntityRenderCues>;
@@ -15,5 +15,7 @@ export interface GameFirstPersonCameraProps {
     followEntityId?: string;
     /** Custom viewmodel component replacing the built-in three-mesh gun, rendered inside the same camera-locked, muzzle-tracked anchor. Ignored when `config.viewmodel === false`. */
     viewmodel?: ComponentType<ViewmodelProps>;
+    /** Held-weapon source (`GameCameraConfig.weapon`): poses the viewmodel and adds recoil to the look. */
+    weapon?: (entityId: string) => CameraWeaponView | null;
 }
-export declare function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId, viewmodel, }: GameFirstPersonCameraProps): import("react").JSX.Element | null;
+export declare function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId, viewmodel, weapon, }: GameFirstPersonCameraProps): import("react").JSX.Element | null;

package/dist/camera/GameFirstPersonCamera.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import * as THREE from "three";
 import { DEFAULT_EYE_HEIGHT } from "@jgengine/core/combat/shotOrigin";
+import { createWeaponPresentation, viewmodelFovScale, } from "@jgengine/core/combat/weaponPresentation";
 import { useGameContext } from "@jgengine/react/provider";
 import { usePlayer } from "@jgengine/react/hooks";
 import { useEntityRenderCues } from "../render/useEntityRenderCues.js";
 import { usePlayerFov } from "./PlayerFov.js";
 import { GAME_SIM_FRAME_PRIORITY, ORBIT_CAMERA_FRAME_PRIORITY } from "./orbitCameraMath.js";
+import { requestRawPointerLock } from "../input/pointerLock.js";
+import { readRegisteredFirstPersonMuzzle, registerTrackedFirstPersonMuzzle } from "./customMuzzle.js";
 const DEFAULT_SENSITIVITY = 0.0025;
 const DEFAULT_MAX_PITCH = 1.45;
 const VIEWMODEL_ORIGIN = new THREE.Vector3(0.34, -0.26, -0.72);
 const MUZZLE_TIP_LOCAL = new THREE.Vector3(0, 0.03, -0.61);
-const MUZZLE_OFFSET = VIEWMODEL_ORIGIN.clone().add(MUZZLE_TIP_LOCAL);
-const muzzleWorld = new THREE.Vector3();
-let muzzleTracked = false;
-/** World position of the first-person weapon muzzle, or false when no viewmodel is mounted. */
-export function readFirstPersonMuzzle(target) {
-    if (!muzzleTracked)
-        return false;
-    target.copy(muzzleWorld);
-    return true;
+/** Presentation muzzle in world space; camera-scoped when supplied, false leaves target unchanged. */
+export function readFirstPersonMuzzle(target, camera) {
+    return readRegisteredFirstPersonMuzzle(target, camera);
 }
-export function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId, viewmodel, }) {
+export function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId, viewmodel, weapon, }) {
     const eyeHeight = config?.eyeHeight ?? DEFAULT_EYE_HEIGHT;
     const sensitivity = config?.sensitivity ?? DEFAULT_SENSITIVITY;
     const maxPitch = config?.maxPitch ?? DEFAULT_MAX_PITCH;
@@ -34,12 +31,16 @@ export function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId
     const followId = followEntityId ?? userId;
     const seededRef = useRef(false);
     const cuesRef = useEntityRenderCues(followId);
+    const presentation = useMemo(() => createWeaponPresentation(), []);
+    const tuningRef = useRef(undefined);
+    const lastLookRef = useRef(null);
+    const poseRef = useRef(null);
     useEffect(() => {
         const requestLock = () => {
             if (window.matchMedia?.("(pointer: coarse)").matches)
                 return;
             if (document.pointerLockElement !== domElement)
-                void domElement.requestPointerLock?.();
+                requestRawPointerLock(domElement);
         };
         const onMove = (event) => {
             if (document.pointerLockElement !== domElement)
@@ -54,7 +55,7 @@ export function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId
             window.removeEventListener("mousemove", onMove);
         };
     }, [domElement, sensitivity, maxPitch, yawRef, pitchRef]);
-    useFrame(() => {
+    useFrame((_, dt) => {
         const entity = ctx.scene.entity.get(followId);
         if (entity === null)
             return;
@@ -62,37 +63,77 @@ export function GameFirstPersonCamera({ yawRef, pitchRef, config, followEntityId
             seededRef.current = true;
             yawRef.current = entity.rotationY;
         }
-        const cosPitch = Math.cos(pitchRef.current);
+        const view = weapon?.(followId) ?? null;
+        const last = (lastLookRef.current ??= { yaw: yawRef.current, pitch: pitchRef.current });
+        const step = Math.max(1e-4, dt);
+        let pose = null;
+        if (view !== null) {
+            if (view.presentation !== tuningRef.current) {
+                tuningRef.current = view.presentation;
+                presentation.retune(view.presentation ?? {});
+            }
+            pose = presentation.update(dt, {
+                lookYawRate: (yawRef.current - last.yaw) / step,
+                lookPitchRate: (pitchRef.current - last.pitch) / step,
+                speed: cuesRef.current.speed,
+                bobPhase: cuesRef.current.bobPhase,
+                handling: view.handling,
+            });
+        }
+        last.yaw = yawRef.current;
+        last.pitch = pitchRef.current;
+        poseRef.current = pose;
+        const yaw = yawRef.current - (pose?.lookYaw ?? 0);
+        const pitch = Math.max(-maxPitch, Math.min(maxPitch, pitchRef.current + (pose?.lookPitch ?? 0)));
+        const cosPitch = Math.cos(pitch);
         camera.position.set(entity.position[0], entity.position[1] + eyeHeight, entity.position[2]);
-        camera.lookAt(camera.position.x + Math.sin(yawRef.current) * cosPitch, camera.position.y + Math.sin(pitchRef.current), camera.position.z + Math.cos(yawRef.current) * cosPitch);
+        camera.lookAt(camera.position.x + Math.sin(yaw) * cosPitch, camera.position.y + Math.sin(pitch), camera.position.z + Math.cos(yaw) * cosPitch);
         if (camera.isPerspectiveCamera === true) {
             const perspective = camera;
-            if (Math.abs(perspective.fov - playerFov.fov) > 0.001) {
-                perspective.fov = playerFov.fov;
+            const fov = playerFov.fov * (pose?.fovScale ?? 1);
+            if (Math.abs(perspective.fov - fov) > 0.001) {
+                perspective.fov = fov;
                 perspective.updateProjectionMatrix();
             }
         }
     }, ORBIT_CAMERA_FRAME_PRIORITY);
     if (config?.viewmodel === false)
         return null;
-    return _jsx(FirstPersonViewmodel, { camera: camera, viewmodel: viewmodel, cuesRef: cuesRef });
+    return _jsx(FirstPersonViewmodel, { camera: camera, viewmodel: viewmodel, cuesRef: cuesRef, poseRef: poseRef });
 }
-function FirstPersonViewmodel({ camera, viewmodel: Viewmodel, cuesRef, }) {
+function FirstPersonViewmodel({ camera, viewmodel: Viewmodel, cuesRef, poseRef, }) {
     const groupRef = useRef(null);
-    useEffect(() => () => {
-        muzzleTracked = false;
-    }, []);
+    const muzzleWorld = useRef(new THREE.Vector3());
+    const muzzleTracked = useRef(false);
+    useEffect(() => {
+        muzzleTracked.current = false;
+        return registerTrackedFirstPersonMuzzle(camera, (target) => {
+            if (!muzzleTracked.current)
+                return false;
+            target.copy(muzzleWorld.current);
+            return true;
+        });
+    }, [camera]);
     useFrame(() => {
         const group = groupRef.current;
         if (group === null)
             return;
+        const pose = poseRef.current;
+        const perspective = camera;
+        // Scaling camera-space x/y by this projects the viewmodel at its own FOV without a second render pass.
+        const squash = pose?.viewmodelFov == null || perspective.isPerspectiveCamera !== true ? 1 : viewmodelFovScale(perspective.fov, pose.viewmodelFov);
         group.position.copy(camera.position);
         group.quaternion.copy(camera.quaternion);
-        group.translateX(VIEWMODEL_ORIGIN.x);
-        group.translateY(VIEWMODEL_ORIGIN.y);
-        group.translateZ(VIEWMODEL_ORIGIN.z);
-        muzzleWorld.copy(MUZZLE_OFFSET).applyQuaternion(camera.quaternion).add(camera.position);
-        muzzleTracked = true;
+        group.translateX((pose?.offset[0] ?? VIEWMODEL_ORIGIN.x) * squash);
+        group.translateY((pose?.offset[1] ?? VIEWMODEL_ORIGIN.y) * squash);
+        group.translateZ(pose?.offset[2] ?? VIEWMODEL_ORIGIN.z);
+        group.rotateX(pose?.pitch ?? 0);
+        group.rotateY(pose?.yaw ?? 0);
+        group.rotateZ(pose?.roll ?? 0);
+        group.scale.set(squash, squash, 1);
+        group.updateMatrixWorld();
+        group.localToWorld(muzzleWorld.current.copy(MUZZLE_TIP_LOCAL));
+        muzzleTracked.current = true;
     }, GAME_SIM_FRAME_PRIORITY);
     if (Viewmodel !== undefined) {
         return (_jsx("group", { ref: groupRef, children: _jsx(Viewmodel, { cuesRef: cuesRef }) }));

package/dist/camera/Viewports.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import type { GameCameraConfig } from "@jgengine/core/game/playableGame";
+import { type ViewportDef, type ViewportsConfig } from "@jgengine/core/game/viewports";
+import type { GameContext } from "@jgengine/core/runtime/gameContext";
+import { type LocalPlayerSlot } from "@jgengine/core/runtime/localPlayers";
+/** Camera yaw the split-screen renderer last used for a seat's user, so the walk controller moves that seat camera-relative. @internal */
+export declare function seatCameraYaw(ctx: GameContext, userId: string): number | undefined;
+/**
+ * The viewports for the seats currently joined, re-resolved when a seat joins or leaves.
+ * @internal
+ */
+export declare function useSeatViewports(ctx: GameContext, config: ViewportsConfig | undefined): readonly ViewportDef[];
+/**
+ * Draws one scissored render per viewport. The primary seat keeps the main camera and its rig; every
+ * other seat gets a follow camera (chase or top-down) on its possessed entity. Mounted only while more
+ * than one viewport is drawn, since a render-priority frame callback takes over R3F's own render.
+ * @internal
+ */
+export declare function SplitScreenRenderer({ ctx, viewports, config, mainCamera, }: {
+    ctx: GameContext;
+    viewports: readonly ViewportDef[];
+    config: ViewportsConfig | undefined;
+    mainCamera: GameCameraConfig | undefined;
+}): null;
+/**
+ * One absolutely-positioned HUD root per viewport, laid over the canvas: render each seat's own
+ * health, prompts or score with `children(slot)`. Pass the same `viewports` config the game gave `defineGame`.
+ * @capability split-screen-hud Per-seat HUD roots positioned over each split-screen viewport.
+ */
+export declare function ViewportHuds({ ctx, config, children, }: {
+    ctx: GameContext;
+    config?: ViewportsConfig;
+    children: (slot: LocalPlayerSlot, viewport: ViewportDef) => ReactNode;
+}): import("react").JSX.Element;

package/dist/camera/Viewports.js

@@ -0,0 +1,123 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useMemo, useRef, useSyncExternalStore } from "react";
+import * as THREE from "three";
+import { resolveViewports, viewportPixels, } from "@jgengine/core/game/viewports";
+import { localPlayers } from "@jgengine/core/runtime/localPlayers";
+import { createChaseRigState, resolveChase, resolveTopDown, stepChase, topDownPose } from "./rigMath.js";
+const SEAT_YAW = new WeakMap();
+/** Camera yaw the split-screen renderer last used for a seat's user, so the walk controller moves that seat camera-relative. @internal */
+export function seatCameraYaw(ctx, userId) {
+    return SEAT_YAW.get(ctx)?.get(userId);
+}
+function seatSlotIds(ctx) {
+    return localPlayers(ctx).slots().map((slot) => slot.slotId);
+}
+/**
+ * The viewports for the seats currently joined, re-resolved when a seat joins or leaves.
+ * @internal
+ */
+export function useSeatViewports(ctx, config) {
+    const seats = localPlayers(ctx);
+    const key = useSyncExternalStore(seats.subscribe, () => seatSlotIds(ctx).join("|"), () => seatSlotIds(ctx).join("|"));
+    return useMemo(() => resolveViewports(config, key === "" ? [] : key.split("|")), [config, key]);
+}
+function seatRigKind(camera, main) {
+    return camera?.rig ?? (main?.rig === "topDown" ? "topDown" : "chase");
+}
+/**
+ * Draws one scissored render per viewport. The primary seat keeps the main camera and its rig; every
+ * other seat gets a follow camera (chase or top-down) on its possessed entity. Mounted only while more
+ * than one viewport is drawn, since a render-priority frame callback takes over R3F's own render.
+ * @internal
+ */
+export function SplitScreenRenderer({ ctx, viewports, config, mainCamera, }) {
+    const gl = useThree((state) => state.gl);
+    const scene = useThree((state) => state.scene);
+    const camera = useThree((state) => state.camera);
+    const size = useThree((state) => state.size);
+    const rigs = useRef(new Map());
+    useFrame((_state, dt) => {
+        const seats = localPlayers(ctx);
+        let yaws = SEAT_YAW.get(ctx);
+        if (yaws === undefined) {
+            yaws = new Map();
+            SEAT_YAW.set(ctx, yaws);
+        }
+        gl.setScissorTest(true);
+        for (const def of viewports) {
+            const slot = seats.slot(def.slot);
+            if (slot === null)
+                continue;
+            const pixels = viewportPixels(def.rect, size.width, size.height);
+            const view = slot.index === 0 ? camera : seatCamera(slot, def.camera ?? config?.camera, dt, yaws);
+            if (view instanceof THREE.PerspectiveCamera) {
+                view.aspect = pixels.width / pixels.height;
+                view.updateProjectionMatrix();
+            }
+            gl.setViewport(pixels.x, pixels.y, pixels.width, pixels.height);
+            gl.setScissor(pixels.x, pixels.y, pixels.width, pixels.height);
+            gl.render(scene, view);
+        }
+        gl.setScissorTest(false);
+        gl.setViewport(0, 0, size.width, size.height);
+        if (camera instanceof THREE.PerspectiveCamera) {
+            camera.aspect = size.width / size.height;
+            camera.updateProjectionMatrix();
+        }
+    }, 1);
+    function seatCamera(slot, cameraConfig, dt, yaws) {
+        let rig = rigs.current.get(slot.slotId);
+        if (rig === undefined) {
+            const created = new THREE.PerspectiveCamera();
+            if (camera instanceof THREE.PerspectiveCamera) {
+                created.near = camera.near;
+                created.far = camera.far;
+            }
+            rig = { camera: created, chase: createChaseRigState() };
+            rigs.current.set(slot.slotId, rig);
+        }
+        const entity = ctx.scene.entity.get(ctx.player.possession.active(slot.userId));
+        const follow = entity === null ? { x: 0, y: 0, z: 0 } : { x: entity.position[0], y: entity.position[1], z: entity.position[2] };
+        let pose;
+        if (seatRigKind(cameraConfig, mainCamera) === "topDown") {
+            const resolved = resolveTopDown(cameraConfig?.topDown ?? mainCamera?.topDown);
+            pose = topDownPose(follow, resolved, rig.camera.fov);
+            yaws.set(slot.userId, resolved.yaw);
+        }
+        else {
+            const velocity = entity?.velocity;
+            const step = stepChase(rig.chase, {
+                follow,
+                yaw: entity?.rotationY ?? 0,
+                bodyPitch: entity?.rotationX ?? 0,
+                velocity: velocity === undefined ? null : { x: velocity[0], y: velocity[1], z: velocity[2] },
+                lookBack: false,
+                fovKick: 0,
+            }, resolveChase(cameraConfig?.chase ?? mainCamera?.chase), dt);
+            pose = step.pose;
+            yaws.set(slot.userId, step.anchorYaw);
+        }
+        rig.camera.position.set(pose.position.x, pose.position.y, pose.position.z);
+        rig.camera.fov = pose.fov;
+        rig.camera.lookAt(pose.lookAt.x, pose.lookAt.y, pose.lookAt.z);
+        return rig.camera;
+    }
+    return null;
+}
+/**
+ * One absolutely-positioned HUD root per viewport, laid over the canvas: render each seat's own
+ * health, prompts or score with `children(slot)`. Pass the same `viewports` config the game gave `defineGame`.
+ * @capability split-screen-hud Per-seat HUD roots positioned over each split-screen viewport.
+ */
+export function ViewportHuds({ ctx, config, children, }) {
+    const viewports = useSeatViewports(ctx, config);
+    const seats = localPlayers(ctx);
+    return (_jsx(_Fragment, { children: viewports.map((viewport) => {
+            const slot = seats.slot(viewport.slot);
+            if (slot === null)
+                return null;
+            const [x, y, width, height] = viewport.rect;
+            return (_jsx("div", { "data-jg-viewport": viewport.slot, className: "pointer-events-none absolute overflow-hidden", style: { left: `${x * 100}%`, top: `${y * 100}%`, width: `${width * 100}%`, height: `${height * 100}%` }, children: children(slot, viewport) }, viewport.slot));
+        }) }));
+}