cozyclay 2.1.1 → 3.0.0

package/src/props.jsx

@@ -5,204 +5,28 @@
  * world" (a car to lean on, to walk past, to frame behind glass) has nothing
  * to work with. These props are built from primitives in the same clay style
  * as the Room and the character tint, so the whole frame stays one
- * consistent maquette. Dimensions are metres against real vehicle sizes so
- * the 1.8 m figure keeps honest scale.
+ * consistent maquette. The hand-built set pieces live in set-pieces.jsx;
+ * practical lights and glow in scene-lights.jsx and object-glow.js.
  */
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { objectTransformAt } from "./object-path.js";
-import { sceneObjectCarryMatrixAt, sceneObjectTravelMatrixAt, travelPose } from "./object-travel.js";
+import { sceneObjectCarryMatrixAt, sceneObjectTravelMatrixAt, trackShown, travelPose } from "./object-travel.js";
 import * as THREE from "three";
 import { GIZMO_LAYER } from "./dualview.jsx";
 import { CUTOUT_KIND, MESH_KIND, EMPTY_KIND, EMPTY_MARKER_SIZE, SCULPT_KIND } from "./scene-objects.js";
 import { buildSculptGroup, disposeSculptGroup } from "./sculpt-geometry.js";
 import { subscribeToAssetTexture } from "./scene-asset-cache.js";
-import { subscribeToMeshScene } from "./scene-mesh-cache.js";
-import { cloneMeshGraph } from "./mesh-graph-clone.js";
+import { ImportedMesh } from "./imported-mesh.jsx";
+import { EffectMarker, EffectsLayer } from "./effects/EffectsLayer.jsx";
+import { EFFECT_KIND } from "./effects/effect-record.js";
 import { applyPoseFade } from "./pose-fade.js";
 import { coplanarDepthRanks } from "./coplanar-depth.js";
