@needle-tools/gltf-progressive 3.1.1 → 3.2.0

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) {
@@ -310,7 +317,7 @@ export class NEEDLE_progressive {
         return NEEDLE_progressive.getOrLoadLOD(current, level).then(tex => {
             // this can currently not happen
             if (Array.isArray(tex)) {
-                console.warn("Progressive: Got an array of textures for a texture slot, this should not happen", tex);
+                console.warn("Progressive: Got an array of textures for a texture slot, this should not happen...");
                 return null;
             }
             if (tex?.isTexture === true) {
@@ -328,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
@@ -355,7 +371,8 @@ export class NEEDLE_progressive {
     }
     parser;
     url;
-    constructor(parser, url) {
+    constructor(parser) {
+        const url = parser.options.path;
         if (debug)
             console.log("Progressive extension registered for", url);
         this.parser = parser;
@@ -510,6 +527,8 @@ 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 */
@@ -521,8 +540,9 @@ export class NEEDLE_progressive {
         }
         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];
@@ -564,6 +584,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) {
@@ -602,7 +623,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}`);
@@ -610,6 +631,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) {
@@ -686,7 +740,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) {
@@ -745,7 +798,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;
@@ -782,8 +836,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/index.d.ts

@@ -7,7 +7,6 @@ export { getRaycastMesh, registerRaycastMesh, useRaycastMeshes } from "./utils.j
 import { WebGLRenderer } from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { SmartLoadingHints } from "./loaders.js";
-import { LODsManager } from "./lods.manager.js";
 declare type UseNeedleGLTFProgressiveOptions = {
     /**
      * When set to true the LODs manager will automatically be enabled
@@ -18,19 +17,6 @@ declare type UseNeedleGLTFProgressiveOptions = {
      */
     hints?: Omit<SmartLoadingHints, "progressive">;
 };
-/** Use this function to enable progressive loading of gltf models.
- * @param url The url of the gltf model.
- * @param renderer The renderer of the scene.
- * @param loader The gltf loader.
- * @param opts Options.
- * @returns The LODsManager instance.
- * @example In react-three-fiber:
- * ```ts
- *  const url = 'https://yourdomain.com/yourmodel.glb'
- * const { scene } = useGLTF(url, false, false, (loader) => {
- *   useNeedleGLTFProgressive(url, gl, loader)
- * })
- * return <primitive object={scene} />
- * ```
- */
-export declare function useNeedleProgressive(url: string, renderer: WebGLRenderer, loader: GLTFLoader, opts?: UseNeedleGLTFProgressiveOptions): LODsManager;
+/** @deprecated Use `useNeedleProgressive(loader, renderer)` - this method will be removed in gltf-progressive 4 */
+export declare function useNeedleProgressive(url: string, renderer: WebGLRenderer, loader: GLTFLoader, opts?: UseNeedleGLTFProgressiveOptions): any;
+export declare function useNeedleProgressive(loader: GLTFLoader, renderer: WebGLRenderer, opts?: UseNeedleGLTFProgressiveOptions): any;

package/lib/index.js

@@ -13,7 +13,15 @@ import { LODsManager } from "./lods.manager.js";
  * @param loader The gltf loader.
  * @param opts Options.
  * @returns The LODsManager instance.
- * @example In react-three-fiber:
+ *
+ * @example Usage with vanilla three.js:
+ * ```ts
+ * const url = 'https://yourdomain.com/yourmodel.glb'
+ * const loader = new GLTFLoader()
+ * useNeedleProgressive(url, renderer, loader)
+ * ```
+ *
+ * @example Usage with react-three-fiber:
  * ```ts
  *  const url = 'https://yourdomain.com/yourmodel.glb'
  * const { scene } = useGLTF(url, false, false, (loader) => {
@@ -22,14 +30,32 @@ import { LODsManager } from "./lods.manager.js";
  * return <primitive object={scene} />
  * ```
  */
-export function useNeedleProgressive(url, renderer, loader, opts) {
+export function useNeedleProgressive(...args) {
+    let url;
+    let renderer;
+    let loader;
+    let opts;
+    switch (args.length) {
+        case 2:
+            [loader, renderer] = args;
+            opts = {};
+            break;
+        case 3:
+            [loader, renderer, opts] = args;
+            break;
+        case 4: // legacy
+            [url, renderer, loader, opts] = args;
+            break;
+        default:
+            throw new Error("Invalid arguments");
+    }
     createLoaders(renderer);
     addDracoAndKTX2Loaders(loader);
     configureLoader(loader, {
         progressive: true,
         ...opts?.hints,
     });
-    loader.register(p => new NEEDLE_progressive(p, url));
+    loader.register(p => new NEEDLE_progressive(p));
     const lod = LODsManager.get(renderer);
     if (opts?.enableLODsManager !== false) {
         lod.enable();

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;
@@ -675,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}`);
                 }
             }
         }
@@ -710,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/version.js

@@ -1,4 +1,4 @@
 // replaced at build time
-export const version = "3.1.1";
+export const version = "3.2.0";
 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();
+}