added sync-dreamer scenes

viewer/src/lib/data/models.json

@@ -1,12 +1,4 @@
 [
-    {
-        "slug": "mv-dream",
-        "title": "MVDream",
-        "paper": "https://huggingface.co/papers/2308.16512",
-        "project": "https://mv-dream.github.io/",
-        "code": "https://github.com/bytedance/MVDream",
-        "spaces": []
-    },
     {
         "slug": "sync-dreamer",
         "title": "SyncDreamer",
@@ -14,5 +6,13 @@
         "project": "https://liuyuan-pal.github.io/SyncDreamer/",
         "code": "https://github.com/liuyuan-pal/SyncDreamer",
         "spaces": []
+    },
+    {
+        "slug": "mv-dream",
+        "title": "MVDream",
+        "paper": "https://huggingface.co/papers/2308.16512",
+        "project": "https://mv-dream.github.io/",
+        "code": "https://github.com/bytedance/MVDream",
+        "spaces": []
     }
 ]

viewer/src/lib/data/scenes.json

@@ -1,20 +1,44 @@
 [
     {
-        "slug": "boombox",
-        "model": "",
-        "title": "BoomBox",
-        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF-Binary/BoomBox.glb"
+        "slug": "sync-dreamer-armor",
+        "model": "sync-dreamer",
+        "title": "armor",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/armor.glb"
     },
     {
-        "slug": "duck",
-        "model": "mv-dream",
-        "title": "Duck",
-        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF-Binary/Duck.glb"
+        "slug": "sync-dreamer-deer",
+        "model": "sync-dreamer",
+        "title": "deer",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/deer.glb"
     },
     {
-        "slug": "toycar",
-        "model": "",
-        "title": "Toy Car",
-        "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/ToyCar/glTF-Binary/ToyCar.glb"
+        "slug": "sync-dreamer-drum",
+        "model": "sync-dreamer",
+        "title": "drum",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/drum.glb"
+    },
+    {
+        "slug": "sync-dreamer-forest",
+        "model": "sync-dreamer",
+        "title": "forest",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/forest.glb"
+    },
+    {
+        "slug": "sync-dreamer-monkey",
+        "model": "sync-dreamer",
+        "title": "monkey",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/monkey.glb"
+    },
+    {
+        "slug": "sync-dreamer-poro",
+        "model": "sync-dreamer",
+        "title": "poro",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/poro.glb"
+    },
+    {
+        "slug": "sync-dreamer-train",
+        "model": "sync-dreamer",
+        "title": "train",
+        "url": "https://huggingface.co/datasets/dylanebert/igf-results/resolve/main/sync-dreamer/train.glb"
     }
 ]

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

@@ -2,6 +2,7 @@
     import { onMount, onDestroy } from "svelte";
     import * as BABYLON from "@babylonjs/core";
     import "@babylonjs/loaders/glTF";
+    import "@babylonjs/loaders/OBJ";
 
     export let data: {
         scene: {
@@ -24,6 +25,7 @@
     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(() => {
@@ -84,7 +86,10 @@
         scene = new BABYLON.Scene(engine);
         scene.clearColor = BABYLON.Color4.FromHexString("#1A1B1EFF");
 
-        await BABYLON.SceneLoader.AppendAsync("", url, scene);
+        await BABYLON.SceneLoader.AppendAsync("", url, scene, (event) => {
+            const progress = event.loaded / event.total;
+            loadingBarFill!.style.width = `${progress * 100}%`;
+        });
 
         scene.cameras.forEach((camera) => {
             camera.dispose();
@@ -193,7 +198,11 @@
 </script>
 
 <div bind:this={container} class="canvas-container hud-expanded">
-    <div bind:this={overlay} class="loading-overlay" />
+    <div bind:this={overlay} class="loading-overlay">
+        <div class="loading-bar">
+            <div bind:this={loadingBarFill} class="loading-bar-fill" />
+        </div>
+    </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>
@@ -260,9 +269,11 @@
         height: 100%;
         background-color: #1a1b1e;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 100;
+        gap: 10px;
     }
 
     .loading-overlay::before {
@@ -271,6 +282,24 @@
         font-size: 16px;
     }
 
+    .loading-bar {
+        position: relative;
+        width: 256px;
+        height: 20px;
+        border: 2px solid #aaa;
+        background-color: #1a1b1e;
+    }
+
+    .loading-bar-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background-color: #555;
+        transition: width 0.2s ease;
+    }
+
     canvas {
         max-width: 100%;
         max-height: 100%;