-
-const CLAY_CAR = "#d98770";
-const CLAY_CAR_TOP = "#e49a84";
-const CLAY_TIRE = "#41484c";
-const CLAY_RIM = "#7c8588";
-const CLAY_GLASS = "#55697a";
-const CLAY_PLANE = "#7896a4";
-const CLAY_PLANE_TRIM = "#e1a849";
-const CLAY_CHAIR = "#b9855d";
-const CLAY_CHAIR_LIGHT = "#cf9d72";
-
-function Wheel({ position }) {
-	return (
-		<group position={position}>
-			<mesh rotation={[0, 0, Math.PI / 2]}>
-				<cylinderGeometry args={[0.33, 0.33, 0.24, 20]} />
-				<meshStandardMaterial color={CLAY_TIRE} roughness={0.95} />
-			</mesh>
-			<mesh rotation={[0, 0, Math.PI / 2]}>
-				<cylinderGeometry args={[0.17, 0.17, 0.26, 16]} />
-				<meshStandardMaterial color={CLAY_RIM} roughness={0.5} metalness={0.35} />
-			</mesh>
-		</group>
-	);
-}
-/**
- * A generic 5-door-ish sedan silhouette, ~4.5 m long. Origin at the centre
- * of the footprint, +Z forward.
- */
-export function Car({ position = [0, 0, 0], rotY = 0, color = CLAY_CAR, topColor = CLAY_CAR_TOP, autoColor = undefined }) {
-	const bodyMaterial = autoColor
-		? { ...autoFlat(autoColor) }
-		: { color, roughness: 0.55, metalness: 0.25 };
-	const topMaterial = autoColor
-		? { ...autoFlat(autoColor) }
-		: { color: topColor, roughness: 0.5, metalness: 0.2 };
-	return (
-		<group position={position} rotation={[0, rotY, 0]}>
-			<mesh position={[0, 0.62, 0]}>
-				<boxGeometry args={[1.78, 0.62, 4.45]} />
-				<meshStandardMaterial {...bodyMaterial} />
-			</mesh>
-			<mesh position={[0, 1.12, -0.15]}>
-				<boxGeometry args={[1.58, 0.5, 2.2]} />
-				<meshStandardMaterial {...topMaterial} />
-			</mesh>
-			<mesh position={[0, 1.14, -0.15]}>
-				<boxGeometry args={[1.62, 0.3, 1.9]} />
-				<meshStandardMaterial color={CLAY_GLASS} roughness={0.15} metalness={0.6} />
-			</mesh>
-			<mesh position={[0, 1.05, 0.95]} rotation={[0.5, 0, 0]}>
-				<boxGeometry args={[1.56, 0.42, 0.08]} />
-				<meshStandardMaterial color={CLAY_GLASS} roughness={0.15} metalness={0.6} />
-			</mesh>
-			<mesh position={[0, 1.05, -1.25]} rotation={[-0.55, 0, 0]}>
-				<boxGeometry args={[1.56, 0.42, 0.08]} />
-				<meshStandardMaterial color={CLAY_GLASS} roughness={0.15} metalness={0.6} />
-			</mesh>
-			<Wheel position={[0.82, 0.33, 1.45]} />
-			<Wheel position={[-0.82, 0.33, 1.45]} />
-			<Wheel position={[0.82, 0.33, -1.45]} />
-			<Wheel position={[-0.82, 0.33, -1.45]} />
-		</group>
-	);
-}
-
-/** Compact single-engine propeller plane, ~3.4 m wingspan and +Z forward. */
-export function SmallPlane({ position = [0, 0, 0], rotY = 0, autoColor = undefined }) {
-	// Auto-color mode tints the PRIMARY surfaces only (fuselage, wings, trim);
-	// glass, tires and rims keep their materials so the silhouette still reads.
-	// Each mesh keeps its own hand-tuned roughness when the mode is off.
-	const mat = (color, roughness, metalness) =>
-		autoColor ? autoFlat(autoColor) : { color, roughness, metalness };
-	return (
-		<group position={position} rotation={[0, rotY, 0]}>
-			<mesh position={[0, 0.76, 0]} rotation={[Math.PI / 2, 0, 0]}>
-				<cylinderGeometry args={[0.23, 0.31, 2.75, 16]} />
-				<meshStandardMaterial {...mat(CLAY_PLANE, 0.58, 0.18)} />
-			</mesh>
-			<mesh position={[0, 0.76, 1.55]} rotation={[Math.PI / 2, 0, 0]}>
-				<coneGeometry args={[0.23, 0.55, 16]} />
-				<meshStandardMaterial {...mat(CLAY_PLANE_TRIM, 0.52, 0.2)} />
-			</mesh>
-
-			<mesh position={[0, 0.73, 0.15]}>
-				<boxGeometry args={[3.4, 0.09, 0.58]} />
-				<meshStandardMaterial {...mat(CLAY_PLANE, 0.62, 0.14)} />
-			</mesh>
-			<mesh position={[0, 0.84, -1.18]}>
-				<boxGeometry args={[1.45, 0.07, 0.38]} />
-				<meshStandardMaterial {...mat(CLAY_PLANE_TRIM, 0.62, 0.12)} />
-			</mesh>
-			<mesh position={[0, 1.08, -1.2]} rotation={[0.22, 0, 0]}>
-				<boxGeometry args={[0.08, 0.62, 0.48]} />
-				<meshStandardMaterial {...mat(CLAY_PLANE, 0.62, 0.12)} />
-			</mesh>
-
-			<mesh position={[0, 1.02, 0.42]} scale={[0.62, 0.46, 0.9]}>
-				<sphereGeometry args={[0.42, 16, 10, 0, Math.PI * 2, 0, Math.PI / 2]} />
-				<meshStandardMaterial color={CLAY_GLASS} roughness={0.16} metalness={0.55} />
-			</mesh>
-
-			<group position={[0, 0.76, 1.86]}>
-				<mesh rotation={[Math.PI / 2, 0, 0]}>
-					<cylinderGeometry args={[0.11, 0.11, 0.2, 12]} />
-					<meshStandardMaterial color={CLAY_RIM} roughness={0.45} metalness={0.4} />
-				</mesh>
-				<mesh position={[0, 0, 0.12]} rotation={[0, 0, 0.28]}>
-					<boxGeometry args={[1.25, 0.08, 0.06]} />
-					<meshStandardMaterial color={CLAY_TIRE} roughness={0.8} />
-				</mesh>
-			</group>
-
-			{[-0.55, 0.55].map((x) => (
-				<group key={x} position={[x, 0.2, 0.15]}>
-					<mesh position={[0, 0.24, 0]} rotation={[0, 0, x < 0 ? -0.35 : 0.35]}>
-						<boxGeometry args={[0.045, 0.55, 0.045]} />
-						<meshStandardMaterial color={CLAY_RIM} roughness={0.65} metalness={0.3} />
-					</mesh>
-					<mesh rotation={[0, 0, Math.PI / 2]}>
-						<cylinderGeometry args={[0.16, 0.16, 0.09, 14]} />
-						<meshStandardMaterial color={CLAY_TIRE} roughness={0.95} />
-					</mesh>
-				</group>
-			))}
-		</group>
-	);
-}
-
-export function Chair({ position = [0, 0, 0], rotY = 0, autoColor = undefined }) {
-	// Auto-color mode tints seat/back and frame together; undefined keeps the
-	// hand-picked clay pair exactly as it ships.
-	const seat = autoColor ? autoFlat(autoColor) : { color: CLAY_CHAIR_LIGHT, roughness: 0.86 };
-	const frame = autoColor ? autoFlat(autoColor) : { color: CLAY_CHAIR, roughness: 0.9 };
-	const legPositions = [
-		[-0.24, 0.23, -0.22],
-		[0.24, 0.23, -0.22],
-		[-0.24, 0.23, 0.22],
-		[0.24, 0.23, 0.22],
-	];
-	return (
-		<group position={position} rotation={[0, rotY, 0]} scale={0.9}>
-			<mesh position={[0, 0.49, 0]} castShadow receiveShadow>
-				<boxGeometry args={[0.6, 0.12, 0.58]} />
-				<meshStandardMaterial {...seat} />
-			</mesh>
-			{legPositions.map((leg, index) => (
-				<mesh key={index} position={leg} castShadow receiveShadow>
-					<boxGeometry args={[0.09, 0.46, 0.09]} />
-					<meshStandardMaterial {...frame} />
-				</mesh>
-			))}
-			<mesh position={[-0.24, 0.92, -0.245]} castShadow receiveShadow>
-				<boxGeometry args={[0.09, 0.86, 0.09]} />
-				<meshStandardMaterial {...frame} />
-			</mesh>
-			<mesh position={[0.24, 0.92, -0.245]} castShadow receiveShadow>
-				<boxGeometry args={[0.09, 0.86, 0.09]} />
-				<meshStandardMaterial {...frame} />
-			</mesh>
-			<mesh position={[0, 1.08, -0.245]} castShadow receiveShadow>
-				<boxGeometry args={[0.52, 0.38, 0.1]} />
-				<meshStandardMaterial {...seat} />
-			</mesh>
-		</group>
-	);
-}
-
-/**
- * The creatable primitives, Unity's 3D Object menu in clay. Each one is built
- * with its base on the local floor (y = 0), so an object's `y` reads as height
- * above the deck rather than "half of me is underground".
- */
-// Blender's solid-view response for auto-colored surfaces. Workbench shades
-// with a neutral studio rig, so the derived hue reaches the eye unmultiplied;
-// under our warm key light a plain standard material turns every hue olive.
-// Full roughness kills the specular sheen and a self-light of the same hue
-// lifts the shadow side the way workbench's studio lighting does.
-function autoFlat(hex) {
-	return { color: hex, roughness: 1, metalness: 0, emissive: hex, emissiveIntensity: 0.4 };
-}
+import { autoFlat, Car, Chair, SmallPlane } from "./set-pieces.jsx";
+import { LIGHT_KIND, capPracticalShadows } from "./object-look.js";
+import { SceneLight, useLookRefresh } from "./scene-lights.jsx";
+import { placeObjectLook } from "./scene-light-place.js";
 
 // Parts of an assembly can share a plane with an earlier part (hood top and
 // grille top). The depth test can't order them and the winner flips as the
