cozyclay 1.0.0

package/src/controls.jsx

@@ -0,0 +1,245 @@
+import { useEffect, useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+
+const MOVE_SPEED = 2.6; // metres per second
+const CRANE_SPEED = 1.3; // Q/E up/down runs at half walk speed — fine
+// vertical adjustments while posing need the finer step, not a 2.6 m/s jump
+const LOOK_SENS = 0.0032; // radians per pixel
+const ORBIT_SENS = 0.006; // radians per pixel, a touch faster than looking
+const PAN_SENS = 0.0022; // metres per pixel at 1 m of pivot distance
+const DOLLY_STEP = 0.0016; // metres per wheel unit
+const PITCH_LIMIT = (85 * Math.PI) / 180;
+const BOOST = 2.6; // Shift during a fly
+const MIN_ORBIT_RADIUS = 0.6;
+
+/** yaw/pitch -> unit forward vector for a YXZ-ordered camera */
+export function forwardFrom(yaw, pitch) {
+	return new THREE.Vector3(-Math.sin(yaw) * Math.cos(pitch), Math.sin(pitch), -Math.cos(yaw) * Math.cos(pitch));
+}
+
+/** point a camera at a target and return the matching yaw/pitch */
+export function aimAt(position, target) {
+	const dx = target.x - position.x;
+	const dy = target.y - position.y;
+	const dz = target.z - position.z;
+	return {
+		yaw: Math.atan2(-dx, -dz),
+		pitch: Math.atan2(dy, Math.max(Math.hypot(dx, dz), 1e-6)),
+	};
+}
+
+/**
+ * Viewport navigation, on Unity's bindings.
+ *
+ * The left button belongs to the CONTENT — selecting and dragging gizmo
+ * handles — and the camera lives on the other buttons. That split is the whole
+ * point: while the left button was also "look around", every press had two
+ * possible meanings and the tool had to guess, which is why W/E/R could not be
+ * the transform hotkeys and why grabbing an object also swung the view.
+ *
+ *   right-drag            look around (flythrough)
+ *   right-held + WASD/QE  walk and crane, live ONLY during the flythrough
+ *   right-held + Shift    faster
+ *   right-held + wheel    change the fly speed instead of dollying
+ *   middle-drag           pan
+ *   Alt + left-drag       orbit the pivot the caller supplies (the selection)
+ *   wheel                 dolly
+ *
+ * `getPivot()` is optional and returns a world point to orbit; without one,
+ * Alt-drag orbits a point straight ahead of the lens.
+ */
+export function FlyControls({ enabled, camRef, look, getPivot, onFlyStateChange }) {
+	const { gl } = useThree();
+	const keys = useRef(new Set());
+	const gesture = useRef(null); // { kind: "fly" | "pan" | "orbit", pointerId, x, y, ... }
+	const speedScale = useRef(1);
+	const flyStateRef = useRef(onFlyStateChange);
+	flyStateRef.current = onFlyStateChange;
+	const pivotRef = useRef(getPivot);
+	pivotRef.current = getPivot;
+
+	useEffect(() => {
+		if (!enabled) return undefined;
+		const element = gl.domElement;
+		element.tabIndex = 0;
+		element.style.touchAction = "none";
+
+		const isTyping = () => {
+			const el = document.activeElement;
+			return !!el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT");
+		};
+
+		/* Physical key positions, not characters: `e.key` follows the OS input
+		 * method, so in Hangul IME mode pressing W yields "ㅈ" and every
+		 * camera key goes dead — the exact "WASD is blocked" failure Korean
+		 * users hit. `e.code` is layout/IME independent. */
+		const KEY_BY_CODE = { KeyW: "w", KeyA: "a", KeyS: "s", KeyD: "d", KeyQ: "q", KeyE: "e", ShiftLeft: "shift", ShiftRight: "shift" };
+		const onKeyDown = (e) => {
+			if (isTyping()) return;
+			// Movement keys are live only while the flythrough button is held.
+			// Outside a fly they are tool hotkeys and belong to the app.
+			if (gesture.current?.kind !== "fly") return;
+			const key = KEY_BY_CODE[e.code];
+			if (key) {
+				keys.current.add(key);
+				e.preventDefault();
+			}
+		};
+		const onKeyUp = (e) => {
+			const key = KEY_BY_CODE[e.code];
+			if (key) keys.current.delete(key);
+		};
+
+		const endGesture = (e) => {
+			const active = gesture.current;
+			if (!active) return;
+			if (e && active.pointerId !== undefined && element.hasPointerCapture(active.pointerId)) {
+				element.releasePointerCapture(active.pointerId);
+			}
+			gesture.current = null;
+			keys.current.clear();
+			// the fly speed set with the wheel persists between flights, as it does in Unity
+			element.style.cursor = "";
+			flyStateRef.current?.(false);
+		};
+
+		const onPointerDown = (e) => {
+			if (gesture.current) return;
+			const orbit = e.button === 0 && e.altKey;
+			const kind = e.button === 2 ? "fly" : e.button === 1 ? "pan" : orbit ? "orbit" : null;
+			if (!kind) return;
+			e.preventDefault();
+			// Alt-drag and middle-drag must not reach the gizmo picker either;
+			// the picker only claims plain left presses, so this is belt and
+			// braces for the middle button's browser autoscroll.
+			e.stopPropagation();
+			const cam = camRef.current;
+			const pivot = kind === "orbit" && cam ? resolvePivot(cam) : null;
+			gesture.current = { kind, pointerId: e.pointerId, x: e.clientX, y: e.clientY, pivot };
+			element.setPointerCapture(e.pointerId);
+			element.focus();
+			element.style.cursor = kind === "fly" ? "crosshair" : kind === "pan" ? "grabbing" : "move";
+			if (kind === "fly") flyStateRef.current?.(true);
+		};
+
+		/** the point Alt-drag turns around: the caller's selection, or a point
+		 * a few metres down the lens when there is nothing selected */
+		const resolvePivot = (cam) => {
+			const supplied = pivotRef.current?.();
+			if (supplied) return new THREE.Vector3(supplied.x, supplied.y, supplied.z);
+			return cam.position.clone().addScaledVector(forwardFrom(look.current.yaw, look.current.pitch), 3);
+		};
+
+		const onPointerMove = (e) => {
+			const active = gesture.current;
+			if (!active) return;
+			const dx = e.clientX - active.x;
+			const dy = e.clientY - active.y;
+			active.x = e.clientX;
+			active.y = e.clientY;
+			const cam = camRef.current;
+			if (!cam) return;
+
+			if (active.kind === "fly") {
+				look.current.yaw -= dx * LOOK_SENS;
+				look.current.pitch -= dy * LOOK_SENS;
+				look.current.pitch = THREE.MathUtils.clamp(look.current.pitch, -PITCH_LIMIT, PITCH_LIMIT);
+				return;
+			}
+			if (active.kind === "pan") {
+				// Slide the camera across its own image plane, scaled by how far
+				// away the subject is so panning feels the same at any distance.
+				const distance = Math.max(cam.position.distanceTo(resolvePivot(cam)), 1);
+				const right = new THREE.Vector3(Math.cos(look.current.yaw), 0, -Math.sin(look.current.yaw));
+				const up = new THREE.Vector3(0, 1, 0);
+				cam.position.addScaledVector(right, -dx * PAN_SENS * distance);
+				cam.position.addScaledVector(up, dy * PAN_SENS * distance);
+				cam.position.y = Math.max(cam.position.y, 0.12);
+				return;
+			}
+			// orbit: swing the camera around the pivot, then re-aim at it so the
+			// yaw/pitch the rest of the app reads stays the truth
+			const pivot = active.pivot ?? resolvePivot(cam);
+			const offset = cam.position.clone().sub(pivot);
+			const radius = Math.max(offset.length(), MIN_ORBIT_RADIUS);
+			const spherical = new THREE.Spherical().setFromVector3(offset);
+			spherical.radius = radius;
+			spherical.theta -= dx * ORBIT_SENS;
+			spherical.phi = THREE.MathUtils.clamp(spherical.phi + dy * ORBIT_SENS, 0.08, Math.PI - 0.08);
+			cam.position.copy(pivot).add(new THREE.Vector3().setFromSpherical(spherical));
+			cam.position.y = Math.max(cam.position.y, 0.12);
+			const angles = aimAt(cam.position, pivot);
+			look.current.yaw = angles.yaw;
+			look.current.pitch = angles.pitch;
+		};
+
+		const onWheel = (e) => {
+			const cam = camRef.current;
+			if (!cam) return;
+			e.preventDefault();
+			if (gesture.current?.kind === "fly") {
+				// Unity: the wheel sets the flythrough speed, it does not dolly.
+				speedScale.current = THREE.MathUtils.clamp(speedScale.current * (e.deltaY > 0 ? 0.9 : 1.1), 0.15, 6);
+				return;
+			}
+			cam.position.addScaledVector(forwardFrom(look.current.yaw, look.current.pitch), -e.deltaY * DOLLY_STEP);
+		};
+
+		// A right-drag is navigation, so the browser menu must not interrupt it.
+		const onContextMenu = (e) => e.preventDefault();
+
+		window.addEventListener("keydown", onKeyDown);
+		window.addEventListener("keyup", onKeyUp);
+		element.addEventListener("pointerdown", onPointerDown);
+		element.addEventListener("pointermove", onPointerMove);
+		element.addEventListener("pointerup", endGesture);
+		element.addEventListener("pointercancel", endGesture);
+		element.addEventListener("lostpointercapture", endGesture);
+		element.addEventListener("contextmenu", onContextMenu);
+		element.addEventListener("wheel", onWheel, { passive: false });
+		// Alt-tabbing away mid-fly must not leave keys stuck down.
+		window.addEventListener("blur", endGesture);
+		return () => {
+			keys.current.clear();
+			gesture.current = null;
+			flyStateRef.current?.(false);
+			window.removeEventListener("keydown", onKeyDown);
+			window.removeEventListener("keyup", onKeyUp);
+			element.removeEventListener("pointerdown", onPointerDown);
+			element.removeEventListener("pointermove", onPointerMove);
+			element.removeEventListener("pointerup", endGesture);
+			element.removeEventListener("pointercancel", endGesture);
+			element.removeEventListener("lostpointercapture", endGesture);
+			element.removeEventListener("contextmenu", onContextMenu);
+			element.removeEventListener("wheel", onWheel);
+			window.removeEventListener("blur", endGesture);
+		};
+	}, [enabled, gl, camRef, look]);
+
+	useFrame((_, delta) => {
+		const cam = camRef.current;
+		if (!cam) return;
+		cam.rotation.order = "YXZ";
+		cam.rotation.y = look.current.yaw;
+		cam.rotation.x = look.current.pitch;
+		cam.rotation.z = 0;
+
+		if (!enabled || keys.current.size === 0) return;
+		const boost = keys.current.has("shift") ? BOOST : 1;
+		const step = MOVE_SPEED * speedScale.current * boost * Math.min(delta, 0.1);
+		// walking stays on the floor plane; Q/E is the crane
+		const forward = new THREE.Vector3(-Math.sin(look.current.yaw), 0, -Math.cos(look.current.yaw));
+		const right = new THREE.Vector3(Math.cos(look.current.yaw), 0, -Math.sin(look.current.yaw));
+		if (keys.current.has("w")) cam.position.addScaledVector(forward, step);
+		if (keys.current.has("s")) cam.position.addScaledVector(forward, -step);
+		if (keys.current.has("d")) cam.position.addScaledVector(right, step);
+		if (keys.current.has("a")) cam.position.addScaledVector(right, -step);
+		const crane = CRANE_SPEED * speedScale.current * boost * Math.min(delta, 0.1);
+		if (keys.current.has("e")) cam.position.y += crane;
+		if (keys.current.has("q")) cam.position.y -= crane;
+		cam.position.y = Math.max(cam.position.y, 0.12);
+	});
+
+	return null;
+}

package/src/dualview.jsx

@@ -0,0 +1,305 @@
+import { useEffect, useMemo } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+
+/**
+ * Two live viewports out of one scene.
+ *
+ * Blocking a shot means moving the camera and watching the frame change. Doing
+ * that through a view toggle costs a round trip per nudge, so both views render
+ * every frame into scissored regions of the same canvas. One scene, one WebGL
+ * context, two cameras — cloning the scene would double the FBX cost for a
+ * picture that is only ever a monitor.
+ */
+
+/** the plan pucks/wedge: overlay geometry only the top-down camera may see */
+export const PLAN_LAYER = 2;
+/** the ceiling: it would fill the entire top-down view, so hide it from the plan */
+export const SHOT_LAYER = 3;
+/** IK handles/gizmo: only the poser camera (the IK working view) sees them,
+ * never the frozen shot camera in the inset or the plan. */
+export const POSER_LAYER = 4;
+/** the scene-object transform gizmo: live in both 3D working views, stripped
+ * from the plan and from exported frames (the capture rig drops this layer). */
+export const GIZMO_LAYER = 5;
+/** the shot camera is locked to the export aspect no matter which pane holds it */
+export const SHOT_ASPECT = 16 / 9;
+/** half-height of the plan frustum, in metres — covers the full camera throw */
+export const PLAN_EXTENT = 12.4;
+
+const EDGE_VERTEX = `
+	varying vec2 vUv;
+	void main() {
+		vUv = uv;
+		gl_Position = vec4(position.xy, 0.0, 1.0);
+	}
+`;
+
+const EDGE_FRAGMENT = `
+	uniform sampler2D tNormal;
+	uniform sampler2D tDepth;
+	uniform vec2 texel;
+	uniform vec3 edgeColor;
+	uniform float cameraNear;
+	uniform float cameraFar;
+	uniform float orthographic;
+	varying vec2 vUv;
+
+	float linearDepth(float value) {
+		if (orthographic > 0.5) return mix(cameraNear, cameraFar, value);
+		float z = value * 2.0 - 1.0;
+		return (2.0 * cameraNear * cameraFar) /
+			(cameraFar + cameraNear - z * (cameraFar - cameraNear));
+	}
+
+	void main() {
+		vec2 x = vec2(texel.x * 0.8, 0.0);
+		vec2 y = vec2(0.0, texel.y * 0.8);
+		float centerZ = linearDepth(texture2D(tDepth, vUv).x);
+		float nearestZ = min(
+			min(linearDepth(texture2D(tDepth, vUv - x).x), linearDepth(texture2D(tDepth, vUv + x).x)),
+			min(linearDepth(texture2D(tDepth, vUv - y).x), linearDepth(texture2D(tDepth, vUv + y).x))
+		);
+		float foregroundOwner = 1.0 - step(nearestZ + max(0.002, centerZ * 0.0015), centerZ);
+		float dTL = log2(1.0 + linearDepth(texture2D(tDepth, vUv - x + y).x));
+		float dT  = log2(1.0 + linearDepth(texture2D(tDepth, vUv + y).x));
+		float dTR = log2(1.0 + linearDepth(texture2D(tDepth, vUv + x + y).x));
+		float dL  = log2(1.0 + linearDepth(texture2D(tDepth, vUv - x).x));
+		float dR  = log2(1.0 + linearDepth(texture2D(tDepth, vUv + x).x));
+		float dBL = log2(1.0 + linearDepth(texture2D(tDepth, vUv - x - y).x));
+		float dB  = log2(1.0 + linearDepth(texture2D(tDepth, vUv - y).x));
+		float dBR = log2(1.0 + linearDepth(texture2D(tDepth, vUv + x - y).x));
+		float depthX = dTL + 2.0 * dL + dBL - dTR - 2.0 * dR - dBR;
+		float depthY = dTL + 2.0 * dT + dTR - dBL - 2.0 * dB - dBR;
+		float depthEdge = length(vec2(depthX, depthY));
+
+		vec3 nTL = texture2D(tNormal, vUv - x + y).xyz * 2.0 - 1.0;
+		vec3 nT  = texture2D(tNormal, vUv + y).xyz * 2.0 - 1.0;
+		vec3 nTR = texture2D(tNormal, vUv + x + y).xyz * 2.0 - 1.0;
+		vec3 nL  = texture2D(tNormal, vUv - x).xyz * 2.0 - 1.0;
+		vec3 nR  = texture2D(tNormal, vUv + x).xyz * 2.0 - 1.0;
+		vec3 nBL = texture2D(tNormal, vUv - x - y).xyz * 2.0 - 1.0;
+		vec3 nB  = texture2D(tNormal, vUv - y).xyz * 2.0 - 1.0;
+		vec3 nBR = texture2D(tNormal, vUv + x - y).xyz * 2.0 - 1.0;
+		vec3 normalX = nTL + 2.0 * nL + nBL - nTR - 2.0 * nR - nBR;
+		vec3 normalY = nTL + 2.0 * nT + nTR - nBL - 2.0 * nB - nBR;
+		float normalEdge = sqrt(dot(normalX, normalX) + dot(normalY, normalY));
+
+		float depthLine = smoothstep(0.055, 0.16, depthEdge);
+		float normalLine = smoothstep(0.7, 1.7, normalEdge);
+		float edge = max(depthLine * foregroundOwner, normalLine * 0.68);
+		gl_FragColor = vec4(edgeColor, edge * 0.76);
+	}
+`;
+
+/** largest centred sub-rect of `rect` with the given aspect */
+export function fitAspect(rect, aspect) {
+	let w = rect.w;
+	let h = w / aspect;
+	if (h > rect.h) {
+		h = rect.h;
+		w = h * aspect;
+	}
+	return { x: rect.x + (rect.w - w) / 2, y: rect.y + (rect.h - h) / 2, w, h };
+}
+
+export function DualRender({ stageRef, mainRef, insetRef, shotCamRef, planCamRef, poserCamRef, ikMode = false, planIsMain, playMode = false, insetCollapsed = false, planZoom = 1 }) {
+	const invalidate = useThree((state) => state.invalidate);
+	// Demand mode draws nothing by itself: the first frame can land before the
+	// layout settles (the inset reads 0x0), and async scene content commits
+	// later. Force frames on mount and after the DOM has caught up.
+	useEffect(() => {
+		invalidate();
+		const f1 = requestAnimationFrame(invalidate);
+		const f2 = requestAnimationFrame(() => requestAnimationFrame(invalidate));
+		return () => {
+			cancelAnimationFrame(f1);
+			cancelAnimationFrame(f2);
+		};
+	}, [invalidate]);
+	const { gl, scene, size } = useThree();
+	const edgePass = useMemo(() => {
+		const target = new THREE.WebGLRenderTarget(1, 1, {
+			depthBuffer: true,
+			stencilBuffer: false,
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter,
+		});
+		target.depthTexture = new THREE.DepthTexture(1, 1, THREE.UnsignedIntType);
+		target.depthTexture.minFilter = THREE.NearestFilter;
+		target.depthTexture.magFilter = THREE.NearestFilter;
+		const normalMaterial = new THREE.MeshNormalMaterial({
+			blending: THREE.NoBlending,
+			side: THREE.DoubleSide,
+		});
+		const material = new THREE.ShaderMaterial({
+			vertexShader: EDGE_VERTEX,
+			fragmentShader: EDGE_FRAGMENT,
+			transparent: true,
+			depthTest: false,
+			depthWrite: false,
+			toneMapped: false,
+			uniforms: {
+				tNormal: { value: target.texture },
+				tDepth: { value: target.depthTexture },
+				texel: { value: new THREE.Vector2(1, 1) },
+				edgeColor: { value: new THREE.Color("#243b4d") },
+				cameraNear: { value: 0.1 },
+				cameraFar: { value: 100 },
+				orthographic: { value: 0 },
+			},
+		});
+		const passScene = new THREE.Scene();
+		const passCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		passScene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material));
+		return { target, normalMaterial, material, passScene, passCamera };
+	}, []);
+
+	useEffect(() => () => {
+		edgePass.target.dispose();
+		edgePass.normalMaterial.dispose();
+		edgePass.material.dispose();
+		edgePass.passScene.children[0].geometry.dispose();
+	}, [edgePass]);
+
+	// Layer masks are set once. The shot camera must never pick up the plan
+	// overlay, or exported frames would carry pucks across the floor.
+	useEffect(() => {
+		const shot = shotCamRef.current;
+		const plan = planCamRef.current;
+		const poser = poserCamRef?.current;
+		if (shot) {
+			shot.layers.set(0);
+			shot.layers.enable(SHOT_LAYER);
+			shot.layers.enable(GIZMO_LAYER);
+		}
+		if (plan) {
+			plan.layers.set(0);
+			plan.layers.enable(PLAN_LAYER);
+		}
+		if (poser) {
+			poser.layers.set(0);
+			poser.layers.enable(SHOT_LAYER);
+			poser.layers.enable(POSER_LAYER);
+			poser.layers.enable(GIZMO_LAYER);
+		}
+	});
+
+	// priority 1 takes over the render loop; R3F stops auto-rendering for us
+	useFrame(() => {
+		const shotCam = shotCamRef.current;
+		const planCam = planCamRef.current;
+		const poserCam = poserCamRef?.current;
+		const stage = stageRef.current;
+		if (!shotCam || !planCam || !stage || !mainRef.current || !insetRef.current) return;
+
+		const base = stage.getBoundingClientRect();
+		const rectOf = (el) => {
+			const r = el.getBoundingClientRect();
+			return { x: r.left - base.left, y: r.top - base.top, w: r.width, h: r.height };
+		};
+		const mainRect = rectOf(mainRef.current);
+		// A collapsed inset is just its tag pill: skip the whole inset pass
+		// instead of drawing a squished viewport into it.
+		const insetRect = insetCollapsed ? { x: 0, y: 0, w: 0, h: 0 } : rectOf(insetRef.current);
+		if (mainRect.w < 2 || (!playMode && !insetCollapsed && insetRect.w < 2)) return;
+
+		const planPane = planIsMain ? mainRect : insetRect;
+		const shotPane = planIsMain ? insetRect : mainRect;
+
+		// scissor bounds the clear, viewport bounds the image: letterbox bars in
+		// the shot pane get painted with the scene background instead of leaking
+		// whatever was underneath.
+		const draw = (camera, pane, imageRect, ink = true) => {
+			const glY = size.height - (pane.y + pane.h);
+			gl.setScissorTest(true);
+			gl.setScissor(pane.x, glY, pane.w, pane.h);
+			const img = imageRect ?? pane;
+			const imgY = size.height - (img.y + img.h);
+			if (ink) {
+				const targetWidth = Math.max(1, Math.round(img.w * gl.getPixelRatio()));
+				const targetHeight = Math.max(1, Math.round(img.h * gl.getPixelRatio()));
+				edgePass.target.setSize(targetWidth, targetHeight);
+				edgePass.material.uniforms.texel.value.set(1 / targetWidth, 1 / targetHeight);
+				gl.setRenderTarget(edgePass.target);
+				gl.setScissorTest(false);
+				gl.setClearColor(0x000000, 0);
+				gl.clear(true, true, false);
+				scene.overrideMaterial = edgePass.normalMaterial;
+				// Editor chrome (grid, gizmo, pins) takes no ink: the override
+				// material ignores per-material depthWrite opt-outs, and a
+				// stylised outline on UI reads as set dressing. Mask restored
+				// exactly, so plan/poser cameras keep their own layer sets.
+				const inkMask = camera.layers.mask;
+				camera.layers.disable(GIZMO_LAYER);
+				gl.render(scene, camera);
+				camera.layers.mask = inkMask;
+				scene.overrideMaterial = null;
+			}
+			gl.setRenderTarget(null);
+			gl.setScissorTest(true);
+			gl.setScissor(pane.x, glY, pane.w, pane.h);
+			gl.setViewport(img.x, imgY, img.w, img.h);
+			gl.render(scene, camera);
+			if (ink) {
+				const uniforms = edgePass.material.uniforms;
+				uniforms.cameraNear.value = camera.near;
+				uniforms.cameraFar.value = camera.far;
+				uniforms.orthographic.value = camera.isOrthographicCamera ? 1 : 0;
+				gl.autoClear = false;
+				gl.render(edgePass.passScene, edgePass.passCamera);
+				gl.autoClear = true;
+			}
+		};
+
+		gl.autoClear = true;
+		shotCam.aspect = SHOT_ASPECT;
+		shotCam.updateProjectionMatrix();
+		// An orthographic plan keeps every puck the same size and the floor
+		// undistorted; a perspective one skews the pucks near the edges and reads
+		// as a 3/4 view rather than a plan.
+		if (planCam.isOrthographicCamera) {
+			// planZoom is the Top-View's camera height: larger zoom = smaller
+			// extent = the pucks draw bigger.
+			const extent = PLAN_EXTENT / Math.max(0.25, planZoom);
+			const a = planPane.w / planPane.h;
+			planCam.top = extent;
+			planCam.bottom = -extent;
+			planCam.left = -extent * a;
+			planCam.right = extent * a;
+		} else {
+			planCam.aspect = planPane.w / planPane.h;
+		}
+		planCam.updateProjectionMatrix();
+
+		if (playMode) {
+			// PlayView (Unity Game view): the shot camera owns the whole pane —
+			// no plan inset, no editing chrome, just the framed output. Editor
+			// furniture (selection cage, gizmo, grid, pins) lives on
+			// GIZMO_LAYER and is dropped for this draw, mask restored after.
+			const playMask = shotCam.layers.mask;
+			shotCam.layers.disable(GIZMO_LAYER);
+			draw(shotCam, mainRect, fitAspect(mainRect, SHOT_ASPECT));
+			shotCam.layers.mask = playMask;
+		} else if (ikMode && poserCam) {
+			// IK mode: the main pane is the poser working view (free navigation,
+			// handle layer visible); the inset is the FROZEN shot camera — the
+			// separate camera-placement screen the framing lives on.
+			poserCam.aspect = mainRect.w / mainRect.h;
+			poserCam.updateProjectionMatrix();
+			draw(poserCam, mainRect);
+			if (!insetCollapsed) draw(shotCam, insetRect, fitAspect(insetRect, SHOT_ASPECT));
+		} else if (planIsMain) {
+			draw(planCam, planPane, null, false);
+			if (!insetCollapsed) draw(shotCam, shotPane, fitAspect(shotPane, SHOT_ASPECT));
+		} else {
+			draw(shotCam, shotPane, fitAspect(shotPane, SHOT_ASPECT));
+			if (!insetCollapsed) draw(planCam, planPane, null, false);
+		}
+
+		gl.setScissorTest(false);
+		gl.setViewport(0, 0, size.width, size.height);
+	}, 1);
+
+	return null;
+}

