@needle-tools/gltf-progressive 3.0.1 → 3.1.0-next.f550970

package/lib/extension.js

@@ -1,7 +1,7 @@
 import { BufferGeometry, Mesh, Texture, TextureLoader } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { addDracoAndKTX2Loaders } from "./loaders.js";
-import { resolveUrl } from "./utils.internal.js";
+import { PromiseQueue, resolveUrl } from "./utils.internal.js";
 import { getRaycastMesh, registerRaycastMesh } from "./utils.js";
 // All of this has to be removed
 // import { getRaycastMesh, setRaycastMesh } from "../../engine_physics.js";
@@ -309,8 +309,10 @@ export class NEEDLE_progressive {
         }
         return NEEDLE_progressive.getOrLoadLOD(current, level).then(tex => {
             // this can currently not happen
-            if (Array.isArray(tex))
+            if (Array.isArray(tex)) {
+                console.warn("Progressive: Got an array of textures for a texture slot, this should not happen", tex);
                 return null;
+            }
             if (tex?.isTexture === true) {
                 if (tex != current) {
                     if (material && slot) {
@@ -375,6 +377,20 @@ export class NEEDLE_progressive {
             return mesh;
         });
     };
+    // private _isLoadingTexture;
+    // loadTexture = (textureIndex: number) => {
+    //     if (this._isLoadingTexture) return null;
+    //     const ext = this.parser.json.textures[textureIndex]?.extensions?.[EXTENSION_NAME] as NEEDLE_ext_progressive_texture;
+    //     if (!ext) return null;
+    //     this._isLoadingTexture = true;
+    //     return this.parser.getDependency("texture", textureIndex).then(tex => {
+    //         this._isLoadingTexture = false;
+    //         if (tex) {
+    //             NEEDLE_progressive.registerTexture(this.url, tex as Texture, ext.lods?.length, textureIndex, ext);
+    //         }
+    //         return tex;
+    //     });
+    // }
     afterRoot(gltf) {
         if (debug)
             console.log("AFTER", this.url, gltf);
@@ -440,13 +456,16 @@ export class NEEDLE_progressive {
      * Register a texture with LOD information
      */
     static registerTexture = (url, tex, level, index, ext) => {
-        if (debug)
-            console.log("> Progressive: register texture", index, tex.name, tex.uuid, tex, ext);
         if (!tex) {
             if (debug)
-                console.error("gltf-progressive: Register texture without texture");
+                console.error("gltf-progressive: Called register texture without texture");
             return;
         }
+        if (debug) {
+            const width = tex.image?.width || tex.source?.data?.width || 0;
+            const height = tex.image?.height || tex.source?.data?.height || 0;
+            console.log(`> Progressive: register texture[${index}] "${tex.name || tex.uuid}", Current: ${width}x${height}, Max: ${ext.lods[0]?.width}x${ext.lods[0]?.height}, uuid: ${tex.uuid}`, ext, tex);
+        }
         // Put the extension info into the source (seems like tiled textures are cloned and the userdata etc is not properly copied BUT the source of course is not cloned)
         // see https://github.com/needle-tools/needle-engine-support/issues/133
         if (tex.source)
@@ -494,25 +513,27 @@ export class NEEDLE_progressive {
     static async getOrLoadLOD(current, level) {
         const debugverbose = debug == "verbose";
         /** this key is used to lookup the LOD information */
-        const LOD = current.userData.LODS;
+        const LOD = this.getAssignedLODInformation(current);
         if (!LOD) {
+            if (debug)
+                console.warn(`[gltf-progressive] No LOD information found: ${current.name}, uuid: ${current.uuid}, type: ${current.type}`, current);
             return null;
         }
         const LODKEY = LOD?.key;
-        let progressiveInfo;
+        let lodInfo;
         // See https://github.com/needle-tools/needle-engine-support/issues/133
         if (current.isTexture === true) {
             const tex = current;
             if (tex.source && tex.source[$progressiveTextureExtension])
-                progressiveInfo = tex.source[$progressiveTextureExtension];
+                lodInfo = tex.source[$progressiveTextureExtension];
         }
-        if (!progressiveInfo)
-            progressiveInfo = NEEDLE_progressive.lodInfos.get(LODKEY);
-        if (progressiveInfo) {
+        if (!lodInfo)
+            lodInfo = NEEDLE_progressive.lodInfos.get(LODKEY);
+        if (lodInfo) {
             if (level > 0) {
                 let useLowRes = false;
-                const hasMultipleLevels = Array.isArray(progressiveInfo.lods);
-                if (hasMultipleLevels && level >= progressiveInfo.lods.length) {
+                const hasMultipleLevels = Array.isArray(lodInfo.lods);
+                if (hasMultipleLevels && level >= lodInfo.lods.length) {
                     useLowRes = true;
                 }
                 else if (!hasMultipleLevels) {
@@ -524,12 +545,12 @@ export class NEEDLE_progressive {
                 }
             }
             /** the unresolved LOD url */
-            const unresolved_lod_url = Array.isArray(progressiveInfo.lods) ? progressiveInfo.lods[level]?.path : progressiveInfo.lods;
+            const unresolved_lod_url = Array.isArray(lodInfo.lods) ? lodInfo.lods[level]?.path : lodInfo.lods;
             // check if we have a uri
             if (!unresolved_lod_url) {
-                if (debug && !progressiveInfo["missing:uri"]) {
-                    progressiveInfo["missing:uri"] = true;
-                    console.warn("Missing uri for progressive asset for LOD " + level, progressiveInfo);
+                if (debug && !lodInfo["missing:uri"]) {
+                    lodInfo["missing:uri"] = true;
+                    console.warn("Missing uri for progressive asset for LOD " + level, lodInfo);
                 }
                 return null;
             }
@@ -537,12 +558,12 @@ export class NEEDLE_progressive {
             const lod_url = resolveUrl(LOD.url, unresolved_lod_url);
             // check if the requested file needs to be loaded via a GLTFLoader
             if (lod_url.endsWith(".glb") || lod_url.endsWith(".gltf")) {
-                if (!progressiveInfo.guid) {
-                    console.warn("missing pointer for glb/gltf texture", progressiveInfo);
+                if (!lodInfo.guid) {
+                    console.warn("missing pointer for glb/gltf texture", lodInfo);
                     return null;
                 }
                 // check if the requested file has already been loaded
-                const KEY = lod_url + "_" + progressiveInfo.guid;
+                const KEY = lod_url + "_" + lodInfo.guid;
                 // check if the requested file is currently being loaded
                 const existing = this.previouslyLoaded.get(KEY);
                 if (existing !== undefined) {
@@ -581,7 +602,13 @@ export class NEEDLE_progressive {
                         return res;
                     }
                 }
-                const ext = progressiveInfo;
+                const slot = await this.queue.slot(lod_url);
+                if (!slot.use) {
+                    if (debug)
+                        console.log(`LOD ${level} was aborted: ${lod_url}`);
+                    return null; // the request was aborted, we don't load it again
+                }
+                const ext = lodInfo;
                 const request = new Promise(async (resolve, _) => {
                     const loader = new GLTFLoader();
                     addDracoAndKTX2Loaders(loader);
@@ -599,10 +626,11 @@ export class NEEDLE_progressive {
                     }
                     const gltf = await loader.loadAsync(url).catch(err => {
                         console.error(`Error loading LOD ${level} from ${lod_url}\n`, err);
-                        return null;
+                        return resolve(null);
                     });
-                    if (!gltf)
-                        return null;
+                    if (!gltf) {
+                        return resolve(null);
+                    }
                     const parser = gltf.parser;
                     if (debugverbose)
                         console.log("Loading finished " + lod_url, ext.guid);
@@ -687,6 +715,7 @@ export class NEEDLE_progressive {
                     return resolve(null);
                 });
                 this.previouslyLoaded.set(KEY, request);
+                slot.use(request);
                 const res = await request;
                 return res;
             }
@@ -697,12 +726,12 @@ export class NEEDLE_progressive {
                     const loader = new TextureLoader();
                     const tex = await loader.loadAsync(lod_url);
                     if (tex) {
-                        tex.guid = progressiveInfo.guid;
+                        tex.guid = lodInfo.guid;
                         tex.flipY = false;
                         tex.needsUpdate = true;
                         tex.colorSpace = current.colorSpace;
                         if (debugverbose)
-                            console.log(progressiveInfo, tex);
+                            console.log(lodInfo, tex);
                     }
                     else if (debug)
                         console.warn("failed loading", lod_url);
@@ -716,6 +745,7 @@ export class NEEDLE_progressive {
         }
         return null;
     }
+    static queue = new PromiseQueue(100, { debug: debug != false });
     static assignLODInformation(url, res, key, level, index) {
         if (!res)
             return;
@@ -723,9 +753,17 @@ export class NEEDLE_progressive {
             res.userData = {};
         const info = new LODInformation(url, key, level, index);
         res.userData.LODS = info;
+        if ("source" in res && typeof res.source === "object")
+            res.source.LODS = info; // for tiled textures
     }
     static getAssignedLODInformation(res) {
-        return res?.userData?.LODS || null;
+        if (!res)
+            return null;
+        if (res.userData?.LODS)
+            return res.userData.LODS;
+        if ("source" in res && res.source?.LODS)
+            return res.source.LODS;
+        return null;
     }
     // private static readonly _copiedTextures: WeakMap<Texture, Texture> = new Map();
     static copySettings(source, target) {

package/lib/lods.manager.d.ts

@@ -149,6 +149,8 @@ export declare class LODsManager {
     private static corner3;
     private static readonly _tempPtInside;
     private static isInside;
+    private static skinnedMeshBoundsFrameOffsetCounter;
+    private static $skinnedMeshBoundsOffset;
     private calculateLodLevel;
 }
 declare class LOD_state {

package/lib/lods.manager.js

@@ -457,6 +457,8 @@ export class LODsManager {
         const pt1 = this._tempPtInside.set(centerx, centery, min.z).applyMatrix4(matrix);
         return pt1.z < 0;
     }
+    static skinnedMeshBoundsFrameOffsetCounter = 0;
+    static $skinnedMeshBoundsOffset = Symbol("gltf-progressive-skinnedMeshBoundsOffset");
     calculateLodLevel(camera, mesh, state, desiredDensity, result) {
         if (!mesh) {
             result.mesh_lod = -1;
@@ -502,16 +504,25 @@ export class LODsManager {
                 skinnedMesh.computeBoundingBox();
             }
             // Fix: https://linear.app/needle/issue/NE-5264
-            else if (this.skinnedMeshAutoUpdateBoundsInterval > 0
-                && state.frames % this.skinnedMeshAutoUpdateBoundsInterval === 0) {
-                // use lowres geometry for bounding box calculation
-                const raycastmesh = getRaycastMesh(skinnedMesh);
-                const originalGeometry = skinnedMesh.geometry;
-                if (raycastmesh) {
-                    skinnedMesh.geometry = raycastmesh;
+            else if (this.skinnedMeshAutoUpdateBoundsInterval > 0) {
+                // Save a frame offset per object to stagger updates of skinned meshes across multiple frames
+                // This isn't a perfect solution to improve perf impact of skinned mesh updates (e.g. large skinned meshes would still be costly)
+                // But for many smaller meshes it helps to avoid spikes in performance
+                if (!skinnedMesh[LODsManager.$skinnedMeshBoundsOffset]) {
+                    const offset = LODsManager.skinnedMeshBoundsFrameOffsetCounter++;
+                    skinnedMesh[LODsManager.$skinnedMeshBoundsOffset] = offset;
+                }
+                const frameOffset = skinnedMesh[LODsManager.$skinnedMeshBoundsOffset];
+                if ((state.frames + frameOffset) % this.skinnedMeshAutoUpdateBoundsInterval === 0) {
+                    // use lowres geometry for bounding box calculation
+                    const raycastmesh = getRaycastMesh(skinnedMesh);
+                    const originalGeometry = skinnedMesh.geometry;
+                    if (raycastmesh) {
+                        skinnedMesh.geometry = raycastmesh;
+                    }
+                    skinnedMesh.computeBoundingBox();
+                    skinnedMesh.geometry = originalGeometry;
                 }
-                skinnedMesh.computeBoundingBox();
-                skinnedMesh.geometry = originalGeometry;
             }
             boundingBox = skinnedMesh.boundingBox;
         }
@@ -637,6 +648,10 @@ export class LODsManager {
                     const lod = mesh_lods[l];
                     const densityForThisLevel = lod.densities?.[primitive_index] || lod.density || .00001;
                     const resultingDensity = densityForThisLevel / state.lastScreenCoverage;
+                    if (primitive_index > 0 && isDevelopmentServer() && !lod.densities && !globalThis["NEEDLE:MISSING_LOD_PRIMITIVE_DENSITIES"]) {
+                        window["NEEDLE:MISSING_LOD_PRIMITIVE_DENSITIES"] = true;
+                        console.warn(`[Needle Progressive] Detected usage of mesh without primitive densities. This might cause incorrect LOD level selection: Consider re-optimizing your model by updating your Needle Integration, Needle glTF Pipeline or running optimization again on Needle Cloud.`);
+                    }
                     if (resultingDensity < desiredDensity) {
                         expectedLevel = l;
                         break;

package/lib/utils.internal.d.ts

@@ -4,3 +4,23 @@ export declare function resolveUrl(source: string | undefined, uri: string): str
 /** @returns `true` if it's a phone or tablet */
 export declare function isMobileDevice(): boolean;
 export declare function isDevelopmentServer(): boolean;
+type SlotReturnValue = {
+    use?: ((promise: Promise<any>) => void);
+};
+export declare class PromiseQueue {
+    readonly maxConcurrent: number;
+    private readonly _running;
+    private readonly _queue;
+    debug: boolean;
+    constructor(maxConcurrent?: number, opts?: {
+        debug?: boolean;
+    });
+    private tick;
+    /**
+     * Request a slot for a promise with a specific key. This function returns a promise with a `use` method that can be called to add the promise to the queue.
+     */
+    slot(key: string): Promise<SlotReturnValue>;
+    private add;
+    private internalUpdate;
+}
+export {};

package/lib/utils.internal.js

@@ -58,3 +58,52 @@ export function isDevelopmentServer() {
     const isDevelopment = url.hostname === "127.0.0.1" || isLocalhostOrIpAddress;
     return isDevelopment;
 }
+export class PromiseQueue {
+    maxConcurrent;
+    _running = new Map();
+    _queue = [];
+    debug = false;
+    constructor(maxConcurrent = 100, opts = {}) {
+        this.maxConcurrent = maxConcurrent;
+        this.debug = opts.debug ?? false;
+        window.requestAnimationFrame(this.tick);
+    }
+    tick = () => {
+        this.internalUpdate();
+        setTimeout(this.tick, 10);
+    };
+    /**
+     * Request a slot for a promise with a specific key. This function returns a promise with a `use` method that can be called to add the promise to the queue.
+     */
+    slot(key) {
+        if (this.debug)
+            console.debug(`[PromiseQueue]: Requesting slot for key ${key}, running: ${this._running.size}, waiting: ${this._queue.length}`);
+        return new Promise((resolve) => {
+            this._queue.push({ key, resolve });
+        });
+    }
+    add(key, promise) {
+        if (this._running.has(key))
+            return;
+        this._running.set(key, promise);
+        promise.finally(() => {
+            this._running.delete(key);
+            if (this.debug)
+                console.debug(`[PromiseQueue]: Promise finished now running: ${this._running.size}, waiting: ${this._queue.length}. (finished ${key})`);
+        });
+        if (this.debug)
+            console.debug(`[PromiseQueue]: Added new promise, now running: ${this._running.size}, waiting: ${this._queue.length}. (added ${key})`);
+    }
+    internalUpdate() {
+        // Run for as many free slots as we can
+        const diff = this.maxConcurrent - this._running.size;
+        for (let i = 0; i < diff && this._queue.length > 0; i++) {
+            if (this.debug)
+                console.debug(`[PromiseQueue]: Running ${this._running.size} promises, waiting for ${this._queue.length} more.`);
+            const { key, resolve } = this._queue.shift();
+            resolve({
+                use: (promise) => this.add(key, promise)
+            });
+        }
+    }
+}

package/lib/version.js

@@ -1,4 +1,4 @@
 // replaced at build time
-export const version = "3.0.1";
+export const version = "3.1.0";
 globalThis["GLTF_PROGRESSIVE_VERSION"] = version;
 console.debug(`[gltf-progressive] version ${version || "-"}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "3.0.1",
+  "version": "3.1.0-next.f550970",
   "description": "three.js support for loading glTF or GLB files that contain progressive loading data",
   "homepage": "https://needle.tools",
   "author": {
@@ -72,4 +72,4 @@
     "vite": "<= 4.3.9"
   },
   "types": "./lib/index.d.ts"
-}
+}