@needle-tools/gltf-progressive 4.0.0-alpha.1 → 4.0.0-alpha.2

package/lib/lods.manager.js

@@ -1,5 +1,5 @@
-// @ts-ignore Timer exists at runtime in r183 but @types/three doesn't export it from main entry yet
-import { Box3, Matrix4, Mesh, MeshStandardMaterial, Sphere, Timer, Vector3 } from "three";
+import * as THREE from "three";
+import { Box3, Color, Matrix4, Mesh, Sphere, Vector3 } from "three";
 import { NEEDLE_progressive } from "./extension.js";
 import { createLoaders } from "./loaders.js";
 import { getParam, isDevelopmentServer, isMobileDevice } from "./utils.internal.js";
@@ -8,11 +8,181 @@ import { getRaycastMesh } from "./utils.js";
 import { applyDebugSettings, debug, debug_OverrideLodLevel } from "./lods.debug.js";
 import { PromiseGroup } from "./lods.promise.js";
 const debugProgressiveLoading = getParam("debugprogressive");
+const debugProgressiveLODColors = debugProgressiveLoading === "colors";
 const suppressProgressiveLoading = getParam("noprogressive");
 const $lodsManager = Symbol("Needle:LODSManager");
 const $lodstate = Symbol("Needle:LODState");
 const $currentLOD = Symbol("Needle:CurrentLOD");
+const ThreeRuntime = THREE;
 const levels = { mesh_lod: -1, texture_lod: -1 };
