@needle-tools/gltf-progressive 3.1.0 → 3.1.1-next.50e45f8

package/lib/extension.js

@@ -1,15 +1,18 @@
 import { BufferGeometry, Mesh, Texture, TextureLoader } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { addDracoAndKTX2Loaders } from "./loaders.js";
-import { PromiseQueue, resolveUrl } from "./utils.internal.js";
+import { getParam, 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";
 // import { PromiseAllWithErrors, resolveUrl } from "../../engine_utils.js";
 import { plugins } from "./plugins/plugin.js";
 import { debug } from "./lods.debug.js";
-export const EXTENSION_NAME = "NEEDLE_progressive";
+import { getWorker } from "./worker/loader.mainthread.js";
+const useWorker = getParam("gltf-progressive-worker");
+const reduceMipmaps = getParam("gltf-progressive-reduce-mipmaps");
 const $progressiveTextureExtension = Symbol("needle-progressive-texture");
+export const EXTENSION_NAME = "NEEDLE_progressive";
 /**
  * The NEEDLE_progressive extension for the GLTFLoader is responsible for loading progressive LODs for meshes and textures.
  * This extension can be used to load different resolutions of a mesh or texture at runtime (e.g. for LODs or progressive textures).
@@ -83,6 +86,10 @@ export class NEEDLE_progressive {
                 }
             }
         }
+        else {
+            if (debug)
+                console.warn(`[getMaterialMinMaxLODsCount] Unsupported material type: ${material.type}`);
+        }
         material[cacheKey] = minmax;
         return minmax;
         function processTexture(tex, minmax) {
@@ -309,8 +316,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...");
                 return null;
+            }
             if (tex?.isTexture === true) {
                 if (tex != current) {
                     if (material && slot) {
@@ -326,6 +335,15 @@ export class NEEDLE_progressive {
                             }
                             // assigned.dispose();
                         }
+                        // Since we're switching LOD level for the texture based on distance we can avoid uploading all the mipmaps
+                        if (reduceMipmaps && tex.mipmaps) {
+                            const prevCount = tex.mipmaps.length;
+                            tex.mipmaps.length = Math.min(tex.mipmaps.length, 3);
+                            if (prevCount !== tex.mipmaps.length) {
+                                if (debug)
+                                    console.debug(`Reduced mipmap count from ${prevCount} to ${tex.mipmaps.length} for ${tex.uuid}: ${tex.image?.width}x${tex.image?.height}.`);
+                            }
+                        }
                         material[slot] = tex;
                     }
                     // check if the old texture is still used by other objects
@@ -375,6 +393,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 +472,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)
@@ -491,17 +526,22 @@ export class NEEDLE_progressive {
     static previouslyLoaded = new Map();
     /** this contains the geometry/textures that were originally loaded */
     static lowresCache = new Map();
+    static workers = [];
+    static _workersIndex = 0;
     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 lodInfo;
+        const isTextureRequest = current.isTexture === true;
         // See https://github.com/needle-tools/needle-engine-support/issues/133
-        if (current.isTexture === true) {
+        if (isTextureRequest) {
             const tex = current;
             if (tex.source && tex.source[$progressiveTextureExtension])
                 lodInfo = tex.source[$progressiveTextureExtension];
@@ -543,6 +583,7 @@ export class NEEDLE_progressive {
                 }
                 // check if the requested file has already been loaded
                 const KEY = lod_url + "_" + lodInfo.guid;
+                const slot = await this.queue.slot(lod_url);
                 // check if the requested file is currently being loaded
                 const existing = this.previouslyLoaded.get(KEY);
                 if (existing !== undefined) {
@@ -581,7 +622,7 @@ export class NEEDLE_progressive {
                         return res;
                     }
                 }
-                const slot = await this.queue.slot(lod_url);
+                // #region loading
                 if (!slot.use) {
                     if (debug)
                         console.log(`LOD ${level} was aborted: ${lod_url}`);
@@ -589,6 +630,39 @@ export class NEEDLE_progressive {
                 }
                 const ext = lodInfo;
                 const request = new Promise(async (resolve, _) => {
+                    // const useWorker = true;
+                    if (useWorker) {
+                        const worker = await getWorker({});
+                        const res = await worker.load(lod_url);
+                        if (res.textures.length > 0) {
+                            // const textures = new Array<Texture>();
+                            for (const entry of res.textures) {
+                                let texture = entry.texture;
+                                NEEDLE_progressive.assignLODInformation(LOD.url, texture, LODKEY, level, undefined);
+                                if (current instanceof Texture) {
+                                    texture = this.copySettings(current, texture);
+                                }
+                                if (texture)
+                                    texture.guid = ext.guid;
+                                // textures.push(texture);
+                                return resolve(texture);
+                            }
+                            // if (textures.length > 0) {
+                            //     return resolve(textures);
+                            // }
+                        }
+                        if (res.geometries.length > 0) {
+                            const geometries = new Array();
+                            for (const entry of res.geometries) {
+                                const newGeo = entry.geometry;
+                                NEEDLE_progressive.assignLODInformation(LOD.url, newGeo, LODKEY, level, entry.primitiveIndex);
+                                geometries.push(newGeo);
+                            }
+                            return resolve(geometries);
+                        }
+                        return resolve(null);
+                    }
+                    // Old loading
                     const loader = new GLTFLoader();
                     addDracoAndKTX2Loaders(loader);
                     if (debug) {
@@ -665,7 +739,6 @@ export class NEEDLE_progressive {
                         }
                         if (found) {
                             const mesh = await parser.getDependency("mesh", index);
-                            const meshExt = ext;
                             if (debugverbose)
                                 console.log(`Loaded Mesh \"${mesh.name}\"`, lod_url, index, mesh, KEY);
                             if (mesh.isMesh === true) {
@@ -724,7 +797,8 @@ export class NEEDLE_progressive {
         }
         return null;
     }
-    static queue = new PromiseQueue(100, { debug: debug != false });
+    static maxConcurrent = 50;
+    static queue = new PromiseQueue(NEEDLE_progressive.maxConcurrent, { debug: debug != false });
     static assignLODInformation(url, res, key, level, index) {
         if (!res)
             return;
@@ -732,9 +806,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) {
@@ -753,8 +835,8 @@ export class NEEDLE_progressive {
         // This should only happen once ever for every texture
         // const original = target;
         {
-            if (debug)
-                console.warn("Copy texture settings\n", source.uuid, "\n", target.uuid);
+            if (debug === "verbose")
+                console.debug("Copy texture settings\n", source.uuid, "\n", target.uuid);
             target = target.clone();
         }
         // else {

package/lib/loaders.d.ts

@@ -2,6 +2,14 @@ import { WebGLRenderer } from 'three';
 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';
+/**
+ * Return the current loader configuration.
+ * These paths can be changed using `setDracoDecoderLocation` and `setKTX2TranscoderLocation`.
+ */
+export declare const GET_LOADER_LOCATION_CONFIG: () => {
+    dracoDecoderPath: string;
+    ktx2TranscoderPath: string;
+};
 /**
  * Set the location of the Draco decoder. If a draco loader has already been created, it will be updated.
  * @default 'https://www.gstatic.com/draco/versioned/decoders/1.5.7/'

package/lib/loaders.js

@@ -6,6 +6,7 @@ let DEFAULT_DRACO_DECODER_LOCATION = 'https://www.gstatic.com/draco/versioned/de
 let DEFAULT_KTX2_TRANSCODER_LOCATION = 'https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
 const defaultDraco = DEFAULT_DRACO_DECODER_LOCATION;
 const defaultKTX2 = DEFAULT_KTX2_TRANSCODER_LOCATION;
+// #region Online check
 const _remoteDracoDecoderUrl = new URL(DEFAULT_DRACO_DECODER_LOCATION + "draco_decoder.js");
 // if (typeof window !== "undefined") {
 //     if (!window.navigator.onLine) {
@@ -40,6 +41,15 @@ fetch(_remoteDracoDecoderUrl, {
     .finally(() => {
     prepareLoaders();
 });
+// #region Loader Configuration
+/**
+ * Return the current loader configuration.
+ * These paths can be changed using `setDracoDecoderLocation` and `setKTX2TranscoderLocation`.
+ */
+export const GET_LOADER_LOCATION_CONFIG = () => ({
+    dracoDecoderPath: DEFAULT_DRACO_DECODER_LOCATION,
+    ktx2TranscoderPath: DEFAULT_KTX2_TRANSCODER_LOCATION
+});
 /**
  * Set the location of the Draco decoder. If a draco loader has already been created, it will be updated.
  * @default 'https://www.gstatic.com/draco/versioned/decoders/1.5.7/'
@@ -72,28 +82,6 @@ export function setKTX2TranscoderLocation(location) {
         console.debug("Setting KTX2 transcoder path to " + location);
     }
 }
-const $dracoDecoderPath = Symbol("dracoDecoderPath");
-let dracoLoader;
-let meshoptDecoder;
-let ktx2Loader;
-/** Used to create and load loaders */
-function prepareLoaders() {
-    if (!dracoLoader) {
-        dracoLoader = new DRACOLoader();
-        dracoLoader[$dracoDecoderPath] = DEFAULT_DRACO_DECODER_LOCATION;
-        dracoLoader.setDecoderPath(DEFAULT_DRACO_DECODER_LOCATION);
-        dracoLoader.setDecoderConfig({ type: 'js' });
-        dracoLoader.preload();
-    }
-    if (!ktx2Loader) {
-        ktx2Loader = new KTX2Loader();
-        ktx2Loader.setTranscoderPath(DEFAULT_KTX2_TRANSCODER_LOCATION);
-        ktx2Loader.init();
-    }
-    if (!meshoptDecoder) {
-        meshoptDecoder = MeshoptDecoder;
-    }
-}
 /**
  * Create loaders/decoders for Draco, KTX2 and Meshopt to be used with GLTFLoader.
  * @param renderer - Provide a renderer to detect KTX2 support.
@@ -116,6 +104,29 @@ export function addDracoAndKTX2Loaders(loader) {
     if (!loader.meshoptDecoder)
         loader.setMeshoptDecoder(meshoptDecoder);
 }
+// #region internal
+const $dracoDecoderPath = Symbol("dracoDecoderPath");
+let dracoLoader;
+let meshoptDecoder;
+let ktx2Loader;
+/** Used to create and load loaders */
+function prepareLoaders() {
+    if (!dracoLoader) {
+        dracoLoader = new DRACOLoader();
+        dracoLoader[$dracoDecoderPath] = DEFAULT_DRACO_DECODER_LOCATION;
+        dracoLoader.setDecoderPath(DEFAULT_DRACO_DECODER_LOCATION);
+        dracoLoader.setDecoderConfig({ type: 'js' });
+        dracoLoader.preload();
+    }
+    if (!ktx2Loader) {
+        ktx2Loader = new KTX2Loader();
+        ktx2Loader.setTranscoderPath(DEFAULT_KTX2_TRANSCODER_LOCATION);
+        ktx2Loader.init();
+    }
+    if (!meshoptDecoder) {
+        meshoptDecoder = MeshoptDecoder;
+    }
+}
 const gltfLoaderConfigurations = new WeakMap();
 export function configureLoader(loader, opts) {
     let config = gltfLoaderConfigurations.get(loader);

package/lib/lods.manager.js

@@ -160,6 +160,14 @@ export class LODsManager {
     constructor(renderer, context) {
         this.renderer = renderer;
         this.context = { ...context };
+        // createGLTFLoaderWorker().then(res => {
+        //     res.load("https://cloud.needle.tools/-/assets/Z23hmXBZ20RjNk-Z20RjNk-optimized/file").then(res2 => {
+        //         console.log("DONE", res2);
+        //     })
+        //     res.load("https://cloud.needle.tools/-/assets/Z23hmXBZ20RjNk-Z20RjNk-world/file").then(res2 => {
+        //         console.log("DONE2", res2);
+        //     })
+        // })
     }
     #originalRender;
     #clock = new Clock();
@@ -360,7 +368,7 @@ export class LODsManager {
         }
         // TODO: we currently can not switch texture lods because we need better caching for the textures internally (see copySettings in progressive + NE-4431)
         if (object.material && levels.texture_lod >= 0) {
-            this.loadProgressiveTextures(object.material, levels.texture_lod);
+            this.loadProgressiveTextures(object.material, levels.texture_lod, debugLodLevel);
         }
         if (debug && object.material && !object["isGizmo"]) {
             applyDebugSettings(object.material);
@@ -376,7 +384,7 @@ export class LODsManager {
      * @param level the LOD level to load. Level 0 is the best quality, higher levels are lower quality
      * @returns Promise with true if the LOD was loaded, false if not
      */
-    loadProgressiveTextures(material, level) {
+    loadProgressiveTextures(material, level, overrideLodLevel) {
         if (!material)
             return;
         if (Array.isArray(material)) {
@@ -394,10 +402,9 @@ export class LODsManager {
         else if (level < material[$currentLOD]) {
             update = true;
         }
-        const debugLevel = material["DEBUG:LOD"];
-        if (debugLevel != undefined) {
-            update = material[$currentLOD] != debugLevel;
-            level = debugLevel;
+        if (overrideLodLevel !== undefined && overrideLodLevel >= 0) {
+            update = material[$currentLOD] != overrideLodLevel;
+            level = overrideLodLevel;
         }
         if (update) {
             material[$currentLOD] = level;
@@ -459,6 +466,7 @@ export class LODsManager {
     }
     static skinnedMeshBoundsFrameOffsetCounter = 0;
     static $skinnedMeshBoundsOffset = Symbol("gltf-progressive-skinnedMeshBoundsOffset");
+    // #region calculateLodLevel
     calculateLodLevel(camera, mesh, state, desiredDensity, result) {
         if (!mesh) {
             result.mesh_lod = -1;
@@ -485,7 +493,7 @@ export class LODsManager {
         const primitive_index = NEEDLE_progressive.getPrimitiveIndex(mesh.geometry);
         const has_mesh_lods = mesh_lods && mesh_lods.length > 0;
         const texture_lods_minmax = NEEDLE_progressive.getMaterialMinMaxLODsCount(mesh.material);
-        const has_texture_lods = texture_lods_minmax?.min_count != Infinity && texture_lods_minmax.min_count > 0 && texture_lods_minmax.max_count > 0;
+        const has_texture_lods = texture_lods_minmax.min_count !== Infinity && texture_lods_minmax.min_count >= 0 && texture_lods_minmax.max_count >= 0;
         // We can skip all this if we dont have any LOD information
         if (!has_mesh_lods && !has_texture_lods) {
             result.mesh_lod = 0;
@@ -648,6 +656,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;
@@ -671,7 +683,7 @@ export class LODsManager {
             if (changed) {
                 const level = mesh_lods?.[result.mesh_lod];
                 if (level) {
-                    console.log(`Mesh LOD changed: ${state.lastLodLevel_Mesh} → ${result.mesh_lod} (${level.density.toFixed(0)}) - ${mesh.name}`);
+                    console.debug(`Mesh LOD changed: ${state.lastLodLevel_Mesh} → ${result.mesh_lod} (density: ${level.densities?.[primitive_index].toFixed(0)}) | ${mesh.name}`);
                 }
             }
         }
@@ -706,10 +718,11 @@ export class LODsManager {
                     if (lod.max_height > pixelSizeOnScreen || (!foundLod && i === 0)) {
                         foundLod = true;
                         result.texture_lod = i;
-                        if (result.texture_lod < state.lastLodLevel_Texture) {
-                            const lod_pixel_height = lod.max_height;
-                            if (debugProgressiveLoading)
+                        if (debugProgressiveLoading) {
+                            if (result.texture_lod < state.lastLodLevel_Texture) {
+                                const lod_pixel_height = lod.max_height;
                                 console.log(`Texture LOD changed: ${state.lastLodLevel_Texture} → ${result.texture_lod} = ${lod_pixel_height}px \nScreensize: ${pixelSizeOnScreen.toFixed(0)}px, Coverage: ${(100 * state.lastScreenCoverage).toFixed(2)}%, Volume ${volume.toFixed(1)} \n${mesh.name}`);
+                            }
                         }
                         break;
                     }

package/lib/utils.internal.d.ts

@@ -4,10 +4,10 @@ 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 type SlotReturnValue<T = any> = {
+    use?: ((promise: Promise<T>) => void);
 };
-export declare class PromiseQueue {
+export declare class PromiseQueue<T = any> {
     readonly maxConcurrent: number;
     private readonly _running;
     private readonly _queue;
@@ -19,8 +19,7 @@ export declare class PromiseQueue {
     /**
      * 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>;
+    slot(key: string): Promise<SlotReturnValue<T>>;
     private add;
     private internalUpdate;
 }
-export {};

package/lib/utils.internal.js

@@ -89,10 +89,10 @@ export class PromiseQueue {
         promise.finally(() => {
             this._running.delete(key);
             if (this.debug)
-                console.debug(`[PromiseQueue]: Promise for key ${key} finished, running: ${this._running.size}, waiting: ${this._queue.length}`);
+                console.debug(`[PromiseQueue]: Promise finished now running: ${this._running.size}, waiting: ${this._queue.length}. (finished ${key})`);
         });
         if (this.debug)
-            console.debug(`[PromiseQueue]: Adding promise for key ${key}, running: ${this._running.size}, waiting: ${this._queue.length}`);
+            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

package/lib/version.js

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

package/lib/worker/loader.mainthread.d.ts

@@ -0,0 +1,45 @@
+import { BufferGeometry, Texture, WebGLRenderer } from "three";
+import type { KTX2LoaderWorkerConfig } from "three/examples/jsm/loaders/KTX2Loader.js";
+type GLTFLoaderWorkerOptions = {
+    debug?: boolean;
+};
+type WorkerLoadResult = {
+    url: string;
+    geometries: Array<{
+        geometry: BufferGeometry;
+        meshIndex: number;
+        primitiveIndex: number;
+        extensions: Record<string, any>;
+    }>;
+    textures: Array<{
+        texture: Texture;
+        textureIndex: number;
+        extensions: Record<string, any>;
+    }>;
+};
+export declare function getWorker(opts?: GLTFLoaderWorkerOptions): Promise<GLTFLoaderWorker>;
+export type { GLTFLoaderWorker, GLTFLoaderWorkerOptions, WorkerLoadResult };
+/** @internal */
+export type GLTFLoaderWorker_Message = {
+    type: 'init';
+} | {
+    type: 'load';
+    url: string;
+    dracoDecoderPath: string;
+    ktx2TranscoderPath: string;
+    ktx2LoaderConfig: KTX2LoaderWorkerConfig;
+} | {
+    type: "loaded-gltf";
+    result: WorkerLoadResult;
+};
+declare class GLTFLoaderWorker {
+    private readonly worker;
+    static createWorker(opts: GLTFLoaderWorkerOptions): Promise<GLTFLoaderWorker>;
+    private _running;
+    private _webglRenderer;
+    load(url: string | URL, opts?: {
+        renderer?: WebGLRenderer;
+    }): Promise<WorkerLoadResult>;
+    private _debug;
+    private constructor();
+}