package/src/hierarchy-model.js

@@ -0,0 +1,77 @@
+export const HIERARCHY_NODES = [
+	{
+		id: "shot",
+		label: "SHOT 01",
+		kind: "shot",
+		children: [
+			{ id: "camera", label: "Camera", kind: "camera" },
+			{
+				id: "characters",
+				label: "Characters",
+				kind: "group",
+				children: [
+					{
+						id: "characterA",
+						label: "Character 1",
+						kind: "character",
+						children: [
+							{ id: "characterA.character", label: "Character", kind: "character" },
+							{
+								id: "characterA.motion",
+								label: "Motion",
+								kind: "motion",
+								children: [
+									{ id: "characterA.baseMotion", label: "Base Motion", kind: "clip" },
+									{ id: "characterA.promptBlocks", label: "Prompt Blocks", kind: "prompt" },
+									{ id: "characterA.ik", label: "IK Corrections", kind: "key" },
+								],
+							},
+							{
+								id: "characterA.rig",
+								label: "Rig",
+								kind: "rig",
+								children: [
+									{ id: "rig.hips", label: "Root / Hips", kind: "bone" },
+									{ id: "rig.spine", label: "Spine", kind: "bone" },
+									{ id: "rig.leftArm", label: "Left Arm", kind: "bone" },
+									{ id: "rig.rightArm", label: "Right Arm", kind: "bone" },
+									{ id: "rig.leftLeg", label: "Left Leg", kind: "bone" },
+									{ id: "rig.rightLeg", label: "Right Leg", kind: "bone" },
+								],
+							},
+						],
+					},
+					{
+						id: "characterB",
+						label: "Character 2",
+						kind: "character",
+						optional: "showB",
+						children: [
+							{ id: "characterB.character", label: "Character", kind: "character" },
+						],
+					},
+				],
+			},
+			{ id: "rootPath", label: "Root Path", kind: "path" },
+			{ id: "environment", label: "Environment", kind: "environment" },
+			{ id: "props", label: "Props", kind: "props" },
+		],
+	},
+];
+
+export function buildHierarchyNodes(sceneObjects = []) {
+	const clone = (node) => {
+		const next = { ...node };
+		if (node.id === "props") {
+			next.children = sceneObjects.map((object) => ({
+				id: `object:${object.id}`,
+				label: object.name,
+				kind: "object",
+			}));
+		} else if (node.children) {
+			next.children = node.children.map(clone);
+		}
+		return next;
+	};
+	return HIERARCHY_NODES.map(clone);
+}