working basic loading glbs demo after lots of fixes

2026-01-08 07:35:50 +01:00 · 2024-02-17 21:04:37 +01:00
parent c357c88a6f
commit 16b3a8ea64
11 changed files with 569 additions and 73 deletions
--- a/src/models/glb/merge.ts
+++ b/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();
+        }
+    }
+}