@needle-tools/gltf-progressive 3.1.1 → 3.2.0

package/lib/worker/loader.mainthread.js

@@ -0,0 +1,193 @@
+import { Box3, BufferAttribute, BufferGeometry, CompressedTexture, InterleavedBuffer, InterleavedBufferAttribute, Matrix3, Sphere, Texture, Vector3 } from "three";
+import { createLoaders, GET_LOADER_LOCATION_CONFIG } from "../loaders.js";
+import { isMobileDevice } from "../utils.internal.js";
+import { debug } from "../lods.debug.js";
+const workers = new Array();
+let getWorkerId = 0;
+const maxWorkers = isMobileDevice() ? 2 : 10;
+export function getWorker(opts) {
+    if (workers.length < maxWorkers) {
+        const index = workers.length;
+        if (debug)
+            console.warn(`[Worker] Creating new worker #${index}`);
+        const worker = GLTFLoaderWorker.createWorker(opts || {});
+        workers.push(worker);
+        return worker;
+    }
+    const index = (getWorkerId++) % workers.length;
+    const worker = workers[index];
+    return worker;
+}
+class GLTFLoaderWorker {
+    worker;
+    static async createWorker(opts) {
+        const worker = new Worker(new URL(`./loader.worker.js`, import.meta.url), {
+            type: 'module',
+        });
+        const instance = new GLTFLoaderWorker(worker, opts);
+        return instance;
+    }
+    _running = [];
+    _webglRenderer = null;
+    async load(url, opts) {
+        const configs = GET_LOADER_LOCATION_CONFIG();
+        // Make sure we have a webgl renderer for the KTX transcoder feature detection
+        let renderer = opts?.renderer;
+        if (!renderer) {
+            this._webglRenderer ??= (async () => {
+                const { WebGLRenderer } = await import("three");
+                return new WebGLRenderer();
+            })();
+            renderer = await this._webglRenderer;
+        }
+        const loaders = createLoaders(renderer);
+        const ktx2Loader = loaders.ktx2Loader;
+        const ktx2LoaderConfig = ktx2Loader.workerConfig;
+        if (url instanceof URL) {
+            url = url.toString();
+        }
+        else if (url.startsWith("file:")) {
+            // make blob url
+            url = URL.createObjectURL(new Blob([url]));
+        }
+        else if (!url.startsWith("blob:") && !url.startsWith("http:") && !url.startsWith("https:")) {
+            url = new URL(url, window.location.href).toString();
+        }
+        const options = {
+            type: "load",
+            url: url,
+            dracoDecoderPath: configs.dracoDecoderPath,
+            ktx2TranscoderPath: configs.ktx2TranscoderPath,
+            ktx2LoaderConfig: ktx2LoaderConfig,
+        };
+        if (this._debug)
+            console.debug("[Worker] Sending load request", options);
+        this.worker.postMessage(options);
+        return new Promise(resolve => {
+            this._running.push({
+                url: url.toString(),
+                resolve,
+            });
+        });
+    }
+    _debug = false;
+    constructor(worker, _opts) {
+        this.worker = worker;
+        this._debug = _opts.debug ?? false;
+        worker.onmessage = (event) => {
+            const data = event.data;
+            if (this._debug)
+                console.log("[Worker] EVENT", data);
+            switch (data.type) {
+                case "loaded-gltf": {
+                    for (const promise of this._running) {
+                        if (promise.url === data.result.url) {
+                            // process received data and resolve
+                            processReceivedData(data.result);
+                            promise.resolve(data.result);
+                            // cleanup
+                            const url = promise.url;
+                            if (url.startsWith("blob:")) {
+                                URL.revokeObjectURL(url);
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        worker.onerror = (error) => {
+            console.error("[Worker] Error in gltf-progressive worker:", error);
+        };
+        worker.postMessage({
+            type: 'init',
+        });
+    }
+}
+function processReceivedData(data) {
+    for (const res of data.geometries) {
+        const worker_geometry = res.geometry;
+        // console.log(worker_geometry)
+        const geo = new BufferGeometry();
+        geo.name = worker_geometry.name || "";
+        if (worker_geometry.index) {
+            const index = worker_geometry.index;
+            geo.setIndex(cloneAttribute(index));
+        }
+        // geo.drawRange = receivedGeometry.drawRange || { start: 0, count: Infinity };
+        for (const attrName in worker_geometry.attributes) {
+            const attribute = worker_geometry.attributes[attrName];
+            const clonedAttribute = cloneAttribute(attribute);
+            geo.setAttribute(attrName, clonedAttribute);
+        }
+        // handle morph attributes
+        // TODO: one slow aspect that could be moved to the worker is updating the morph target textures
+        if (worker_geometry.morphAttributes) {
+            for (const morphName in worker_geometry.morphAttributes) {
+                const morphAttributes = worker_geometry.morphAttributes[morphName];
+                const morphArray = morphAttributes.map(attribute => {
+                    return cloneAttribute(attribute);
+                });
+                geo.morphAttributes[morphName] = morphArray;
+            }
+        }
+        geo.morphTargetsRelative = worker_geometry.morphTargetsRelative ?? false;
+        geo.boundingBox = new Box3();
+        geo.boundingBox.min = new Vector3(worker_geometry.boundingBox?.min.x, worker_geometry.boundingBox?.min.y, worker_geometry.boundingBox?.min.z);
+        geo.boundingBox.max = new Vector3(worker_geometry.boundingBox?.max.x, worker_geometry.boundingBox?.max.y, worker_geometry.boundingBox?.max.z);
+        geo.boundingSphere = new Sphere(new Vector3(worker_geometry.boundingSphere?.center.x, worker_geometry.boundingSphere?.center.y, worker_geometry.boundingSphere?.center.z), worker_geometry.boundingSphere?.radius);
+        // // handle groups
+        if (worker_geometry.groups) {
+            for (const group of worker_geometry.groups) {
+                geo.addGroup(group.start, group.count, group.materialIndex);
+            }
+        }
+        // // handle user data
+        if (worker_geometry.userData) {
+            geo.userData = worker_geometry.userData;
+        }
+        res.geometry = geo;
+    }
+    for (const res of data.textures) {
+        const texture = res.texture;
+        let newTexture = null;
+        if (texture.isCompressedTexture) {
+            const mipmaps = texture.mipmaps;
+            const width = texture.image?.width || texture.source?.data?.width || -1;
+            const height = texture.image?.height || texture.source?.data?.height || -1;
+            newTexture = new CompressedTexture(mipmaps, width, height, texture.format, texture.type, texture.mapping, texture.wrapS, texture.wrapT, texture.magFilter, texture.minFilter, texture.anisotropy, texture.colorSpace);
+        }
+        else {
+            newTexture = new Texture(texture.image, texture.mapping, texture.wrapS, texture.wrapT, texture.magFilter, texture.minFilter, texture.format, texture.type, texture.anisotropy, texture.colorSpace);
+            newTexture.mipmaps = texture.mipmaps;
+            newTexture.channel = texture.channel;
+            newTexture.source.data = texture.source.data;
+            newTexture.flipY = texture.flipY;
+            newTexture.premultiplyAlpha = texture.premultiplyAlpha;
+            newTexture.unpackAlignment = texture.unpackAlignment;
+            newTexture.matrix = new Matrix3(...texture.matrix.elements);
+        }
+        if (!newTexture) {
+            console.error("[Worker] Failed to create new texture from received data. Texture is not a CompressedTexture or Texture.");
+            continue;
+        }
+        res.texture = newTexture;
+    }
+    return data;
+}
+function cloneAttribute(attribute) {
+    let res = attribute;
+    if ("isInterleavedBufferAttribute" in attribute && attribute.isInterleavedBufferAttribute) {
+        const data = attribute.data;
+        const array = data.array;
+        const interleavedBuffer = new InterleavedBuffer(array, data.stride);
+        res = new InterleavedBufferAttribute(interleavedBuffer, attribute.itemSize, array.byteOffset, attribute.normalized);
+        res.offset = attribute.offset;
+    }
+    else if ("isBufferAttribute" in attribute && attribute.isBufferAttribute) {
+        res = new BufferAttribute(attribute.array, attribute.itemSize, attribute.normalized);
+        res.usage = attribute.usage;
+        res.gpuType = attribute.gpuType;
+        res.updateRanges = attribute.updateRanges;
+    }
+    return res;
+}

package/lib/worker/loader.worker.js

@@ -0,0 +1,165 @@
+// import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.179.1/examples/jsm/loaders/GLTFLoader.js";
+
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+
+
+
+let debug = false;
+
+
+/** 
+ * @typedef {import("./loader.mainthread").GLTFLoaderWorker_Message} GLTFLoaderWorker_Message 
+ **/
+
+self.onmessage = (msg) => {
+    /** @type {GLTFLoaderWorker_Message} */
+    const request = msg.data;
+
+    switch (request.type) {
+        case "init":
+            break;
+        case "load":
+            loadGLTF(request);
+            break;
+        default:
+            console.error("[Worker] Unknown message type:", request.type);
+            break;
+    }
+};
+
+self.onerror = (error) => {
+    console.error("[Worker] Error:", error);
+};
+
+/**
+ * @param {GLTFLoaderWorker_Message} data
+ */
+function postMessage(data) {
+    self.postMessage(data);
+}
+
+/** @type {GLTFLoader | null} */
+let loader = null;
+
+/** @type {DRACOLoader | null} */
+let dracoLoader = null;
+
+/** @type {KTX2Loader | null } */
+let ktx2Loader = null;
+
+/**
+ * @param {GLTFLoaderWorker_Message & { type: "load"}} req
+ */
+async function loadGLTF(req) {
+    if(debug) console.debug("[Worker] Loading GLTF from URL:", req.dracoDecoderPath);
+
+    loader ??= new GLTFLoader();
+
+    loader.setMeshoptDecoder(MeshoptDecoder);
+
+    dracoLoader ??= new DRACOLoader();
+    dracoLoader.setDecoderConfig({ type: 'js' });
+    dracoLoader.setDecoderPath(req.dracoDecoderPath);
+    loader.setDRACOLoader(dracoLoader);
+
+    ktx2Loader ??= new KTX2Loader();
+    ktx2Loader.workerConfig = req.ktx2LoaderConfig;
+    ktx2Loader.setTranscoderPath(req.ktx2TranscoderPath);
+    loader.setKTX2Loader(ktx2Loader);
+
+
+    loader.load(req.url, gltf => {
+        if(debug) console.log("Loaded", req.url, gltf);
+
+        /** @type {GLTFLoaderWorker_Message & { type: "loaded-gltf"}} */
+        const data = {
+            type: "loaded-gltf",
+            result: {
+                url: req.url,
+                geometries: [],
+                textures: [],
+            }
+        }
+        collectData(gltf, data);
+        postMessage(data);
+    });
+}
+
+
+/** 
+ * @param {import("three/examples/jsm/loaders/GLTFLoader").GLTF} gltf 
+ * @param {GLTFLoaderWorker_Message & { type: "loaded-gltf"}} data
+ **/
+function collectData(gltf, data) {
+
+    const { result } = data;
+
+    for (const key of gltf.parser.associations.keys()) {
+        const cache = gltf.parser.associations.get(key);
+
+        if (!cache) {
+            if(debug) console.warn("[Worker] No cache found for key:", key);
+            continue;
+        }
+
+        if ("isTexture" in key && key.isTexture) {
+            const texture = /** @type {import("three").Texture} */ ( /** @type {unknown} */ (key));
+            const gltf_texture = gltf.parser.json.textures[cache.textures ?? -1];
+            result.textures.push({
+                texture: texture,
+                textureIndex: cache.textures ?? -1,
+                extensions: gltf_texture?.extensions ?? {},
+            })
+        }
+        else if ("isMesh" in key && key.isMesh) {
+            const mesh = /** @type {import("three").Mesh} */ ( /** @type {unknown} */ (key));
+            const meshIndex = cache.meshes ?? -1;
+            const primitiveIndex = cache.primitives ?? -1;
+            const gltf_mesh = gltf.parser.json.meshes[meshIndex];
+            result.geometries.push({
+                geometry: mesh.geometry,
+                meshIndex: meshIndex,
+                primitiveIndex: primitiveIndex,
+                extensions: gltf_mesh?.extensions ?? {},
+            });
+        }
+        else if ("isMaterial" in key && key.isMaterial) {
+            // Nothing we need to do here
+        }
+    }
+}
+
+// function traverseAndDeleteFunctions(gltf) {
+//     const textures = [];
+//     gltf.traverse((child) => {
+//         if (child.isMesh) {
+//             geometries.push(child.geometry);
+//             if (child.material) {
+//                 if (child.material.map) {
+//                     textures.push(child.material.map);
+//                 }
+//             }
+//         }
+//     });
+//     return {
+//         geometries: geometries,
+//         textures: textures,
+//     }
+// }
+
+// function traverseAndDeleteFunctions(obj, seen = new WeakSet()) {
+//     if (seen.has(obj)) return;
+//     seen.add(obj);
+
+//     for (const key in obj) {
+//         if (typeof obj[key] === "function") {
+//             delete obj[key];
+//         } else if (typeof obj[key] === "object" && obj[key] !== null) {
+//             traverseAndDeleteFunctions(obj[key], seen);
+//         }
+//     }
+//     return obj;
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "three.js support for loading glTF or GLB files that contain progressive loading data",
   "homepage": "https://needle.tools",
   "author": {
@@ -69,7 +69,7 @@
     "nodemon": "^3.1.4",
     "npm-watch": "^0.13.0",
     "three": ">= 0.160.0",
-    "vite": "<= 4.3.9"
+    "vite": "7"
   },
   "types": "./lib/index.d.ts"
 }