@needle-tools/gltf-progressive 1.0.0-alpha → 1.0.0-alpha.10

package/{src/lods_manager.ts → lib/lods_manager.js}

@@ -1,387 +1,381 @@
-import { Box3, BufferGeometry, Camera, Frustum, Material, Matrix4, Mesh, Object3D, PerspectiveCamera, Scene, Sphere, Texture, Vector3, WebGLRenderer } from "three";
-import { NEEDLE_progressive, ProgressiveMaterialTextureLoadingResult } from "./extension.js";
-import { createLoaders } from "./loaders.js"
-import { getParam } from "./utils.js"
-import { NEEDLE_progressive_plugin } from "./plugins/plugin.js";
-
-let debugProgressiveLoading = getParam("debugprogressive");
-const suppressProgressiveLoading = getParam("noprogressive");
-
-
-export class LODsManager {
-    readonly renderer: WebGLRenderer;
-    readonly projectionScreenMatrix = new Matrix4();
-    readonly cameraFrustrum = new Frustum();
-
-    updateInterval: number = 0;
-    pause: boolean = false;
-
-    readonly plugins: NEEDLE_progressive_plugin[] = [];
-
-    constructor(renderer: WebGLRenderer) {
-        this.renderer = renderer;
-    }
-
-    private _originalRender?: (scene: Scene, camera: Camera) => void;
-
-    enable() {
-        if (this._originalRender) return;
-        let stack = 0;
-        // Save the original render method
-        this._originalRender = this.renderer.render;
-        const self = this;
-        let frames = 0;
-        createLoaders(this.renderer);
-        this.renderer.render = function (scene: Scene, camera: Camera) {
-            const frame = frames++;
-            const level = stack++;
-            self._originalRender!.call(this, scene, camera);
-            self.onUpdateLODs(scene, camera, level, frame);
-            stack--;
-        };
-    }
-    disable() {
-        if (!this._originalRender) return;
-        this.renderer.render = this._originalRender;
-        this._originalRender = undefined;
-    }
-
-
-
-    private onUpdateLODs(scene: Scene, camera: Camera, stack: number, frame: number) {
-
-        if (suppressProgressiveLoading) return;
-        if (this.pause) return;
-        if (this.updateInterval > 0 && frame % this.updateInterval != 0) return;
-
-        this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix, this.renderer.coordinateSystem);
-        const desiredDensity = 100_000;
-
-        // const isLowPerformanceDevice = false;// isMobileDevice();
-
-        // Experiment: quick & dirty performance-adaptive LODs
-        /* 
-        if (this.context.time.smoothedFps < 59) {
-            currentAllowedDensity *= 0.5;
-        }
-        else if (this.context.time.smoothedFps >= 59) {
-            currentAllowedDensity *= 1.25;
-        }
-        */
-
-        const renderList = this.renderer.renderLists.get(scene, stack);
-        const opaque = renderList.opaque;
-        for (const entry of opaque) {
-            const object = entry.object as any;
-
-            for (const plugin of this.plugins) {
-                plugin.onBeforeUpdateLOD?.(this.renderer, scene, camera, object);
-            }
-
-            if (object instanceof Mesh || (object.isMesh)) {
-                this.updateLODs(camera, object, desiredDensity);
-            }
-        }
-    }
-
-    /** Update the LOD levels for the renderer. */
-    private updateLODs(camera: Camera, object: Mesh, desiredDensity: number) {
-
-
-        // we currently only support auto LOD changes for meshes
-        // if (this.hasMeshLODs) {
-        let state = object.userData.LOD_state as LOD_state;
-        if (!state) {
-            state = new LOD_state();
-            object.userData.LOD_state = state;
-        }
-
-        let level = this.calculateLodLevel(camera, object, state, desiredDensity);
-        level = Math.round(level);
-        state.lastLodLevel = level;
-        // }
-
-        if (level >= 0) {
-            this.loadProgressiveMeshes(object, level);
-        }
-
-        // TODO: we currently can not switch texture lods because we need better caching for the textures internally (see copySettings in progressive + NE-4431)
-        let textureLOD = 0;// Math.max(0, LODlevel - 2)
-
-        if (object.material) {
-            const debugLevel = object["DEBUG:LOD"];
-            if (debugLevel != undefined) textureLOD = debugLevel;
-
-            if (Array.isArray(object.material)) {
-                for (const mat of object.material) {
-                    this.loadProgressiveTextures(mat, textureLOD);
-                }
-            }
-            else {
-                this.loadProgressiveTextures(object.material, textureLOD);
-            }
-        }
-    }
-
-
-    /** Load progressive textures for the given material
-     * @param material the material to load the textures for
-     * @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
-     */
-    private loadProgressiveTextures(material: Material, level: number): Promise<ProgressiveMaterialTextureLoadingResult[] | Texture | null> {
-        if (!material) return Promise.resolve(null);
-        if (material.userData && material.userData.LOD !== level) {
-            material.userData.LOD = level;
-            return NEEDLE_progressive.assignTextureLOD(material, level);
-        }
-        return Promise.resolve(null);
-    }
-
-    /** Load progressive meshes for the given mesh
-     * @param mesh the mesh to load the LOD for
-     * @param index the index of the mesh if it's part of a group
-     * @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
-     */
-    private loadProgressiveMeshes(mesh: Mesh, level: number): Promise<BufferGeometry | null> {
-        level = 0;
-        if (!mesh) return Promise.resolve(null);
-        if (!mesh.userData) mesh.userData = {};
-        if (mesh.userData.LOD !== level) {
-            mesh.userData.LOD = level;
-            const originalGeometry = mesh.geometry;
-            return NEEDLE_progressive.assignMeshLOD(mesh, level).then(res => {
-                if (res && mesh.userData.LOD == level && originalGeometry != mesh.geometry) {
-                    // update the lightmap
-                    // this.applyLightmapping();
-
-                    // if (this.handles) {
-                    //     for (const inst of this.handles) {
-                    //         // if (inst["LOD"] < level) continue;
-                    //         // inst["LOD"] = level;
-                    //         inst.setGeometry(mesh.geometry);
-                    //     }
-                    // }
-                }
-                return res;
-            })
-        }
-        return Promise.resolve(null);
-    }
-
-    // private testIfLODLevelsAreAvailable() {
-
-    private readonly _sphere = new Sphere();
-    private readonly _box = new Box3();
-    private readonly tempMatrix = new Matrix4();
-    private readonly _tempWorldPosition = new Vector3();
-    private readonly _tempBoxSize = new Vector3();
-    private readonly _tempBox2Size = new Vector3();
-
-    private static corner0 = new Vector3();
-    private static corner1 = new Vector3();
-    private static corner2 = new Vector3();
-    private static corner3 = new Vector3();
-
-    static debugDrawLine: (a: Vector3, b: Vector3, color: number) => void | null;
-
-    private calculateLodLevel(camera: Camera, mesh: Mesh, state: LOD_state, desiredDensity: number): number {
-        if (!mesh) return -1;
-
-        // if this is using instancing we always load level 0
-        // if (this.isInstancingActive) return 0;
-
-        /** rough measure of "triangles on quadratic screen" – we're switching LODs based on this metric. */
-        /** highest LOD level we'd ever expect to be generated */
-        const maxLevel = 10;
-        let level = maxLevel + 1;
-
-        if (camera) {
-            if (debugProgressiveLoading && mesh["DEBUG:LOD"] != undefined) {
-                return mesh["DEBUG:LOD"];
-            }
-
-            // The mesh info contains also the density for all available LOD level so we can use this for selecting which level to show
-            const lodsInfo = NEEDLE_progressive.getMeshLODInformation(mesh.geometry);
-            const lods = lodsInfo?.lods;
-
-            // We can skip all this if we dont have any LOD information - we can ask the progressive extension for that
-            if (!lods || lods.length <= 0) {
-                return 99;
-            }
-
-            if (!this.cameraFrustrum?.intersectsObject(mesh)) {
-                console.log("Mesh not visible");
-                // if (debugProgressiveLoading && mesh.geometry.boundingSphere) {
-                //     const bounds = mesh.geometry.boundingSphere;
-                //     this._sphere.copy(bounds);
-                //     this._sphere.applyMatrix4(mesh.matrixWorld);
-                //     Gizmos.DrawWireSphere(this._sphere.center, this._sphere.radius * 1.01, 0xff5555, .5);
-                // }
-                // the object is not visible by the camera
-                return 99;
-            }
-
-            const box = mesh.geometry.boundingBox;
-            if (box && camera instanceof PerspectiveCamera) {
-
-                // 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) {
-                        this._sphere.copy(mesh.geometry.boundingSphere);
-                        this._sphere.applyMatrix4(mesh.matrixWorld);
-                        const worldPosition = camera.getWorldPosition(this._tempWorldPosition)
-                        if (this._sphere.containsPoint(worldPosition)) {
-                            return 0;
-                        }
-                    }
-                }
-
-                // calculate size on screen
-                this._box.copy(box);
-                this._box.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?
-                this._box.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 && camera.fov > 70) {
-                    // calculate centrality of the bounding box - how close is it to the screen center
-                    const min = this._box.min;
-                    const max = this._box.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._box.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)
-                    boxSize.multiplyScalar(this.renderer.domElement.clientHeight / screen.availHeight); // correct for size of context on screen
-                boxSize.x *= camera.aspect;
-
-                const matView = camera.matrixWorldInverse;
-                const box2 = new Box3();
-                box2.copy(box);
-                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._box.min);
-                    corner1.copy(this._box.max);
-                    corner1.x = corner0.x;
-                    corner2.copy(this._box.max);
-                    corner2.y = corner0.y;
-                    corner3.copy(this._box.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 (lods && state.lastScreenCoverage > 0) {
-                    for (let l = 0; l < lods.length; l++) {
-                        const densityForThisLevel = lods[l].density;
-                        if (densityForThisLevel / state.lastScreenCoverage < desiredDensity) {
-                            expectedLevel = l;
-                            break;
-                        }
-                    }
-                }
-
-                // expectedLevel -= meshDensity - 5;
-                // expectedLevel += meshDensity;
-                const isLowerLod = expectedLevel < level;
-                if (isLowerLod) {
-                    level = expectedLevel;
-                }
-            }
-            // }
-        }
-
-
-        // if (this._lastLodLevel != level) {
-        //     this._nextLodTestTime = this.context.time.realtimeSinceStartup + .5;
-        //     if (debugProgressiveLoading) {
-        //         if (debugProgressiveLoading == "verbose") console.warn(`LOD Level changed from ${this._lastLodLevel} to ${level} for ${this.name}`);
-        //         this.drawGizmoLodLevel(true);
-        //     }
-        // }
-
-        return level;
-    }
-}
-
-
-
-
-class LOD_state {
-    lastLodLevel: number = 0;
-    lastScreenCoverage: number = 0;
-    readonly lastScreenspaceVolume: Vector3 = new Vector3();
-    lastCentrality: number = 0;
-}
+import { Box3, Frustum, Matrix4, Mesh, Sphere, Vector3 } from "three";
+import { NEEDLE_progressive } from "./extension.js";
+import { createLoaders } from "./loaders.js";
+import { getParam } from "./utils.js";
+const debugProgressiveLoading = getParam("debugprogressive");
+const suppressProgressiveLoading = getParam("noprogressive");
+/**
+ * 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.
+ *
+ * Instead of using the LODs manager directly you can also call `useNeedleProgressive` to enable progressive loading for a GLTFLoader
+ */
+export class LODsManager {
+    /** Assign a function to draw debug lines for the LODs. This function will be called with the start and end position of the line and the color of the line when the `debugprogressive` query parameter is set.
+     */
+    static debugDrawLine;
+    /** @internal */
+    static getObjectLODState(object) {
+        return object.userData?.LOD_state;
+    }
+    renderer;
+    projectionScreenMatrix = new Matrix4();
+    cameraFrustrum = new Frustum();
+    /**
+     * The update interval in frames. If set to 0, the LODs will be updated every frame. If set to 1, the LODs will be updated every second frame, etc.
+     */
+    updateInterval = 0;
+    /**
+     * If set to true, the LODsManager will not update the LODs.
+     */
+    pause = false;
+    plugins = [];
+    constructor(renderer) {
+        this.renderer = renderer;
+    }
+    _frame = 0;
+    _originalRender;
+    /**
+     * Enable the LODsManager. This will replace the render method of the renderer with a method that updates the LODs.
+     */
+    enable() {
+        if (this._originalRender)
+            return;
+        let stack = 0;
+        // Save the original render method
+        this._originalRender = this.renderer.render;
+        const self = this;
+        createLoaders(this.renderer);
+        this.renderer.render = function (scene, camera) {
+            // check if this render call is rendering to a texture or the canvas
+            // if it's rendering to a texture we don't want to update the LODs
+            // This might need to be loosened later - e.g. we might want to update LODs for a render texture - but then we need to store the last LOD level differently and we also might not want to  perform all the plugin calls?
+            const renderTarget = self.renderer.getRenderTarget();
+            if (renderTarget == null) {
+                stack = 0;
+                self._frame += 1;
+            }
+            const frame = self._frame;
+            const stack_level = stack++;
+            self.onBeforeRender(scene, camera, stack_level, frame);
+            self._originalRender.call(this, scene, camera);
+            self.onAfterRender(scene, camera, stack_level, frame);
+        };
+    }
+    disable() {
+        if (!this._originalRender)
+            return;
+        this.renderer.render = this._originalRender;
+        this._originalRender = undefined;
+    }
+    onBeforeRender(_scene, _camera, _stack, _frame) {
+    }
+    onAfterRender(scene, camera, stack, frame) {
+        if (this.pause)
+            return;
+        // we only want to update LODs during the main render call
+        if (stack == 0) {
+            if (suppressProgressiveLoading)
+                return;
+            if (this.updateInterval > 0 && frame % this.updateInterval != 0)
+                return;
+            this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+            this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix, this.renderer.coordinateSystem);
+            const desiredDensity = 100_000;
+            // const isLowPerformanceDevice = false;// isMobileDevice();
+            // Experiment: quick & dirty performance-adaptive LODs
+            /*
+            if (this.context.time.smoothedFps < 59) {
+                currentAllowedDensity *= 0.5;
+            }
+            else if (this.context.time.smoothedFps >= 59) {
+                currentAllowedDensity *= 1.25;
+            }
+            */
+            const renderList = this.renderer.renderLists.get(scene, stack);
+            const opaque = renderList.opaque;
+            for (const entry of opaque) {
+                if (entry.material && (entry.geometry?.type === "BoxGeometry" || entry.geometry?.type === "BufferGeometry")) {
+                    // Ignore the skybox
+                    if (entry.material.name === "SphericalGaussianBlur" || entry.material.name == "BackgroundCubeMaterial" || entry.material.name === "CubemapFromEquirect" || entry.material.name === "EquirectangularToCubeUV") {
+                        if (debugProgressiveLoading) {
+                            if (!entry.material["NEEDLE_PROGRESSIVE:IGNORE-WARNING"]) {
+                                entry.material["NEEDLE_PROGRESSIVE:IGNORE-WARNING"] = true;
+                                console.warn("Ignoring skybox or BLIT object", entry, entry.material.name, entry.material.type);
+                            }
+                        }
+                        continue;
+                    }
+                }
+                const object = entry.object;
+                if (object instanceof Mesh || (object.isMesh)) {
+                    this.updateLODs(scene, camera, object, desiredDensity);
+                }
+            }
+            const transparent = renderList.transparent;
+            for (const entry of transparent) {
+                const object = entry.object;
+                if (object instanceof Mesh || (object.isMesh)) {
+                    this.updateLODs(scene, camera, object, desiredDensity);
+                }
+            }
+        }
+    }
+    /** Update the LOD levels for the renderer. */
+    updateLODs(scene, camera, object, desiredDensity) {
+        for (const plugin of this.plugins) {
+            plugin.onBeforeUpdateLOD?.(this.renderer, scene, camera, object);
+        }
+        let state = object.userData.LOD_state;
+        if (!state) {
+            state = new LOD_state();
+            object.userData.LOD_state = state;
+        }
+        let level = this.calculateLodLevel(camera, object, state, desiredDensity);
+        level = Math.round(level);
+        // we currently only support auto LOD changes for meshes
+        if (level >= 0) {
+            this.loadProgressiveMeshes(object, level);
+        }
+        // TODO: we currently can not switch texture lods because we need better caching for the textures internally (see copySettings in progressive + NE-4431)
+        let textureLOD = 0; // Math.max(0, LODlevel - 2)
+        if (object.material) {
+            const debugLevel = object["DEBUG:LOD"];
+            if (debugLevel != undefined)
+                textureLOD = debugLevel;
+            if (Array.isArray(object.material)) {
+                for (const mat of object.material) {
+                    this.loadProgressiveTextures(mat, textureLOD);
+                }
+            }
+            else {
+                this.loadProgressiveTextures(object.material, textureLOD);
+            }
+        }
+        for (const plugin of this.plugins) {
+            plugin.onAfterUpdatedLOD?.(this.renderer, scene, camera, object, level);
+        }
+        state.lastLodLevel = level;
+    }
+    /** Load progressive textures for the given material
+     * @param material the material to load the textures for
+     * @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) {
+        if (!material)
+            return Promise.resolve(null);
+        if (material.userData && material.userData.LOD !== level) {
+            material.userData.LOD = level;
+            return NEEDLE_progressive.assignTextureLOD(material, level);
+        }
+        return Promise.resolve(null);
+    }
+    /** Load progressive meshes for the given mesh
+     * @param mesh the mesh to load the LOD for
+     * @param index the index of the mesh if it's part of a group
+     * @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
+     */
+    loadProgressiveMeshes(mesh, level) {
+        if (!mesh)
+            return Promise.resolve(null);
+        if (!mesh.userData)
+            mesh.userData = {};
+        if (mesh.userData.LOD !== level) {
+            mesh.userData.LOD = level;
+            const originalGeometry = mesh.geometry;
+            return NEEDLE_progressive.assignMeshLOD(mesh, level).then(res => {
+                if (res && mesh.userData.LOD == level && originalGeometry != mesh.geometry) {
+                    // update the lightmap
+                    // this.applyLightmapping();
+                    // if (this.handles) {
+                    //     for (const inst of this.handles) {
+                    //         // if (inst["LOD"] < level) continue;
+                    //         // inst["LOD"] = level;
+                    //         inst.setGeometry(mesh.geometry);
+                    //     }
+                    // }
+                }
+                return res;
+            });
+        }
+        return Promise.resolve(null);
+    }
+    // private testIfLODLevelsAreAvailable() {
+    _sphere = new Sphere();
+    _tempBox = 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();
+    calculateLodLevel(camera, mesh, state, desiredDensity) {
+        if (!mesh)
+            return -1;
+        // if this is using instancing we always load level 0
+        // if (this.isInstancingActive) return 0;
+        /** rough measure of "triangles on quadratic screen" – we're switching LODs based on this metric. */
+        /** highest LOD level we'd ever expect to be generated */
+        const maxLevel = 10;
+        let level = maxLevel + 1;
+        if (camera) {
+            if (debugProgressiveLoading && mesh["DEBUG:LOD"] != undefined) {
+                return mesh["DEBUG:LOD"];
+            }
+            // The mesh info contains also the density for all available LOD level so we can use this for selecting which level to show
+            const lodsInfo = NEEDLE_progressive.getMeshLODInformation(mesh.geometry);
+            const lods = lodsInfo?.lods;
+            // We can skip all this if we dont have any LOD information - we can ask the progressive extension for that
+            if (!lods || lods.length <= 0) {
+                return 99;
+            }
+            if (!this.cameraFrustrum?.intersectsObject(mesh)) {
+                // console.log("Mesh not visible");
+                // if (debugProgressiveLoading && mesh.geometry.boundingSphere) {
+                //     const bounds = mesh.geometry.boundingSphere;
+                //     this._sphere.copy(bounds);
+                //     this._sphere.applyMatrix4(mesh.matrixWorld);
+                //     Gizmos.DrawWireSphere(this._sphere.center, this._sphere.radius * 1.01, 0xff5555, .5);
+                // }
+                // the object is not visible by the camera
+                return 99;
+            }
+            const box = mesh.geometry.boundingBox;
+            if (box && camera.isPerspectiveCamera) {
+                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) {
+                        this._sphere.copy(mesh.geometry.boundingSphere);
+                        this._sphere.applyMatrix4(mesh.matrixWorld);
+                        const worldPosition = camera.getWorldPosition(this._tempWorldPosition);
+                        if (this._sphere.containsPoint(worldPosition)) {
+                            return 0;
+                        }
+                    }
+                }
+                // calculate size on screen
+                this._tempBox.copy(box);
+                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?
+                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.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)
+                    boxSize.multiplyScalar(this.renderer.domElement.clientHeight / screen.availHeight); // correct for size of context on screen
+                boxSize.x *= cam.aspect;
+                const matView = camera.matrixWorldInverse;
+                const box2 = new Box3();
+                box2.copy(box);
+                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 (lods && state.lastScreenCoverage > 0) {
+                    for (let l = 0; l < lods.length; l++) {
+                        const densityForThisLevel = lods[l].density;
+                        const resultingDensity = densityForThisLevel / state.lastScreenCoverage;
+                        if (resultingDensity < desiredDensity) {
+                            expectedLevel = l;
+                            break;
+                        }
+                    }
+                }
+                const isLowerLod = expectedLevel < level;
+                if (isLowerLod) {
+                    level = expectedLevel;
+                }
+            }
+            // }
+        }
+        // if (this._lastLodLevel != level) {
+        //     this._nextLodTestTime = this.context.time.realtimeSinceStartup + .5;
+        //     if (debugProgressiveLoading) {
+        //         if (debugProgressiveLoading == "verbose") console.warn(`LOD Level changed from ${this._lastLodLevel} to ${level} for ${this.name}`);
+        //         this.drawGizmoLodLevel(true);
+        //     }
+        // }
+        return level;
+    }
+}
+class LOD_state {
+    lastLodLevel = 0;
+    lastScreenCoverage = 0;
+    lastScreenspaceVolume = new Vector3();
+    lastCentrality = 0;
+}