+const debugLODColor = new Color();
+export const lodDebugColors = [
+    0x35d05f,
+    0xa8d83a,
+    0xf3d13b,
+    0xf29332,
+    0xf0523b,
+    0xa856f0,
+    0x49a7f2,
+    0x32d7c4,
+    0xff6b9d,
+    0x6f7df7,
+    0xd66fd2,
+    0x35a853,
+    0xb7a51f,
+    0xe05d2f,
+    0x3c78d8,
+    0x00a6a6,
+    0xd7263d,
+    0x7f52ff,
+    0x46b450,
+    0xf7a531,
+    0x2f9be0,
+    0xb84592,
+    0x8a9a2a,
+    0x1f6f8b,
+    0xf05a9d,
+    0x9b5de5,
+    0x00bbf9,
+    0x00f5d4,
+    0xfee440,
+    0xf15bb5,
+    0x4d908e,
+    0x555555,
+];
+function createLODTimer() {
+    const Timer = ThreeRuntime.Timer || ThreeRuntime.Clock;
+    return new Timer();
+}
+const _meshLODWorldBox = new Box3();
+const _meshLODProjectedBox = new Box3();
+const _meshLODCameraSpaceBox = new Box3();
+const _meshLODBoxSize = new Vector3();
+const _meshLODCameraSpaceBoxSize = new Vector3();
+const _meshLODProjectionInverse = new Matrix4();
+const _meshLODCorner0 = new Vector3();
+const _meshLODCorner1 = new Vector3();
+const _meshLODCorner2 = new Vector3();
+const _meshLODCorner3 = new Vector3();
+function isInsideProjectedBox(box, projectionScreenMatrix) {
+    const min = box.min;
+    const max = box.max;
+    const centerx = (min.x + max.x) * 0.5;
+    const centery = (min.y + max.y) * 0.5;
+    const point = _meshLODCorner0.set(centerx, centery, min.z).applyMatrix4(projectionScreenMatrix);
+    return point.z < 0;
+}
+export function calculateMeshLODLevel(options) {
+    const { geometry, matrixWorld, camera, projectionScreenMatrix, desiredDensity, canvasHeight = 0, currentLevel = -1, xrEnabled = false, debugDrawLine, warnMissingPrimitiveDensities = false, } = options;
+    const meshLods = NEEDLE_progressive.getMeshLODExtension(geometry)?.lods;
+    const primitiveIndex = NEEDLE_progressive.getPrimitiveIndex(geometry);
+    const result = options.target ?? {
+        level: currentLevel,
+        primitiveIndex,
+        screenCoverage: 0,
+        screenspaceVolume: new Vector3(),
+        centrality: 1,
+    };
+    result.level = currentLevel;
+    result.primitiveIndex = primitiveIndex;
+    result.screenCoverage = 0;
+    result.screenspaceVolume.set(0, 0, 0);
+    result.centrality = 1;
+    // Note: we intentionally do NOT early-return when there are no mesh LODs.
+    // The screen coverage / screenspace volume computed below is also consumed by
+    // the texture LOD selection, which must keep working for meshes that only have
+    // texture LODs (no mesh LODs). Only the mesh LOD-level selection loop is skipped.
+    let boundingBox = options.boundingBox ?? geometry.boundingBox;
+    if (!boundingBox) {
+        geometry.computeBoundingBox();
+        boundingBox = geometry.boundingBox;
+    }
+    if (!boundingBox)
+        return result;
+    _meshLODWorldBox.copy(boundingBox).applyMatrix4(matrixWorld);
+    if (camera.isPerspectiveCamera && isInsideProjectedBox(_meshLODWorldBox, projectionScreenMatrix)) {
+        result.level = 0;
+        result.screenCoverage = Infinity;
+        result.screenspaceVolume.set(Infinity, Infinity, Infinity);
+        return result;
+    }
+    _meshLODProjectedBox.copy(_meshLODWorldBox).applyMatrix4(projectionScreenMatrix);
+    if (xrEnabled && camera.isPerspectiveCamera && camera.fov > 70) {
+        const min = _meshLODProjectedBox.min;
+        const max = _meshLODProjectedBox.max;
+        let minX = min.x;
+        let minY = min.y;
+        let maxX = max.x;
+        let maxY = max.y;
+        const enlargementFactor = 2.0;
+        const centerBoost = 1.5;
+        const centerX = (min.x + max.x) * 0.5;
+        const centerY = (min.y + max.y) * 0.5;
+        minX = (minX - centerX) * enlargementFactor + centerX;
+        minY = (minY - centerY) * enlargementFactor + centerY;
+        maxX = (maxX - centerX) * enlargementFactor + centerX;
+        maxY = (maxY - centerY) * enlargementFactor + centerY;
+        const xCentrality = minX < 0 && maxX > 0 ? 0 : Math.min(Math.abs(min.x), Math.abs(max.x));
+        const yCentrality = minY < 0 && maxY > 0 ? 0 : Math.min(Math.abs(min.y), Math.abs(max.y));
+        const centrality = Math.max(xCentrality, yCentrality);
+        result.centrality = (centerBoost - centrality) * (centerBoost - centrality) * (centerBoost - centrality);
+    }
+    const boxSize = _meshLODProjectedBox.getSize(_meshLODBoxSize);
+    boxSize.multiplyScalar(0.5);
+    if (globalThis.screen?.availHeight > 0 && canvasHeight > 0) {
+        boxSize.multiplyScalar(canvasHeight / globalThis.screen.availHeight);
+    }
+    if (camera.isPerspectiveCamera) {
+        boxSize.x *= camera.aspect;
+    }
+    _meshLODCameraSpaceBox.copy(boundingBox).applyMatrix4(matrixWorld).applyMatrix4(camera.matrixWorldInverse);
+    const cameraSpaceSize = _meshLODCameraSpaceBox.getSize(_meshLODCameraSpaceBoxSize);
+    const screenMax = Math.max(boxSize.x, boxSize.y);
+    const cameraSpaceMax = Math.max(cameraSpaceSize.x, cameraSpaceSize.y);
+    if (screenMax !== 0 && cameraSpaceMax !== 0) {
+        boxSize.z = cameraSpaceSize.z / cameraSpaceMax * screenMax;
+    }
+    const screenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z) * result.centrality;
+    result.screenCoverage = screenCoverage;
+    result.screenspaceVolume.copy(boxSize);
+    if (screenCoverage <= 0)
+        return result;
+    if (debugDrawLine) {
+        const mat = _meshLODProjectionInverse.copy(projectionScreenMatrix);
+        mat.invert();
+        _meshLODCorner0.copy(_meshLODProjectedBox.min);
+        _meshLODCorner1.copy(_meshLODProjectedBox.max);
+        _meshLODCorner1.x = _meshLODCorner0.x;
+        _meshLODCorner2.copy(_meshLODProjectedBox.max);
+        _meshLODCorner2.y = _meshLODCorner0.y;
+        _meshLODCorner3.copy(_meshLODProjectedBox.max);
+        const z = (_meshLODCorner0.z + _meshLODCorner3.z) * 0.5;
+        _meshLODCorner0.z = _meshLODCorner1.z = _meshLODCorner2.z = _meshLODCorner3.z = z;
+        _meshLODCorner0.applyMatrix4(mat);
+        _meshLODCorner1.applyMatrix4(mat);
+        _meshLODCorner2.applyMatrix4(mat);
+        _meshLODCorner3.applyMatrix4(mat);
+        debugDrawLine(_meshLODCorner0, _meshLODCorner1, 0x0000ff);
+        debugDrawLine(_meshLODCorner0, _meshLODCorner2, 0x0000ff);
+        debugDrawLine(_meshLODCorner1, _meshLODCorner3, 0x0000ff);
+        debugDrawLine(_meshLODCorner2, _meshLODCorner3, 0x0000ff);
+    }
+    if (meshLods?.length) {
+        for (let i = 0; i < meshLods.length; i++) {
+            const lod = meshLods[i];
+            const density = lod.densities?.[primitiveIndex] || lod.density || .00001;
+            if (primitiveIndex > 0 && warnMissingPrimitiveDensities && isDevelopmentServer() && !lod.densities && !globalThis["NEEDLE:MISSING_LOD_PRIMITIVE_DENSITIES"]) {
+                globalThis["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 (density / screenCoverage < desiredDensity) {
+                result.level = i;
+                break;
+            }
+        }
+    }
+    return result;
+}
 /**
  * The LODsManager class is responsible for managing the LODs and progressive assets in the scene. It will automatically update the LODs based on the camera position, screen coverage and mesh density of the objects.
  * It must be enabled by calling the `enable` method.
@@ -59,6 +229,10 @@ export class LODsManager {
         if (index >= 0)
             plugins.splice(index, 1);
     }
+    /** Read-only snapshot of the currently registered plugins, for inspection. Use {@link addPlugin} / {@link removePlugin} to modify the registry. */
+    static getPlugins() {
+        return plugins;
+    }
     /**
      * Gets the LODsManager for the given renderer. If the LODsManager does not exist yet, it will be created.
      * @param renderer The renderer to get the LODsManager for.
@@ -117,7 +291,31 @@ export class LODsManager {
     _newPromiseGroups = [];
     _promiseGroupIds = 0;
     /**
-     * Call to await LODs loading during the next render cycle.
+     * Returns a promise that resolves once all LOD requests initiated during the next render cycles have finished loading.
+     * This is useful for hiding low-resolution placeholders (e.g. with a loading overlay or CSS blur) until high-quality assets are ready.
+     *
+     * By default, the returned promise captures LOD loading requests for 2 frames and resolves when all of them complete.
+     * Use `waitForFirstCapture` if no LOD requests may happen immediately (e.g. after a scene switch).
+     *
+     * @param opts - Optional configuration for how long to capture and what to wait for. See {@link PromiseGroupOptions}.
+     * @returns A promise that resolves with `{ cancelled, awaited_count, resolved_count }` once all captured LOD loads complete (or the signal aborts).
+     *
+     * @example
+     * ```ts
+     * // Wait for initial LODs to finish loading, then remove a blur overlay
+     * const result = await lodsManager.awaitLoading({
+     *     frames: 5,
+     *     signal: AbortSignal.timeout(10_000),
+     * });
+     * console.log(`Loaded ${result.resolved_count} of ${result.awaited_count} LODs`);
+     * document.querySelector('.blur-overlay')?.remove();
+     * ```
+     *
+     * @example
+     * ```ts
+     * // Wait until at least one LOD starts loading before resolving
+     * await lodsManager.awaitLoading({ waitForFirstCapture: true });
+     * ```
      */
     awaitLoading(opts) {
         const id = this._promiseGroupIds++;
@@ -137,6 +335,11 @@ export class LODsManager {
         });
         return newGroup.ready;
     }
