Spaces:
Running
Running
| <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> | |