Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta | |
| name="description" | |
| content="Walk around high-resolution Gaussian Splatting captures in the browser." | |
| /> | |
| <title>Gaussian Splat Walkthrough</title> | |
| <link rel="stylesheet" href="/src/styles.css" /> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js", | |
| "@mkkellogg/gaussian-splats-3d": "https://cdn.jsdelivr.net/npm/@mkkellogg/gaussian-splats-3d@0.4.7/build/gaussian-splats-3d.module.js" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <main id="viewport" aria-label="Gaussian splat viewport"></main> | |
| <div class="grain" aria-hidden="true"></div> | |
| <header class="topbar"> | |
| <div> | |
| <p class="eyebrow">3D Gaussian Splatting</p> | |
| <h1 id="sceneTitle">Garden Walkthrough</h1> | |
| </div> | |
| <div class="status-strip" aria-live="polite"> | |
| <span id="qualityLabel">Standard</span> | |
| <span id="loadStatus">Loading scene</span> | |
| </div> | |
| </header> | |
| <section class="hero-panel" aria-label="Scene controls"> | |
| <div class="hero-copy"> | |
| <span class="pill">Live WebGL renderer</span> | |
| <p id="sceneDescription"> | |
| Start in a dense outdoor capture, then walk through the scene instead of orbiting around it. | |
| </p> | |
| </div> | |
| <div class="primary-actions"> | |
| <button id="walkButton" class="primary-button" type="button"> | |
| <span class="button-icon">↗</span> | |
| Walk | |
| </button> | |
| <button id="tourButton" class="ghost-button" type="button"> | |
| <span class="button-icon">◎</span> | |
| Tour | |
| </button> | |
| </div> | |
| </section> | |
| <aside class="controls" aria-label="Viewer settings"> | |
| <div class="scene-grid" id="sceneGrid"></div> | |
| <div class="control-row"> | |
| <div class="segmented" aria-label="Quality"> | |
| <button class="segment active" type="button" data-quality="standard">Standard</button> | |
| <button class="segment" type="button" data-quality="ultra">Ultra</button> | |
| </div> | |
| <button id="resetButton" class="icon-button" type="button" aria-label="Reset view" title="Reset view"> | |
| ⟲ | |
| </button> | |
| </div> | |
| </aside> | |
| <div class="hud"> | |
| <div class="reticle" aria-hidden="true"></div> | |
| <div class="metrics" aria-live="polite"> | |
| <span id="fps">Live</span> | |
| <span id="speedLabel">Walk</span> | |
| </div> | |
| </div> | |
| <div id="loadingOverlay" class="loading-overlay"> | |
| <div class="loader-card"> | |
| <div class="loader-ring" aria-hidden="true"></div> | |
| <div> | |
| <p class="loader-title">Preparing splats</p> | |
| <p id="loaderText">Fetching the Gaussian field</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="toast" class="toast" role="status" aria-live="polite"></div> | |
| </div> | |
| <script type="module" src="/src/main.js"></script> | |
| </body> | |
| </html> | |