in progress splat viewer

viewer/src/lib/data/models.json

@@ -21,5 +21,13 @@
         "project": "https://mv-dream.github.io/",
         "code": "https://github.com/bytedance/MVDream",
         "spaces": []
+    },
+    {
+        "slug": "3dgs",
+        "title": "3D Gaussian Splatting",
+        "paper": "https://huggingface.co/papers/2308.04079",
+        "project": "https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/",
+        "code": "https://github.com/graphdeco-inria/gaussian-splatting",
+        "spaces": []
     }
 ]

viewer/src/lib/data/scenes.json

@@ -3,6 +3,7 @@
         "slug": "sync-dreamer-armor",
         "model": "sync-dreamer",
         "title": "armor",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/armor.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -13,6 +14,7 @@
         "slug": "sync-dreamer-deer",
         "model": "sync-dreamer",
         "title": "deer",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/deer.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -23,6 +25,7 @@
         "slug": "sync-dreamer-drum",
         "model": "sync-dreamer",
         "title": "drum",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/drum.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -33,6 +36,7 @@
         "slug": "sync-dreamer-forest",
         "model": "sync-dreamer",
         "title": "forest",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/forest.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -43,6 +47,7 @@
         "slug": "sync-dreamer-monkey",
         "model": "sync-dreamer",
         "title": "monkey",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/monkey.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -53,6 +58,7 @@
         "slug": "sync-dreamer-poro",
         "model": "sync-dreamer",
         "title": "poro",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/poro.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -63,6 +69,7 @@
         "slug": "sync-dreamer-train",
         "model": "sync-dreamer",
         "title": "train",
