Spaces:
Running
Running
File size: 4,468 Bytes
6ed0c74 26442c6 6ed0c74 d51ebe1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DeepFracture — Live Web Runtime</title>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1116; }
#app { position: fixed; inset: 0; cursor: crosshair; }
.panel {
position: fixed; color: #e8eaed; font: 13px/1.5 system-ui, sans-serif;
background: rgba(14, 17, 22, 0.72); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 12px 16px;
user-select: none;
}
#hud { top: 16px; left: 16px; max-width: 340px; }
#hud h1 { font-size: 16px; margin: 0 0 4px; }
#hud p { margin: 4px 0; color: #9aa3ad; }
#hud a { color: #7ab8ff; text-decoration: none; }
#controls { bottom: 16px; left: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#controls label { color: #9aa3ad; display: flex; gap: 8px; align-items: center; }
#controls input[type=range] { width: 130px; accent-color: #e0574f; }
#controls input[type=number] { width: 64px; background:#1a2029; color:#e8eaed;
border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:3px 6px; }
#controls select { background:#1a2029; color:#e8eaed; border:1px solid rgba(255,255,255,0.12);
border-radius:6px; padding:4px 6px; }
#controls button { background: #e0574f; color: white; border: 0; border-radius: 8px;
padding: 7px 14px; font-weight: 600; cursor: pointer; }
#controls button:hover { background: #c9463e; }
#status { bottom: 16px; right: 16px; text-align: right; color: #9aa3ad; }
#status b { color: #e8eaed; }
#loading { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/",
"@dimforge/rapier3d-compat": "https://cdn.jsdelivr.net/npm/@dimforge/rapier3d-compat@0.14.0/rapier.es.js"
}
}
</script>
</head>
<body>
<div id="app"></div>
<div class="panel" id="hud">
<h1>💥 DeepFracture — Live Runtime</h1>
<p style="margin-top:2px; font-size:12px; color:#b7bec8;">Interactive demo of the paper
<a href="https://doi.org/10.1111/cgf.70002" target="_blank"><i>“DeepFracture: A Generative
Approach for Predicting Brittle Fractures with Neural Discrete Representation
Learning”</i></a> — Yuhang Huang & Takashi Kanai, <b>Computer Graphics Forum, 2025</b>.</p>
<p><b>Click the squirrel to shoot.</b> Drag to orbit, scroll to zoom.</p>
<p>Impact → 7-D collision embedding → Siren encoder + VQ codebook lookup
(live in JS) → fragments re-enter the physics. Every codebook entry was
decoded (128³) and <b>watershed-segmented offline</b>, so the runtime
result is identical to the paper's pipeline with zero inference wait.</p>
<p>
<a href="https://nikoloside.graphics/deepfracture/" target="_blank">Paper</a> ·
<a href="https://github.com/nikoloside/TEBP-DeepFracture" target="_blank">Code</a> ·
<a href="https://huggingface.co/nikoloside/deepfracture" target="_blank">Weights</a>
</p>
</div>
<div class="panel" id="controls">
<label>Shape
<select id="shape">
<option value="squirrel" selected>squirrel</option>
<option value="bunny">bunny</option>
<option value="pot">pot</option>
<option value="base">base</option>
<option value="lion">lion</option>
</select>
</label>
<label>Speed <input id="speed" type="range" min="10" max="60" value="32"></label>
<label>Seed <input id="seed" type="number" value="42"></label>
<button id="reset">↺ Reset</button>
</div>
<div class="panel" id="status">Ready.</div>
<div class="panel" id="loading">⏳ Loading physics + scene…</div>
<div class="panel" id="pipeline" style="display:none; top: 16px; right: 16px; width: 330px;">
<div style="font-weight:600; margin-bottom:8px;">⚡ Neural fracture pipeline</div>
<ol id="pipeline-steps" style="margin:0; padding-left:20px; color:#9aa3ad;"></ol>
<div id="pipeline-bar-wrap" style="display:none; margin-top:8px; height:6px; border-radius:3px; background:#1a2029;">
<div id="pipeline-bar" style="height:6px; border-radius:3px; width:0%; background:#e0574f; transition:width .15s;"></div>
</div>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>
|