Spaces:

ingon1
/

drawface-live

Running

App Files Files Community

drawface-live / index.html

ingon1

sync from 3242e8b5eb65228f125c10f9446f72771e40fb4c

506b80a verified 10 days ago

Raw

History Blame Contribute Delete

22.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DrawFace Live — Face Mirroring</title>
	<!-- 메인 = 미러링 스튜디오: 들어가자마자 시연. 캐릭터 선택(석고상 3D 기본 / 소년 2D),
	내 손그림은 draw.html(기존 앱 보존). mark 헤드는 NVIDIA Maya-ACE(MIT) 파생 —
	assets3d/LICENSE-mark.txt 고지 포함으로 재배포 조건 충족. -->
	<style>
	:root { color-scheme: dark; }
	* { box-sizing: border-box; }
	body {
	margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif; background: #16161d; color: #e8e8ef;
	}
	main { width: min(900px, 96vw); padding: 24px 0 48px; }
	h1 { font-size: 1.25rem; font-weight: 700; margin: 12px 0; }
	.duo { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
	.stage { flex: 1 1 380px; max-width: 560px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid #2a2a35; position: relative; }
	/* 분석 패널: 캐릭터 옆에서 내 얼굴 + MediaPipe 랜드마크 + 표정 채널값을 비교군으로 보여준다
	(내용물은 코어 AvatarCore.makeMirrorPanel 이 인라인 스타일로 생성 — 여긴 배치만) */
	#panel { flex: 0 0 280px; display: none; }
	#panel.on { display: block; }
	#recBtn.on { background: #e2647e; color: #fff; border-color: transparent; }
	@media (max-width: 620px) {
	main { padding: 12px 0 32px; }
	#panel { flex: 1 1 100%; max-width: 560px; }
	}
	#stage3d { background: #0d0d12; cursor: grab; }
	#stage2d { background: #fff; }
	.warp-shake { position: absolute; inset: 0; will-change: transform; }
	.warp-shake canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
	#gl { z-index: 0; } #cv { z-index: 1; }
	#cv3d { width: 100%; height: 100%; display: block; }
	.row { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
	button { padding: 10px 16px; border-radius: 6px; border: 1px solid transparent; background: #e8e8ef; color: #16161d; font-size: .95rem; font-weight: 600; cursor: pointer; }
	button.alt { background: transparent; color: #c9c9d4; border-color: #3a3f47; }
	#mirrorBtn.on { background: #e2647e; color: #fff; }
	select { padding: 10px; border-radius: 6px; background: #0d0d12; color: inherit; border: 1px solid #3a3f47; font-size: .95rem; }
	a.link { color: #9a9ab0; font-size: .88rem; text-decoration: none; margin-left: auto; }
	#status { margin-top: 12px; color: #9a9ab0; font-size: .9rem; min-height: 1.2em; }
	#status.error { color: #ff7a7a; }
	footer { margin-top: 22px; font-size: .78rem; color: #66667a; line-height: 1.6; }
	footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
	/* ---- OBS 브라우저 소스용 클린 모드 (?clean=1) ----
	UI 를 전부 숨기고 배경을 투명하게 만들어, 캐릭터만 방송 화면 위에 얹히게 한다. */
	body.clean { background: transparent; }
	body.clean h1, body.clean .row, body.clean #status, body.clean footer, body.clean #panel { display: none !important; }
	body.clean main { width: 100vw; padding: 0; }
	body.clean .duo { gap: 0; }
	body.clean .stage { flex: 1 1 100vmin; max-width: 100vmin; border: 0; border-radius: 0; }
	/* #stage3d/#stage2d 는 ID 로 배경이 지정돼 있어 같은 특이도(ID+클래스)로 덮어야 한다 */
	body.clean #stage3d, body.clean #stage2d { background: transparent; }
	</style>
	<script type="importmap">{ "imports": { "three": "./vendor/three.module.js" } }</script>
	</head>
	<body>
	<main>
	<h1>DrawFace Live — Webcam Face Mirroring</h1>

	<div class="duo">
	<div class="stage" id="stage3d"><canvas id="cv3d"></canvas></div>
	<div class="stage" id="stage2d" style="display:none"><div class="warp-shake" id="shake">
	<canvas id="gl" width="512" height="512"></canvas>
	<canvas id="cv" width="512" height="512"></canvas>
	</div></div>
	<div id="panel"></div>
	</div>

	<div class="row">
	<button id="mirrorBtn">Start mirroring</button>
	<button class="alt" id="panelBtn">Analysis</button>
	<button class="alt" id="recBtn" title="Save just the character canvas as a WebM video">Record</button>
	<select id="charSel">
	<option value="mark">Plaster bust, male (NVIDIA mark · 3D)</option>
	<option value="claire">Plaster bust, female (NVIDIA claire · 3D)</option>
	<option value="rpmA">Avatar A (Ready Player Me · 3D)</option>
	<option value="rpmB">Avatar B (Ready Player Me · 3D)</option>
	<option value="boy">Boy (graphic · 2D)</option>
	<option value="girl">Girl (graphic · 2D)</option>
	</select>
	<label style="display:flex;align-items:center;gap:6px;font-size:.9rem;color:#9a9ab0;cursor:pointer">
	<input type="checkbox" id="headMove"> Head movement
	</label>
	<!-- 두 링크를 한 덩어리로 묶는다 — 영문 라벨이 길어 줄바꿈이 나는데, 낱개면 하나만
	아래로 떨어져 나가 의도치 않아 보인다. 묶으면 같이 내려간다. -->
	<span style="margin-left:auto;display:flex;gap:12px;white-space:nowrap">
	<a class="link" href="combo.html" style="margin-left:0">Five at once</a>
	<a class="link" href="draw.html" style="margin-left:0">My own drawing →</a>
	</span>
	</div>

	<div id="status">Loading model…</div>

	<footer>
	Everything runs inside your browser — no video is ever sent anywhere.
	Portraits and photoreal illustrations run on the local GPU track (LivePortrait, 30 fps) —
	<a href="illust.html">see the results</a> ·
	<a href="https://github.com/ingon1026/drawface-live#일러스트-트랙--liveportrait-실시간-2026-07-23-재실측">measurements</a>.
	mark and claire heads © NVIDIA, derived from <a href="assets3d/LICENSE-mark.txt">MIT (Maya-ACE)</a>.
	For a talking avatar, see <a href="https://ingon1026.github.io/talking-drawing-avatar/">talking-drawing-avatar</a>.
	</footer>
	</main>

	<script src="avatar_core.js"></script>
	<script type="module">
	let THREE, GLTFLoader, MeshoptDecoder;
	try {
	THREE = await import("three");
	// GLTFLoader·meshopt 디코더는 CDN(jsDelivr, three r160 동일 버전) 우선 — Pages 신규 경로의
	// 엣지 404 캐시를 회피한다(MediaPipe 도 같은 CDN 으로 로드 중이라 도달성 검증됨). 실패 시 로컬 폴백.
	try {
	({ GLTFLoader } = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js"));
	} catch {
	({ GLTFLoader } = await import("./vendor/GLTFLoader.js?v=2"));
	}
	// mark.glb 는 EXT_meshopt_compression (41MB → 1.8MB) — 디코더 필수
	try {
	({ MeshoptDecoder } = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/meshopt_decoder.module.js"));
	} catch {
	({ MeshoptDecoder } = await import("./vendor/meshopt_decoder.module.js"));
	}
	} catch (e) {
	// 진짜 원인 추적용: 실패한 리소스의 실제 HTTP 상태를 상태줄에 노출
	let detail = e.message;
	try {
	const r = await fetch("./vendor/GLTFLoader.js?v=2", { cache: "reload" });
	detail += ` (local fetch: HTTP ${r.status})`;
	} catch (fe) { detail += ` (local fetch: ${fe.message})`; }
	document.getElementById("status").textContent = "Failed to load the 3D modules: " + detail;
	throw e;
	}

	const $ = id => document.getElementById(id);
	const setStatus = AvatarCore.bindStatus($("status"));
	AvatarCore.setLocale("en");

	// ---- OBS 브라우저 소스 모드 (?clean=1) ----
	// UI 숨김 + 투명 배경으로 캐릭터만 남긴다. ?auto=1 이면 로드 직후 미러링 자동 시작
	// (OBS 브라우저 소스는 클릭이 없으므로 — 카메라 권한은 OBS 가 자동 허용).
	const Q = new URLSearchParams(location.search);
	const CLEAN = Q.get("clean") === "1";
	if (CLEAN) document.body.classList.add("clean");
	if (Q.get("head") === "1") $("headMove").checked = true; // 쿼리는 체크박스 상태로 반영(단일 진실)


	// ================= 공유: 미러링 + 깜빡임 =================
	let smooth = {};
	const W = k => smooth[k] \|\| 0;
	const blinker = AvatarCore.makeBlink({ autoBlink: () => true, intervalMs: () => 3800, duration: 145, jitter: 0.7 });
	const mirror = AvatarCore.makeMirror({ onStatus: setStatus });
	$("mirrorBtn").onclick = () => {
	if (mirror.on) {
	mirror.stop(); $("mirrorBtn").classList.remove("on"); $("mirrorBtn").textContent = "Start mirroring";
	scheduleDemo(3000); // 미러링 끝나면 유휴 시연 재개
	return;
	}
	showcase.stop(); clearTimeout(demoTimer); // 직접 조종 시작 — 시연 즉시 중단
	mirror.start().then(() => { $("mirrorBtn").classList.add("on"); $("mirrorBtn").textContent = "Stop mirroring"; panel.classList.add("on"); })
	.catch(e => { mirror.stop(); $("mirrorBtn").classList.remove("on"); setStatus("Mirroring failed: " + e.message, true); });
	};

	// ================= 자동 쇼케이스: 카메라 허용 전에도 살아있는 데모 =================
	// 포즈(채널값) 시퀀스를 EMA 로 부드럽게 수렴시켜 시연 — 시퀀서는 코어 makeShowcase 재사용.
	// 3D/2D 렌더러가 같은 채널을 소비하므로 석고상·소년 모두 자동 적용. 미러링 중엔 완전히 꺼짐.
	const POSES = [
	{ mouthsmileleft: .9, mouthsmileright: .9, eyesquintleft: .4, eyesquintright: .4 }, // 활짝 미소
	{ jawopen: .75 }, // 아
	{ mouthpucker: .95, mouthfunnel: .4, jawopen: .12 }, // 우 (오므림)
	{ jawopen: .45, browinnerup: 1, eyewideleft: .7, eyewideright: .7 }, // 놀람
	{ eyeblinkleft: 1, mouthsmileleft: .6, mouthsmileright: .3 }, // 윙크
	{ eyelookoutleft: .9, eyelookinright: .9 }, // 시선 왼쪽
	{ eyelookoutright: .9, eyelookinleft: .9 }, // 시선 오른쪽
	];
	let demoTarget = null, demoTimer = null;
	const demoW = {};
	const showcase = AvatarCore.makeShowcase(pose => new Promise(res => {
	demoTarget = pose;
	setTimeout(() => { demoTarget = null; setTimeout(res, 320); }, 1300);
	}), POSES);
	function scheduleDemo(delay) {
	clearTimeout(demoTimer);
	demoTimer = setTimeout(() => {
	if (mirror.on \|\| showcase.running) return;
	setStatus("Auto demo running — hit Start mirroring to drive it yourself");
	showcase.play().then(() => {
	if (!mirror.on) { setStatus("Hit Start mirroring and allow camera access"); scheduleDemo(5000); }
	});
	}, delay);
	}
	function demoApply() {
	if (mirror.on) { for (const k in demoW) delete demoW[k]; return; }
	for (const k in demoW) if (!demoTarget \|\| !(k in demoTarget)) demoW[k] *= 0.85; // 지난 포즈 채널 감쇠
	if (demoTarget) for (const k in demoTarget) demoW[k] = 0.85 * (demoW[k] \|\| 0) + 0.15 * demoTarget[k];
	for (const k in demoW) {
	if (demoW[k] < 0.01) delete demoW[k];
	else smooth[k] = Math.max(smooth[k] \|\| 0, demoW[k]);
	}
	}
	scheduleDemo(2200); // 첫 진입 — 모델 로드될 즈음 시연 시작

	// ================= 분석 패널 (코어 makeMirrorPanel — face 페이지들과 공용) =================
	const panel = $("panel");
	const mpanel = AvatarCore.makeMirrorPanel(mirror, panel);
	$("panelBtn").onclick = () => panel.classList.toggle("on");

	// ================= 녹화: 캐릭터 캔버스만 WebM 저장 (draw.html 과 같은 방식) =================
	// 3D 는 cv3d 직접, 2D 는 gl+cv 두 레이어라 오프스크린 합성 캔버스를 매 프레임 채워 녹화.
	let recorder = null, recCv = null;
	function stopRec() {
	if (recorder && recorder.state !== "inactive") recorder.stop();
	}
	$("recBtn").onclick = () => {
	if (recorder) { stopRec(); return; }
	const mime = ["video/webm;codecs=vp9", "video/webm"].find(t => window.MediaRecorder && MediaRecorder.isTypeSupported(t));
	if (!mime) { setStatus("This browser can't record WebM", true); return; }
	let stream;
	if (is3D()) stream = canvas3d.captureStream(30); // mark·claire 둘 다 canvas3d 에 렌더
	else {
	recCv = document.createElement("canvas");
	recCv.width = 512; recCv.height = 512;
	stream = recCv.captureStream(30);
	}
	const chunks = [];
	recorder = new MediaRecorder(stream, { mimeType: mime });
	recorder.ondataavailable = e => e.data.size && chunks.push(e.data);
	recorder.onstop = () => {
	const a = document.createElement("a");
	a.href = URL.createObjectURL(new Blob(chunks, { type: "video/webm" }));
	a.download = "drawface-live.webm";
	a.click();
	URL.revokeObjectURL(a.href);
	recorder = null; recCv = null;
	$("recBtn").classList.remove("on"); $("recBtn").textContent = "Record";
	setStatus("Recording finished — the WebM download has started");
	};
	recorder.start();
	$("recBtn").classList.add("on"); $("recBtn").textContent = "Stop recording";
	setStatus("Recording — only the character canvas is saved (the webcam feed is never included)");
	};

	// ================= 3D: 석고상 (mark) =================
	const canvas3d = $("cv3d");
	const renderer = new THREE.WebGLRenderer({ canvas: canvas3d, antialias: true, alpha: CLEAN });
	renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
	if (CLEAN) renderer.setClearAlpha(0);
	const scene = new THREE.Scene();
	scene.background = CLEAN ? null : new THREE.Color(0x0d0d12); // 클린 모드는 투명(OBS 합성용)
	const camera = new THREE.PerspectiveCamera(28, 1, 0.1, 1000);
	scene.add(new THREE.HemisphereLight(0xdfe6ff, 0x2a2018, 1.1));
	const key = new THREE.DirectionalLight(0xffffff, 2.2); key.position.set(1.5, 2, 3); scene.add(key);
	const rim = new THREE.DirectionalLight(0x77aaff, 1.0); rim.position.set(-2, 1, -2); scene.add(rim);
	const group = new THREE.Group();
	scene.add(group);
	let mounted = null; // mountHead3D 결과 { sceneNode, morphMeshes, eyes }

	const gltfLoader = new GLTFLoader();
	gltfLoader.setMeshoptDecoder(MeshoptDecoder);
	// 3D 헤드 정의 — 전부 ARKit 52 모프타깃이라 구동 코드는 공용, 개별 차이만 여기 선언.
	// 석고(mark·claire): 우리 리포 자산, 머리만 있고 안구 메시가 없어 눈알 구체를 넣는다.
	// RPM: Ready Player Me CDN 에서 런타임 로드(리포에 재배포하지 않음 — 원 제공자 CDN 이 정식 사용법).
	// 반신이라 상단 일부만 머리로 잡아 프레이밍하고, 눈·머리카락·옷이 이미 있어 구체 불필요
	// (시선도 eyeLook 모프로 직접 돌아간다).
	// RPM 아바타는 jsDelivr(GitHub) 에 공개된 것을 런타임 로드한다 — 우리 리포에 재배포하지 않고,
	// 커밋 SHA 로 고정한다(@main 은 남의 브랜치라 force-push·삭제로 조용히 깨질 수 있음).
	// 이미 three.js·디코더를 받아오는 CDN 이라 도달성·CORS 가 검증돼 있다(models.readyplayer.me 는 실패).
	const GH = "https://cdn.jsdelivr.net/gh/";
	const HEADS = {
	mark: { url: "assets3d/mark.glb?v=3", label: "Plaster bust, male", eyeSpheres: true, headFrac: 1 },
	claire: { url: "assets3d/claire.glb?v=3", label: "Plaster bust, female", eyeSpheres: true, headFrac: 1 },
	rpmA: { url: GH + "AgoraIO-Community/agora-mediapipe-readyplayerme@c1aeedbd0501c1e1ad013947bf258639baf6085f/public/6644d711e53a2fb55928d72e.glb",
	label: "Avatar A", eyeSpheres: false, headFrac: 0.22 },
	rpmB: { url: GH + "met4citizen/TalkingHead@eed58d198076a7e1e825f804802921c4d3804d46/avatars/brunette.glb",
	label: "Avatar B", eyeSpheres: false, headFrac: 0.22 },
	};
	const glbCache = {};
	let loaded3D = null; // 현재 화면에 올라간 3D 헤드(로드 실패 시 되돌리기용)
	function load3D(name) {
	const cfg = HEADS[name];
	const done = g => {
	const r = AvatarCore.mountHead3D(THREE, { group, camera, gltf: g, cfg, prev: mounted });
	if (!r) { setStatus(cfg.label + ": this model has no expression morph targets", true); return; }
	mounted = r;
	loaded3D = name; // 캐시 히트 포함, 화면에 실제로 올라간 시점에 확정
	setStatus("Hit Start mirroring and allow camera access");
	};
	if (glbCache[name]) return done(glbCache[name]);
	setStatus(cfg.label + " — loading…");
	gltfLoader.load(cfg.url, g => { glbCache[name] = g; done(g); },
	undefined, () => {
	// 실패 시 화면엔 직전 헤드가 남으므로 드롭다운도 되돌려 UI 와 화면을 일치시킨다
	setStatus(cfg.label + " failed to load — check your network connection", true);
	$("charSel").value = loaded3D \|\| "mark";
	});
	}
	// 초기 로드는 캐릭터 선택부에서 현재 selection 으로 한 번만 (mark/claire 이중로드 경쟁 방지)

	function resize3d() {
	const r = canvas3d.parentElement.getBoundingClientRect();
	renderer.setSize(r.width, r.height, false);
	camera.aspect = 1; camera.updateProjectionMatrix();
	}
	new ResizeObserver(resize3d).observe(canvas3d.parentElement);

	let dragging = false, px = 0, py = 0, userYaw = 0, userPitch = 0, nod = 0;
	canvas3d.addEventListener("pointerdown", e => { dragging = true; px = e.clientX; py = e.clientY; });
	addEventListener("pointerup", () => dragging = false);
	addEventListener("pointermove", e => {
	if (!dragging) return;
	userYaw += (e.clientX - px) * 0.005; userPitch += (e.clientY - py) * 0.003;
	userPitch = Math.max(-0.4, Math.min(0.4, userPitch));
	px = e.clientX; py = e.clientY;
	});
	const gaze3d = AvatarCore.makeGaze(AvatarCore.makeCursorTracker(canvas3d), { mulX: 0.8, mulY: 0.5 });

	// ================= 2D: 소년·소녀 (벡터 입 + WebGL 워프 + 동공) =================
	// 파츠 출처: talking-drawing-avatar 기본 캐릭터 규격 (base·눈썹·눈 뜸/감음·동공, 입은 벡터)
	const cv = $("cv"), ctx2d = cv.getContext("2d");
	const glCanvas = $("gl"), shakeEl = $("shake");
	const VECTOR_PARTS = ["base", "brow_L", "brow_R", "eye_L_open", "eye_R_open",
	"eye_L_closed", "eye_R_closed", "pupil_L", "pupil_R"];
	let parts = {}, manifest = null;
	const charCache = {};
	const gaze2d = AvatarCore.makeGaze(AvatarCore.makeCursorTracker($("stage2d")), { mulX: 0.9, mulY: 0.6 });
	const headWander = AvatarCore.makeHeadWander();
	const warp = AvatarCore.makeWarp({
	threeUrl: "./vendor/three.module.js", glCanvas,
	getParts: () => parts, getManifest: () => manifest, W,
	});

	async function loadChar(name) {
	if (!charCache[name]) {
	const m = await fetch(`characters/${name}/manifest.json`).then(r => r.json());
	const ps = {};
	await Promise.all(VECTOR_PARTS.map(f => new Promise(res => {
	const img = new Image();
	img.onload = () => { ps[f] = img; res(); };
	img.onerror = () => res();
	img.src = `characters/${name}/${f}.png`;
	})));
	charCache[name] = { parts: ps, manifest: m };
	}
	({ parts, manifest } = charCache[name]);
	warp.setCharacter();
	}

	// ================= 캐릭터 선택 =================
	// select 값이 단일 진실 — mark·claire=3D 헤드 / boy·girl=2D 그래픽
	const mode = () => $("charSel").value;
	const is3D = () => mode() in HEADS; // HEADS 에 선언된 것이 3D 헤드 (석고 2종 + RPM 2종)
	$("charSel").onchange = () => {
	stopRec(); // 녹화 스트림은 모드별 캔버스에 물려 있어 전환 시 종료
	$("stage3d").style.display = is3D() ? "" : "none";
	$("stage2d").style.display = is3D() ? "none" : "";
	if (is3D()) load3D(mode());
	else loadChar(mode()).catch(e => setStatus("Character failed to load: " + e.message, true));
	};
	// 딥링크: ?char=mark\|claire\|boy\|girl 로 진입 (draw.html·boy.html 이 사용)
	const deep = Q.get("char");
	if (deep && [...$("charSel").options].some(o => o.value === deep)) $("charSel").value = deep;
	$("charSel").onchange(); // 현재 selection 을 한 번 로드 (기본 mark 또는 딥링크)
	// ?auto=1 — OBS 처럼 클릭이 불가능한 환경에서 미러링 자동 시작 (권한 거부 시 조용히 무시)
	if (Q.get("auto") === "1") {
	showcase.stop(); clearTimeout(demoTimer);
	mirror.start().then(() => { $("mirrorBtn").classList.add("on"); $("mirrorBtn").textContent = "Stop mirroring"; })
	.catch(() => setStatus("Auto-mirroring failed — check the camera permission", true));
	}

	// ================= 렌더 루프 (활성 캐릭터만 그림) =================
	let lastFrame = 0;
	function render(now) {
	requestAnimationFrame(render);
	if (now - lastFrame < 30) return; // ~30fps 캡 — 데이터·녹화 모두 30fps라 고주사율에서 낭비 방지
	lastFrame = now;
	smooth = {};
	demoApply(); // 자동 쇼케이스 (미러링 off 일 때만)
	mirror.apply(smooth, now);
	const blink = Math.max(blinker.value(now), W("eyeblinkleft"), W("eyeblinkright"));
	mpanel.draw(W); // 트래킹 미리보기

	if (is3D()) {
	if (!mounted) return;
	AvatarCore.applyMorphs(mounted.morphMeshes, smooth, blink);
	const [gsx, gsy] = gaze3d(W);
	for (const e of mounted.eyes) e.rotation.set(gsy * 0.3, gsx * 0.4, 0);
	nod = 0.85 * nod + 0.15 * W("jawopen");
	// 머리 회전: 토글 ON 이면 웹캠 머리 자세를 전이, OFF 면 표정만 (기존 동작 유지)
	const h = $("headMove").checked ? mirror.head() : null;
	if (h) group.rotation.set(userPitch + h[1] + nod * 0.04, userYaw + h[0], h[2]);
	else group.rotation.set(userPitch + nod * 0.04, userYaw, 0);
	renderer.render(scene, camera);
	return;
	}

	// 2D 캐릭터 (소년·소녀) — 그리기는 코어, 워프 레이어 토글만 페이지
	if (!parts.base \|\| !manifest) return;
	// 머리 움직임 토글 ON 이면 웹캠 고개 방향을 유휴 흔들림 위에 합성 (2D: roll=회전, yaw/pitch=이동)
	headWander(shakeEl, now, W("jawopen"), 0.5, null, $("headMove").checked ? mirror.head() : null);
	if (warp.ready) { glCanvas.style.visibility = "visible"; warp.render(); }
	else { glCanvas.style.visibility = "hidden"; }
	AvatarCore.drawChar2D(ctx2d, { parts, manifest, W, blink, gaze: gaze2d(W), warp, clearBg: !CLEAN });

	if (recCv) { // 2D 녹화 합성 — 두 레이어(gl 워프 + cv 오버레이)
	const c = recCv.getContext("2d");
	c.fillStyle = "#fff"; c.fillRect(0, 0, 512, 512);
	if (warp.ready) c.drawImage(glCanvas, 0, 0);
	c.drawImage(cv, 0, 0);
	}
	}

	warp.init();
	loadChar(is3D() ? "boy" : mode()).catch(e => setStatus("Character failed to load: " + e.message, true)); // 2D 프리로드(3D 진입 시 boy 워밍, 2D 진입 시 활성 캐릭터 유지)
	requestAnimationFrame(render);
	</script>
	</body>
	</html>