eKeerar
495 lines
27 KiB
HTML
495 lines
27 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Noeul Reaction Sequencer — reactions.html</title>
|
||
<style>
|
||
:root { color-scheme: dark; }
|
||
body { margin:0; font-family: system-ui, "Segoe UI", sans-serif; background:#0e1014; color:#e6e8ee; }
|
||
header { padding:10px 16px; border-bottom:1px solid #232733; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
|
||
h1 { font-size:15px; margin:0; font-weight:600; color:#9ff0e0; }
|
||
.wrap { display:flex; gap:16px; padding:16px; flex-wrap:wrap; }
|
||
.stage { background:
|
||
linear-gradient(45deg,#1a1d24 25%,transparent 25%,transparent 75%,#1a1d24 75%),
|
||
linear-gradient(45deg,#1a1d24 25%,#15171d 25%,#15171d 75%,#1a1d24 75%);
|
||
background-size:24px 24px; background-position:0 0,12px 12px; border:1px solid #232733; border-radius:8px; }
|
||
canvas { display:block; }
|
||
.panel { min-width:250px; max-width:360px; font-size:13px; line-height:1.6; }
|
||
.row { display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
|
||
button { background:#1d2a3a; color:#cfe6ff; border:1px solid #2c4a63; border-radius:6px; padding:6px 12px; cursor:pointer; font-size:13px; }
|
||
button:hover { background:#26405a; }
|
||
button.on { background:#2e9e8b; color:#04231d; border-color:#2e9e8b; }
|
||
button.trig { background:#2a2536; border-color:#4a3d63; color:#e2d6ff; }
|
||
button.trig:hover { background:#39304d; }
|
||
label.file { display:inline-block; background:#232733; border:1px solid #37414f; border-radius:6px; padding:6px 10px; cursor:pointer; }
|
||
input[type=file]{ display:none; } input[type=range]{ width:130px; }
|
||
.muted { color:#8a93a6; font-size:12px; } code { background:#191c23; padding:1px 5px; border-radius:4px; color:#9ff0e0; }
|
||
.tag { font-size:11px; color:#9ff0e0; background:#12241f; border:1px solid #1f4238; border-radius:10px; padding:1px 8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>노을 Reaction Sequencer — <span id="stateName">dance_idle</span> <span class="muted">(520×900 / file://)</span></h1>
|
||
<div class="row">
|
||
<button id="playBtn" class="on">⏸ 일시정지</button>
|
||
<span class="muted">속도</span><input type="range" id="speed" min="0" max="2" step="0.05" value="1"><span id="speedV" class="muted">1.0×</span>
|
||
<button id="capBtn" class="on">💬 말풍선</button>
|
||
</div>
|
||
</header>
|
||
<div class="wrap">
|
||
<div class="stage"><canvas id="cv" width="520" height="900"></canvas></div>
|
||
<div class="panel">
|
||
<div class="row" id="trigRow"></div>
|
||
<p class="muted" id="status">상황 트리거를 누르면 반응 클립을 재생하고 종료 후 <code>dance_idle</code> 로 복귀합니다.</p>
|
||
<div class="row">
|
||
<label class="file">🖼 이미지 로드(다중)<input type="file" id="imgFiles" accept="image/png" multiple></label>
|
||
</div>
|
||
<p class="muted">• 리그 idle 은 풀캔버스 파츠를 원점에 그리고 관절 피벗 기준 회전.<br>
|
||
• baked 반응은 headless 바디 + 표정 머리를 <b>목(neck) 부착점</b>에 합성 (Python <code>reactions_layout_render.py</code> 와 동일 어파인).<br>
|
||
• 상대경로 로드가 막히면 <b>이미지 로드(다중)</b> 로 PNG 를 직접 지정(파일명 매칭).</p>
|
||
<p class="muted" id="loadInfo"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ============================================================
|
||
Embedded JSON (inlined so it runs from file:// with zero fetch)
|
||
============================================================ */
|
||
const RIG = {
|
||
"name":"Noeul","canvas":{"width":520,"height":900},"imageBase":"../03_Assets/Parts/Images/","mode":"fullcanvas",
|
||
"bones":[
|
||
{"name":"pelvis","parent":null,"pivot":[259.1,440.4],"z":6,"image":"noeul_part_pelvis.png"},
|
||
{"name":"chest","parent":"pelvis","pivot":[259.1,440.4],"z":8,"image":"noeul_part_chest.png"},
|
||
{"name":"neck","parent":"chest","pivot":[260.0,187.8],"z":9,"image":"noeul_part_neck.png"},
|
||
{"name":"head","parent":"neck","pivot":[259.4,164.4],"z":10,"image":"noeul_part_head.png"},
|
||
{"name":"upperarm_r","parent":"chest","pivot":[146.9,299.9],"z":5,"image":"noeul_part_upperarm_r.png"},
|
||
{"name":"forearm_r","parent":"upperarm_r","pivot":[101.9,376.0],"z":5,"image":"noeul_part_forearm_r.png"},
|
||
{"name":"hand_r","parent":"forearm_r","pivot":[59.5,435.9],"z":5,"image":"noeul_part_hand_r.png"},
|
||
{"name":"upperarm_l","parent":"chest","pivot":[373.0,300.8],"z":12,"image":"noeul_part_upperarm_l.png"},
|
||
{"name":"forearm_l","parent":"upperarm_l","pivot":[417.3,376.3],"z":12,"image":"noeul_part_forearm_l.png"},
|
||
{"name":"hand_l","parent":"forearm_l","pivot":[459.6,436.5],"z":13,"image":"noeul_part_hand_l.png"},
|
||
{"name":"thigh_r","parent":"pelvis","pivot":[207.9,513.6],"z":4,"image":"noeul_part_thigh_r.png"},
|
||
{"name":"shin_r","parent":"thigh_r","pivot":[188.4,651.7],"z":3,"image":"noeul_part_shin_r.png"},
|
||
{"name":"foot_r","parent":"shin_r","pivot":[164.5,777.8],"z":2,"image":"noeul_part_foot_r.png"},
|
||
{"name":"thigh_l","parent":"pelvis","pivot":[310.8,513.8],"z":4,"image":"noeul_part_thigh_l.png"},
|
||
{"name":"shin_l","parent":"thigh_l","pivot":[330.3,651.9],"z":3,"image":"noeul_part_shin_l.png"},
|
||
{"name":"foot_l","parent":"shin_l","pivot":[354.4,778.0],"z":2,"image":"noeul_part_foot_l.png"}
|
||
]
|
||
};
|
||
const DANCE_IDLE = {
|
||
"name":"dance_idle","duration":2.0,"loop":true,"fpsHint":60,"defaultEase":"sine",
|
||
"tracks":{
|
||
"pelvis":{"ty":[{"t":0,"v":0},{"t":0.5,"v":10},{"t":1.0,"v":0},{"t":1.5,"v":10},{"t":2.0,"v":0}],"tx":[{"t":0,"v":0},{"t":0.5,"v":7},{"t":1.0,"v":0},{"t":1.5,"v":-7},{"t":2.0,"v":0}],"rot":[{"t":0,"v":0},{"t":0.5,"v":2},{"t":1.0,"v":0},{"t":1.5,"v":-2},{"t":2.0,"v":0}]},
|
||
"chest":{"ty":[{"t":0,"v":0},{"t":0.5,"v":-3},{"t":1.0,"v":0},{"t":1.5,"v":-3},{"t":2.0,"v":0}],"tx":[{"t":0,"v":0},{"t":0.5,"v":-3},{"t":1.0,"v":0},{"t":1.5,"v":3},{"t":2.0,"v":0}],"rot":[{"t":0,"v":0},{"t":0.5,"v":-3},{"t":1.0,"v":0},{"t":1.5,"v":3},{"t":2.0,"v":0}]},
|
||
"neck":{"rot":[{"t":0,"v":0},{"t":0.5,"v":3},{"t":1.0,"v":0},{"t":1.5,"v":-3},{"t":2.0,"v":0}]},
|
||
"head":{"rot":[{"t":0,"v":0},{"t":0.5,"v":7},{"t":1.0,"v":0},{"t":1.5,"v":-7},{"t":2.0,"v":0}],"ty":[{"t":0,"v":0},{"t":0.5,"v":-2},{"t":1.0,"v":0},{"t":1.5,"v":-2},{"t":2.0,"v":0}]},
|
||
"upperarm_r":{"rot":[{"t":0,"v":0},{"t":0.5,"v":8},{"t":1.0,"v":0},{"t":1.5,"v":-4},{"t":2.0,"v":0}]},
|
||
"forearm_r":{"rot":[{"t":0,"v":0},{"t":0.5,"v":12},{"t":1.0,"v":0},{"t":1.5,"v":-6},{"t":2.0,"v":0}]},
|
||
"hand_r":{"rot":[{"t":0,"v":0},{"t":0.5,"v":6},{"t":1.0,"v":0},{"t":1.5,"v":-3},{"t":2.0,"v":0}]},
|
||
"upperarm_l":{"rot":[{"t":0,"v":0},{"t":0.5,"v":-4},{"t":1.0,"v":0},{"t":1.5,"v":8},{"t":2.0,"v":0}]},
|
||
"forearm_l":{"rot":[{"t":0,"v":0},{"t":0.5,"v":-6},{"t":1.0,"v":0},{"t":1.5,"v":12},{"t":2.0,"v":0}]},
|
||
"hand_l":{"rot":[{"t":0,"v":0},{"t":0.5,"v":-3},{"t":1.0,"v":0},{"t":1.5,"v":6},{"t":2.0,"v":0}]},
|
||
"thigh_r":{"rot":[{"t":0,"v":0},{"t":0.5,"v":3},{"t":1.0,"v":0},{"t":1.5,"v":-2},{"t":2.0,"v":0}]},
|
||
"shin_r":{"rot":[{"t":0,"v":0},{"t":0.5,"v":7},{"t":1.0,"v":0},{"t":1.5,"v":0},{"t":2.0,"v":0}]},
|
||
"thigh_l":{"rot":[{"t":0,"v":0},{"t":0.5,"v":-2},{"t":1.0,"v":0},{"t":1.5,"v":3},{"t":2.0,"v":0}]},
|
||
"shin_l":{"rot":[{"t":0,"v":0},{"t":0.5,"v":0},{"t":1.0,"v":0},{"t":1.5,"v":7},{"t":2.0,"v":0}]}
|
||
}
|
||
};
|
||
const REACTIONS = {
|
||
"name":"Noeul reactions map","idleDefault":"dance_idle",
|
||
"map":{"idle":"dance_idle","error":"gesture_no","success":"gesture_heart","focus":"gesture_focus"}
|
||
};
|
||
const LAYOUT = {
|
||
"stage":{"w":520,"h":900},"neck":[260,250],"overlap":6,"headTargetW":150,
|
||
"bodies":{
|
||
"noeul_body_cozy_armscross":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_cheer":{"scale":150.0,"ox":260.0,"oy":-3350.0},
|
||
"noeul_body_cozy_clap":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_control":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_dj":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_handwave":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_heart":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_idle_full":{"scale":1.145,"ox":-37.7,"oy":84.0},
|
||
"noeul_body_cozy_idle_upper":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_joy":{"scale":0.3036,"ox":181.2,"oy":228.4},
|
||
"noeul_body_cozy_listen":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_peace":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_piano":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_point":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_present":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_shrug":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_thumbsup":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_cozy_wave":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_armscross":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_cheer":{"scale":150.0,"ox":260.0,"oy":-3350.0},
|
||
"noeul_body_day_clap":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_control":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_dj":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_handwave":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_heart":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_idle_full":{"scale":1.145,"ox":-37.7,"oy":84.0},
|
||
"noeul_body_day_idle_upper":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_joy":{"scale":0.3036,"ox":181.2,"oy":228.4},
|
||
"noeul_body_day_listen":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_peace":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_piano":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_point":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_present":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_shrug":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_thumbsup":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_day_wave":{"scale":1.145,"ox":-37.7,"oy":222.5},
|
||
"noeul_body_night_armscross":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_cheer":{"scale":150.0,"ox":260.0,"oy":-3350.0},
|
||
"noeul_body_night_clap":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_control":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_dj":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_handwave":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_heart":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_idle_full":{"scale":150.0,"ox":-44140.0,"oy":-21500.0},
|
||
"noeul_body_night_idle_upper":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_joy":{"scale":0.3036,"ox":181.2,"oy":228.4},
|
||
"noeul_body_night_listen":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_peace":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_piano":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_point":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_present":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_shrug":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_thumbsup":{"scale":150.0,"ox":-44140.0,"oy":-3350.0},
|
||
"noeul_body_night_wave":{"scale":150.0,"ox":-44140.0,"oy":-3350.0}
|
||
},
|
||
"heads":{
|
||
"noeul_head_wave":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_blink":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_confused":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_cool":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_laugh":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_love":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_negative":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_neutral":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_playful":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_positive":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_pout":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_proud":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_sad":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_shy":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_sleepy":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_smile":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_surprised":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_talk":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_talk_wide":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_thinking":{"w":293,"neckNorm":[0.5651,0.8359]},
|
||
"noeul_head_wave_wink":{"w":293,"neckNorm":[0.5651,0.8359]}
|
||
}
|
||
};
|
||
const CLIPS = {
|
||
"gesture_no":{
|
||
"name":"gesture_no","duration":2.8,"return":"idle",
|
||
"layers":{
|
||
"body":[{"t":0.0,"mode":"rig","clip":"idle"},{"t":0.2,"mode":"baked","image":"noeul_body_cozy_armscross","fade":0.3}],
|
||
"face":[{"t":0.0,"expr":"neutral"},{"t":0.4,"expr":"negative"}],
|
||
"mouth":[{"t":0.7,"say":"음, 안 돼요","dur":1.3,"pattern":"talk"}],
|
||
"transform":{
|
||
"chest":{"ty":[{"t":0.0,"v":0},{"t":0.3,"v":-3},{"t":0.6,"v":0}]},
|
||
"head":{"rot":[{"t":0.7,"v":0},{"t":1.1,"v":6},{"t":1.6,"v":-6},{"t":2.1,"v":4},{"t":2.5,"v":0}]}
|
||
},
|
||
"caption":[{"t":0.7,"text":"음, 안 돼요~","dur":1.7}],
|
||
"sfx":[{"t":0.6,"id":"soft_no"}]
|
||
}
|
||
},
|
||
"gesture_heart":{
|
||
"name":"gesture_heart","duration":2.4,"return":"idle",
|
||
"layers":{
|
||
"body":[{"t":0.0,"mode":"rig","clip":"idle"},{"t":0.2,"mode":"baked","image":"noeul_body_cozy_heart","fade":0.3}],
|
||
"face":[{"t":0.0,"expr":"smile"},{"t":0.3,"expr":"love"}],
|
||
"mouth":[{"t":0.6,"say":"잘됐어요","dur":1.1,"pattern":"talk"}],
|
||
"transform":{
|
||
"pelvis":{"ty":[{"t":0.5,"v":0},{"t":0.9,"v":5},{"t":1.3,"v":0},{"t":1.7,"v":5},{"t":2.1,"v":0}]},
|
||
"head":{"rot":[{"t":0.5,"v":0},{"t":0.9,"v":3},{"t":1.3,"v":-3},{"t":1.7,"v":3},{"t":2.1,"v":0}]}
|
||
},
|
||
"caption":[{"t":0.6,"text":"잘됐어요~","dur":1.5}],
|
||
"sfx":[{"t":0.55,"id":"soft_success"}]
|
||
}
|
||
},
|
||
"gesture_focus":{
|
||
"name":"gesture_focus","duration":4.0,"loopHint":true,"return":"idle",
|
||
"layers":{
|
||
"body":[{"t":0.0,"mode":"rig","clip":"idle"},{"t":0.3,"mode":"baked","image":"noeul_body_cozy_listen","fade":0.4}],
|
||
"face":[{"t":0.0,"expr":"neutral"},{"t":0.5,"expr":"sleepy"}],
|
||
"mouth":[{"t":1.0,"say":"음~","dur":0.8,"pattern":"talk"}],
|
||
"transform":{
|
||
"head":{"rot":[{"t":0.0,"v":0},{"t":0.5,"v":4},{"t":1.0,"v":0},{"t":1.5,"v":4},{"t":2.0,"v":0},{"t":2.5,"v":4},{"t":3.0,"v":0},{"t":3.5,"v":4},{"t":4.0,"v":0}],
|
||
"ty":[{"t":0.0,"v":0},{"t":0.5,"v":3},{"t":1.0,"v":0},{"t":1.5,"v":3},{"t":2.0,"v":0},{"t":2.5,"v":3},{"t":3.0,"v":0},{"t":3.5,"v":3},{"t":4.0,"v":0}]},
|
||
"pelvis":{"ty":[{"t":0.0,"v":0},{"t":1.0,"v":3},{"t":2.0,"v":0},{"t":3.0,"v":3},{"t":4.0,"v":0}]}
|
||
},
|
||
"caption":[{"t":1.0,"text":"♪","dur":3.0}],
|
||
"sfx":[{"t":0.5,"id":"lofi_loop","loop":true}]
|
||
}
|
||
}
|
||
};
|
||
|
||
/* ============================================================
|
||
Asset paths
|
||
============================================================ */
|
||
const PARTS_DIR = RIG.imageBase || "../03_Assets/Parts/Images/";
|
||
const HEAD_DIR = "../03_Assets/Library/Heads/";
|
||
const BAKED_DIRS = ["../03_Assets/Library/BakedPoses/Cozy/","../03_Assets/Library/BakedPoses/Day/","../03_Assets/Library/BakedPoses/Night/"];
|
||
|
||
/* images keyed by basename (no extension) */
|
||
const images = {}; // key -> HTMLImageElement (loaded)
|
||
let loadTotal = 0, loadOk = 0;
|
||
|
||
function tryLoad(key, dirs){
|
||
loadTotal++;
|
||
let i = 0;
|
||
const attempt = () => {
|
||
if (i >= dirs.length) { refreshInfo(); return; } // give up (leave undefined)
|
||
const im = new Image();
|
||
im.onload = () => { images[key] = im; loadOk++; refreshInfo(); };
|
||
im.onerror = () => { i++; attempt(); };
|
||
im.src = dirs[i] + key + ".png";
|
||
};
|
||
attempt();
|
||
}
|
||
|
||
function loadAllAssets(){
|
||
// rig parts
|
||
RIG.bones.forEach(b => { if (b.image) tryLoad(b.image.replace(/\.png$/i,""), [PARTS_DIR]); });
|
||
// heads (all expressions + talk frames)
|
||
Object.keys(LAYOUT.heads).forEach(k => tryLoad(k, [HEAD_DIR]));
|
||
// baked bodies referenced by clips (+ common ones); resolve across Cozy/Day/Night
|
||
const bakedNeeded = new Set();
|
||
Object.values(CLIPS).forEach(c => (c.layers.body||[]).forEach(e => { if (e.mode==="baked" && e.image) bakedNeeded.add(e.image); }));
|
||
bakedNeeded.forEach(k => tryLoad(k, BAKED_DIRS));
|
||
}
|
||
function refreshInfo(){
|
||
document.getElementById('loadInfo').textContent = `이미지 로드: ${loadOk} / ${loadTotal}` + (loadOk===0?' (없음 → 이미지 로드(다중) 사용)':'');
|
||
}
|
||
|
||
/* ============================================================
|
||
Matrix + sampling helpers (same convention as index.html)
|
||
mul(A,B) = A·B (B applied first, then A); tp = A·point
|
||
============================================================ */
|
||
const mul=(m,n)=>({a:m.a*n.a+m.c*n.b,b:m.b*n.a+m.d*n.b,c:m.a*n.c+m.c*n.d,d:m.b*n.c+m.d*n.d,e:m.a*n.e+m.c*n.f+m.e,f:m.b*n.e+m.d*n.f+m.f});
|
||
const T=(x,y)=>({a:1,b:0,c:0,d:1,e:x,f:y});
|
||
const R=deg=>{const r=deg*Math.PI/180,c=Math.cos(r),s=Math.sin(r);return{a:c,b:s,c:-s,d:c,e:0,f:0};};
|
||
const Sc=k=>({a:k,b:0,c:0,d:k,e:0,f:0});
|
||
function ease(ty,x){return ty==='linear'?x:-(Math.cos(Math.PI*x)-1)/2;}
|
||
function sample(keys,t,defEase){ if(!keys||!keys.length)return 0; if(t<=keys[0].t)return keys[0].v; const n=keys.length; if(t>=keys[n-1].t)return keys[n-1].v;
|
||
for(let i=0;i<n-1;i++){ if(t>=keys[i].t&&t<=keys[i+1].t){ const k0=keys[i],k1=keys[i+1],sp=(k1.t-k0.t)||1e-6; return k0.v+(k1.v-k0.v)*ease(k0.e||defEase||'sine',(t-k0.t)/sp);} } return keys[n-1].v; }
|
||
function sT(track,sub,t){ return (track && track[sub]) ? sample(track[sub],t) : 0; }
|
||
// active timeline entry: last with t<=now (or first)
|
||
function activeEntry(arr,now){ if(!arr||!arr.length)return null; let e=arr[0]; for(let i=0;i<arr.length;i++){ if(arr[i].t<=now) e=arr[i]; else break; } return e; }
|
||
function activeIndex(arr,now){ let idx=0; for(let i=0;i<arr.length;i++){ if(arr[i].t<=now) idx=i; else break; } return idx; }
|
||
|
||
/* ============================================================
|
||
Rig FK render (copied engine from index.html) with optional
|
||
per-bone extra deltas and whole-stage translate.
|
||
============================================================ */
|
||
const cv=document.getElementById('cv'), ctx=cv.getContext('2d');
|
||
cv.width=RIG.canvas.width; cv.height=RIG.canvas.height;
|
||
const bones=RIG.bones.map(b=>Object.assign({},b));
|
||
const boneMap={}; bones.forEach(b=>boneMap[b.name]=b);
|
||
|
||
function rigWorlds(time, extra){
|
||
extra = extra||{};
|
||
bones.forEach(b=>{
|
||
const tr=DANCE_IDLE.tracks[b.name]||{};
|
||
const ex=extra[b.name]||{};
|
||
const rot=sample(tr.rot,time,DANCE_IDLE.defaultEase)+(ex.rot||0);
|
||
const tx =sample(tr.tx ,time,DANCE_IDLE.defaultEase)+(ex.tx ||0);
|
||
const ty =sample(tr.ty ,time,DANCE_IDLE.defaultEase)+(ex.ty ||0);
|
||
const jx=b.pivot[0],jy=b.pivot[1];
|
||
const local=mul(T(tx,ty),mul(T(jx,jy),mul(R(rot),T(-jx,-jy))));
|
||
b._world=b.parent?mul(boneMap[b.parent]._world,local):local;
|
||
});
|
||
}
|
||
function drawRig(time, extra, stageTx, stageTy, alpha){
|
||
rigWorlds(time, extra);
|
||
const base=T(stageTx||0, stageTy||0);
|
||
ctx.globalAlpha = alpha==null?1:alpha;
|
||
bones.slice().sort((a,b)=>(a.z||0)-(b.z||0)).forEach(b=>{
|
||
const im=images[b.image.replace(/\.png$/i,"")]; if(!im)return;
|
||
const w=mul(base,b._world);
|
||
ctx.setTransform(w.a,w.b,w.c,w.d,w.e,w.f); ctx.drawImage(im,0,0);
|
||
});
|
||
ctx.setTransform(1,0,0,1,0,0); ctx.globalAlpha=1;
|
||
}
|
||
|
||
/* ============================================================
|
||
Baked composition — mirrors reactions_layout_render.py compose()
|
||
body: M = T(stage) · T(ox,oy) · Sc(scale)
|
||
head: M = T(stage) · T(NECK_X, NECK_Y+OVERLAP+headTy) · R(rot) · Sc(hs) · T(-ax,-ay)
|
||
============================================================ */
|
||
const NECK_X = LAYOUT.neck[0], NECK_Y = LAYOUT.neck[1], OVERLAP = LAYOUT.overlap, HEAD_TARGET_W = LAYOUT.headTargetW;
|
||
|
||
function drawBakedBody(imgKey, stageTx, stageTy, alpha){
|
||
const bl=LAYOUT.bodies[imgKey]; const im=images[imgKey];
|
||
if(!bl||!im)return;
|
||
const M=mul(T(stageTx||0,stageTy||0), mul(T(bl.ox,bl.oy), Sc(bl.scale)));
|
||
ctx.globalAlpha=alpha==null?1:alpha;
|
||
ctx.setTransform(M.a,M.b,M.c,M.d,M.e,M.f); ctx.drawImage(im,0,0);
|
||
ctx.setTransform(1,0,0,1,0,0); ctx.globalAlpha=1;
|
||
}
|
||
function headKeyFallback(key){
|
||
return images[key] ? key : (images['noeul_head_wave_neutral'] ? 'noeul_head_wave_neutral' : (images['noeul_head_wave'] ? 'noeul_head_wave' : null));
|
||
}
|
||
function drawHead(headKey, rot, headTy, stageTx, stageTy, alpha){
|
||
const key=headKeyFallback(headKey); if(!key)return;
|
||
const hl=LAYOUT.heads[headKey]||LAYOUT.heads[key]; const im=images[key]; if(!hl||!im)return;
|
||
const hs=HEAD_TARGET_W/hl.w;
|
||
const ax=hl.neckNorm[0]*im.naturalWidth, ay=hl.neckNorm[1]*im.naturalHeight;
|
||
const M=mul(T(stageTx||0,stageTy||0),
|
||
mul(T(NECK_X, NECK_Y+OVERLAP+(headTy||0)),
|
||
mul(R(rot||0), mul(Sc(hs), T(-ax,-ay)))));
|
||
ctx.globalAlpha=alpha==null?1:alpha;
|
||
ctx.setTransform(M.a,M.b,M.c,M.d,M.e,M.f); ctx.drawImage(im,0,0);
|
||
ctx.setTransform(1,0,0,1,0,0); ctx.globalAlpha=1;
|
||
}
|
||
|
||
/* current expression + mouth lip-sync frame */
|
||
function currentHeadKey(clip, now){
|
||
const face=clip.layers.face; const fe=activeEntry(face,now);
|
||
const expr=fe?fe.expr:'neutral';
|
||
const exprKey='noeul_head_wave_'+expr;
|
||
const mouth=clip.layers.mouth||[];
|
||
for(const m of mouth){
|
||
if(now>=m.t && now < m.t+(m.dur||0)){
|
||
// ~7Hz swap between talk / expr / talk_wide to approximate lip-sync
|
||
const seq=['noeul_head_wave_talk', exprKey, 'noeul_head_wave_talk_wide', exprKey];
|
||
return seq[Math.floor((now-m.t)*7)%seq.length];
|
||
}
|
||
}
|
||
return exprKey;
|
||
}
|
||
|
||
/* baked body layer draw (body + head) at given alpha */
|
||
function drawBakedLayer(clip, entry, now, stageTx, stageTy, headRot, headTy, alpha){
|
||
drawBakedBody(entry.image, stageTx, stageTy, alpha);
|
||
drawHead(currentHeadKey(clip, now), headRot, headTy, stageTx, stageTy, alpha);
|
||
}
|
||
/* rig body layer draw (rig already includes head; add head rot/ty delta) */
|
||
function drawRigLayer(clip, now, stageTx, stageTy, headRot, headTy, alpha){
|
||
drawRig(now, { head:{ rot:headRot, ty:headTy } }, stageTx, stageTy, alpha);
|
||
}
|
||
function drawBodyEntry(clip, entry, now, stageTx, stageTy, headRot, headTy, alpha){
|
||
if(entry.mode==='baked') drawBakedLayer(clip, entry, now, stageTx, stageTy, headRot, headTy, alpha);
|
||
else drawRigLayer(clip, now, stageTx, stageTy, headRot, headTy, alpha);
|
||
}
|
||
|
||
/* speech bubble caption near the head */
|
||
let showCaption=true;
|
||
function drawCaption(clip, now, stageTx, stageTy){
|
||
if(!showCaption)return;
|
||
const cap=(clip.layers.caption||[]).find(c=>now>=c.t && now<c.t+(c.dur||0));
|
||
if(!cap)return;
|
||
const cx=NECK_X+(stageTx||0), topY=NECK_Y-190+(stageTy||0);
|
||
ctx.save(); ctx.setTransform(1,0,0,1,0,0);
|
||
ctx.font='600 20px system-ui, "Segoe UI", sans-serif';
|
||
const tw=ctx.measureText(cap.text).width;
|
||
const padX=14, padY=10, bw=tw+padX*2, bh=34, bx=cx-bw/2, by=topY-bh;
|
||
ctx.fillStyle='rgba(20,24,30,0.92)'; ctx.strokeStyle='#2e9e8b'; ctx.lineWidth=2;
|
||
roundRect(bx,by,bw,bh,10); ctx.fill(); ctx.stroke();
|
||
// tail
|
||
ctx.beginPath(); ctx.moveTo(cx-8,by+bh); ctx.lineTo(cx+8,by+bh); ctx.lineTo(cx,by+bh+12); ctx.closePath();
|
||
ctx.fillStyle='rgba(20,24,30,0.92)'; ctx.fill();
|
||
ctx.fillStyle='#e6f7f2'; ctx.textAlign='center'; ctx.textBaseline='middle';
|
||
ctx.fillText(cap.text, cx, by+bh/2);
|
||
ctx.restore();
|
||
}
|
||
function roundRect(x,y,w,h,r){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); }
|
||
|
||
/* ============================================================
|
||
Reaction render (full frame)
|
||
============================================================ */
|
||
function renderReaction(clip, now){
|
||
ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,cv.width,cv.height);
|
||
const tr=clip.layers.transform||{};
|
||
const stageTx=sT(tr.pelvis,'tx',now)+sT(tr.chest,'tx',now);
|
||
const stageTy=sT(tr.pelvis,'ty',now)+sT(tr.chest,'ty',now);
|
||
const headRot=sT(tr.head,'rot',now);
|
||
const headTy =sT(tr.head,'ty',now);
|
||
|
||
const entries=clip.layers.body||[];
|
||
const ai=activeIndex(entries,now);
|
||
const cur=entries[ai];
|
||
const fade=cur?cur.fade||0:0;
|
||
if(cur && fade>0 && ai>0 && now < cur.t+fade){
|
||
const p=Math.max(0,Math.min(1,(now-cur.t)/fade));
|
||
drawBodyEntry(clip, entries[ai-1], now, stageTx, stageTy, headRot, headTy, 1-p); // outgoing
|
||
drawBodyEntry(clip, cur, now, stageTx, stageTy, headRot, headTy, p); // incoming
|
||
} else if(cur){
|
||
drawBodyEntry(clip, cur, now, stageTx, stageTy, headRot, headTy, 1);
|
||
}
|
||
drawCaption(clip, now, stageTx, stageTy);
|
||
}
|
||
function renderIdle(time){
|
||
ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0,0,cv.width,cv.height);
|
||
drawRig(time, null, 0, 0, 1);
|
||
}
|
||
|
||
/* ============================================================
|
||
Playback loop / state machine
|
||
============================================================ */
|
||
let stateMode='idle'; // 'idle' | 'reaction'
|
||
let curClip=null, reactTime=0, idleTime=0;
|
||
let playing=true, speed=1, last=performance.now();
|
||
|
||
function playClip(name){
|
||
const clip=CLIPS[name];
|
||
if(!clip){ stateMode='idle'; setStateName('dance_idle'); return; }
|
||
curClip=clip; reactTime=0; stateMode='reaction'; setStateName(clip.name);
|
||
}
|
||
function goIdle(){ stateMode='idle'; curClip=null; setStateName('dance_idle'); }
|
||
function setStateName(n){ document.getElementById('stateName').textContent=n; }
|
||
|
||
function frame(now){
|
||
const dt=(now-last)/1000; last=now;
|
||
if(playing){
|
||
if(stateMode==='reaction' && curClip){
|
||
reactTime+=dt*speed;
|
||
if(reactTime>=curClip.duration){ goIdle(); }
|
||
} else {
|
||
idleTime+=dt*speed; if(idleTime>=DANCE_IDLE.duration) idleTime%=DANCE_IDLE.duration;
|
||
}
|
||
}
|
||
if(stateMode==='reaction' && curClip) renderReaction(curClip, reactTime);
|
||
else renderIdle(idleTime);
|
||
requestAnimationFrame(frame);
|
||
}
|
||
|
||
/* ============================================================
|
||
UI
|
||
============================================================ */
|
||
const trigRow=document.getElementById('trigRow');
|
||
Object.keys(REACTIONS.map).forEach(key=>{
|
||
const clipName=REACTIONS.map[key];
|
||
const btn=document.createElement('button');
|
||
btn.className='trig';
|
||
btn.innerHTML=`▶ ${key} <span class="tag">${clipName}</span>`;
|
||
btn.onclick=()=>{
|
||
if(key==='idle' || clipName===REACTIONS.idleDefault){ idleTime=0; goIdle(); }
|
||
else playClip(clipName);
|
||
};
|
||
trigRow.appendChild(btn);
|
||
});
|
||
|
||
const playBtn=document.getElementById('playBtn'), capBtn=document.getElementById('capBtn');
|
||
playBtn.onclick=()=>{ playing=!playing; playBtn.textContent=playing?'⏸ 일시정지':'▶ 재생'; playBtn.classList.toggle('on',playing); };
|
||
capBtn.onclick=()=>{ showCaption=!showCaption; capBtn.classList.toggle('on',showCaption); };
|
||
document.getElementById('speed').oninput=e=>{ speed=parseFloat(e.target.value); document.getElementById('speedV').textContent=speed.toFixed(2)+'×'; };
|
||
document.getElementById('imgFiles').onchange=e=>{
|
||
[...e.target.files].forEach(f=>{
|
||
const key=f.name.replace(/\.png$/i,"");
|
||
const im=new Image(); im.onload=()=>{ if(!images[key])loadOk++; images[key]=im; refreshInfo(); }; im.src=URL.createObjectURL(f);
|
||
});
|
||
};
|
||
|
||
loadAllAssets(); refreshInfo(); requestAnimationFrame(frame);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|