Initial Dansori character workspace
This commit is contained in:
eKeerar
@@ -0,0 +1,883 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Haruka 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": "Haruka",
|
||||
"canvas": { "width": 520, "height": 900 },
|
||||
"imageBase": "../03_Assets/Parts/Images/",
|
||||
"mode": "fullcanvas",
|
||||
"note": "Full-canvas parts (520x900, part at master position). Draw at origin; rotate about pivot (joint). pivot = auto-derived overlap centroid from Haruka's parts (_tools/rig_pivots_render.py).",
|
||||
"bones": [
|
||||
{ "name": "pelvis", "parent": null, "pivot": [259.4, 455.0], "z": 6, "image": "haruka_part_pelvis.png" },
|
||||
{ "name": "chest", "parent": "pelvis", "pivot": [259.3, 304.0], "z": 8, "image": "haruka_part_chest.png" },
|
||||
{ "name": "neck", "parent": "chest", "pivot": [259.5, 240.0], "z": 9, "image": "haruka_part_neck.png" },
|
||||
{ "name": "head", "parent": "neck", "pivot": [260.4, 20.0], "z": 10, "image": "haruka_part_head.png" },
|
||||
|
||||
{ "name": "upperarm_r", "parent": "chest", "pivot": [143.0, 261.0], "z": 5, "image": "haruka_part_upperarm_r.png" },
|
||||
{ "name": "forearm_r", "parent": "upperarm_r", "pivot": [151.6, 390.0], "z": 5, "image": "haruka_part_forearm_r.png" },
|
||||
{ "name": "hand_r", "parent": "forearm_r", "pivot": [77.2, 412.0], "z": 5, "image": "haruka_part_hand_r.png" },
|
||||
|
||||
{ "name": "upperarm_l", "parent": "chest", "pivot": [375.0, 261.0], "z": 12, "image": "haruka_part_upperarm_l.png" },
|
||||
{ "name": "forearm_l", "parent": "upperarm_l", "pivot": [367.5, 390.0], "z": 12, "image": "haruka_part_forearm_l.png" },
|
||||
{ "name": "hand_l", "parent": "forearm_l", "pivot": [440.0, 412.0], "z": 13, "image": "haruka_part_hand_l.png" },
|
||||
|
||||
{ "name": "thigh_r", "parent": "pelvis", "pivot": [195.3, 558.0], "z": 4, "image": "haruka_part_thigh_r.png" },
|
||||
{ "name": "shin_r", "parent": "thigh_r", "pivot": [179.8, 670.0], "z": 3, "image": "haruka_part_shin_r.png" },
|
||||
{ "name": "foot_r", "parent": "shin_r", "pivot": [171.8, 790.0], "z": 2, "image": "haruka_part_foot_r.png" },
|
||||
|
||||
{ "name": "thigh_l", "parent": "pelvis", "pivot": [323.3, 558.0], "z": 4, "image": "haruka_part_thigh_l.png" },
|
||||
{ "name": "shin_l", "parent": "thigh_l", "pivot": [338.6, 670.0], "z": 3, "image": "haruka_part_shin_l.png" },
|
||||
{ "name": "foot_l", "parent": "shin_l", "pivot": [346.4, 790.0], "z": 2, "image": "haruka_part_foot_l.png" }
|
||||
]
|
||||
};
|
||||
const DANCE_IDLE = {
|
||||
"name": "dance_idle",
|
||||
"duration": 2.0,
|
||||
"loop": true,
|
||||
"fpsHint": 60,
|
||||
"defaultEase": "sine",
|
||||
"note": "하루카 전용 튜닝 — 세일러 블라우스↔스커트가 별개라 CHEST 트랙 없음(허리 봉인). 블라우스가 재킷처럼 두껍지 않아 어깨 소켓 틈이 나기 쉬워 upperarm 진폭을 작게(±4), 팔 생동감은 forearm/hand(소매 안)로. 스웨이는 pelvis가 상체 통째로.",
|
||||
"tracks": {
|
||||
"pelvis": {
|
||||
"ty": [ {"t":0,"v":0}, {"t":0.5,"v":9}, {"t":1.0,"v":0}, {"t":1.5,"v":9}, {"t":2.0,"v":0} ],
|
||||
"tx": [ {"t":0,"v":0}, {"t":0.5,"v":6}, {"t":1.0,"v":0}, {"t":1.5,"v":-6}, {"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":2}, {"t":1.0,"v":0}, {"t":1.5,"v":-2}, {"t":2.0,"v":0} ] },
|
||||
"head": {
|
||||
"rot": [ {"t":0,"v":0}, {"t":0.5,"v":5}, {"t":1.0,"v":0}, {"t":1.5,"v":-5}, {"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":4}, {"t":1.0,"v":0}, {"t":1.5,"v":-2}, {"t":2.0,"v":0} ] },
|
||||
"forearm_r": { "rot": [ {"t":0,"v":0}, {"t":0.5,"v":9}, {"t":1.0,"v":0}, {"t":1.5,"v":-5}, {"t":2.0,"v":0} ] },
|
||||
"hand_r": { "rot": [ {"t":0,"v":0}, {"t":0.5,"v":5}, {"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":-2}, {"t":1.0,"v":0}, {"t":1.5,"v":4}, {"t":2.0,"v":0} ] },
|
||||
"forearm_l": { "rot": [ {"t":0,"v":0}, {"t":0.5,"v":-5}, {"t":1.0,"v":0}, {"t":1.5,"v":9}, {"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":5}, {"t":2.0,"v":0} ] },
|
||||
|
||||
"thigh_r": { "rot": [ {"t":0,"v":0}, {"t":0.5,"v":2}, {"t":1.0,"v":0}, {"t":1.5,"v":-1}, {"t":2.0,"v":0} ] },
|
||||
"shin_r": { "rot": [ {"t":0,"v":0}, {"t":0.5,"v":5}, {"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":-1}, {"t":1.0,"v":0}, {"t":1.5,"v":2}, {"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":5}, {"t":2.0,"v":0} ] }
|
||||
}
|
||||
};
|
||||
const REACTIONS = {
|
||||
"name": "Haruka reactions map",
|
||||
"note": "상황키(app event) → 반응 클립 이름(clips/<name>.json). idle은 배경 기본 루프.",
|
||||
"idleDefault": "dance_idle",
|
||||
"map": {
|
||||
"idle": "dance_idle",
|
||||
"error": "gesture_no",
|
||||
"success": "gesture_heart"
|
||||
},
|
||||
"plannedExpansion": {
|
||||
"greet": "gesture_wave",
|
||||
"explain": "gesture_present",
|
||||
"thinking": "gesture_think"
|
||||
}
|
||||
};
|
||||
const LAYOUT = {
|
||||
"stage": {
|
||||
"w": 520,
|
||||
"h": 900
|
||||
},
|
||||
"neck": [
|
||||
260,
|
||||
250
|
||||
],
|
||||
"overlap": 6,
|
||||
"headTargetW": 150,
|
||||
"bodies": {
|
||||
"haruka_body_idol_armscross": {
|
||||
"scale": 0.329,
|
||||
"ox": 28.5,
|
||||
"oy": 228.9
|
||||
},
|
||||
"haruka_body_idol_cheer": {
|
||||
"scale": 0.2516,
|
||||
"ox": 194.7,
|
||||
"oy": 242.7
|
||||
},
|
||||
"haruka_body_idol_clap": {
|
||||
"scale": 0.319,
|
||||
"ox": 36.9,
|
||||
"oy": 227.0
|
||||
},
|
||||
"haruka_body_idol_control": {
|
||||
"scale": 0.2725,
|
||||
"ox": 41.4,
|
||||
"oy": 218.4
|
||||
},
|
||||
"haruka_body_idol_dj": {
|
||||
"scale": 0.3042,
|
||||
"ox": 2.0,
|
||||
"oy": 237.2
|
||||
},
|
||||
"haruka_body_idol_handwave": {
|
||||
"scale": 0.3329,
|
||||
"ox": 150.8,
|
||||
"oy": 212.4
|
||||
},
|
||||
"haruka_body_idol_heart": {
|
||||
"scale": 0.3464,
|
||||
"ox": -5.3,
|
||||
"oy": 225.8
|
||||
},
|
||||
"haruka_body_idol_idle_full": {
|
||||
"scale": 0.5361,
|
||||
"ox": -24.7,
|
||||
"oy": 217.3
|
||||
},
|
||||
"haruka_body_idol_idle_upper": {
|
||||
"scale": 0.3392,
|
||||
"ox": -10.4,
|
||||
"oy": 216.1
|
||||
},
|
||||
"haruka_body_idol_joy": {
|
||||
"scale": 0.2641,
|
||||
"ox": 218.4,
|
||||
"oy": 244.2
|
||||
},
|
||||
"haruka_body_idol_listen": {
|
||||
"scale": 0.3464,
|
||||
"ox": 72.6,
|
||||
"oy": 230.9
|
||||
},
|
||||
"haruka_body_idol_peace": {
|
||||
"scale": 0.3686,
|
||||
"ox": 82.7,
|
||||
"oy": 226.8
|
||||
},
|
||||
"haruka_body_idol_piano": {
|
||||
"scale": 0.3397,
|
||||
"ox": 35.3,
|
||||
"oy": 229.6
|
||||
},
|
||||
"haruka_body_idol_point": {
|
||||
"scale": 0.3142,
|
||||
"ox": 172.0,
|
||||
"oy": 233.0
|
||||
},
|
||||
"haruka_body_idol_present": {
|
||||
"scale": 0.2593,
|
||||
"ox": 82.5,
|
||||
"oy": 222.3
|
||||
},
|
||||
"haruka_body_idol_shrug": {
|
||||
"scale": 0.1738,
|
||||
"ox": 126.1,
|
||||
"oy": 232.3
|
||||
},
|
||||
"haruka_body_idol_thumbsup": {
|
||||
"scale": 0.356,
|
||||
"ox": 13.8,
|
||||
"oy": 216.2
|
||||
},
|
||||
"haruka_body_idol_wave": {
|
||||
"scale": 0.3397,
|
||||
"ox": 151.3,
|
||||
"oy": 234.4
|
||||
},
|
||||
"haruka_body_sailor_armscross": {
|
||||
"scale": 0.3199,
|
||||
"ox": 64.4,
|
||||
"oy": 221.8
|
||||
},
|
||||
"haruka_body_sailor_cheer": {
|
||||
"scale": 0.213,
|
||||
"ox": 210.3,
|
||||
"oy": 233.6
|
||||
},
|
||||
"haruka_body_sailor_clap": {
|
||||
"scale": 0.3423,
|
||||
"ox": 5.2,
|
||||
"oy": 214.7
|
||||
},
|
||||
"haruka_body_sailor_control": {
|
||||
"scale": 0.2369,
|
||||
"ox": 100.7,
|
||||
"oy": 229.4
|
||||
},
|
||||
"haruka_body_sailor_dj": {
|
||||
"scale": 0.293,
|
||||
"ox": 17.0,
|
||||
"oy": 234.5
|
||||
},
|
||||
"haruka_body_sailor_handwave": {
|
||||
"scale": 0.29,
|
||||
"ox": 68.9,
|
||||
"oy": 219.8
|
||||
},
|
||||
"haruka_body_sailor_heart": {
|
||||
"scale": 0.3662,
|
||||
"ox": 4.0,
|
||||
"oy": 218.9
|
||||
},
|
||||
"haruka_body_sailor_idle_full": {
|
||||
"scale": 0.5263,
|
||||
"ox": -36.6,
|
||||
"oy": 196.8
|
||||
},
|
||||
"haruka_body_sailor_idle_upper": {
|
||||
"scale": 0.2879,
|
||||
"ox": 83.5,
|
||||
"oy": 222.1
|
||||
},
|
||||
"haruka_body_sailor_joy": {
|
||||
"scale": 0.2712,
|
||||
"ox": 25.5,
|
||||
"oy": 242.7
|
||||
},
|
||||
"haruka_body_sailor_listen": {
|
||||
"scale": 0.3722,
|
||||
"ox": -58.6,
|
||||
"oy": 232.1
|
||||
},
|
||||
"haruka_body_sailor_peace": {
|
||||
"scale": 0.3258,
|
||||
"ox": 107.4,
|
||||
"oy": 222.3
|
||||
},
|
||||
"haruka_body_sailor_piano": {
|
||||
"scale": 0.3083,
|
||||
"ox": 68.4,
|
||||
"oy": 219.5
|
||||
},
|
||||
"haruka_body_sailor_point": {
|
||||
"scale": 0.3046,
|
||||
"ox": 173.9,
|
||||
"oy": 222.6
|
||||
},
|
||||
"haruka_body_sailor_present": {
|
||||
"scale": 0.2486,
|
||||
"ox": 43.2,
|
||||
"oy": 220.7
|
||||
},
|
||||
"haruka_body_sailor_shrug": {
|
||||
"scale": 0.1697,
|
||||
"ox": 150.2,
|
||||
"oy": 234.0
|
||||
},
|
||||
"haruka_body_sailor_thumbsup": {
|
||||
"scale": 0.3506,
|
||||
"ox": 27.4,
|
||||
"oy": 218.4
|
||||
},
|
||||
"haruka_body_sailor_wave": {
|
||||
"scale": 0.319,
|
||||
"ox": 186.6,
|
||||
"oy": 231.8
|
||||
},
|
||||
"haruka_body_witch_armscross": {
|
||||
"scale": 0.3925,
|
||||
"ox": -49.1,
|
||||
"oy": 233.1
|
||||
},
|
||||
"haruka_body_witch_cheer": {
|
||||
"scale": 0.2255,
|
||||
"ox": 188.5,
|
||||
"oy": 240.3
|
||||
},
|
||||
"haruka_body_witch_clap": {
|
||||
"scale": 0.4236,
|
||||
"ox": -62.8,
|
||||
"oy": 230.5
|
||||
},
|
||||
"haruka_body_witch_control": {
|
||||
"scale": 0.2897,
|
||||
"ox": 12.8,
|
||||
"oy": 239.0
|
||||
},
|
||||
"haruka_body_witch_dj": {
|
||||
"scale": 0.3199,
|
||||
"ox": 47.6,
|
||||
"oy": 238.8
|
||||
},
|
||||
"haruka_body_witch_handwave": {
|
||||
"scale": 0.3464,
|
||||
"ox": 9.6,
|
||||
"oy": 225.8
|
||||
},
|
||||
"haruka_body_witch_heart": {
|
||||
"scale": 0.3945,
|
||||
"ox": -16.7,
|
||||
"oy": 231.1
|
||||
},
|
||||
"haruka_body_witch_idle_full": {
|
||||
"scale": 0.4684,
|
||||
"ox": 16.2,
|
||||
"oy": 191.4
|
||||
},
|
||||
"haruka_body_witch_idle_upper": {
|
||||
"scale": 0.3814,
|
||||
"ox": -61.9,
|
||||
"oy": 222.5
|
||||
},
|
||||
"haruka_body_witch_joy": {
|
||||
"scale": 0.2678,
|
||||
"ox": 216.6,
|
||||
"oy": 240.4
|
||||
},
|
||||
"haruka_body_witch_listen": {
|
||||
"scale": 0.3918,
|
||||
"ox": 26.1,
|
||||
"oy": 245.3
|
||||
},
|
||||
"haruka_body_witch_peace": {
|
||||
"scale": 0.371,
|
||||
"ox": 92.9,
|
||||
"oy": 234.8
|
||||
},
|
||||
"haruka_body_witch_piano": {
|
||||
"scale": 0.3758,
|
||||
"ox": -50.8,
|
||||
"oy": 229.3
|
||||
},
|
||||
"haruka_body_witch_point": {
|
||||
"scale": 0.29,
|
||||
"ox": 54.4,
|
||||
"oy": 237.8
|
||||
},
|
||||
"haruka_body_witch_present": {
|
||||
"scale": 0.2671,
|
||||
"ox": 37.2,
|
||||
"oy": 237.7
|
||||
},
|
||||
"haruka_body_witch_shrug": {
|
||||
"scale": 0.1896,
|
||||
"ox": 125.0,
|
||||
"oy": 239.4
|
||||
},
|
||||
"haruka_body_witch_thumbsup": {
|
||||
"scale": 0.3674,
|
||||
"ox": 2.6,
|
||||
"oy": 236.0
|
||||
},
|
||||
"haruka_body_witch_wave": {
|
||||
"scale": 0.3272,
|
||||
"ox": 186.7,
|
||||
"oy": 235.3
|
||||
}
|
||||
},
|
||||
"heads": {
|
||||
"haruka_head_twin": {
|
||||
"w": 1046,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_blink": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_confused": {
|
||||
"w": 1046,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_cool": {
|
||||
"w": 1043,
|
||||
"neckNorm": [
|
||||
0.4976,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_laugh": {
|
||||
"w": 1059,
|
||||
"neckNorm": [
|
||||
0.5,
|
||||
0.9641
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_love": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_negative": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4964,
|
||||
0.953
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_neutral": {
|
||||
"w": 1045,
|
||||
"neckNorm": [
|
||||
0.4976,
|
||||
0.9545
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_playful": {
|
||||
"w": 1042,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_positive": {
|
||||
"w": 1040,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_pout": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_proud": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_sad": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9569
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_shy": {
|
||||
"w": 1043,
|
||||
"neckNorm": [
|
||||
0.4968,
|
||||
0.9553
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_sleepy": {
|
||||
"w": 1045,
|
||||
"neckNorm": [
|
||||
0.4976,
|
||||
0.9561
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_smile": {
|
||||
"w": 1045,
|
||||
"neckNorm": [
|
||||
0.4976,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_surprised": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9545
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_talk": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4964,
|
||||
0.953
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_talk_wide": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_thinking": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9537
|
||||
]
|
||||
},
|
||||
"haruka_head_twin_wink": {
|
||||
"w": 1044,
|
||||
"neckNorm": [
|
||||
0.4972,
|
||||
0.9545
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
const CLIPS = {
|
||||
"gesture_heart": {
|
||||
"name": "gesture_heart",
|
||||
"desc": "손 하트를 그리며 밝게 '잘됐어요'",
|
||||
"duration": 2.2,
|
||||
"return": "idle",
|
||||
"layers": {
|
||||
"body": [
|
||||
{ "t": 0.0, "mode": "rig", "clip": "idle" },
|
||||
{ "t": 0.15, "mode": "baked", "image": "haruka_body_sailor_heart", "fade": 0.2 }
|
||||
],
|
||||
"face": [
|
||||
{ "t": 0.0, "expr": "smile" },
|
||||
{ "t": 0.25, "expr": "love" }
|
||||
],
|
||||
"mouth": [
|
||||
{ "t": 0.5, "say": "잘됐어요", "dur": 1.1, "pattern": "talk" }
|
||||
],
|
||||
"transform": {
|
||||
"pelvis": { "ty": [ {"t":0.4,"v":0}, {"t":0.7,"v":8}, {"t":1.0,"v":0}, {"t":1.3,"v":8}, {"t":1.6,"v":0} ] },
|
||||
"head": { "rot": [ {"t":0.4,"v":0}, {"t":0.7,"v":4}, {"t":1.0,"v":-4}, {"t":1.3,"v":4}, {"t":1.6,"v":0} ] }
|
||||
},
|
||||
"caption": [ { "t": 0.5, "text": "잘됐어요", "dur": 1.5 } ],
|
||||
"sfx": [ { "t": 0.45, "id": "success" } ]
|
||||
}
|
||||
},
|
||||
"gesture_no": {
|
||||
"name": "gesture_no",
|
||||
"desc": "서있다 → 팔짱 끼고 인상 쓰며 고개 저으며 '안돼요'",
|
||||
"duration": 2.4,
|
||||
"return": "idle",
|
||||
"layers": {
|
||||
"body": [
|
||||
{ "t": 0.0, "mode": "rig", "clip": "idle" },
|
||||
{ "t": 0.15, "mode": "baked", "image": "haruka_body_sailor_armscross", "fade": 0.2 }
|
||||
],
|
||||
"face": [
|
||||
{ "t": 0.0, "expr": "neutral" },
|
||||
{ "t": 0.3, "expr": "negative" }
|
||||
],
|
||||
"mouth": [
|
||||
{ "t": 0.55, "say": "안돼요", "dur": 1.2, "pattern": "talk" }
|
||||
],
|
||||
"transform": {
|
||||
"chest": { "ty": [ {"t":0.0,"v":0}, {"t":0.2,"v":-4}, {"t":0.5,"v":0} ] },
|
||||
"head": { "rot": [ {"t":0.5,"v":0}, {"t":0.8,"v":9}, {"t":1.1,"v":-9}, {"t":1.4,"v":9}, {"t":1.7,"v":-9}, {"t":2.0,"v":0} ] }
|
||||
},
|
||||
"caption": [ { "t": 0.55, "text": "안돼요", "dur": 1.6 } ],
|
||||
"sfx": [ { "t": 0.5, "id": "nope" } ]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* ============================================================
|
||||
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/Sailor/","../03_Assets/Library/BakedPoses/Idol/","../03_Assets/Library/BakedPoses/Witch/"];
|
||||
|
||||
/* 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['haruka_head_twin_neutral'] ? 'haruka_head_twin_neutral' : (images['haruka_head_twin'] ? 'haruka_head_twin' : 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='haruka_head_twin_'+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=['haruka_head_twin_talk', exprKey, 'haruka_head_twin_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>
|
||||
Reference in New Issue
Block a user