+    /** Track LOD work started outside this manager so {@link awaitLoading} waits for it too. */
+    trackLoadingPromise(type, object, promise) {
+        PromiseGroup.addPromise(type, object, promise, this._newPromiseGroups);
+        return promise;
+    }
     _postprocessPromiseGroups() {
         if (this._newPromiseGroups.length === 0)
             return;
@@ -146,17 +349,46 @@ export class LODsManager {
         }
     }
     _lodchangedlisteners = [];
+    /**
+     * Register a listener that is called whenever a mesh or texture LOD level has finished loading and has been applied.
+     * The listener receives the type of asset (`"mesh"` or `"texture"`), the new LOD level, and the affected object.
+     *
+     * @param evt - The event type. Currently only `"changed"` is supported.
+     * @param listener - Callback invoked after a LOD swap completes.
+     * @return A function to unregister the listener.
+     *
+     * @example
+     * ```ts
+     * lodsManager.addEventListener("changed", ({ type, level, object }) => {
+     *     console.log(`${type} LOD changed to level ${level}`, object);
+     * });
+     * ```
+     */
     addEventListener(evt, listener) {
         if (evt === "changed") {
             this._lodchangedlisteners.push(listener);
+            return () => {
+                this.removeEventListener(evt, listener);
+            };
         }
+        return () => { };
     }