@@ -212,6 +36,11 @@ function depthRankProps(rank) {
 	return rank > 0 ? { polygonOffset: true, polygonOffsetFactor: -rank, polygonOffsetUnits: -rank } : null;
 }
 
+/**
+ * The creatable primitives, Unity's 3D Object menu in clay. Each one is built
+ * with its base on the local floor (y = 0), so an object's `y` reads as height
+ * above the deck rather than "half of me is underground".
+ */
 function Primitive({ kind, color, autoColor, depthRank = 0 }) {
 	const side = kind === "plane" ? THREE.DoubleSide : THREE.FrontSide;
 	const material = autoColor ? (
@@ -284,97 +113,6 @@ function useAssetTexture(assetId) {
  * missing): blockout grey, because that is exactly what it is again. */
 const MISSING_CUTOUT = "#c2c6c8";
 
-/** The parsed GLB for an `assetId`, or null while it loads (or forever, if
- * the blob is gone). The cached graph is the FILE's own pivot and materials;
- * each instance clones, then fits to the stored height. */
-function useMeshScene(assetId) {
-	const [scene, setScene] = useState(null);
-	useEffect(() => {
-		setScene(null);
-		if (!assetId) return undefined;
-		return subscribeToMeshScene(assetId, setScene);
-	}, [assetId]);
-	return scene;
-}
-
-function disposeOwnedMaterials(root) {
-	if (!root) return;
-	root.traverse((node) => {
-		if (!node.isMesh || !(node.userData?.clayOwned || node.userData?.instanceOwned)) return;
-		const materials = Array.isArray(node.material) ? node.material : [node.material];
-		for (const material of materials) material?.dispose?.();
-	});
-}
-
-/**
- * Clone the cached graph, scale so its bbox height equals the stored
- * `object.height`, and sit the underside on y = 0. The import heuristic
- * already wrote that height — this pass must not re-guess it.
- *
- * Skinned graphs go through `cloneMeshGraph` so a Mixamo-as-statue keeps
- * its bind pose. Clay replaces materials on THIS clone only, so a second
- * instance of the same file can keep the textures from the disk. Every clone
- * owns its materials, so auto-color tints and opacity fades never leak.
- */
-function instantiateMesh(source, object) {
-	const root = cloneMeshGraph(source);
-	root.updateMatrixWorld(true);
-	const box = new THREE.Box3().setFromObject(root);
-	const size = box.getSize(new THREE.Vector3());
-	const targetHeight = Number(object.height);
-	if (Number.isFinite(targetHeight) && targetHeight > 0 && size.y > 1e-8) {
-		root.scale.multiplyScalar(targetHeight / size.y);
-		root.updateMatrixWorld(true);
-		box.setFromObject(root);
-	}
-	if (Number.isFinite(box.min.y)) root.position.y -= box.min.y;
-	const clay = object.clay === true;
-	const clayColor = object.autoColor ?? object.color ?? "#c4b8a8";
-	root.traverse((node) => {
-		if (node.isLight || node.isCamera) {
-			node.visible = false;
-			return;
-		}
-		if (!node.isMesh) return;
-		node.castShadow = true;
-		node.receiveShadow = true;
-		if (clay) {
-			const make = () => new THREE.MeshStandardMaterial({ color: clayColor, roughness: 0.9, metalness: 0 });
-			for (const material of Array.isArray(node.material) ? node.material : [node.material]) material?.dispose?.();
-			node.material = Array.isArray(node.material) ? node.material.map(() => make()) : make();
-			node.userData.clayOwned = true;
-			return;
-		}
-		if (!object.autoColor || !node.material) return;
-		// cloneMeshGraph already gave this instance its own materials.
-		for (const material of Array.isArray(node.material) ? node.material : [node.material]) {
-			if (material.color) material.color.set(object.autoColor);
-		}
-	});
-	return root;
-}
-
-function ImportedMesh({ object }) {
-	const source = useMeshScene(object.assetId);
-	const root = useMemo(
-		() => (source ? instantiateMesh(source, object) : null),
-		[source, object.height, object.clay, object.autoColor, object.color],
-	);
-	useEffect(() => () => disposeOwnedMaterials(root), [root]);
-	if (!root) {
-		const width = object.footprint?.width ?? 1;
-		const depth = object.footprint?.depth ?? 1;
-		const height = object.height ?? 1;
-		return (
-			<mesh position={[0, height / 2, 0]} castShadow receiveShadow>
-				<boxGeometry args={[width, height, depth]} />
-				<meshStandardMaterial color={MISSING_CUTOUT} roughness={0.92} metalness={0} />
-			</mesh>
-		);
-	}
-	return <primitive object={root} />;
-}
-
 /**
  * A cutout: an imported picture standing on a card, the standee a blockout
  * gets instead of a modelled prop.
@@ -499,6 +237,8 @@ function SceneObjectContent({ object, depthRank = 0 }) {
 	// override as a cube — file materials are cloned and tinted per instance.
 	const { renderer, color, autoColor } = object;
 	if (renderer === EMPTY_KIND) return <EmptyMarker />;
+	if (renderer === LIGHT_KIND) return <SceneLight object={object} />;
+	if (renderer === EFFECT_KIND) return <EffectMarker object={object} />;
 	if (renderer === CUTOUT_KIND) return <Cutout object={object} />;
 	if (renderer === MESH_KIND) return <ImportedMesh object={object} />;
 	if (renderer === SCULPT_KIND) return <Sculpt object={object} depthRank={depthRank} />;
@@ -517,7 +257,7 @@ function SceneObjectContent({ object, depthRank = 0 }) {
 function SelectionBox({ object }) {
 	// An Empty has no extent, so its cage is the marker's own cube, centred on
 	// the origin (a prop's cage stands on it).
-	const empty = object.renderer === EMPTY_KIND;
+	const empty = object.renderer === EMPTY_KIND || object.renderer === LIGHT_KIND || object.renderer === EFFECT_KIND;
 	const height = empty ? EMPTY_MARKER_SIZE : Math.max(object.height ?? 1, 0.08);
 	const width = empty ? EMPTY_MARKER_SIZE : object.footprint?.width ?? 1;
 	const depth = empty ? EMPTY_MARKER_SIZE : object.footprint?.depth ?? 1;
@@ -575,7 +315,7 @@ function SceneObject({ object, selected, frameRef = null, take = null, attachFra
 		const travelled = frameRef && !attach && travelLookupRef?.current
 			? sceneObjectTravelMatrixAt(travelLookupRef.current, object.id, frame, take ?? {}, placeWorld)
 			: null;
-		if (travelled) {
+		if ((group.visible = trackShown(object.id, frame, take, travelLookupRef?.current)) && travelled) {
 			travelled.decompose(group.position, group.quaternion, group.scale);
 		} else if (attach || object.path) {
 			// The authored numbers first. While attached they are the prop's LOCAL
@@ -617,8 +357,11 @@ function SceneObject({ object, selected, frameRef = null, take = null, attachFra
 			(window.__cclayPropWorld ??= {})[object.id] = { x: group.position.x, y: group.position.y, z: group.position.z, quat: { x: group.quaternion.x, y: group.quaternion.y, z: group.quaternion.z, w: group.quaternion.w }, frame };
 		}
 		applyPoseFade(group, fadeOpacity, object.opacity ?? 1);
+		// A light's level, flicker and aim, and a glow, for this frame (scene-light-place.js).
+		placeObjectLook(group, object, frame, take);
 	};
 	useFrame(place);
+	useLookRefresh(object);
 	// Two things the App needs to reach imperatively, registered per prop: a
 	// placement pass for the recorder (which renders through gl.render() and so
 	// never runs the frame loop — see SetProps' syncRef), and the prop's live
@@ -684,7 +427,8 @@ export function SetProps({ objects = [], authoredObjects = null, selectedId = nu
 	if (worldRef) worldRef.current = (id, out) => registryRef.current.get(id)?.world(out) ?? null;
 	return (
 		<group>
-			{objects.map((object) => (
+			{/* Lights past the practical shadow cap draw without one (object-look.js). */}
+			{capPracticalShadows(objects).map((object) => (
 				<SceneObject
 					key={object.id}
 					object={object}
@@ -698,6 +442,7 @@ export function SetProps({ objects = [], authoredObjects = null, selectedId = nu
 					depthRank={depthRanks.get(object.id) ?? 0}
 				/>
 			))}
+			<EffectsLayer objects={authoredObjects ?? objects} frameRef={frameRef} take={take} registryRef={registryRef} fadeOpacity={fadeOpacity} />
 		</group>
 	);
 }

package/src/rail-dot-drag.js

@@ -0,0 +1,23 @@
+// A free drag on a camera rail's dot in the 3D view (CraneHandles): the dot moves over the floor and the rail
+// bends under it, with the weighted bump the X and Z arrows use (prepareRailBend), on both floor axes at once.
+// The drag reads the floor plane, not a plane level with the dot: that one goes edge-on when the editor's eye
+// is at crane height. The dot's height stays on the Y arrow.
+import * as THREE from "three";
+import { prepareRailBend, railPoint } from "./camera-follow.js";
+
+const FLOOR = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+
+/**
+ * The drag a free press on crane mark `index` starts, shaped like an arrow drag (axis "floor"), or null when it
+ * cannot bend the rail: Shift (a slide along the arc), no rail callback or control points, or a ray off the floor.
+ * s: CraneHandles' live state { rail, crane, controlPoints, onChangeRail }; ray: the press's ray.
+ */
+export function floorDragStart(s, index, ray, shiftKey) {
+	const point = s.crane?.points[index];
+	if (shiftKey || !point || !s.rail || !s.onChangeRail) return null;
+	const bend = prepareRailBend(s.controlPoints, railPoint(s.rail, point.t * s.rail.length), s.crane.points, index);
+	const hitStart = new THREE.Vector3();
+	if (!bend || !ray.intersectPlane(FLOOR, hitStart)) return null;
+	return { axis: "floor", index, dir: new THREE.Vector3(), plane: FLOOR, hitStart, startControls: bend.startControls, bendWeights: bend.weights,
+		t0: bend.t0, radius: bend.radius, recorded: false };
+}

package/src/render-passes.js

@@ -105,6 +105,15 @@ export function renderPass(capture, scene, camera, kind, toDataUrl = null, optio
 	const previousMaterial = scene.overrideMaterial;
 	const previousBackground = scene.background;
 	let buffer = null;
+	// A glow halo (userData.beautyOnly) is light, not a surface: drawn with the
+	// pass material it would be a solid quad in the depth or normal plate.
+	const hidden = [];
+	scene.traverse?.((node) => {
+		if (node.userData?.beautyOnly && node.visible) {
+			hidden.push(node);
+			node.visible = false;
+		}
+	});
 	try {
 		scene.overrideMaterial = material;
 		// Empty sky is infinitely far away, so on a depth plate it is black. The
@@ -118,6 +127,7 @@ export function renderPass(capture, scene, camera, kind, toDataUrl = null, optio
 		// threw.
 		scene.overrideMaterial = previousMaterial;
 		scene.background = previousBackground;
+		for (const node of hidden) node.visible = true;
 		material.dispose();
 	}
 	if (!buffer) return null;

package/src/resource-status.jsx

@@ -15,6 +15,7 @@ const KIND_LABELS = {
 	image: () => ko("Image", "이미지"),
 	motion: () => ko("Motion", "모션"),
 	pose: () => ko("Pose", "포즈"),
+	environment: () => ko("HDR environment", "HDR 환경"),
 	"workflow-output": () => ko("Workflow output", "워크플로 출력"),
 };
 

package/src/result-modal.jsx

@@ -2,8 +2,6 @@ import { ko, isKo } from "./locale.js";
 
 export default function ResultModal({ result, copied, recordedVideoName, onClose, onCopy, onDownload, downloadDisabled = false, exportFeedback = null }) {
 	const isVideo = result.mode === "video";
-	const motionVideo = result.motion?.videoUrl ?? null;
-	const isI2vMotion = Boolean(motionVideo);
 	const modelLabel = result.modelLabel ?? (isVideo ? ko("your AI video tool", "AI 영상 도구") : ko("your selected image model", "선택한 이미지 모델"));
 	const hasFrame = Boolean(result.frame);
 
@@ -42,14 +40,12 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 		<div className="modal-overlay" onClick={onClose}>
 			<div className="modal result-modal" role="dialog" aria-modal="true" aria-labelledby="result-title" onClick={(event) => event.stopPropagation()}>
 				<div className="modal-head">
-				<h3 id="result-title">{isI2vMotion ? ko("Your motion is ready", "모션이 준비됐어요") : ko("Your shot is ready", "장면이 준비됐어요")}</h3>
+				<h3 id="result-title">{ko("Your shot is ready", "장면이 준비됐어요")}</h3>
 					<button type="button" className="x" onClick={onClose} aria-label={ko("Close the result", "결과 닫기")}>
 						✕
 					</button>
 				</div>
-				{isI2vMotion ? (
-					<video className="preview result-motion-video" src={motionVideo} controls playsInline preload="metadata" />
-				) : result.frameB ? (
+				{result.frameB ? (
 					<div className="move-frames">
 						<figure>
 							<img className="preview" src={result.frame} alt={ko("Camera move start frame", "카메라 움직임 시작 프레임")} />
@@ -69,13 +65,6 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 						<small>{ko("Camera move made from timeline keyframes", "타임라인 키프레임으로 만든 카메라 움직임")}</small>
 					</div>
 				)}
-				{isI2vMotion && result.motion && <div className="result-motion-meta">
-					<span>{result.motion.resolution || "480P"}</span>
-					{result.motion.width && result.motion.height && <span>{result.motion.width}×{result.motion.height}</span>}
-					{result.motion.fps && <span>{result.motion.fps} fps</span>}
-					{result.motion.duration && <span>{result.motion.duration}s</span>}
-					{result.motion.cost != null && <span>${Number(result.motion.cost).toFixed(4)}</span>}
-				</div>}
 				<label className="modal-label">{ko("Prompt", "프롬프트")} {copied && <em>· {ko("copied", "복사됨")}</em>}</label>
 				<div className="promptbox">{result.prompt}</div>
 				<div className="modal-actions">
@@ -90,11 +79,7 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 				</div>
 
 				{exportFeedback}
-				{isI2vMotion ? <section className="result-next" aria-labelledby="result-next-title">
-					<span className="result-next-kicker">{ko("Next · CozyClay motion source", "다음 · CozyClay 모션 소스")}</span>
-					<h4 id="result-next-title">{ko("Use this video for mocap extraction", "이 영상을 모캡 추출에 사용하세요")}</h4>
-					<div className="result-next-intro"><p>{ko("The fixed-camera H3 Max Turbo video is attached to the extraction panel as a motion source. Run GVHMR there, then review the resulting take in the timeline.", "고정 카메라 H3 Max Turbo 영상이 추출 패널의 모션 소스로 연결됐어요. 거기서 GVHMR을 실행한 뒤 타임라인의 테이크를 확인하세요.")}</p></div>
-				</section> : <section className="result-next" aria-labelledby="result-next-title">
+				<section className="result-next" aria-labelledby="result-next-title">
 					<span className="result-next-kicker">{ko(`Next · ${modelLabel}`, `다음 · ${modelLabel}`)}</span>
 					<h4 id="result-next-title">{ko("Handing off to your AI", "AI에 넣는 순서")}</h4>
 					<div className="result-next-intro">{nextStep}</div>
@@ -121,7 +106,7 @@ export default function ResultModal({ result, copied, recordedVideoName, onClose
 							{ko("A video recorded with the recording feature: ", "녹화 기능으로 만든 ")}<code>{recordedVideoName}</code>{ko(" file. Use it separately from the reference frame in the prompt above.", " 파일이에요. 위의 프롬프트 참고 프레임과는 별도로 활용하세요.")}
 						</p>
 					)}
-				</section>}
+				</section>
 			</div>
 		</div>
 	);

package/src/room.jsx

@@ -1,5 +1,9 @@
 import { useEffect, useMemo } from "react";
 import * as THREE from "three";
+import { stageLook } from "./stage-lighting.js";
+// Patches three's PCF filter before any material compiles (16 taps past radius 1).
+import "./soft-shadows.js";
+export { StageAtmosphere } from "./stage-sky.jsx";
 
 /**
  * The blocking set: an open stage floor.
@@ -128,25 +132,24 @@ export function keyLightColor(warmth = 0.5) {
  * One neutral rig (Blender's workbench studio light idea): a white sky over
  * a grey ground bounce. `neutral` is the grid view, where the deck is gone
  * and the ambient is lifted so authored colours stay saturated without any
- * pretend floor.
+ * pretend floor. `lighting` (stage.lighting) scales and tints the rig into a
+ * look — night, golden hour, a black stage — through stageLook(); its studio
+ * default renders the tuned rig unchanged.
  */
-export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, warmth: 0.5 }, neutral = false, light = false }) {
-	const dim = keyLight.intensity / 1.12;
+export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, warmth: 0.5 }, lighting = null, neutral = false, light = false }) {
+	const look = stageLook({ lighting, keyLight, theme: light ? "light" : "dark", grid: neutral });
 	return (
 		<>
-			<hemisphereLight
-				args={neutral ? ["#ffffff", "#3a3d42", 0.9] : ["#ffffff", light ? "#d6d8de" : "#5a5d64", 0.9]}
-				intensity={0.9 * Math.min(1, 0.35 + 0.65 * dim)}
-			/>
+			<hemisphereLight args={[look.hemi.sky, look.hemi.ground, 0.9]} intensity={look.hemi.intensity} />
 			{/* The light stage is a bright room: more ambient, so the clay's shaded
 			    side stays soft grey instead of going charcoal against white. */}
-			<ambientLight intensity={(neutral ? 0.34 : light ? 0.32 : 0.18) * Math.min(1, 0.35 + 0.65 * dim)} />
+			<ambientLight intensity={look.ambient} />
 			{/* Only the key casts: one soft, unambiguous contact shadow reads as
 			    ground contact, while three overlapping shadows read as noise. The
 			    map covers the blocking area rather than the whole 500 m deck — a
 			    stage-wide frustum would spend its resolution on empty floor. */}
 			<directionalLight
-				color={keyLightColor(keyLight.warmth)}
+				color={keyLight.color ?? keyLightColor(keyLight.warmth)}
 				position={[keyLight.x, keyLight.y, keyLight.z]}
 				intensity={keyLight.intensity}
 				castShadow
@@ -162,10 +165,15 @@ export function StageLights({ keyLight = { x: 6, y: 9, z: 4, intensity: 1.12, wa
 				// shadow there. 60 covers the clamp envelope with headroom.
 				shadow-camera-far={60}
 				shadow-bias={-0.0006}
-				shadow-normalBias={0.02}
+				// PCF spreads its noise-rotated taps over shadow.radius texels, so a
+				// larger radius is a wider penumbra in the same single pass
+				// (stage.lighting.shadowSoftness; soft-shadows.js says why not VSM).
+				// The normal offset grows with the radius.
+				shadow-normalBias={look.shadowNormalBias}
+				shadow-radius={look.shadowRadius}
 			/>
-			<directionalLight color="#eef2f4" position={[-6, 4, -4]} intensity={0.36 * dim} />
-			<directionalLight color="#ffffff" position={[2, 3, 9]} intensity={0.22 * dim} />
+			<directionalLight color="#eef2f4" position={[-6, 4, -4]} intensity={look.fill} />
+			<directionalLight color="#ffffff" position={[2, 3, 9]} intensity={look.rim} />
 		</>
 	);
 }

package/src/scene-assets.js

@@ -18,6 +18,7 @@
  * Everything above the storage adapter is pure and testable in node; the
  * adapter is the only part that needs a browser.
  */
+import { isHdrAssetId, normalizeHdrAsset } from "./stage-hdr.js";
 
 /** Content-addressed, so the same bytes always land on the same id. */
 export const ASSET_ID_PREFIX = "img-";
@@ -85,7 +86,7 @@ export function isMeshAssetId(value) {
 }
 
 export function isAssetId(value) {
-	return isImageAssetId(value) || isMeshAssetId(value);
+	return isImageAssetId(value) || isMeshAssetId(value) || isHdrAssetId(value);
 }
 
 async function sha256Hex(bytes, subtle) {
@@ -149,6 +150,8 @@ export function normalizeAsset(record) {
 	if (!record || typeof record !== "object" || Array.isArray(record)) return null;
 	const bytes = record.bytes instanceof ArrayBuffer ? record.bytes : null;
 	if (!bytes || !bytes.byteLength) return null;
+	// An `hdr-` id is an HDR environment file (stage-hdr.js), stored verbatim.
+	if (isHdrAssetId(record.id)) return normalizeHdrAsset(record, bytes);
 	// Prefix and MIME must agree: a mesh id with an image type (or the reverse)
 	// is a cross-wired record and cannot be drawn as either kind.
 	if (isMeshAssetId(record.id)) {
@@ -309,12 +312,11 @@ export async function importImageFile(file, {
  */
 export function referencedAssetIds(scenes) {
 	const ids = new Set(assetUsageCounts(scenes).keys());
-	// A storyboard panel's stylized picture is held by its shot, not by an object.
+	// A storyboard panel's stylized picture is held by its shot, not by an object;
+	// a scene's HDR environment file by its stage look (stage.lighting.hdr).
 	for (const scene of Array.isArray(scenes) ? scenes : []) {
-		const shots = scene?.shotDocument?.shots;
-		for (const shot of Array.isArray(shots) ? shots : []) {
-			if (isImageAssetId(shot?.stylizedAssetId)) ids.add(shot.stylizedAssetId);
-		}
+		for (const shot of Array.isArray(scene?.shotDocument?.shots) ? scene.shotDocument.shots : []) if (isImageAssetId(shot?.stylizedAssetId)) ids.add(shot.stylizedAssetId);
+		if (isHdrAssetId(scene?.stage?.lighting?.hdr)) ids.add(scene.stage.lighting.hdr);
 	}
 	return ids;
 }