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