refactor most of the frontend and add permissive cors to backend

src/misc/gltf.ts

@@ -0,0 +1,81 @@
+import {Document, Scene, Transform, WebIO} from "@gltf-transform/core";
+import {unpartition} from "@gltf-transform/functions";
+
+let io = new WebIO();
+
+/**
+ * Loads a GLB model from a URL and adds it to the document or replaces it if the names match.
+ *
+ * It can replace previous models in the document if the provided name matches the name of a previous model.
+ *
+ * Remember to call mergeFinalize after all models have been merged (slower required operations).
+ */
+export async function mergePartial(url: string, name: string, document: Document): Promise<Document> {
+    // Load the new document
+    let newDoc = await io.read(url);
+
+    // Remove any previous model with the same name and ensure consistent names
+    // noinspection TypeScriptValidateJSTypes
+    await newDoc.transform(dropByName(name), setNames(name));
+
+    // Merge the new document into the current one
+    return document.merge(newDoc);
+}
+
+export async function mergeFinalize(document: Document): Promise<Document> {
+    // Single scene & buffer required before loading & rendering
+    return await document.transform(mergeScenes(), unpartition());
+}
+
+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() ?? root.listScenes()[0];
+        for (let dropScene of root.listScenes()) {
+            if (dropScene === scene) continue;
+            for (let node of dropScene.listChildren()) {
+                scene.addChild(node);
+            }
+            dropScene.dispose();
+        }
+    }
+}

src/misc/network.ts

@@ -16,7 +16,7 @@ export class NetworkManager extends EventTarget {
     private knownObjectHashes: { [name: string]: string } = {};
 
     /**
-     * Tries to load a new model (.glb or .glbs) from the given URL.
+     * Tries to load a new model (.glb) from the given URL.
      *
      * If the URL uses the websocket protocol (ws:// or wss://), the server will be continuously monitored for changes.
      * In this case, it will only trigger updates if the name or hash of any model changes.
@@ -56,7 +56,7 @@ export class NetworkManager extends EventTarget {
 
     private foundModel(name: string, hash: string, url: string) {
         let prevHash = this.knownObjectHashes[name];
-        if (hash !== prevHash) {
+        if (!hash || hash !== prevHash) {
             this.knownObjectHashes[name] = hash;
             this.dispatchEvent(new NetworkUpdateEvent(name, url));
         }

src/misc/scene.ts

@@ -1,76 +1,37 @@
 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} from 'vue';
 import {Document} from '@gltf-transform/core';
-import {ModelViewerInfo} from "./viewer/ModelViewerWrapper.vue";
-import {mergeFinalize, mergePartial, toBuffer} from "../models/glb/merge";
-
-export type SceneMgrRefData = {
-    /** When updated, forces the viewer to load a new model replacing the current one */
-    viewerSrc: string | null
-
-    /** The model viewer HTML element with all APIs */
-    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
-}
+import {mergeFinalize, mergePartial, toBuffer} from "./gltf";
 
 /** This class helps manage SceneManagerData. All methods are static to support reactivity... */
 export class SceneMgr {
-    private constructor() {
-    }
-
-    /** Creates a new SceneManagerData object */
-    static newData(): [Ref<SceneMgrRefData>, SceneMgrData] {
-        let refData: any = ref({
-            viewerSrc: null,
-            viewer: null,
-            viewerScene: 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(refData: Ref<SceneMgrRefData>, data: SceneMgrData, name: string, url: string) {
+    /** Loads a GLB model from a URL and adds it to the viewer or replaces it if the names match */
+    static async loadModel(sceneUrl: Ref<string>, document: Document, name: string, url: string): Promise<Document> {
         let loadStart = performance.now();
 
-        // Connect to the URL of the model
-        let response = await fetch(url);
-        if (!response.ok) throw new Error("Failed to fetch model: " + response.statusText);
-
         // Start merging into the current document, replacing or adding as needed
-        let glb = new Uint8Array(await response.arrayBuffer());
-        data.document = await mergePartial(glb, name, data.document);
+        document = await mergePartial(url, name, document);
 
         // Display the final fully loaded model
-        await this.showCurrentDoc(refData, data);
+        document = await this.showCurrentDoc(sceneUrl, document);
 
         console.log("Model", name, "loaded in", performance.now() - loadStart, "ms");
+        return document;
     }
 
     /** Serializes the current document into a GLB and updates the viewerSrc */
-    private static async showCurrentDoc(refData: Ref<SceneMgrRefData>, data: SceneMgrData) {
-        data.document = await mergeFinalize(data.document);
-        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);
-    }
+    private static async showCurrentDoc(sceneUrl: Ref<string>, document: Document): Promise<Document> {
+        // Make sure the document is fully loaded and ready to be shown
+        document = await mergeFinalize(document);
 
-    /** Should be called any model finishes loading successfully (after a viewerSrc update) */
-    static onload(data: SceneMgrRefData, info: typeof ModelViewerInfo) {
-        console.log("ModelViewer loaded", info);
-        data.viewer = info.viewer;
-        data.viewerScene = info.scene;
+        // Serialize the document into a GLB and update the viewerSrc
+        let buffer = await toBuffer(document);
+        let blob = new Blob([buffer], {type: 'model/gltf-binary'});
+        //console.log("Showing current doc", document, "as", Array.from(buffer));
+        sceneUrl.value = URL.createObjectURL(blob);
+
+        // Return the updated document
+        return document;
     }
 }

src/misc/settings.ts

@@ -6,7 +6,7 @@ export const settings = {
         // @ts-ignore
         new URL('../../assets/logo.glb', import.meta.url).href,
         // Websocket URLs automatically listen for new models from the python backend
-        //"ws://localhost:8080/"
+        // "ws://localhost:32323/"
     ],
     displayLoadingEveryMs: 1000, /* How often to display partially loaded models */
     checkServerEveryMs: 100, /* How often to check for a new server */