ryanfitzpatrickio
94d24205dc
Add img2mesh puck machine for live goalie AI/save testing, catch/block arm IK with smooth stance blends, and a mover-space stick the blocker hand follows.
91 lines
4.1 KiB
HTML
91 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
|
<title>tilt — img2mesh</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='13' font-size='13'>🎯</text></svg>">
|
|
<style>
|
|
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#0a0e14;
|
|
font-family:'SF Mono', ui-monospace, Menlo, monospace;
|
|
touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none;
|
|
-webkit-tap-highlight-color:transparent; }
|
|
#stage { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
|
|
#hud { position:absolute; left:14px; top:12px; color:#8fb4d4; font-size:12px;
|
|
line-height:1.55; white-space:pre; pointer-events:none; text-shadow:0 1px 2px #000; }
|
|
#boot { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
|
|
color:#6ea8dc; letter-spacing:4px; font-size:13px; background:#0a0e14; z-index:10; }
|
|
#panel { position:absolute; right:12px; top:12px; width:220px; color:#b8d4ea; font-size:11px;
|
|
line-height:1.45; background:rgba(8,12,18,0.72); border:1px solid #1e3348; border-radius:8px;
|
|
padding:10px 12px; pointer-events:auto; backdrop-filter:blur(6px); }
|
|
#panel h1 { margin:0 0 8px; font-size:11px; letter-spacing:2px; color:#6ea8dc; font-weight:600; }
|
|
#panel label { display:block; margin:6px 0 2px; color:#6a8aa8; }
|
|
#panel select, #panel button {
|
|
width:100%; box-sizing:border-box; background:#0f1822; color:#d4e8f8;
|
|
border:1px solid #2a4a66; border-radius:4px; padding:5px 7px; font:inherit; margin-bottom:4px;
|
|
}
|
|
#panel button { cursor:pointer; }
|
|
#panel button:hover { border-color:#4a8ab8; }
|
|
#panel button.on { border-color:#4caf7a; background:#12241c; color:#b8f0d0; }
|
|
#panel .row { display:flex; gap:6px; }
|
|
#panel .row button { flex:1; }
|
|
#panel kbd { color:#8fb4d4; }
|
|
#panel .sep { margin:10px 0 6px; border-top:1px solid #1e3348; padding-top:8px; color:#6ea8dc; letter-spacing:1px; font-size:10px; }
|
|
#panel .hint { color:#6a8aa8; font-size:10px; margin-top:4px; line-height:1.4; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="stage"></canvas>
|
|
<div id="hud"></div>
|
|
<div id="panel">
|
|
<h1>IMG2MESH</h1>
|
|
<label>subject</label>
|
|
<select id="subject">
|
|
<option value="player">player</option>
|
|
<option value="goalie">goalie</option>
|
|
<option value="both">both</option>
|
|
</select>
|
|
<label>pose</label>
|
|
<select id="pose"></select>
|
|
<label>view</label>
|
|
<select id="view">
|
|
<option value="front">front</option>
|
|
<option value="threequarter">3/4</option>
|
|
<option value="side">side</option>
|
|
<option value="back">back</option>
|
|
<option value="top">top</option>
|
|
<option value="closeup">closeup</option>
|
|
<option value="gear">gear detail</option>
|
|
</select>
|
|
<div class="row" style="margin-top:8px">
|
|
<button id="prevPose" type="button">◀ pose</button>
|
|
<button id="nextPose" type="button">pose ▶</button>
|
|
</div>
|
|
<div class="row">
|
|
<button id="prevView" type="button">◀ view</button>
|
|
<button id="nextView" type="button">view ▶</button>
|
|
</div>
|
|
<button id="cycle" type="button" style="margin-top:6px">cycle all shots</button>
|
|
<div class="sep">GOALIE SAVE DRILL</div>
|
|
<button id="machine" type="button">puck machine · OFF</button>
|
|
<div class="row">
|
|
<button id="fireOnce" type="button">fire once</button>
|
|
<button id="machineReset" type="button">reset</button>
|
|
</div>
|
|
<div class="hint">
|
|
Live AI + leg IK against a shooting machine.<br>
|
|
Cycles glove / five-hole / blocker / pads.
|
|
</div>
|
|
<div style="margin-top:10px;color:#6a8aa8">
|
|
drag orbit · wheel zoom<br>
|
|
<kbd>1</kbd> player <kbd>2</kbd> goalie <kbd>3</kbd> both<br>
|
|
<kbd>[</kbd><kbd>]</kbd> pose · <kbd>,</kbd><kbd>.</kbd> view<br>
|
|
<kbd>g</kbd> gear bones · <kbd>b</kbd> bones<br>
|
|
<kbd>m</kbd> puck machine · <kbd>f</kbd> fire once
|
|
</div>
|
|
</div>
|
|
<div id="boot">IMG2MESH…</div>
|
|
<script type="module" src="/src/studio/img2mesh.js"></script>
|
|
</body>
|
|
</html>
|