+    /**
+     * Remove a previously registered `"changed"` event listener.
+     * @param evt - The event type (`"changed"`).
+     * @param listener - The listener to remove.
+     * @return `true` if the listener was found and removed, `false` otherwise.
+     */
     removeEventListener(evt, listener) {
+        let removed = false;
         if (evt === "changed") {
             const index = this._lodchangedlisteners.indexOf(listener);
-            if (index >= 0)
+            if (index >= 0) {
                 this._lodchangedlisteners.splice(index, 1);
+                removed = true;
+            }
         }
+        return removed;
     }
     // readonly plugins: NEEDLE_progressive_plugin[] = [];
     constructor(renderer, context) {
@@ -172,11 +404,11 @@ export class LODsManager {
         // })
     }
     #originalRender;
-    #clock = new Timer();
     #frame = 0;
     #delta = 0;
     #time = 0;
     #fps = 0;
+    #clock = createLODTimer();
     _fpsBuffer = [60, 60, 60, 60, 60];
     /**
      * Enable the LODsManager. This will replace the render method of the renderer with a method that updates the LODs.
@@ -198,8 +430,8 @@ export class LODsManager {
             if (renderTarget == null || ("isXRRenderTarget" in renderTarget && renderTarget.isXRRenderTarget)) {
                 stack = 0;
                 self.#frame += 1;
-                self.#clock.update();
-                self.#delta = self.#clock.getDelta();
+                self.#clock.update?.();
+                self.#delta = Math.max(self.#clock.getDelta(), 1 / 1000);
                 self.#time += self.#delta;
                 self._fpsBuffer.shift();
                 self._fpsBuffer.push(1 / self.#delta);
@@ -219,13 +451,30 @@ export class LODsManager {
         this.renderer.render = this.#originalRender;
         this.#originalRender = undefined;
     }
+    /**
+     * Manually trigger a LOD update for a scene and camera.
+     * Only needed when {@link manual} is set to `true` — otherwise LOD updates happen automatically on each render call.
+     *
+     * @param scene - The scene containing objects with progressive LODs.
+     * @param camera - The camera used to determine screen coverage and LOD levels.
+     *
+     * @example
+     * ```ts
+     * const lodsManager = LODsManager.get(renderer);
+     * lodsManager.manual = true;
+     * // ... later, trigger an update at a specific point:
+     * lodsManager.update(scene, camera);
+     * ```
+     */
     update(scene, camera) {
         this.internalUpdate(scene, camera);
     }
     onAfterRender(scene, camera, _stack) {
         if (this.pause)
             return;
-        const renderList = this.renderer.renderLists.get(scene, 0);
+        const renderList = this.getRenderList(scene, camera, _stack);
+        if (!renderList)
+            return;
         const opaque = renderList.opaque;
         let updateLODs = true;
         // check if we're rendering a postprocessing pass
@@ -282,7 +531,9 @@ export class LODsManager {
      * Update LODs in a scene
      */
     internalUpdate(scene, camera) {
-        const renderList = this.renderer.renderLists.get(scene, 0);
+        const renderList = this.getRenderList(scene, camera, 0);
+        if (!renderList)
+            return;
         const opaque = renderList.opaque;
         this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
         const desiredDensity = this.targetTriangleDensity;
@@ -308,16 +559,6 @@ export class LODsManager {
                 case "MeshDepthMaterial":
                     continue;
             }
-            if (debugProgressiveLoading === "color") {
-                if (entry.material) {
-                    if (!entry.object["progressive_debug_color"]) {
-                        entry.object["progressive_debug_color"] = true;
-                        const randomColor = Math.random() * 0xffffff;
-                        const newMaterial = new MeshStandardMaterial({ color: randomColor });
-                        entry.object.material = newMaterial;
-                    }
-                }
-            }
             const object = entry.object;
             if (object instanceof Mesh || (object.isMesh)) {
                 this.updateLODs(scene, camera, object, desiredDensity);
@@ -338,6 +579,30 @@ export class LODsManager {
             }
         }
     }
+    getRenderList(scene, camera, stack) {
+        const renderer = this.renderer;
+        let renderList = null;
+        if (renderer.isWebGPURenderer === true) {
+            const renderLists = renderer._renderLists;
+            if (!renderLists)
+                return null;
+            renderList = renderLists.get(scene, camera);
+        }
+        else if (renderer.isWebGLRenderer === true) {
+            const renderLists = renderer.renderLists;
+            if (!renderLists)
+                return null;
+            renderList = renderLists.get(scene, stack);
+        }
+        if (!renderList)
+            return null;
+        return {
+            opaque: renderList.opaque || [],
+            transparent: renderList.transparent || [],
+            transmissive: renderList.transmissive || renderList.transparentDoublePass || [],
+            transparentDoublePass: renderList.transparentDoublePass || [],
+        };
+    }
     /** Update the LOD levels for the renderer. */
     updateLODs(scene, camera, object, desiredDensity) {
         if (!object.userData) {
@@ -376,6 +641,9 @@ export class LODsManager {
         if (debug && object.material && !object["isGizmo"]) {
             applyDebugSettings(object.material);
         }
+        if (debugProgressiveLODColors && object.material && !object["isGizmo"] && !object["isBatchedMesh"]) {
+            applyLODColor(object.material, levels.mesh_lod);
+        }
         for (const plugin of plugins) {
             plugin.onAfterUpdatedLOD?.(this.renderer, scene, camera, object, levels);
         }
@@ -392,7 +660,7 @@ export class LODsManager {
             return;
         if (Array.isArray(material)) {
             for (const mat of material) {
-                this.loadProgressiveTextures(mat, level);
+                this.loadProgressiveTextures(mat, level, overrideLodLevel);
             }
             return;
         }
@@ -405,13 +673,15 @@ export class LODsManager {
         else if (level < material[$currentLOD]) {
             update = true;
         }
-        if (overrideLodLevel !== undefined && overrideLodLevel >= 0) {
+        const forceExactTextureLOD = overrideLodLevel !== undefined && overrideLodLevel >= 0;
+        if (forceExactTextureLOD) {
             update = material[$currentLOD] != overrideLodLevel;
             level = overrideLodLevel;
         }
         if (update) {
             material[$currentLOD] = level;
-            const promise = NEEDLE_progressive.assignTextureLOD(material, level).then(_ => {
+            const options = forceExactTextureLOD ? { force: true } : undefined;
+            const promise = NEEDLE_progressive.assignTextureLOD(material, level, options).then(_ => {
                 this._lodchangedlisteners.forEach(l => l({ type: "texture", level, object: material }));
             });
             PromiseGroup.addPromise("texture", material, promise, this._newPromiseGroups);
@@ -448,25 +718,7 @@ export class LODsManager {
     }
     // private testIfLODLevelsAreAvailable() {
     _sphere = new Sphere();
-    _tempBox = new Box3();
-    _tempBox2 = new Box3();
-    tempMatrix = new Matrix4();
     _tempWorldPosition = new Vector3();
-    _tempBoxSize = new Vector3();
-    _tempBox2Size = new Vector3();
-    static corner0 = new Vector3();
-    static corner1 = new Vector3();
-    static corner2 = new Vector3();
-    static corner3 = new Vector3();
-    static _tempPtInside = new Vector3();
-    static isInside(box, matrix) {
-        const min = box.min;
-        const max = box.max;
-        const centerx = (min.x + max.x) * 0.5;
-        const centery = (min.y + max.y) * 0.5;
-        const pt1 = this._tempPtInside.set(centerx, centery, min.z).applyMatrix4(matrix);
-        return pt1.z < 0;
-    }
     static skinnedMeshBoundsFrameOffsetCounter = 0;
     static $skinnedMeshBoundsOffset = Symbol("gltf-progressive-skinnedMeshBoundsOffset");
     // #region calculateLodLevel
@@ -538,7 +790,6 @@ export class LODsManager {
             boundingBox = skinnedMesh.boundingBox;
         }
         if (boundingBox) {
-            const cam = camera;
             // hack: if the mesh has vertex colors, has less than 100 vertices we always select the highest LOD
             if (mesh.geometry.attributes.color && mesh.geometry.attributes.color.count < 100) {
                 if (mesh.geometry.boundingSphere) {
@@ -552,126 +803,30 @@ export class LODsManager {
                     }
                 }
             }
-            // calculate size on screen
-            this._tempBox.copy(boundingBox);
-            this._tempBox.applyMatrix4(mesh.matrixWorld);
-            // Converting into projection space has the disadvantage that objects further to the side
-            // will have a much larger coverage, especially with high-field-of-view situations like in VR.
-            // Alternatively, we could attempt to calculate angular coverage (some kind of polar coordinates maybe?)
-            // or introduce a correction factor based on "expected distortion" of the object.
-            // High distortions would lead to lower LOD levels.
-            // "Centrality" of the calculated screen-space bounding box could be a factor here –
-            // what's the distance of the bounding box to the center of the screen?
-            if (cam.isPerspectiveCamera && LODsManager.isInside(this._tempBox, this.projectionScreenMatrix)) {
+            const selection = calculateMeshLODLevel({
+                geometry: mesh.geometry,
+                matrixWorld: mesh.matrixWorld,
+                camera,
+                projectionScreenMatrix: this.projectionScreenMatrix,
+                desiredDensity,
+                canvasHeight,
+                currentLevel: state.lastLodLevel_Mesh,
+                boundingBox,
+                xrEnabled: this.renderer.xr.enabled,
+                debugDrawLine: debugProgressiveLoading ? LODsManager.debugDrawLine : undefined,
+                warnMissingPrimitiveDensities: true,
+            });
+            state.lastCentrality = selection.centrality;
+            state.lastScreenCoverage = selection.screenCoverage;
+            state.lastScreenspaceVolume.copy(selection.screenspaceVolume);
+            if (selection.screenCoverage === Infinity) {
                 result.mesh_lod = 0;
                 result.texture_lod = 0;
                 return;
             }
-            this._tempBox.applyMatrix4(this.projectionScreenMatrix);
-            // TODO might need to be adjusted for cameras that are rendered during an XR session but are 
-            // actually not XR cameras (e.g. a render texture)
-            if (this.renderer.xr.enabled && (cam.isPerspectiveCamera) && cam.fov > 70) {
-                // calculate centrality of the bounding box - how close is it to the screen center
-                const min = this._tempBox.min;
-                const max = this._tempBox.max;
-                let minX = min.x;
-                let minY = min.y;
-                let maxX = max.x;
-                let maxY = max.y;
-                // enlarge
-                const enlargementFactor = 2.0;
-                const centerBoost = 1.5;
-                const centerX = (min.x + max.x) * 0.5;
-                const centerY = (min.y + max.y) * 0.5;
-                minX = (minX - centerX) * enlargementFactor + centerX;
-                minY = (minY - centerY) * enlargementFactor + centerY;
-                maxX = (maxX - centerX) * enlargementFactor + centerX;
-                maxY = (maxY - centerY) * enlargementFactor + centerY;
-                const xCentrality = minX < 0 && maxX > 0 ? 0 : Math.min(Math.abs(min.x), Math.abs(max.x));
-                const yCentrality = minY < 0 && maxY > 0 ? 0 : Math.min(Math.abs(min.y), Math.abs(max.y));
-                const centrality = Math.max(xCentrality, yCentrality);
-                // heuristically determined to lower quality for objects at the edges of vision
-                state.lastCentrality = (centerBoost - centrality) * (centerBoost - centrality) * (centerBoost - centrality);
-            }
-            else {
-                state.lastCentrality = 1;
-            }
-            const boxSize = this._tempBox.getSize(this._tempBoxSize);
-            boxSize.multiplyScalar(0.5); // goes from -1..1, we want -0.5..0.5 for coverage in percent
-            if (screen.availHeight > 0) {
-                // correct for size of context on screen
-                if (canvasHeight > 0)
-                    boxSize.multiplyScalar(canvasHeight / screen.availHeight);
-            }
-            if (camera.isPerspectiveCamera) {
-                boxSize.x *= camera.aspect;
-            }
-            else if (camera.isOrthographicCamera) {
-                // const cam = camera as OrthographicCamera;
-                // boxSize.x *= cam.zoom * .01;
-            }
-            const matView = camera.matrixWorldInverse;
-            const box2 = this._tempBox2;
-            box2.copy(boundingBox);
-            box2.applyMatrix4(mesh.matrixWorld);
-            box2.applyMatrix4(matView);
-            const boxSize2 = box2.getSize(this._tempBox2Size);
-            // approximate depth coverage in relation to screenspace size
-            const max2 = Math.max(boxSize2.x, boxSize2.y);
-            const max1 = Math.max(boxSize.x, boxSize.y);
-            if (max1 != 0 && max2 != 0)
-                boxSize.z = boxSize2.z / Math.max(boxSize2.x, boxSize2.y) * Math.max(boxSize.x, boxSize.y);
-            state.lastScreenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z);
-            state.lastScreenspaceVolume.copy(boxSize);
-            state.lastScreenCoverage *= state.lastCentrality;
-            // draw screen size box
-            if (debugProgressiveLoading && LODsManager.debugDrawLine) {
-                const mat = this.tempMatrix.copy(this.projectionScreenMatrix);
-                mat.invert();
-                const corner0 = LODsManager.corner0;
-                const corner1 = LODsManager.corner1;
-                const corner2 = LODsManager.corner2;
-                const corner3 = LODsManager.corner3;
-                // get box corners, transform with camera space, and draw as quad lines
-                corner0.copy(this._tempBox.min);
-                corner1.copy(this._tempBox.max);
-                corner1.x = corner0.x;
-                corner2.copy(this._tempBox.max);
-                corner2.y = corner0.y;
-                corner3.copy(this._tempBox.max);
-                // draw outlines at the center of the box
-                const z = (corner0.z + corner3.z) * 0.5;
-                // all outlines should have the same depth in screen space
-                corner0.z = corner1.z = corner2.z = corner3.z = z;
-                corner0.applyMatrix4(mat);
-                corner1.applyMatrix4(mat);
-                corner2.applyMatrix4(mat);
-                corner3.applyMatrix4(mat);
-                LODsManager.debugDrawLine(corner0, corner1, 0x0000ff);
-                LODsManager.debugDrawLine(corner0, corner2, 0x0000ff);
-                LODsManager.debugDrawLine(corner1, corner3, 0x0000ff);
-                LODsManager.debugDrawLine(corner2, corner3, 0x0000ff);
-            }
-            let expectedLevel = 999;
-            // const framerate = this.context.time.smoothedFps;
-            if (mesh_lods && state.lastScreenCoverage > 0) {
-                for (let l = 0; l < mesh_lods.length; l++) {
-                    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;
-                    }
-                }
-            }
-            const isLowerLod = expectedLevel < mesh_level;
+            const isLowerLod = selection.level >= 0 && selection.level < mesh_level;
             if (isLowerLod) {
-                mesh_level = expectedLevel;
+                mesh_level = selection.level;
                 mesh_level_calculated = true;
             }
         }
@@ -708,7 +863,8 @@ export class LODsManager {
                 if (this.context?.engine === "model-viewer") {
                     factor *= 1.5;
                 }
-                const screenSize = canvasHeight / window.devicePixelRatio;
+                const devicePixelRatio = this.renderer.getPixelRatio?.() || globalThis.devicePixelRatio || 1;
+                const screenSize = canvasHeight / devicePixelRatio;
                 const pixelSizeOnScreen = screenSize * factor;
                 let foundLod = false;
                 for (let i = texture_lods_minmax.lods.length - 1; i >= 0; i--) {
@@ -747,3 +903,21 @@ class LOD_state {
     lastScreenspaceVolume = new Vector3();
     lastCentrality = 0;
 }
+function applyLODColor(material, level) {
+    if (level < 0)
+        return;
+    if (Array.isArray(material)) {
+        for (const mat of material) {
+            applyLODColor(mat, level);
+        }
+        return;
+    }
+    if ("color" in material && material.color instanceof Color) {
+        material.color.copy(getLODColor(level, debugLODColor));
+        material.needsUpdate = true;
+    }
+}
+export function getLODColor(level, target) {
+    const index = Math.max(0, Math.min(lodDebugColors.length - 1, Math.floor(level)));
+    return target.setHex(lodDebugColors[index]);
+}

package/lib/lods.promise.js

@@ -77,7 +77,7 @@ export class PromiseGroup {
         }
         if (this._maxPromisesPerObject >= 1) {
             if (this._seen.has(object)) {
-                let count = this._seen.get(object);
+                const count = this._seen.get(object);
                 if (count >= this._maxPromisesPerObject) {
                     if (debug)
                         console.warn(`PromiseGroup: Already awaiting object ignoring new promise for it.`);

package/lib/plugins/modelviewer.js

@@ -108,7 +108,7 @@ function _patchModelViewer(modelviewer) {
         function renderFrames() {
             if (needsRender) {
                 let forcedFrames = 0;
-                let interval = setInterval(() => {
+                const interval = setInterval(() => {
                     if (forcedFrames++ > 5) {
                         clearInterval(interval);
                         return;