working basic loading glbs demo after lots of fixes

src/App.vue

@@ -20,12 +20,12 @@ const ModelViewerWrapper = defineAsyncComponent({
 
 let openSidebarsByDefault: Ref<boolean> = ref(window.innerWidth > 1200);
 
-let sData: Ref<SceneManagerData> = SceneMgr.newData();
+let [refSData, sData] = SceneMgr.newData();
 
 // Set up the load model event listener
 let networkMgr = new NetworkManager();
 networkMgr.addEventListener('update', (model: NetworkUpdateEvent) => {
-  SceneMgr.loadModel(sData.value, model.name, model.url);
+  SceneMgr.loadModel(refSData, sData, model.name, model.url);
 });
 // Start loading all configured models ASAP
 for (let model of settings.preloadModels) {
@@ -38,8 +38,8 @@ for (let model of settings.preloadModels) {
 
     <!-- The main content of the app is the model-viewer with the SVG "2D" overlay -->
     <v-main id="main">
-      <model-viewer-wrapper :src="sData.viewerSrc" @load="(i) => SceneMgr.onload(sData, i)"/>
-      <model-viewer-overlay v-if="sData.viewer !== null"/>
+      <model-viewer-wrapper :src="refSData.viewerSrc" @load="(i) => SceneMgr.onload(refSData, i)"/>
+      <model-viewer-overlay v-if="refSData.viewer !== null"/>
     </v-main>
 
     <!-- The left collapsible sidebar has the list of models -->
@@ -55,7 +55,7 @@ for (let model of settings.preloadModels) {
       <template #toolbar>
         <v-toolbar-title>Tools</v-toolbar-title>
       </template>
-      <tools :scene-mgr-data="sData"/>
+      <tools :scene-mgr-data="refSData"/>
     </sidebar>
 
   </v-layout>

src/misc/network.ts

@@ -1,3 +1,5 @@
+import {settings} from "./settings";
+
 export class NetworkUpdateEvent extends Event {
     name: string;
     url: string;
@@ -48,7 +50,7 @@ export class NetworkManager extends EventTarget {
         }
         ws.onclose = () => {
             console.trace("WebSocket closed, reconnecting very soon");
-            setTimeout(() => this.monitorWebSocket(url), 500);
+            setTimeout(() => this.monitorWebSocket(url), settings.checkServerEveryMs);
         }
     }
 

src/misc/scene.ts

@@ -1,11 +1,13 @@
 import type {ModelViewerElement} from '@google/model-viewer';
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
-import {ref, Ref} from 'vue';
+import {Ref, ref} from 'vue';
 import {Document} from '@gltf-transform/core';
 import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
 import {splitGlbs} from "../models/glb/glbs";
+import {merge, toBuffer} from "../models/glb/merge";
+import {settings} from "./settings";
 
-type SceneManagerData = {
+export type SceneMgrRefData = {
     /** When updated, forces the viewer to load a new model replacing the current one */
     viewerSrc: string | null
 
@@ -13,9 +15,11 @@ type SceneManagerData = {
     viewer: ModelViewerElement | null
     /** The (hidden) scene of the model viewer */
     viewerScene: ModelScene | null
+}
 
+export type SceneMgrData = {
     /** The currently shown document, which must match the viewerSrc. */
-    document: Document | null
+    document: Document
 }
 
 /** This class helps manage SceneManagerData. All methods are static to support reactivity... */
@@ -24,33 +28,59 @@ export class SceneMgr {
     }
 
     /** Creates a new SceneManagerData object */
-    static newData(): Ref<SceneManagerData> {
-        return ref({
+    static newData(): [Ref<SceneMgrRefData>, SceneMgrData]  {
+        let refData: any = ref({
             viewerSrc: null,
             viewer: null,
             viewerScene: null,
-            document: null,
         });
+        let data = {
+            document: new Document()
+        };
+        // newVar.value.document.createScene("scene");
+        // this.showCurrentDoc(newVar.value).then(r => console.log("Initial empty model loaded"));
+        return [refData, data];
     }
 
     /** Loads a GLB/GLBS model from a URL and adds it to the viewer or replaces it if the names match */
-    static async loadModel(data: SceneManagerData, name: string, url: string) {
+    static async loadModel(refData: Ref<SceneMgrRefData>, data: SceneMgrData, name: string, url: string) {
+        // Connect to the URL of the model
         let response = await fetch(url);
         if (!response.ok) throw new Error("Failed to fetch model: " + response.statusText);
+
+        // Split the stream into valid GLB chunks
         let glbsSplitter = splitGlbs(response.body!);
         let {value: numChunks} = await glbsSplitter.next();
-        console.log("Loading model with", numChunks, "chunks");
+        console.log("Loading", name, "which has", numChunks, "GLB chunks");
+
+        // Start merging each chunk into the current document, replacing or adding as needed
+        let lastShow = performance.now();
         while (true) {
-            let {value: chunk, done} = await glbsSplitter.next();
+            let {value: glbData, done} = await glbsSplitter.next();
             if (done) break;
-            console.log("Got chunk", chunk);
-            // Override the current model with the new one
-            data.viewerSrc = URL.createObjectURL(new Blob([chunk], {type: 'model/gltf-binary'}));
+            data.document = await merge(glbData, name, data.document);
+
+            // Show the partial model while loading every once in a while
+            if (performance.now() - lastShow > settings.displayLoadingEveryMs) {
+                await this.showCurrentDoc(refData, data);
+                lastShow = performance.now();
+            }
         }
+
+        // Display the final fully loaded model
+        await this.showCurrentDoc(refData, data);
+    }
+
+    /** Serializes the current document into a GLB and updates the viewerSrc */
+    private static async showCurrentDoc(refData: Ref<SceneMgrRefData>, data: SceneMgrData) {
+        let buffer = await toBuffer(data.document);
+        let blob = new Blob([buffer], {type: 'model/gltf-binary'});
+        console.log("Showing current doc", data.document, "as", Array.from(buffer));
+        refData.value.viewerSrc = URL.createObjectURL(blob);
     }
 
     /** Should be called any model finishes loading successfully (after a viewerSrc update) */
-    static onload(data: SceneManagerData, info: typeof ModelViewerInfo) {
+    static onload(data: SceneMgrRefData, info: typeof ModelViewerInfo) {
         console.log("ModelViewer loaded", info);
         data.viewer = info.viewer;
         data.viewerScene = info.scene;

src/misc/settings.ts

@@ -8,6 +8,8 @@ export const settings = {
         // Websocket URLs automatically listen for new models from the python backend
         //"ws://localhost:8080/"
     ],
+    displayLoadingEveryMs: 1000, /* How often to display partially loaded models */
+    checkServerEveryMs: 100, /* How often to check for a new server */
     // ModelViewer settings
     autoplay: true,
     arModes: 'webxr scene-viewer quick-look',

src/models/glb/merge.ts

@@ -1,38 +1,77 @@
-import { WebIO } from "@gltf-transform/core";
+import {Document, Scene, Transform, WebIO} from "@gltf-transform/core";
+import {unpartition} from "@gltf-transform/functions";
 
-// /**
-//  * Given a stream of binary data (e.g. from a fetch response), load a GLBS file (or simply a GLB file) and automatically
-//  * merge them into a single GLB file. progress is a callback that is called with the document after each step of the
-//  * loading process.
-//  */
-// export async function loadAndMerge(blob: Uint8Array, document: Document, progress: (doc: Document, pct: number) => Promise<void>): Promise<Document> {
-//     // Identify the type of file by loading the first 4 bytes.
-//     let magicNumbers = []
-//     const [headerReader, mainReader] = reader.tee()
-//     let headerReaderImpl = headerReader.getReader({mode: 'byob'});
-//     try {
-//         const header = new Uint8Array(4);
-//         await headerReaderImpl.read(header)
-//         magicNumbers = Array.from(header)
-//     } catch (e) {
-//         console.error(e);
-//     } finally {
-//         await headerReaderImpl.cancel()
-//     }
-//     // Depending on the file type, merge the GLB or GLBS files.
-//     let finalDocument: Document;
-//     if (magicNumbers[0] === '{'.charCodeAt(0)) { // GLTF
-//         finalDocument = await mergeGltf(mainReader, document);
-//     } else if (magicNumbers === "glTF".split('').map(c => c.charCodeAt(0))) { // GLB
-//         finalDocument = await mergeGlb(mainReader, document);
-//     } else if (magicNumbers === "glTF".split('').map(c => c.charCodeAt(0))) { // GLBS
-//         finalDocument = await mergeGlbs(mainReader, document);
-//     } else {
-//         throw new Error('Unknown file type (not GLTF, GLB, or GLBS, magic numbers: ' + magicNumbers + ')');
-//     }
-//     return finalDocument
-// }
-//
-// function mergeGlb(blob: Uint8Array, document: Document): Promise<Document> {
-//     new WebIO().readAsJSON()
-// }
+let io = new WebIO();
+
+/**
+ * Given the bytes of a GLB file and a parsed GLTF document, it parses and merges the GLB into the document.
+ *
+ * It can replace previous models in the document if the provided name matches the name of a previous model.
+ */
+export async function merge(glb: Uint8Array, name: string, document: Document): Promise<Document> {
+
+    let newDoc = await io.readBinary(glb);
+
+    // noinspection TypeScriptValidateJSTypes
+    // await newDoc.transform(dropByName(name), setNames(name));
+
+    let merged = document.merge(newDoc);
+
+    // noinspection TypeScriptValidateJSTypes
+    return await merged.transform(mergeScenes(), unpartition()); // Single scene & buffer required!
+
+}
+
+export async function toBuffer(doc: Document): Promise<Uint8Array> {
+
+    return io.writeBinary(doc);
+}
+
+/** Given a parsed GLTF document and a name, it forces the names of all elements to be identified by the name (or derivatives) */
+function setNames(name: string): Transform {
+    return (doc: Document, _: any) => {
+        // Do this automatically for all elements changing any name
+        for (let elem of doc.getGraph().listEdges().map(e => e.getChild())) {
+            // If setName is available, use it (preserving original names)
+            elem.setName(name + "/" + elem.getName());
+        }
+
+        // Special cases, specify the kind and number ID of primitives
+        let i = 0;
+        for (let mesh of doc.getRoot().listMeshes()) {
+            for (let prim of mesh.listPrimitives()) {
+                let kind = (prim.getMode() === WebGL2RenderingContext.POINTS ? "vertex" :
+                    (prim.getMode() === WebGL2RenderingContext.LINES ? "edge" : "face"));
+                prim.setName(name + "/" + kind + "/" + (i++));
+            }
+        }
+    }
+}
+
+/** Ensures that all elements with the given name are removed from the document */
+function dropByName(name: string): Transform {
+    return (doc: Document, _: any) => {
+        for (let elem of doc.getGraph().listEdges().map(e => e.getChild())) {
+            if (elem.getName().startsWith(name + "/") && !(elem instanceof Scene)) {
+                elem.dispose();
+            }
+        }
+        return doc;
+    };
+}
+
+
+/** Merges all scenes in the document into a single default scene */
+function mergeScenes(): Transform {
+    return (doc: Document) => {
+        let root = doc.getRoot();
+        let scene = root.getDefaultScene();
+        for (let dropScene of root.listScenes()) {
+            if (dropScene === scene) continue;
+            for (let node of dropScene.listChildren()) {
+                scene.addChild(node);
+            }
+            dropScene.dispose();
+        }
+    }
+}