+        "type": "mesh",
         "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/train.glb",
         "pipeline": [
             "Multi-view Diffusion",
@@ -73,6 +80,7 @@
         "slug": "dreamfusion-sweaterfrog",
         "model": "dreamfusion",
         "title": "sweater frog",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/sweaterfrog_1step.glb",
         "prompt": "frog wearing a sweater",
         "pipeline": [
@@ -84,6 +92,7 @@
         "slug": "dreamfusion-chick",
         "model": "dreamfusion",
         "title": "chick",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44855521_sept18_hero16_047a_DSLR_photo_of_an_eggshell_broken_in_two_with_an_adorable_chick_standing_next_to_it_1step.glb",
         "prompt": "eggshell broken in two with an adorable chick standing next to it",
         "pipeline": [
@@ -95,6 +104,7 @@
         "slug": "dreamfusion-ghost",
         "model": "dreamfusion",
         "title": "ghost",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44934035_sept18_hero19_113a_DSLR_photo_of_a_ghost_eating_a_hamburger_1step.glb",
         "prompt": "ghost eating a hamburger",
         "pipeline": [
@@ -106,6 +116,7 @@
         "slug": "dreamfusion-pig",
         "model": "dreamfusion",
         "title": "pig",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44844973_sept18_hero14_076a_pig_wearing_a_backpack_1step.glb",
         "prompt": "a pig wearing a backback",
         "pipeline": [
@@ -117,6 +128,7 @@
         "slug": "dreamfusion-eagle",
         "model": "dreamfusion",
         "title": "eagle",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44853505_sept18_hero15_145a_bald_eagle_carved_out_of_wood_1step.glb",
         "prompt": "a bald eagle carved out of wood",
         "pipeline": [
@@ -128,6 +140,7 @@
         "slug": "dreamfusion-crab",
         "model": "dreamfusion",
         "title": "crab",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44930695_sept18_hero18_103a_crab,_low_poly_1step.glb",
         "prompt": "a crab, low poly",
         "pipeline": [
@@ -139,6 +152,7 @@
         "slug": "dreamfusion-lemur",
         "model": "dreamfusion",
         "title": "lemur",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44853505_sept18_hero15_124a_lemur_taking_notes_in_a_journal_1step.glb",
         "prompt": "a lemur taking notes in a journal",
         "pipeline": [
@@ -150,11 +164,22 @@
         "slug": "dreamfusion-corgi",
         "model": "dreamfusion",
         "title": "corgi",
+        "type": "mesh",
         "url": "https://dreamfusion3d.github.io/assets/meshes2/44960400_sept18_hero20peter_117a_plush_toy_of_a_corgi_nurse_1step.glb",
         "prompt": "a plush toy of a corgi nurse",
         "pipeline": [
             "Multi-view Diffusion",
             "Marching Cubes"
         ]
+    },
+    {
+        "slug": "3dgs-stump",
+        "model": "3dgs",
+        "title": "Stump",
+        "type": "splat",
+        "url": "https://huggingface.co/datasets/dylanebert/3dgs/resolve/main/stump/point_cloud/iteration_7000/point_cloud.ply",
+        "pipeline": [
+            "Gaussian Splatting"
+        ]
     }
 ]

viewer/src/routes/viewer/[slug]/+page.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
     import { onMount, onDestroy } from "svelte";
-    import * as BABYLON from "@babylonjs/core";
-    import "@babylonjs/loaders/glTF";
-    import "@babylonjs/loaders/OBJ";
+    import type { IViewer } from "./IViewer";
+    import { BabylonViewer } from "./BabylonViewer";
+    import { SplatViewer } from "./SplatViewer";
 
     export let data: {
         scene: {
             title: string;
             model: string;
+            type: string;
             url: string;
             prompt: string;
             pipeline: string[];
@@ -17,166 +18,81 @@
         };
     };
 
-    let overlay: HTMLDivElement | null = null;
-    let hud: HTMLDivElement | null = null;
-    let hudToggleBtn: HTMLButtonElement | null = null;
-    let triangleCount: HTMLSpanElement | null = null;
-    let fpsCount: HTMLSpanElement | null = null;
-    let engine: BABYLON.Engine | null = null;
-    let scene: BABYLON.Scene | null = null;
-    let camera: BABYLON.ArcRotateCamera | null = null;
-    let container: HTMLDivElement | null = null;
-    let canvas: HTMLCanvasElement | null = null;
-    let loadingBarFill: HTMLDivElement | null = null;
-    let collapsed = false;
-
-    onMount(() => {
-        document.body.classList.add("viewer");
+    let stats: { name: string; value: any }[] = [];
 
-        const isMobile = window.innerWidth < 768;
-        if (isMobile) {
-            collapsed = true;
-            hudToggleBtn!.textContent = ")";
-            container!.classList.remove("hud-expanded");
-        }
-
-        loadModel(data.scene.url);
+    let viewer: IViewer;
+    let overlay: HTMLDivElement;
+    let container: HTMLDivElement;
+    let hudToggleBtn: HTMLButtonElement;
+    let canvas: HTMLCanvasElement;
+    let loadingBarFill: HTMLDivElement;
+    let collapsed = false;
 
-        hudToggleBtn!.addEventListener("click", () => {
-            collapsed = !collapsed;
-            hudToggleBtn!.textContent = collapsed ? ")" : "(";
-            if (collapsed) {
-                container!.classList.remove("hud-expanded");
-            } else {
-                container!.classList.add("hud-expanded");
-            }
-        });
+    onMount(initViewer);
+    onDestroy(destroyViewer);
 
-        const modeItems = document.querySelectorAll(".mode-item");
-        modeItems.forEach((item) => {
-            item.addEventListener("click", (event) => {
-                const currentTarget = event.currentTarget as HTMLElement;
-                const mode = currentTarget.getAttribute("data-mode");
-
-                modeItems.forEach((i) => i.classList.remove("active"));
-                currentTarget.classList.add("active");
-
-                switch (mode) {
-                    case "wireframe":
-                        scene!.forceWireframe = true;
-                        break;
-                    default:
-                        scene!.forceWireframe = false;
-                        break;
-                }
-            });
-        });
-    });
-
-    onDestroy(() => {
-        if (scene) {
-            scene.dispose();
-            document.body.classList.remove("viewer");
+    async function initViewer() {
+        document.body.classList.add("viewer");
+        if (data.scene.type == "mesh") {
+            viewer = new BabylonViewer(canvas);
+        } else if (data.scene.type == "splat") {
+            viewer = new SplatViewer(canvas);
+        } else {
+            console.error(`Unsupported scene type: ${data.scene.type}`);
         }
-    });
-
-    async function loadModel(url: string) {
-        overlay!.style.display = "flex";
-
-        engine = new BABYLON.Engine(canvas, true);
-
-        scene = new BABYLON.Scene(engine);
-        scene.clearColor = BABYLON.Color4.FromHexString("#1A1B1EFF");
-
-        await BABYLON.SceneLoader.AppendAsync("", url, scene, (event) => {
-            const progress = event.loaded / event.total;
-            loadingBarFill!.style.width = `${progress * 100}%`;
-        });
-
-        scene.cameras.forEach((camera) => {
-            camera.dispose();
-        });
-
-        scene.lights.forEach((light) => {
-            light.dispose();
-        });
-
-        camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 3, Math.PI / 3, 30, BABYLON.Vector3.Zero(), scene);
-        camera.angularSensibilityY = 1000;
-        camera.panningSensibility = 500;
-        camera.wheelPrecision = 5;
-        camera.inertia = 0.9;
-        camera.panningInertia = 0.9;
-        camera.lowerRadiusLimit = 3;
-        camera.upperRadiusLimit = 100;
-        camera.setTarget(BABYLON.Vector3.Zero());
-        camera.attachControl(canvas, true);
-
-        camera.onAfterCheckInputsObservable.add(() => {
-            camera!.wheelPrecision = 150 / camera!.radius;
-            camera!.panningSensibility = 10000 / camera!.radius;
+        handleMobileView();
+        await loadModel(data.scene.url);
+        window.addEventListener("resize", () => {
+            updateCanvasSize();
         });
+        updateStats();
+        setInterval(updateStats, 1000);
+    }
 
-        const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
-        light.intensity = 1;
-        light.diffuse = new BABYLON.Color3(1, 1, 1);
-        light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
-
-        const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
-        sun.intensity = 2;
-        sun.diffuse = new BABYLON.Color3(1, 1, 1);
-
-        const standardSize = 10;
-        let scaleFactor = 1;
-        let center = BABYLON.Vector3.Zero();
-
-        if (scene.meshes.length > 0) {
-            let bounds = scene.meshes[0].getBoundingInfo().boundingBox;
-            let min = bounds.minimumWorld;
-            let max = bounds.maximumWorld;
-
-            for (let i = 1; i < scene.meshes.length; i++) {
-                bounds = scene.meshes[i].getBoundingInfo().boundingBox;
-                min = BABYLON.Vector3.Minimize(min, bounds.minimumWorld);
-                max = BABYLON.Vector3.Maximize(max, bounds.maximumWorld);
-            }
-
-            const extent = max.subtract(min).scale(0.5);
-            const size = extent.length();
+    function destroyViewer() {
+        document.body.classList.remove("viewer");
+    }
 
-            center = BABYLON.Vector3.Center(min, max);
+    function handleMobileView() {
+        const isMobile = window.innerWidth < 768;
+        if (isMobile) toggleHUD();
+    }
 
-            scaleFactor = standardSize / size;
+    function toggleHUD() {
+        collapsed = !collapsed;
+        hudToggleBtn.textContent = collapsed ? ")" : "(";
+        if (collapsed) {
+            container.classList.remove("hud-expanded");
+        } else {
+            container.classList.add("hud-expanded");
         }
+    }
 
-        const parentNode = new BABYLON.TransformNode("parent", scene);
+    function setRenderMode(event: PointerEvent) {
+        const babylonViewer = viewer as BabylonViewer;
+        if (!babylonViewer) {
+            console.error("Can only set render mode for BabylonViewer");
+            return;
+        }
 
-        let totalTriangles = 0;
-        scene.meshes.forEach((mesh) => {
-            mesh.setParent(parentNode);
-            if (mesh.getTotalVertices() > 0) {
-                totalTriangles += mesh.getTotalIndices() / 3;
-            }
+        document.querySelectorAll(".mode-item").forEach((item) => {
+            item.classList.remove("active");
         });
-        triangleCount!.textContent = totalTriangles.toLocaleString();
 
-        parentNode.position = center.scale(-1 * scaleFactor);
-        parentNode.scaling.scaleInPlace(scaleFactor);
+        const modeItem = event.currentTarget as HTMLElement;
+        modeItem.classList.add("active");
 
-        engine.runRenderLoop(() => {
-            scene!.render();
-            if (fpsCount) {
-                fpsCount.textContent = engine!.getFps().toFixed();
-            }
-        });
+        const mode = modeItem.dataset.mode as string;
+        babylonViewer.setRenderMode(mode);
+    }
 
-        window.addEventListener("resize", () => {
-            updateCanvasSize();
-            engine!.resize();
+    async function loadModel(url: string) {
+        overlay.style.display = "flex";
+        await viewer.loadModel(url, (progress) => {
+            loadingBarFill.style.width = `${progress * 100}%`;
         });
-
         updateCanvasSize();
-        overlay!.style.display = "none";
+        overlay.style.display = "none";
     }
 
     function updateCanvasSize() {
@@ -185,17 +101,20 @@
         canvas.height = container.clientHeight;
     }
 
-    function capture() {
-        if (!engine || !camera) return;
-        const cachedColor = scene!.clearColor;
-        scene!.clearColor = BABYLON.Color4.FromHexString("#00000000");
-        BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, 512, (data) => {
-            const a = document.createElement("a");
-            a.href = data;
-            a.download = "screenshot.png";
-            a.click();
-        });
-        scene!.clearColor = cachedColor;
+    async function capture() {
+        const data = await viewer.capture();
+        if (!data) {
+            console.error("Failed to capture screenshot");
+            return;
+        }
+        const a = document.createElement("a");
+        a.href = data;
+        a.download = "screenshot.png";
+        a.click();
+    }
+
+    function updateStats() {
+        stats = viewer.getStats();
     }
 
     function exit() {
@@ -211,8 +130,8 @@
     </div>
     <canvas bind:this={canvas} width="512" height="512" />
     <div class="exit-button" on:pointerdown={exit}>x</div>
-    <div bind:this={hud} class="hud" class:collapsed>
-        <button bind:this={hudToggleBtn} class="hud-toggle-btn">(</button>
+    <div class="hud" class:collapsed>
+        <button bind:this={hudToggleBtn} on:click={toggleHUD} class="hud-toggle-btn">(</button>
         <div class="section">
             <div class="title">{data.scene.title}</div>
         </div>
@@ -221,43 +140,45 @@
             <div class="info-panel">
                 {#if data.scene.model}
                     <a href={`/models/${data.scene.model}`} class="section-label">{data.model.title}</a>
+                    {#if data.scene.pipeline}
+                        <ol class="pipeline">
+                            {#each data.scene.pipeline as step}
+                                <li>{step}</li>
+                            {/each}
+                        </ol>
+                    {/if}
                 {:else}
                     <div class="section-label">None</div>
                 {/if}
             </div>
         </div>
-        {#if data.scene.pipeline}
+        {#if data.scene.prompt}
             <div class="section">
-                <div class="section-title">Pipeline</div>
+                <div class="section-title">Prompt</div>
                 <div class="info-panel">
-                    {#each data.scene.pipeline as step}
-                        <div class="section-label">{step}</div>
-                    {/each}
+                    <div class="section-label">{data.scene.prompt}</div>
                 </div>
             </div>
         {/if}
-        {#if data.scene.prompt}
+        {#if stats.length > 0}
             <div class="section">
-                <div class="section-title">Prompt</div>
+                <div class="section-title">Stats</div>
                 <div class="info-panel">
-                    <div class="section-label">{data.scene.prompt}</div>
+                    {#each stats as stat}
+                        <div>{stat.name}: {stat.value}</div>
+                    {/each}
                 </div>
             </div>
         {/if}
-        <div class="section">
-            <div class="section-title">Stats</div>
-            <div class="info-panel">
-                <div>FPS: <span bind:this={fpsCount}>0</span></div>
-                <div>Triangles: <span bind:this={triangleCount}>0</span></div>
-            </div>
-        </div>
-        <div class="section">
-            <div class="section-title">Render Mode</div>
-            <div class="button-group mode-list">
-                <div class="hud-button mode-item active" data-mode="rendered">Rendered</div>
-                <div class="hud-button mode-item" data-mode="wireframe">Wireframe</div>
+        {#if data.scene.type === "mesh"}
+            <div class="section">
+                <div class="section-title">Render Mode</div>
+                <div class="button-group mode-list">
+                    <div on:pointerdown={setRenderMode} class="hud-button mode-item active" data-mode="rendered">Rendered</div>
+                    <div on:pointerdown={setRenderMode} class="hud-button mode-item" data-mode="wireframe">Wireframe</div>
+                </div>
             </div>
-        </div>
+        {/if}
         <div class="section">
             <div class="section-title">Actions</div>
             <div class="button-group">
@@ -409,10 +330,15 @@
     }
 
     .info-panel {
-        padding: 10px 10px 0px 10px;
+        padding: 6px 10px 0px 10px;
         color: #ddd;
     }
 
+    .pipeline {
+        margin: 0;
+        padding: 6px 10px 0px 20px;
+    }
+
     .button-group {
         border: none;
         background-color: transparent;

viewer/src/routes/viewer/[slug]/BabylonViewer.ts

@@ -0,0 +1,138 @@
+import type { IViewer } from "./IViewer";
+import * as BABYLON from '@babylonjs/core';
+import "@babylonjs/loaders/glTF";
+import "@babylonjs/loaders/OBJ";
+
+export class BabylonViewer implements IViewer {
+    engine: BABYLON.Engine;
+    scene: BABYLON.Scene;
+    camera: BABYLON.ArcRotateCamera;
+    canvas: HTMLCanvasElement;
+    triangleCount: number = 0;
+
+    constructor(canvas: HTMLCanvasElement) {
+        this.canvas = canvas;
+
+        this.engine = new BABYLON.Engine(canvas, true);
+
+        this.scene = new BABYLON.Scene(this.engine);
+        this.scene.clearColor = BABYLON.Color4.FromHexString("#1A1B1EFF");
+
+        this.camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 3, Math.PI / 3, 30, BABYLON.Vector3.Zero(), this.scene);
+        this.camera.angularSensibilityY = 1000;
+        this.camera.panningSensibility = 500;
+        this.camera.wheelPrecision = 5;
+        this.camera.inertia = 0.9;
+        this.camera.panningInertia = 0.9;
+        this.camera.lowerRadiusLimit = 3;
+        this.camera.upperRadiusLimit = 100;
+        this.camera.setTarget(BABYLON.Vector3.Zero());
+        this.camera.attachControl(this.canvas, true);
+        this.camera.onAfterCheckInputsObservable.add(() => {
+            this.camera.wheelPrecision = 150 / this.camera.radius;
+            this.camera.panningSensibility = 10000 / this.camera.radius;
+        });
+
+        window.addEventListener("resize", () => {
+            this.engine.resize();
+        });
+    }
+
+    async loadModel(url: string, loadingBarCallback?: (progress: number) => void) {
+        // Load scene
+        await BABYLON.SceneLoader.AppendAsync("", url, this.scene, (event) => {
+            const progress = event.loaded / event.total;
+            loadingBarCallback?.(progress);
+        });
+
+        // Dispose of all cameras and lights
+        this.scene.cameras.forEach((camera) => {
+            if (camera !== this.camera) {
+                camera.dispose();
+            }
+        });
+        this.scene.lights.forEach((light) => {
+            light.dispose();
+        });
+
+        // Add lights
+        const light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), this.scene);
+        light.intensity = 1;
+        light.diffuse = new BABYLON.Color3(1, 1, 1);
+        light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+
+        const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-0.5, -1, -0.5), this.scene);
+        sun.intensity = 2;
+        sun.diffuse = new BABYLON.Color3(1, 1, 1);
+
+        // Center and scale model
+        const parentNode = new BABYLON.TransformNode("parent", this.scene);
+        const standardSize = 10;
+        let scaleFactor = 1;
+        let center = BABYLON.Vector3.Zero();
+        if (this.scene.meshes.length > 0) {
+            let bounds = this.scene.meshes[0].getBoundingInfo().boundingBox;
+            let min = bounds.minimumWorld;
+            let max = bounds.maximumWorld;
+
+            for (let i = 1; i < this.scene.meshes.length; i++) {
+                bounds = this.scene.meshes[i].getBoundingInfo().boundingBox;
+                min = BABYLON.Vector3.Minimize(min, bounds.minimumWorld);
+                max = BABYLON.Vector3.Maximize(max, bounds.maximumWorld);
+            }
+
+            const extent = max.subtract(min).scale(0.5);
+            const size = extent.length();
+
+            center = BABYLON.Vector3.Center(min, max);
+
+            scaleFactor = standardSize / size;
+        }
+        this.triangleCount = 0;
+        this.scene.meshes.forEach((mesh) => {
+            mesh.setParent(parentNode);
+            if (mesh.getTotalVertices() > 0) {
+                this.triangleCount += mesh.getTotalIndices() / 3;
+            }
+        });
+        parentNode.position = center.scale(-1 * scaleFactor);
+        parentNode.scaling.scaleInPlace(scaleFactor);
+
+        // Run render loop
+        this.engine.runRenderLoop(() => {
+            this.scene.render();
+        });
+    }
+
+    dispose() {
+        if (this.scene) {
+            this.scene.dispose();
+        }
+    }
+
+    async capture(): Promise<string | null> {
+        if (!this.engine || !this.camera) return null;
+        const cachedColor = this.scene.clearColor;
+        this.scene.clearColor = BABYLON.Color4.FromHexString("#00000000");
+        let data = await new Promise<string>((resolve) => {
+            BABYLON.Tools.CreateScreenshotUsingRenderTarget(this.engine, this.camera, 512, (result) => {
+                resolve(result);
+            });
+        });
+        this.scene.clearColor = cachedColor;
+        return data;
+    }
+
+    setRenderMode(mode: string) {
+        this.scene.forceWireframe = mode === "wireframe";
+    }
+
+    getStats(): { name: string, value: any }[] {
+        const fps = this.engine.getFps().toFixed();
+        const triangleCount = this.triangleCount.toLocaleString();
+        return [
+            { name: "FPS", value: fps },
+            { name: "Triangles", value: triangleCount },
+        ];
+    }
+}

viewer/src/routes/viewer/[slug]/IViewer.ts

@@ -0,0 +1,6 @@
+export interface IViewer {
+    loadModel(url: string, loadingBarCallback?: (progress: number) => void): Promise<void>;
+    dispose(): void;
+    capture(): Promise<string | null>;
+    getStats(): { name: string, value: any }[];
+}

viewer/src/routes/viewer/[slug]/SplatViewer.ts

@@ -0,0 +1,45 @@
+import type { IViewer } from "./IViewer";
+
+export class SplatViewer implements IViewer {
+    canvas: HTMLCanvasElement;
+
+    constructor(canvas: HTMLCanvasElement) {
+        this.canvas = canvas;
+
+    }
+
+    async loadModel(url: string, loadingBarCallback?: (progress: number) => void) {
+        this.draw();
+    }
+
+    draw = () => {
+        if (!this.canvas) return;
+        const ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        const text = "Under Construction";
+        ctx.font = '16px sans-serif';
+        ctx.fillStyle = '#fff';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+
+        const centerX = this.canvas.width / 2;
+        const centerY = this.canvas.height / 2;
+
+        ctx.fillText(text, centerX, centerY);
+
+        requestAnimationFrame(this.draw);
+    }
+
+    dispose() {
+
+    }
+
+    async capture() {
+        return null;
+    }
+
+    getStats(): { name: string, value: any }[] {
+        return [];
+    }
+}