Needle Engine 3.37.8-alpha

Files changed (15) hide show

src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts +2 -2
src/engine-components/Camera.ts +10 -2
src/engine-components/Collider.ts +2 -2
src/engine/engine_context.ts +5 -2
src/engine/extensions/extensions.ts +1 -1
src/engine-components/ui/Graphic.ts +1 -1
src/engine/extensions/NEEDLE_progressive.ts +1 -878
src/engine-components/ParticleSystem.ts +1 -1
src/engine-components/Renderer.ts +1 -462
src/engine-components/RendererInstancing.ts +1 -1
src/engine-components/ScreenCapture.ts +6 -0
src/engine-components/SpriteRenderer.ts +4 -4
src/engine-components/export/usdz/USDZExporter.ts +3 -10
src/engine-components/webxr/controllers/XRControllerModel.ts +2 -2
src/engine/engine_lods.ts +162 -0

src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts CHANGED Viewed

@@ -229,10 +229,10 @@
         // Ensure that the progressive textures have been loaded for all variants and materials
         if (this.materialToSwitch) {
-            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId!, this.materialToSwitch, 0);
+            await NEEDLE_progressive.assignTextureLOD(this.materialToSwitch, 0);
         }
         if (this.variantMaterial) {
-            await NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId!, this.variantMaterial, 0);
+            await NEEDLE_progressive.assignTextureLOD(this.variantMaterial, 0);
         }
     }

src/engine-components/Camera.ts CHANGED Viewed

@@ -242,6 +242,10 @@
     }
     private _frustum?: Frustum;
+    /**
+     * Get a frustum - it will be created the first time this method is called and updated every frame in onBeforeRender when it exists.
+     * You can also manually update it using the updateFrustum method.
+     */
     public getFrustum(): Frustum {
         if (!this._frustum) {
             this._frustum = new Frustum();
@@ -254,14 +258,19 @@
         if (!this._frustum) this._frustum = new Frustum();
         this._frustum.setFromProjectionMatrix(this.getProjectionScreenMatrix(this._projScreenMatrix, true), this.context.renderer.coordinateSystem);
     }
+    /**
+     * @returns {Matrix4} this camera's projection screen matrix.
+     */
     public getProjectionScreenMatrix(target: Matrix4, forceUpdate?: boolean) {
         if (forceUpdate) {
             this._projScreenMatrix.multiplyMatrices(this.cam.projectionMatrix, this.cam.matrixWorldInverse);
         }
         if (target === this._projScreenMatrix) return target;
         return target.copy(this._projScreenMatrix);
-    }
+    }
+    private readonly _projScreenMatrix = new Matrix4();
     /** @internal */
     awake() {
         if (debugscreenpointtoray) {
@@ -292,7 +301,6 @@
         this.context.removeCamera(this);
     }
-    private readonly _projScreenMatrix = new Matrix4();
     /** @internal */
     onBeforeRender() {

src/engine-components/Collider.ts CHANGED Viewed

@@ -185,7 +185,7 @@
         if (this.sharedMesh?.isMesh) {
             this.context.physics.engine.addMeshCollider(this, this.sharedMesh, this.convex, getWorldScale(this.gameObject));
-            NEEDLE_progressive.assignMeshLOD(this.context, this.sourceId!, this.sharedMesh, LOD).then(res => {
+            NEEDLE_progressive.assignMeshLOD(this.sharedMesh, LOD).then(res => {
                 if (res && this.activeAndEnabled && this.context.physics.engine && this.sharedMesh) {
                     this.context.physics.engine.removeBody(this);
                     this.sharedMesh.geometry = res;
@@ -202,7 +202,7 @@
                     const child = group.children[ch] as Mesh;
                     if (child.isMesh) {
                         this.context.physics.engine.addMeshCollider(this, child, this.convex, getWorldScale(this.gameObject));
-                        promises.push(NEEDLE_progressive.assignMeshLOD(this.context, this.sourceId!, child, LOD));
+                        promises.push(NEEDLE_progressive.assignMeshLOD(child, LOD));
                     }
                 }
                 Promise.all(promises).then(res => {

src/engine/engine_context.ts CHANGED Viewed

@@ -19,9 +19,9 @@
 import { Input } from './engine_input.js';
 import { invokeLifecycleFunctions } from './engine_lifecycle_functions_internal.js';
 import { type ILightDataRegistry, LightDataRegistry } from './engine_lightdata.js';
+import { LODsManager } from "./engine_lods.js";
 import * as looputils from './engine_mainloop_utils.js';
 import { NetworkConnection } from './engine_networking.js';
-import { isLocalNetwork } from './engine_networking_utils.js';
 import { Physics } from './engine_physics.js';
 import { PlayerViewManager } from './engine_playerview.js';
 import { RendererData as SceneLighting } from './engine_scenelighting.js';
@@ -376,6 +376,7 @@
 	addressables: Addressables;
 	lightmaps: ILightDataRegistry;
 	players: PlayerViewManager;
+	readonly lodsManager: LODsManager;
 	readonly menu: NeedleMenu;
 	get isCreated() { return this._isCreated; }
@@ -413,6 +414,7 @@
 		this.lightmaps = new LightDataRegistry(this);
 		this.players = new PlayerViewManager(this);
 		this.menu = new NeedleMenu(this);
+		this.lodsManager = new LODsManager(this);
 		const resizeCallback = () => this._sizeChanged = true;
@@ -463,6 +465,7 @@
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.setSize(this.domWidth, this.domHeight);
 		this.renderer.outputColorSpace = SRGBColorSpace;
+		this.lodsManager.setRenderer(this.renderer);
 		this.input.bindEvents();
 	}
@@ -786,7 +789,7 @@
 						console.error("Needle Engine dependencies failed to load", err)
 				})
 				.then(() => {
-					if(debug) console.log("Needle Engine dependencies are ready");
+					if (debug) console.log("Needle Engine dependencies are ready");
 				});
 		}

src/engine/extensions/extensions.ts CHANGED Viewed

@@ -88,7 +88,7 @@
     loader.register(p => new NEEDLE_lighting_settings(p, sourceId, context));
     loader.register(p => new NEEDLE_techniques_webgl(p, sourceId));
     loader.register(p => new NEEDLE_render_objects(p, sourceId));
-    loader.register(p => new NEEDLE_progressive(p, sourceId, context));
+    loader.register(p => new NEEDLE_progressive(p, sourceId));
     loader.register(p => new EXT_texture_exr(p));
     if (isResourceTrackingEnabled()) loader.register(p => new InternalUsageTrackerPlugin(p))

src/engine-components/ui/Graphic.ts CHANGED Viewed

@@ -222,7 +222,7 @@
             }
             // }
             this.setOptions({ backgroundImage: tex, borderRadius: 0, backgroundOpacity: this.color.alpha, backgroundSize: "stretch" });
-            NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId!, tex, 0).then(res => {
+            NEEDLE_progressive.assignTextureLOD(tex, 0).then(res => {
                 if (res instanceof Texture) {
                     this.setOptions({ backgroundImage: res });
                 }

src/engine/extensions/NEEDLE_progressive.ts CHANGED Viewed

@@ -1,878 +1,1 @@
-import { BufferGeometry, Group, Material, Mesh, Object3D, RawShaderMaterial, Texture, TextureLoader } from "three";
-import { type GLTF, GLTFLoader, type GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { showBalloonMessage } from "../debug/index.js";
-import { findResourceUsers, getResourceUserCount } from "../engine_assetdatabase.js";
-import { ContextEvent, NeedleEngine } from "../engine_context_registry.js";
-import { addDracoAndKTX2Loaders } from "../engine_loaders.js";
-import { getRaycastMesh, setRaycastMesh } from "../engine_physics.js";
-import { Context } from "../engine_setup.js";
-import { type SourceIdentifier } from "../engine_types.js";
-import { delay, getParam, PromiseAllWithErrors, PromiseErrorResult, resolveUrl } from "../engine_utils.js";
-export const EXTENSION_NAME = "NEEDLE_progressive";
-const debug = getParam("debugprogressive");
-const $progressiveTextureExtension = Symbol("needle-progressive-texture");
-/** Removes the readonly attribute from all properties of an object */
-type DeepWriteable<T> = { -readonly [P in keyof T]: DeepWriteable<T[P]> };
-const debug_toggle_maps: Map<object, { keys: string[], sourceId: string }> = new Map();
-if (debug) {
-    let currentDebugLodLevel = -1;
-    let maxLevel = 2;
-    function debugToggleProgressive() {
-        currentDebugLodLevel += 1;
-        showBalloonMessage(`Toggle LOD level: ${currentDebugLodLevel}<br/>Registered objects: ${debug_toggle_maps.size}`);
-        console.log("Toggle LOD level", currentDebugLodLevel, debug_toggle_maps);
-        const context = NeedleEngine.Current!;
-        debug_toggle_maps.forEach((arr, obj) => {
-            for (const key of arr.keys) {
-                const cur = obj[key];
-                if (cur instanceof BufferGeometry) {
-                    const info = NEEDLE_progressive.getMeshLODInformation(cur);
-                    const level = !info ? 0 : Math.min(currentDebugLodLevel, info.lods.length);
-                    obj["DEBUG:LOD"] = level;
-                    NEEDLE_progressive.assignMeshLOD(context, arr.sourceId, obj as Mesh, level);
-                    if (info) maxLevel = Math.max(maxLevel, info.lods.length - 1);
-                }
-                else if (obj instanceof Material) {
-                    NEEDLE_progressive.assignTextureLOD(context, arr.sourceId, obj, currentDebugLodLevel);
-                    break;
-                }
-            }
-        });
-        if (currentDebugLodLevel >= maxLevel) {
-            currentDebugLodLevel = -1;
-        }
-    }
-    window.addEventListener("keyup", evt => {
-        if (evt.key === "p") debugToggleProgressive();
-    });
-    NeedleEngine.registerCallback(ContextEvent.ContextCreated, (ctx) => {
-        const button = document.createElement("button");
-        button.innerText = "Toggle Progressive";
-        button.onclick = debugToggleProgressive;
-        ctx.context.menu.appendChild(button);
-    });
-}
-function registerDebug(obj: object, key: string, sourceId: string,) {
-    if (!debug) return;
-    if (!debug_toggle_maps.has(obj)) {
-        debug_toggle_maps.set(obj, { keys: [], sourceId });
-    }
-    const existing = debug_toggle_maps.get(obj);
-    if (existing?.keys?.includes(key) == false) {
-        existing.keys.push(key);
-    }
-}
-declare type NEEDLE_progressive_model_LOD = {
-    path: string,
-    hash?: string,
-}
-/** This is the data structure we have in the NEEDLE_progressive extension */
-declare type NEEDLE_progressive_model = {
-    guid: string,
-    lods: Array<NEEDLE_progressive_model_LOD>
-}
-declare type NEEDLE_progressive_texture_model = NEEDLE_progressive_model & {
-}
-declare type NEEDLE_progressive_mesh_model = NEEDLE_progressive_model & {
-    density: number;
-    lods: Array<NEEDLE_progressive_model_LOD & {
-        density: number,
-        indexCount: number;
-        vertexCount: number;
-    }>
-}
-/**
- * This is the result of a progressive texture loading event for a material's texture slot in {@link NEEDLE_progressive.assignTextureLOD}
- * @internal
- */
-export declare type ProgressiveMaterialTextureLoadingResult = {
-    /** the material the progressive texture was loaded for */
-    material: Material,
-    /** the slot in the material where the texture was loaded */
-    slot: string,
-    /** the texture that was loaded (if any) */
-    texture: Texture | null;
-    /** the level of detail that was loaded */
-    level: number;
-}
-/**
- * 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).
- * @example
- * ```javascript
- * const loader = new GLTFLoader();
- * loader.register(new NEEDLE_progressive());
- * loader.load("model.glb", (gltf) => {
- *    const mesh = gltf.scene.children[0] as Mesh;
- *   NEEDLE_progressive.assignMeshLOD(context, sourceId, mesh, 1).then(mesh => {
- *     console.log("Mesh with LOD level 1 loaded", mesh);
- *  });
- * });
- * ```
- */
-export class NEEDLE_progressive implements GLTFLoaderPlugin {
-    /** The name of the extension */
-    get name(): string {
-        return EXTENSION_NAME;
-    }
-    static getMeshLODInformation(geo: BufferGeometry) {
-        const info = this.getAssignedLODInformation(geo);
-        if (info?.key) {
-            return this.lodInfos.get(info.key) as NEEDLE_progressive_mesh_model;
-        }
-        return null;
-    }
-    /** Check if a LOD level is available for a mesh or a texture
-     * @param obj the mesh or texture to check
-     * @param level the level of detail to check for (0 is the highest resolution). If undefined, the function checks if any LOD level is available
-     * @returns true if the LOD level is available (or if any LOD level is available if level is undefined)
-     */
-    static hasLODLevelAvailable(obj: Mesh | Texture | Material, level?: number): boolean {
-        if (obj instanceof Material) {
-            for (const slot of Object.keys(obj)) {
-                const val = obj[slot];
-                if (val instanceof Texture) {
-                    if (this.hasLODLevelAvailable(val, level)) return true;
-                }
-            }
-            return false;
-        }
-        else if (obj instanceof Group) {
-            for (const child of obj.children) {
-                if (child instanceof Mesh) {
-                    if (this.hasLODLevelAvailable(child, level)) return true;
-                }
-            }
-        }
-        let lodObject: ObjectThatMightHaveLODs | undefined;
-        let lodInformation: NEEDLE_progressive_model | undefined;
-        if (obj instanceof Mesh) {
-            lodObject = obj.geometry as BufferGeometry;
-        }
-        else if (obj instanceof Texture) {
-            lodObject = obj;
-        }
-        if (lodObject) {
-            if (lodObject?.userData?.LODS) {
-                const lods = lodObject.userData.LODS;
-                lodInformation = this.lodInfos.get(lods.key);
-                if (level === undefined) return lodInformation != undefined;
-                if (lodInformation) {
-                    if (Array.isArray(lodInformation.lods)) {
-                        return level < lodInformation.lods.length;
-                    }
-                    return level === 0;
-                }
-            }
-        }
-        return false;
-    }
-    /** Load a different resolution of a mesh (if available)
-     * @param context the context
-     * @param source the sourceid of the file from which the mesh is loaded (this is usually the component's sourceId)
-     * @param mesh the mesh to load the LOD for
-     * @param level the level of detail to load (0 is the highest resolution)
-     * @returns a promise that resolves to the mesh with the requested LOD level
-     * @example
-     * ```javascript
-     * const mesh = this.gameObject as Mesh;
-     * NEEDLE_progressive.assignMeshLOD(context, sourceId, mesh, 1).then(mesh => {
-     *    console.log("Mesh with LOD level 1 loaded", mesh);
-     * });
-     * ```
-     */
-    static assignMeshLOD(context: Context, source: SourceIdentifier, mesh: Mesh, level: number): Promise<BufferGeometry | null> {
-        if (!mesh) return Promise.resolve(null);
-        if (mesh instanceof Mesh) {
-            const currentGeometry = mesh.geometry;
-            const lodinfo = this.getAssignedLODInformation(currentGeometry);
-            if (!lodinfo) {
-                return Promise.resolve(null);
-            }
-            if (!getRaycastMesh(mesh)) {
-                setRaycastMesh(mesh, mesh.geometry as BufferGeometry);
-            }
-            const info = this.onProgressiveLoadStart(context, source, mesh, null);
-            mesh["LOD:requested level"] = level;
-            return NEEDLE_progressive.getOrLoadLOD<BufferGeometry>(context, source, currentGeometry, level).then(geo => {
-                if (mesh["LOD:requested level"] === level) {
-                    delete mesh["LOD:requested level"];
-                    if (Array.isArray(geo)) {
-                        const index = lodinfo.index || 0;
-                        geo = geo[index];
-                    }
-                    if (geo && currentGeometry != geo) {
-                        if (debug == "verbose") console.log("Progressive Mesh " + mesh.name + " loaded", currentGeometry, "→", geo, "\n", mesh)
-                        if (geo instanceof BufferGeometry) {
-                            mesh.geometry = geo;
-                            if (debug) registerDebug(mesh, "geometry", source);
-                        }
-                    }
-                }
-                this.onProgressiveLoadEnd(info);
-                return geo;
-            }).catch(err => {
-                this.onProgressiveLoadEnd(info);
-                console.error("Error loading mesh LOD", mesh, err);
-                return null;
-            });
-        }
-        else if (debug) {
-            console.error("Invalid call to assignMeshLOD: Request mesh LOD but the object is not a mesh", mesh);
-        }
-        return Promise.resolve(null);
-    }
-    /** Load a different resolution of a texture (if available)
-     * @param context the context
-     * @param source the sourceid of the file from which the texture is loaded (this is usually the component's sourceId)
-     * @param materialOrTexture the material or texture to load the LOD for (if passing in a material all textures in the material will be loaded)
-     * @param level the level of detail to load (0 is the highest resolution) - currently only 0 is supported
-     * @returns a promise that resolves to the material or texture with the requested LOD level
-     */
-    static assignTextureLOD(context: Context, source: SourceIdentifier, materialOrTexture: Material | Texture, level: number = 0)
-        : Promise<Array<ProgressiveMaterialTextureLoadingResult> | Texture | null> {
-        if (!materialOrTexture) return Promise.resolve(null);
-        if (materialOrTexture instanceof Material) {
-            const material = materialOrTexture;
-            const promises: Array<Promise<Texture | null>> = [];
-            const slots = new Array<string>();
-            if (material instanceof RawShaderMaterial) {
-                // iterate uniforms of custom shaders
-                for (const slot of Object.keys(material.uniforms)) {
-                    const val = material.uniforms[slot].value;
-                    if (val instanceof Texture) {
-                        const task = this.assignTextureLODForSlot(context, source, val, level, material, slot);
-                        promises.push(task);
-                        slots.push(slot);
-                    }
-                }
-            }
-            else {
-                for (const slot of Object.keys(material)) {
-                    const val = material[slot];
-                    if (val instanceof Texture) {
-                        const task = this.assignTextureLODForSlot(context, source, val, level, material, slot);
-                        promises.push(task);
-                        slots.push(slot);
-                    }
-                }
-            }
-            return PromiseAllWithErrors(promises).then(res => {
-                const textures = new Array<ProgressiveMaterialTextureLoadingResult>();
-                for (let i = 0; i < res.results.length; i++) {
-                    const tex = res.results[i];
-                    const slot = slots[i];
-                    if (tex instanceof Texture) {
-                        textures.push({ material, slot, texture: tex, level });
-                    }
-                    else {
-                        textures.push({ material, slot, texture: null, level });
-                    }
-                }
-                return textures;
-            });
-        }
-        if (materialOrTexture instanceof Texture) {
-            const texture = materialOrTexture;
-            return this.assignTextureLODForSlot(context, source, texture, level, null, null);
-        }
-        return Promise.resolve(null);
-    }
-    private static assignTextureLODForSlot(context: Context, source: SourceIdentifier, current: Texture, level: number, material: Material | null, slot: string | null): Promise<Texture | null> {
-        if (current?.isTexture !== true) return Promise.resolve(null);
-        // if (debug) console.log("-----------\n", "FIND", material?.name, slot, current?.name, current?.userData, current, material);
-        const info = this.onProgressiveLoadStart(context, source, material, slot);
-        return NEEDLE_progressive.getOrLoadLOD<Texture>(context, source, current, level).then(tex => {
-            // this can currently not happen
-            if (Array.isArray(tex)) return null;
-            if (tex?.isTexture === true) {
-                if (tex != current) {
-                    // if (debug) console.warn("Assign LOD", material?.name, slot, tex.name, tex["guid"], material, "Prev:", current, "Now:", tex, "\n--------------");
-                    // tex.needsUpdate = true;
-                    if (material && slot) {
-                        material[slot] = tex;
-                        // material.needsUpdate = true;
-                    }
-                    if (debug && slot && material) registerDebug(material, slot, source);
-                    // check if the old texture is still used by other objects
-                    // if not we dispose it...
-                    // this could also be handled elsewhere and not be done immediately
-                    // const users = getResourceUserCount(current);
-                    // if (!users) {
-                    //     if (debug) console.log("Progressive: Dispose texture", current.name, current.source.data, current.uuid);
-                    //     current?.dispose();
-                    // }
-                }
-                this.onProgressiveLoadEnd(info);
-                return tex;
-            }
-            else if (debug == "verbose") {
-                console.warn("No LOD found for", current, level);
-            }
-            this.onProgressiveLoadEnd(info);
-            return null;
-        }).catch(err => {
-            this.onProgressiveLoadEnd(info);
-            console.error("Error loading LOD", current, err);
-            return null;
-        });
-    }
-    private readonly parser: GLTFParser;
-    private readonly sourceId: SourceIdentifier;
-    private readonly context: Context;
-    constructor(parser: GLTFParser, sourceId: SourceIdentifier, context: Context) {
-        this.parser = parser;
-        this.sourceId = sourceId;
-        this.context = context;
-    }
-    afterRoot(gltf: GLTF): null {
-        if (debug)
-            console.log("AFTER", this.sourceId, gltf);
-        this.parser.json.textures?.forEach((textureInfo, index) => {
-            if (textureInfo?.extensions) {
-                const ext: NEEDLE_progressive_texture_model = textureInfo?.extensions[EXTENSION_NAME];
-                if (ext) {
-                    for (const key of this.parser.associations.keys()) {
-                        if (key instanceof Texture) {
-                            const val = this.parser.associations.get(key) as { textures: number };
-                            if (val.textures === index) {
-                                const tex = key;
-                                if (debug)
-                                    console.log("> Progressive: register texture", index, tex.name, tex.uuid, tex, ext);
-                                // Put the extension info into the source (seems like tiled textures are cloned and the userdata etc is not properly copied BUT the source of course is not cloned)
-                                // see https://github.com/needle-tools/needle-engine-support/issues/133
-                                if (tex.source)
-                                    tex.source[$progressiveTextureExtension] = ext;
-                                const LODKEY = tex.uuid;
-                                NEEDLE_progressive.assignLODInformation(tex, LODKEY, 0, 0, undefined);
-                                NEEDLE_progressive.lodInfos.set(LODKEY, ext);
-                                NEEDLE_progressive.lowresCache.set(LODKEY, tex);
-                            }
-                        }
-                    }
-                }
-            }
-        });
-        const applyMeshLOD = (key: string, mesh: Mesh, level: number, index: number | undefined, ext: NEEDLE_progressive_mesh_model) => {
-            const geometry = mesh.geometry as BufferGeometry;
-            geometry["needle:raycast-mesh"] = true;
-            // save the low res mesh as a raycast mesh (if we have a geometry and no mesh assigned already)
-            if (geometry && !getRaycastMesh(mesh)) {
-                if (debug) console.log("Set raycast mesh", mesh.name, mesh.uuid, geometry);
-                setRaycastMesh(mesh, geometry);
-                findResourceUsers(geometry, true).forEach(user => {
-                    if (user instanceof Mesh) {
-                        setRaycastMesh(user, geometry);
-                    }
-                });
-            }
-            if (!geometry.userData) geometry.userData = {};
-            NEEDLE_progressive.assignLODInformation(geometry, key, level, index, ext.density);
-            NEEDLE_progressive.lodInfos.set(key, ext);
-        };
-        this.parser.json.meshes?.forEach((meshInfo, index: number) => {
-            if (meshInfo?.extensions) {
-                const ext = meshInfo?.extensions[EXTENSION_NAME] as NEEDLE_progressive_mesh_model;
-                if (ext && ext.lods) {
-                    for (const key of this.parser.associations.keys()) {
-                        if (key instanceof Mesh) {
-                            const val = this.parser.associations.get(key) as { meshes: number, primitives: number };
-                            if (val.meshes === index) {
-                                const obj = key;
-                                if (debug) console.log("> Progressive: register mesh", index, obj.name, ext, obj.uuid, obj);
-                                const LODKEY = obj.uuid;
-                                const LODLEVEL = ext.lods.length;
-                                if (obj instanceof Mesh) {
-                                    applyMeshLOD(LODKEY, obj, LODLEVEL, val.primitives, ext);
-                                    let existing = NEEDLE_progressive.lowresCache.get(LODKEY) as unknown as BufferGeometry[] | undefined;
-                                    if (existing) {
-                                        existing.push(obj.geometry as BufferGeometry);
-                                    }
-                                    else existing = [obj.geometry as BufferGeometry];
-                                    NEEDLE_progressive.lowresCache.set(LODKEY, existing);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        });
-        return null;
-    }
-    /** A map of key = asset uuid and value = LOD information */
-    private static readonly lodInfos = new Map<string, NEEDLE_progressive_model>();
-    /** cache of already loaded mesh lods */
-    private static readonly previouslyLoaded: Map<string, Promise<null | Texture | BufferGeometry | BufferGeometry[]>> = new Map();
-    /** this contains the geometry/textures that were originally loaded */
-    private static readonly lowresCache: Map<string, Texture | BufferGeometry[]> = new Map();
-    private static async getOrLoadLOD<T extends Texture | BufferGeometry>(
-        context: Context, source: SourceIdentifier | undefined, current: T & ObjectThatMightHaveLODs, level: number
-    ): Promise<T | null> {
-        const debugverbose = debug == "verbose";
-        /** this key is used to lookup the LOD information */
-        const LOD: LODInformation | undefined = current.userData.LODS;
-        if (!LOD) {
-            return null;
-        }
-        const LODKEY = LOD?.key;
-        let progressiveInfo: NEEDLE_progressive_model | undefined;
-        // See https://github.com/needle-tools/needle-engine-support/issues/133
-        if (current instanceof Texture) {
-            if (current.source && current.source[$progressiveTextureExtension])
-                progressiveInfo = current.source[$progressiveTextureExtension];
-        }
-        if (!progressiveInfo) progressiveInfo = NEEDLE_progressive.lodInfos.get(LODKEY);
-        if (progressiveInfo) {
-            if (level > 0) {
-                let useLowRes = false;
-                const hasMultipleLevels = Array.isArray(progressiveInfo.lods);
-                if (hasMultipleLevels && level >= progressiveInfo.lods.length) {
-                    useLowRes = true;
-                }
-                else if (!hasMultipleLevels) {
-                    useLowRes = true;
-                }
-                if (useLowRes) {
-                    const lowres = this.lowresCache.get(LODKEY) as T;
-                    return lowres;
-                }
-            }
-            /** the unresolved LOD url */
-            const unresolved_lod_url = Array.isArray(progressiveInfo.lods) ? progressiveInfo.lods[level].path : progressiveInfo.lods;
-            // check if we have a uri
-            if (!unresolved_lod_url) {
-                if (debug && !progressiveInfo["missing:uri"]) {
-                    progressiveInfo["missing:uri"] = true;
-                    console.warn("Missing uri for progressive asset for LOD " + level, progressiveInfo);
-                }
-                return null;
-            }
-            /** the resolved LOD url */
-            let lod_url = resolveUrl(source, unresolved_lod_url);
-            // check if the requested file needs to be loaded via a GLTFLoader
-            if (lod_url.endsWith(".glb") || lod_url.endsWith(".gltf")) {
-                if (!progressiveInfo.guid) {
-                    console.warn("missing pointer for glb/gltf texture", progressiveInfo);
-                    return null;
-                }
-                // check if the requested file has already been loaded
-                const KEY = lod_url + "_" + progressiveInfo.guid;
-                // check if the requested file is currently being loaded
-                const existing = this.previouslyLoaded.get(KEY);
-                if (existing !== undefined) {
-                    if (debugverbose) console.log(`LOD ${level} was already loading/loaded: ${KEY}`);
-                    let res = await existing.catch(err => {
-                        console.error(`Error loading LOD ${level} from ${lod_url}\n`, err);
-                        return null;
-                    });
-                    let resouceIsDisposed = false;
-                    if (res == null) {
-                        // if the resource is null the last loading result didnt succeed (maybe because the url doesnt exist)
-                        // in which case we don't attempt to load it again
-                    }
-                    else if (res instanceof Texture && current instanceof Texture) {
-                        // check if the texture has been disposed or not
-                        if (res.image?.data || res.source?.data) {
-                            res = this.copySettings(current, res);
-                        }
-                        // if it has been disposed we need to load it again
-                        else {
-                            resouceIsDisposed = true;
-                            this.previouslyLoaded.delete(KEY);
-                        }
-                    }
-                    else if (res instanceof BufferGeometry && current instanceof BufferGeometry) {
-                        if (res.attributes.position?.array) {
-                            // the geometry is OK
-                        }
-                        else {
-                            resouceIsDisposed = true;
-                            this.previouslyLoaded.delete(KEY);
-                        }
-                    }
-                    if (!resouceIsDisposed) {
-                        return res as T;
-                    }
-                }
-                const ext = progressiveInfo;
-                const request = new Promise<null | Texture | BufferGeometry | BufferGeometry[]>(async (resolve, _) => {
-                    const loader = new GLTFLoader();
-                    addDracoAndKTX2Loaders(loader, context);
-                    if (progressiveInfo && Array.isArray(progressiveInfo.lods)) {
-                        const lodinfo = progressiveInfo.lods[level];
-                        if (lodinfo.hash) {
-                            lod_url += "?v=" + lodinfo.hash;
-                        }
-                    }
-                    if (debug) {
-                        await delay(Math.random() * 1000);
-                        if (debugverbose) console.warn("Start loading (delayed) " + lod_url, ext.guid);
-                    }
-                    const gltf = await loader.loadAsync(lod_url).catch(err => {
-                        console.error(`Error loading LOD ${level} from ${lod_url}\n`, err);
-                        return null;
-                    });
-                    if (!gltf) return null;
-                    const parser = gltf.parser;
-                    if (debugverbose) console.log("Loading finished " + lod_url, ext.guid);
-                    let index = 0;
-                    if (gltf.parser.json.textures) {
-                        let found = false;
-                        for (const tex of gltf.parser.json.textures) {
-                            // find the texture index
-                            if (tex?.extensions) {
-                                const other: NEEDLE_progressive_model = tex?.extensions[EXTENSION_NAME];
-                                if (other?.guid) {
-                                    if (other.guid === ext.guid) {
-                                        found = true;
-                                        break;
-                                    }
-                                }
-                            }
-                            index++;
-                        }
-                        if (found) {
-                            let tex = await parser.getDependency("texture", index) as Texture;
-                            if (debugverbose) console.log("change \"" + current.name + "\" → \"" + tex.name + "\"", lod_url, index, tex, KEY);
-                            if (current instanceof Texture)
-                                tex = this.copySettings(current, tex);
-                            if (tex) {
-                                (tex as any).guid = ext.guid;
-                            }
-                            return resolve(tex);
-                        }
-                    }
-                    index = 0;
-                    if (gltf.parser.json.meshes) {
-                        let found = false;
-                        for (const mesh of gltf.parser.json.meshes) {
-                            // find the mesh index
-                            if (mesh?.extensions) {
-                                const other: NEEDLE_progressive_model = mesh?.extensions[EXTENSION_NAME];
-                                if (other?.guid) {
-                                    if (other.guid === ext.guid) {
-                                        found = true;
-                                        break;
-                                    }
-                                }
-                            }
-                            index++;
-                        }
-                        if (found) {
-                            const mesh = await parser.getDependency("mesh", index) as Mesh | Group;
-                            const meshExt = ext as NEEDLE_progressive_mesh_model;
-                            if (debugverbose) console.log(`Loaded Mesh \"${mesh.name}\"`, lod_url, index, mesh, KEY);
-                            if (mesh instanceof Mesh) {
-                                const geo = mesh.geometry as BufferGeometry;
-                                NEEDLE_progressive.assignLODInformation(geo, LODKEY, level, undefined, meshExt.density);
-                                return resolve(geo);
-                            }
-                            else {
-                                const geometries = new Array<BufferGeometry>();
-                                for (let i = 0; i < mesh.children.length; i++) {
-                                    const child = mesh.children[i];
-                                    if (child instanceof Mesh) {
-                                        const geo = child.geometry as BufferGeometry;
-                                        NEEDLE_progressive.assignLODInformation(geo, LODKEY, level, i, meshExt.density);
-                                        geometries.push(geo);
-                                    }
-                                }
-                                return resolve(geometries);
-                            }
-                        }
-                    }
-                    // we could not find a texture or mesh with the given guid
-                    return resolve(null);
-                });
-                this.previouslyLoaded.set(KEY, request);
-                const res = await request;
-                return res as T;
-            }
-            else {
-                if (current instanceof Texture) {
-                    if (debugverbose) console.log("Load texture from uri: " + lod_url);
-                    const loader = new TextureLoader();
-                    const tex = await loader.loadAsync(lod_url);
-                    if (tex) {
-                        (tex as any).guid = progressiveInfo.guid;
-                        tex.flipY = false;
-                        tex.needsUpdate = true;
-                        tex.colorSpace = current.colorSpace;
-                        if (debugverbose)
-                            console.log(progressiveInfo, tex);
-                    }
-                    else if (debug) console.warn("failed loading", lod_url);
-                    return tex as T;
-                }
-            }
-        }
-        else {
-            if (debug)
-                console.warn(`Can not load LOD ${level}: no LOD info found for \"${LODKEY}\" ${current.name}`, current.type);
-        }
-        return null;
-    }
-    private static assignLODInformation(res: DeepWriteable<ObjectThatMightHaveLODs>, key: string, level: number, index?: number, density?: number) {
-        if (!res) return;
-        if (!res.userData) res.userData = {};
-        const info: LODInformation = new LODInformation(key, level, index, density);
-        res.userData.LODS = info;
-        res.userData.LOD = level;
-    }
-    private static getAssignedLODInformation(res: ObjectThatMightHaveLODs | null | undefined): null | LODInformation {
-        return res?.userData?.LODS || null;
-    }
-    private static readonly _copiedTextures: WeakMap<Texture, Texture> = new Map();
-    private static copySettings(source: Texture, target: Texture): Texture {
-        // don't copy again if the texture was processed before
-        const existingClone = this._copiedTextures.get(source);
-        if (existingClone) {
-            return existingClone;
-        }
-        // We need to clone e.g. when the same texture is used multiple times (but with e.g. different wrap settings)
-        // This is relatively cheap since it only stores settings
-        // This should only happen once ever for every texture
-        target = target.clone();
-        this._copiedTextures.set(source, target);
-        // we re-use the offset and repeat settings because it might be animated
-        target.offset = source.offset;
-        target.repeat = source.repeat;
-        target.colorSpace = source.colorSpace;
-        return target;
-    }
-    /** subscribe to events whenever a loading event starts, invoked for every single loading process that starts */
-    static beginListenStart(context: Context, evt: ProgressiveLoadingEvent) {
-        if (!this._progressiveEventListeners.has(context)) {
-            this._progressiveEventListeners.set(context, new ProgressiveLoadingEventHandler());
-        }
-        this._progressiveEventListeners.get(context)!.start.push(evt);
-    }
-    static stopListenStart(context: Context, evt: ProgressiveLoadingEvent) {
-        if (!this._progressiveEventListeners.has(context)) {
-            return;
-        }
-        const listeners = this._progressiveEventListeners.get(context)!.start;
-        const index = listeners.indexOf(evt);
-        if (index >= 0) {
-            listeners.splice(index, 1);
-        }
-    }
-    /** subscribe to loading event ended event */
-    static beginListenEnd(context: Context, evt: ProgressiveLoadingEvent) {
-        if (!this._progressiveEventListeners.has(context)) {
-            this._progressiveEventListeners.set(context, new ProgressiveLoadingEventHandler());
-        }
-        this._progressiveEventListeners.get(context)!.end.push(evt);
-    }
-    static stopListenEnd(context: Context, evt: ProgressiveLoadingEvent) {
-        if (!this._progressiveEventListeners.has(context)) {
-            return;
-        }
-        const listeners = this._progressiveEventListeners.get(context)!.end;
-        const index = listeners.indexOf(evt);
-        if (index >= 0) {
-            listeners.splice(index, 1);
-        }
-    }
-    /** event listeners per context */
-    private static _progressiveEventListeners: Map<Context, ProgressiveLoadingEventHandler> = new Map();
-    //** loading info per context, contains an array of urls that are currently being loaded */
-    private static _currentProgressiveLoadingInfo: Map<Context, ProgressiveLoadingInfo[]> = new Map();
-    // called whenever a progressive loading event starts
-    private static onProgressiveLoadStart(context: Context, source: SourceIdentifier | undefined, material: Mesh | Material | null, slot: string | null): ProgressiveLoadingInfo {
-        if (!this._currentProgressiveLoadingInfo.has(context)) {
-            this._currentProgressiveLoadingInfo.set(context, []);
-        }
-        const info = new ProgressiveLoadingInfo(context, source, material, slot);
-        const current = this._currentProgressiveLoadingInfo.get(context)!;
-        const listener = this._progressiveEventListeners.get(context);
-        if (listener) listener.onStart(info);
-        current.push(info);
-        return info;
-    }
-    private static onProgressiveLoadEnd(info: ProgressiveLoadingInfo) {
-        if (!info) return;
-        const context = info.context;
-        if (!this._currentProgressiveLoadingInfo.has(context)) {
-            return;
-        }
-        const current = this._currentProgressiveLoadingInfo.get(context)!;
-        const index = current.indexOf(info);
-        if (index < 0) {
-            return;
-        }
-        current.splice(index, 1);
-        const listener = this._progressiveEventListeners.get(context);
-        if (listener) listener.onEnd(info);
-    }
-}
-declare type ObjectThatMightHaveLODs = { userData?: { LODS?: LODInformation, readonly LOD?: number } };
-// declare type GetLODInformation = () => LODInformation | null;
-class LODInformation {
-    /** the key to lookup the LOD information */
-    readonly key: string;
-    readonly level: number;
-    /** For multi objects (e.g. a group of meshes) this is the index of the object */
-    readonly index?: number;
-    /** the mesh density */
-    readonly density?: number;
-    constructor(key: string, level: number, index?: number, density?: number) {
-        this.key = key;
-        this.level = level;
-        if (index != undefined)
-            this.index = index;
-        if (density != undefined)
-            this.density = density;
-    }
-};
-/** info object that holds information about a file that is currently being loaded */
-export class ProgressiveLoadingInfo {
-    readonly context: Context;
-    readonly source: SourceIdentifier | undefined;
-    readonly material?: Material | null;
-    readonly slot?: string | null;
-    readonly mesh?: Mesh | null;
-    // TODO: can contain information if the event is a background process / preloading or if the object is currently visible
-    constructor(context: Context, source: SourceIdentifier | undefined, object?: Mesh | Material | null, slot?: string | null) {
-        this.context = context;
-        this.source = source;
-        if (object instanceof Mesh) {
-            this.mesh = object;
-        }
-        else
-            this.material = object;
-        this.slot = slot;
-    }
-};
-export declare type ProgressiveLoadingEvent = (info: ProgressiveLoadingInfo) => void;
-/** progressive loading event handler implementation */
-class ProgressiveLoadingEventHandler {
-    start: ProgressiveLoadingEvent[] = [];
-    end: ProgressiveLoadingEvent[] = [];
-    onStart(listener: ProgressiveLoadingInfo) {
-        for (const l of this.start) {
-            l(listener);
-        }
-    }
-    onEnd(listener: ProgressiveLoadingInfo) {
-        for (const l of this.end) {
-            l(listener);
-        }
-    }
-}
+export * from "@needle-tools/gltf-progressive"

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -102,7 +102,7 @@
             if (debugProgressiveLoading) {
                 console.log("Load material LOD", material.name);
             }
-            NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId!, material);
+            NEEDLE_progressive.assignTextureLOD(material, 0);
         }
         return material;

src/engine-components/Renderer.ts CHANGED Viewed

@@ -29,26 +29,6 @@
 const debugRenderer = getParam("debugrenderer");
 const debugskinnedmesh = getParam("debugskinnedmesh");
 const suppressInstancing = getParam("noinstancing");
-let debugProgressiveLoading = getParam("debugprogressive");
-const suppressProgressiveLoading = getParam("noprogressive");
-if (debugProgressiveLoading && document) {
-    onStart(ctx => {
-        const button = document.createElement("button");
-        button.innerText = "Prog Debug Mode: " + debugProgressiveLoading;
-        button.onclick = () => {
-            if (debugProgressiveLoading == "density")
-                debugProgressiveLoading = false;
-            else if (debugProgressiveLoading == false)
-                debugProgressiveLoading = true;
-            else if (debugProgressiveLoading)
-                debugProgressiveLoading = "density";
-            button.innerText = "Prog Debug Mode: " + debugProgressiveLoading;
-        };
-        ctx.menu.appendChild(button);
-    });
-}
 const showWireframe = getParam("wireframe");
 export enum ReflectionProbeUsage {
@@ -620,7 +600,7 @@
         this.updateReflectionProbe();
-        this.testIfLODLevelsAreAvailable();
+        // this.testIfLODLevelsAreAvailable();
     }
     onDisable() {
@@ -701,33 +681,14 @@
             }
         }
-        if (this._wasVisible && this.allowProgressiveLoading && !suppressProgressiveLoading) {
-            if (this.automaticallyUpdateLODLevel) {
-                this.updateLODs();
-            }
-            // else {
-            //     for (const mat of this.sharedMaterials) {
-            //         if (!mat) continue;
-            //         this.loadProgressiveTextures(mat, 0)
-            //     }
-            // }
-        }
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
             this._reflectionProbe.onSet(this);
         }
     }
-    /** true when the object was rendered - this is used to start loading LOD levels */
-    private _wasVisible = false;
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
-        if (!this._wasVisible && this.context.time.frame > this._firstFrame + 1) {
-            if (debugProgressiveLoading) console.debug("onBeforeRenderThree: Object becomes visible for the first time", this.name, this.context.time.frame);
-            this._wasVisible = true;
-        }
         if (material.envMapIntensity !== undefined) {
             const factor = this.hasLightmap ? Math.PI : 1;
@@ -780,7 +741,6 @@
         if (this._isInstancingEnabled && this.handles) {
             for (let i = 0; i < this.handles.length; i++) {
                 const handle = this.handles[i];
-                this._wasVisible = true;
                 setCustomVisibility(handle.object, true);
             }
         }
@@ -788,437 +748,16 @@
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off && this._reflectionProbe) {
             this._reflectionProbe.onUnset(this)
         }
-        if (debugProgressiveLoading && this._lastLodLevel >= 0)
-            this.drawGizmoLodLevel(false);
     }
-    private testIfLODLevelsAreAvailable() {
-        this.automaticallyUpdateLODLevel = false;
-        this.hasMeshLODs = false;
-        this.hasTextureLODs = false;
-        for (const mesh of this.sharedMeshes) {
-            if (NEEDLE_progressive.hasLODLevelAvailable(mesh)) {
-                this.automaticallyUpdateLODLevel = true;
-                this.hasMeshLODs = true;
-                break;
-            }
-        }
-        for (const mat of this.sharedMaterials) {
-            if (!mat) continue;
-            if (NEEDLE_progressive.hasLODLevelAvailable(mat)) {
-                this.automaticallyUpdateLODLevel = true;
-                this.hasTextureLODs = true;
-                break;
-            }
-        }
-        if (debugProgressiveLoading) {
-            console.log(`${this.name}\nMesh LODs available? ${this.hasMeshLODs ? "YES" : "NO"}\nTexture LODs available? ${this.hasTextureLODs ? "YES" : "NO"}`);
-        }
-    }
-    /** Enable to automatically update the LOD level for the renderers meshes and materials.
-     * When disabled you can manually call `updateLODLevels` to update the LOD levels.
-    */
-    automaticallyUpdateLODLevel = true;
-    private hasTextureLODs: boolean = true;
-    private hasMeshLODs: boolean = true;
-    /** Update the LOD levels for the renderer. */
-    updateLODs() {
-        let level = 0;
-        // we currently only support auto LOD changes for meshes
-        if (this.hasMeshLODs) {
-            level = this.calculateLodLevel();
-        }
-        // TODO: we currently can not switch texture lods because we need better caching for the textures internally (see copySettings in progressive + NE-4431)
-        const textureLOD = 0;// Math.max(0, LODlevel - 2)
-        for (const mat of this.sharedMaterials) {
-            if (mat) this.loadProgressiveTextures(mat, textureLOD);
-        }
-        if (level >= 0) {
-            for (let i = 0; i < this.sharedMeshes.length; i++) {
-                const mesh = this.sharedMeshes[i];
-                if (!mesh) continue;
-                this.loadProgressiveMeshes(mesh, level);
-            }
-        }
-    }
-    private _lastLodLevel = -1;
-    private _lastScreenCoverage = 0;
-    private _lastScreenspaceVolume = new Vector3();
-    private _lastCentrality = 0;
-    private _nextLodTestTime = 0;
-    private _randomLodLevelCheckFrameOffset = Math.floor(Math.random() * 100);
-    private readonly _sphere = new Sphere();
-    private readonly _box = new Box3();
-    private static readonly tempMatrix = new Matrix4();
-    private calculateLodLevel(force: boolean = false): number {
-        // if this is using instancing we always load level 0
-        // if (this.isInstancingActive) return 0;
-        const interval = 3;
-        if (!(debugProgressiveLoading == "density")) {
-            if (!force && (this.context.time.frame + this._randomLodLevelCheckFrameOffset) % interval != 0) {
-                return this._lastLodLevel;
-            }
-            if (this.context.time.realtimeSinceStartup < this._nextLodTestTime) {
-                return this._lastLodLevel;
-            }
-        }
-        /** rough measure of "triangles on quadratic screen" – we're switching LODs based on this metric. */
-        const desiredDensity = 100_000;
-        /** highest LOD level we'd ever expect to be generated */
-        const maxLevel = 10;
-        let currentAllowedDensity = desiredDensity;
-        let level = maxLevel + 1;
-        if (this.context.mainCamera) {
-            const isLowPerformanceDevice = isMobileDevice();
-            /** We probably want to make these numbers configurable. */
-            currentAllowedDensity = desiredDensity * (isLowPerformanceDevice ? 0.7 : 1.0);
-            // 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;
-            }
-            */
-            // TODO: we should save the LOD level in the shared mesh and not just calculate one level per renderer
-            for (const mesh of this.sharedMeshes) {
-                if (level <= 0) break;
-                if (!mesh) continue;
-                if (debugProgressiveLoading && mesh["DEBUG:LOD"] != undefined) {
-                    return this._lastLodLevel = 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;
-                // TODO: we can skip all this if we dont have any LOD information - we can ask the progressive extension for that
-                const frustum = this.context.mainCameraComponent?.getFrustum();
-                if (!frustum?.intersectsObject(mesh)) {
-                    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
-                    continue;
-                }
-                const box = mesh.geometry.boundingBox;
-                if (box && this.context.mainCamera 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);
-                            if (this._sphere.containsPoint(getWorldPosition(this.context.mainCamera))) {
-                                level = 0;
-                                break;
-                            }
-                        }
-                    }
-                    // calculate size on screen
-                    this._box.copy(box);
-                    this._box.applyMatrix4(mesh.matrixWorld);
-                    const cam = this.context.mainCamera;
-                    // 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?
-                    const mat = this.context.mainCameraComponent!.getProjectionScreenMatrix(Renderer.tempMatrix);
-                    this._box.applyMatrix4(mat);
-                    // 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.context.isInXR && cam.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
-                        this._lastCentrality = (centerBoost - centrality) * (centerBoost - centrality) * (centerBoost - centrality);
-                    }
-                    else {
-                        this._lastCentrality = 1;
-                    }
-                    const boxSize = this._box.getSize(getTempVector());
-                    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.context.domHeight / screen.availHeight); // correct for size of context on screen
-                    boxSize.x *= cam.aspect;
-                    const matView = cam.matrixWorldInverse;
-                    const box2 = new Box3();
-                    box2.copy(box);
-                    box2.applyMatrix4(mesh.matrixWorld);
-                    box2.applyMatrix4(matView);
-                    const boxSize2 = box2.getSize(getTempVector());
-                    // 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);
-                    this._lastScreenCoverage = Math.max(boxSize.x, boxSize.y, boxSize.z);
-                    this._lastScreenspaceVolume.copy(boxSize);
-                    this._lastScreenCoverage *= this._lastCentrality;
-                    // draw screen size box
-                    if (debugProgressiveLoading) {
-                        mat.invert();
-                        // get box corners, transform with camera space, and draw as quad lines
-                        const corner0 = getTempVector();
-                        corner0.copy(this._box.min);
-                        const corner1 = getTempVector();
-                        corner1.copy(this._box.max);
-                        corner1.x = corner0.x;
-                        const corner2 = getTempVector();
-                        corner2.copy(this._box.max);
-                        corner2.y = corner0.y;
-                        const corner3 = getTempVector();
-                        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);
-                        Gizmos.DrawLine(corner0, corner1, 0x0000ff);
-                        Gizmos.DrawLine(corner0, corner2, 0x0000ff);
-                        Gizmos.DrawLine(corner1, corner3, 0x0000ff);
-                        Gizmos.DrawLine(corner2, corner3, 0x0000ff);
-                    }
-                    let expectedLevel = 999;
-                    const framerate = this.context.time.smoothedFps;
-                    if (lods && this._lastScreenCoverage > 0) {
-                        for (let l = 0; l < lods.length; l++) {
-                            const densityForThisLevel = lods[l].density;
-                            if (densityForThisLevel / this._lastScreenCoverage < currentAllowedDensity) {
-                                expectedLevel = l;
-                                break;
-                            }
-                        }
-                    }
-                    // expectedLevel -= meshDensity - 5;
-                    // expectedLevel += meshDensity;
-                    const isLowerLod = expectedLevel < level;
-                    if (isLowerLod) {
-                        level = expectedLevel;
-                    }
-                }
-            }
-        }
-        level = Math.round(level);
-        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);
-            }
-        }
-        this._lastLodLevel = level;
-        return level;
-    }
-    private drawGizmoLodLevel(changed: boolean) {
-        // Will be (maxLod + 1) (11) if no lod level is found
-        const _level = this._lastLodLevel;
-        const cam = this.context.mainCamera as any as PerspectiveCamera;
-        const camGO = cam as any as GameObject;
-        const camForward = camGO.worldForward;
-        const camWorld = camGO.worldPosition;
-        for (const mesh of this.sharedMeshes) {
-            if (!mesh) continue;
-            if (mesh.geometry.boundingSphere) {
-                const bounds = mesh.geometry.boundingSphere;
-                this._sphere.copy(bounds);
-                this._sphere.applyMatrix4(mesh.matrixWorld);
-                const boundsCenter = this._sphere.center;
-                const radius = this._sphere.radius;
-                const colors = ["#76c43e", "#bcc43e", "#c4ac3e", "#c4673e", "#ff3e3e"];
-                // if the lod has changed we just want to draw the gizmo for the changed mesh
-                if (changed) {
-                    Gizmos.DrawWireSphere(boundsCenter, radius, colors[_level], .1);
-                }
-                else {
-                    // Mesh Density is calculated as: triangle count per square meter of surface area, normalized to the bounding box size of the model.
-                    // Our goal for automatic switching of LODs is that the resulting triangle count per screen area is constant.
-                    // We assume a uniform distribution of triangles over the surface area; which means that
-                    // we can express a ratio of "screen area to surface area".
-                    const triangleCount = mesh.geometry.index!.count / 3;
-                    const lods = NEEDLE_progressive.getMeshLODInformation(mesh.geometry)?.lods;
-                    const level = lods ? Math.min(lods?.length - 1, _level) : 0;
-                    let allLods = "";
-                    if (lods && this._lastScreenCoverage > 0) {
-                        for (let i = 0; i < lods.length; i++) {
-                            const d = lods[i].density;
-                            const last = i == lods.length - 1;
-                            allLods += d.toFixed(0) + ">" + (d / this._lastScreenCoverage).toFixed(0) + (last ? "" : ",");
-                        }
-                    }
-                    const density = lods ? lods[level]?.density : -1;
-                    const box = mesh.geometry.boundingBox;
-                    const boxSize = box ? box.getSize(getTempVector()) : new Vector3();
-                    const maxBoxSize = Math.max(boxSize.x, boxSize.y, boxSize.z);
-                    // Surface area is in local space of the model;
-                    // we need to scale it by the model's world scale and the model's geometry bounding box size.
-                    const ws = mesh.getWorldScale(getTempVector());
-                    const wsMedian = (ws.x + ws.y + ws.z) / 3;
-                    // Area is squared, so both maxBoxSize and wsMedian are squared here
-                    // Here, we're basically reverting the calculations that have happened in the pipeline for debugging.
-                    const surfaceArea = 1 / density * triangleCount * (maxBoxSize * maxBoxSize) * (wsMedian * wsMedian);
-                    let text = "LOD " + level;
-                    if(debugProgressiveLoading == "density") {
-                        text +=
-                            "\n" + triangleCount + " tris" +
-                            // This is key – basically how we're switching
-                            "\n" + (density / this._lastScreenCoverage).toFixed(0) + " dens" +
-                            "\n" + (this._lastScreenCoverage * 100).toFixed(1) + "% cov" +
-                            // "\n" + (this._lastScreenspaceVolume.x.toFixed(2) + "x" + this._lastScreenspaceVolume.y.toFixed(2) + "x" + this._lastScreenspaceVolume.z.toFixed(2)) + " vol" +
-                            // + "\n" + (surfaceArea).toFixed(2) + " m2" +
-                            "\n" + (this._lastCentrality * 100).toFixed(1) + "% centr" +
-                            "\n" + (this._box.min.x.toFixed(2) + "-" + this._box.max.x.toFixed(2) + "x" + this._box.min.y.toFixed(2) + "-" + this._box.max.y.toFixed(2)) + " scr" +
-                            // "\n" + (ws.x).toFixed(2) + "x" + " " + maxBoxSize.toFixed(2) + "b" + "\n" +
-                            // allLods + "\n" +
-                            //"----" + "\n" +
-                            // "1000" + " ideal dens"
-                            "";
-                    }
-                    // if (helper) {
-                    //     helper?.setText(text);
-                    //     continue;
-                    // }
-                    const fwd = getTempVector(camForward);
-                    // for debugging very close LDOs, we need to flip the radius...
-                    const pos = fwd.multiplyScalar(radius * .7).add(boundsCenter);
-                    const distance = pos.distanceTo(camWorld);
-                    // const vertexCount = mesh.geometry.index!.count / 3;
-                    // const vertexCountFactor = Math.min(1, vertexCount / 1000);
-                    const col = colors[Math.min(colors.length - 1, level)] + "88";
-                    // const size = Math.min(10, radius);
-                    const windowScale = this.context.domHeight > 0 ? screen.height / this.context.domHeight : 1;
-                    const fieldOfViewScale = Math.tan(cam.fov * Math.PI / 180 / 2);
-                    Gizmos.DrawLabel(pos, text, distance * .01 * windowScale * fieldOfViewScale, undefined, 0xffffff, col);
-                    // mesh["LOD_level_label"] = helper;
-                }
-            }
-        }
-    }
     /** Applies stencil settings for this renderer's objects (if stencil settings are available) */
     applyStencil() {
         NEEDLE_render_objects.applyStencil(this);
     }
-    /** 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: 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(this.context, this.sourceId!, 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: Mesh, level: number) : Promise<BufferGeometry | null> {
-        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(this.context, this.sourceId!, 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);
-    }
     /** Apply the settings of this renderer to the given object
      * Settings include shadow casting and receiving (e.g. this.receiveShadows, this.shadowCastingMode)
      */

src/engine-components/RendererInstancing.ts CHANGED Viewed

@@ -28,7 +28,7 @@
         renderer.applySettings(obj);
         const res = this.tryCreateOrAddInstance(obj, context, args);
         if (res) {
-            renderer.loadProgressiveTextures(res.renderer.material, 0);
+            NEEDLE_progressive.assignTextureLOD(res.renderer.material, 0);
             // renderer.loadProgressiveMeshes(res.instancer.mesh, 0);
             if (handlesArray === null) handlesArray = [];
             handlesArray.push(res);

src/engine-components/ScreenCapture.ts CHANGED Viewed

@@ -45,17 +45,20 @@
     @serializable()
     allowStartOnClick: boolean = true;
+    /** @internal */
     onPointerEnter() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
         this.context.input.setCursorPointer();
     }
+    /** @internal */
     onPointerExit() {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
         this.context.input.setCursorNormal();
     }
+    /** @internal */
     onPointerClick(evt: PointerEventData) {
         if (this.context.connection.allowEditing == false) return;
         if (!this.allowStartOnClick) return;
@@ -130,6 +133,7 @@
     private _currentStream: MediaStream | null = null;
     private _currentMode: ScreenCaptureMode = ScreenCaptureMode.Idle;
+    /** @internal */
     awake() {
         if (debug)
             console.log("Screensharing", this.name, this);
@@ -143,6 +147,7 @@
         this._net = new NetworkedStreams(this.context, handle);
     }
+    /** @internal */
     onEnable(): void {
         this._net?.enable();
         //@ts-ignore
@@ -159,6 +164,7 @@
         }
     }
+    /** @internal */
     onDisable(): void {
         //@ts-ignore
         this._net?.removeEventListener(NetworkedStreamEvents.StreamReceived, this.onReceiveStream);

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -146,7 +146,7 @@
     @serializable()
     index: number = 0;
-    update(context: Context, sourceId: string | undefined, material: Material | undefined) {
+    update(material: Material | undefined) {
         if (!this.spriteSheet) return;
         const index = this.index;
         if (index < 0 || index >= this.spriteSheet.sprites.length)
@@ -163,7 +163,7 @@
         if (!sprite["__hasLoadedProgressive"]) {
             sprite["__hasLoadedProgressive"] = true;
             const previousTexture = tex;
-            NEEDLE_progressive.assignTextureLOD(context, sourceId!, tex, 0).then(res => {
+            NEEDLE_progressive.assignTextureLOD(tex, 0).then(res => {
                 if (res instanceof Texture) {
                     sprite.texture = res;
                     const shouldUpdateInMaterial = material?.["map"] === previousTexture;
@@ -300,7 +300,7 @@
             }
             this.sharedMaterial = mat;
             this._currentSprite = new Mesh(SpriteUtils.getOrCreateGeometry(sprite), mat);
-            NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId!, mat, 0);
+            NEEDLE_progressive.assignTextureLOD(mat, 0);
         }
         else {
             this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(sprite);
@@ -323,6 +323,6 @@
             this.sharedMaterial.transparent = this.transparent;
         }
         this._currentSprite.castShadow = this.castShadows;
-        this._spriteSheet?.update(this.context, this.sourceId, this.sharedMaterial);
+        this._spriteSheet?.update( this.sharedMaterial);
     }
 }

src/engine-components/export/usdz/USDZExporter.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { NEEDLE_progressive } from "@needle-tools/gltf-progressive";
 import { Matrix4, Mesh, Object3D, Quaternion, Vector3 } from "three";
 import { showBalloonMessage, showBalloonWarning } from "../../../engine/debug/index.js";
@@ -299,11 +300,9 @@
         let progressiveTasks = 0;
         // TODO: it would be better to directly integrate this into the exporter and *on export* request the correct LOD level for textures and meshes instead of relying on the renderer etc
         for (const rend of renderers) {
-            rend["didAutomaticallyUpdateLODLevel"] = rend.automaticallyUpdateLODLevel;
-            rend.automaticallyUpdateLODLevel = false;
             for (const mesh of rend.sharedMeshes) {
                 if (mesh) {
-                    const task = rend.loadProgressiveMeshes(mesh, 0);
+                    const task = NEEDLE_progressive.assignMeshLOD(mesh, 0);
                     if (task instanceof Promise)
                         progressiveLoading.push(new Promise<void>((resolve, reject) => {
                             task.then(() => {
@@ -316,7 +315,7 @@
             }
             for (const mat of rend.sharedMaterials) {
                 if (mat) {
-                    const task = rend.loadProgressiveTextures(mat, 0);
+                    const task = NEEDLE_progressive.assignTextureLOD(mat, 0);
                     if (task instanceof Promise)
                         progressiveLoading.push(new Promise<void>((resolve, reject) => {
                             task.then(() => {
@@ -415,12 +414,6 @@
         for (const go of implicitBehaviors) {
             GameObject.destroy(go);
         }
-        // restore renderer state
-        for (const rend of renderers) {
-            const prevState = rend["didAutomaticallyUpdateLODLevel"];
-            if (prevState != undefined)
-                rend.automaticallyUpdateLODLevel = prevState;
-        }
         // restore XR flags
         XRState.Global.Set(currentXRState);

src/engine-components/webxr/controllers/XRControllerModel.ts CHANGED Viewed

@@ -104,7 +104,7 @@
         if (!entry) return;
         this._models.splice(indexInArray, 1);
         if (entry.handmesh) {
             entry.handmesh.handModel?.removeFromParent();
             entry.handmesh = undefined;
@@ -272,7 +272,7 @@
                 if (NeedleXRSession.active?.isPassThrough)
                     this.makeOccluder(child);
                 if (child instanceof Mesh) {
-                    NEEDLE_progressive.assignMeshLOD(context, this.sourceId!, child, 0);
+                    NEEDLE_progressive.assignMeshLOD(child, 0);
                 }
             });
             if (!controller.connected) {

src/engine/engine_lods.ts ADDED Viewed

@@ -0,0 +1,162 @@
+import { LODsManager as _LODsManager, NEEDLE_progressive,NEEDLE_progressive_mesh_model, NEEDLE_progressive_plugin } from "@needle-tools/gltf-progressive";
+import { Box3, BufferGeometry, Camera, Mesh, PerspectiveCamera, Scene, Sphere, Vector3, WebGLRenderer } from "three";
+import { findResourceUsers } from "./engine_assetdatabase.js";
+import type { Context } from "./engine_context.js";
+import { Gizmos } from "./engine_gizmos.js";
+import { getRaycastMesh, setRaycastMesh } from "./engine_physics.js";
+import { getTempVector } from "./engine_three_utils.js";
+import { IGameObject } from "./engine_types.js";
+import { getParam } from "./engine_utils.js";
+const debug = getParam("debugprogressive");
+const _tempBox: Box3 = new Box3();
+const _tempSphere: Sphere = new Sphere();
+/**
+ * Needle Engine LODs manager. Wrapper around the internal LODs manager.
+ */
+export class LODsManager implements NEEDLE_progressive_plugin {
+    readonly context: Context;
+    private _lodsManager?: _LODsManager;
+    constructor(context: Context) {
+        this.context = context;
+    }
+    /** @internal */
+    setRenderer(renderer: WebGLRenderer) {
+        this._lodsManager?.disable();
+        this._lodsManager = new _LODsManager(renderer);
+        this._lodsManager.plugins.push(this);
+        this._lodsManager.enable();
+        _LODsManager.debugDrawLine = Gizmos.DrawLine;
+    }
+    /** @internal */
+    onBeforeGetLODMesh(mesh: Mesh): void {
+        if (!getRaycastMesh(mesh)) {
+            setRaycastMesh(mesh, mesh.geometry as BufferGeometry);
+        }
+    }
+    /** @internal */
+    onRegisteredNewMesh(mesh: Mesh, _ext: NEEDLE_progressive_mesh_model): void {
+        const geometry = mesh.geometry as BufferGeometry;
+        if (geometry) {
+            geometry["needle:raycast-mesh"] = true;
+            if (!getRaycastMesh(mesh)) {
+                if (debug) console.log("Set raycast mesh", mesh.name, mesh.uuid, geometry);
+                setRaycastMesh(mesh, geometry);
+                findResourceUsers(geometry, true).forEach(user => {
+                    if (user instanceof Mesh) {
+                        setRaycastMesh(user, geometry);
+                    }
+                });
+            }
+        }
+    }
+    /** @internal */
+    onAfterUpdatedLOD(_renderer: WebGLRenderer, _scene: Scene, camera: Camera, mesh: Mesh, level: number): void {
+        if(debug) this.onRenderDebug(camera, mesh, level);
+    }
+    private onRenderDebug(camera: Camera, mesh: Mesh, level: number) {
+        if (!mesh.geometry) return;
+        if (!NEEDLE_progressive.hasLODLevelAvailable(mesh.geometry)) return;
+        const state = _LODsManager.getObjectLODState(mesh);
+        if (!state) return;
+        const changed = level != state.lastLodLevel;;
+        if (debug && mesh.geometry.boundingSphere) {
+            const bounds = mesh.geometry.boundingSphere;
+            _tempSphere.copy(bounds);
+            _tempSphere.applyMatrix4(mesh.matrixWorld);
+            const boundsCenter = _tempSphere.center;
+            const radius = _tempSphere.radius;
+            const colors = ["#76c43e", "#bcc43e", "#c4ac3e", "#c4673e", "#ff3e3e"];
+            // if the lod has changed we just want to draw the gizmo for the changed mesh
+            if (changed) {
+                Gizmos.DrawWireSphere(boundsCenter, radius, colors[level], .1);
+            }
+            else {
+                // Mesh Density is calculated as: triangle count per square meter of surface area, normalized to the bounding box size of the model.
+                // Our goal for automatic switching of LODs is that the resulting triangle count per screen area is constant.
+                // We assume a uniform distribution of triangles over the surface area; which means that
+                // we can express a ratio of "screen area to surface area".
+                const triangleCount = mesh.geometry.index?.count ?? 0 / 3;
+                const lods = NEEDLE_progressive.getMeshLODInformation(mesh.geometry)?.lods;
+                level = lods ? Math.min(lods?.length - 1, level) : 0;
+                let allLods = "";
+                if (lods && state.lastScreenCoverage > 0) {
+                    for (let i = 0; i < lods.length; i++) {
+                        const d = lods[i].density;
+                        const last = i == lods.length - 1;
+                        allLods += d.toFixed(0) + ">" + (d / state.lastScreenCoverage).toFixed(0) + (last ? "" : ",");
+                    }
+                }
+                const density = lods ? lods[level]?.density : -1;
+                // const box = mesh.geometry.boundingBox;
+                // const boxSize = box ? box.getSize(getTempVector()) : new Vector3();
+                // const maxBoxSize = Math.max(boxSize.x, boxSize.y, boxSize.z);
+                // Surface area is in local space of the model;
+                // we need to scale it by the model's world scale and the model's geometry bounding box size.
+                // const ws = mesh.getWorldScale(getTempVector());
+                // const wsMedian = (ws.x + ws.y + ws.z) / 3;
+                // Area is squared, so both maxBoxSize and wsMedian are squared here
+                // Here, we're basically reverting the calculations that have happened in the pipeline for debugging.
+                // const surfaceArea = 1 / density * triangleCount * (maxBoxSize * maxBoxSize) * (wsMedian * wsMedian);
+                let text = "LOD " + level;
+                if (debug == "density") {
+                    text +=
+                        "\n" + triangleCount + " tris" +
+                        // This is key – basically how we're switching
+                        "\n" + (density / state.lastScreenCoverage).toFixed(0) + " dens" +
+                        "\n" + (state.lastScreenCoverage * 100).toFixed(1) + "% cov" +
+                        // "\n" + (this._lastScreenspaceVolume.x.toFixed(2) + "x" + this._lastScreenspaceVolume.y.toFixed(2) + "x" + this._lastScreenspaceVolume.z.toFixed(2)) + " vol" +
+                        // + "\n" + (surfaceArea).toFixed(2) + " m2" +
+                        "\n" + (state.lastCentrality * 100).toFixed(1) + "% centr" +
+                        "\n" + (_tempBox.min.x.toFixed(2) + "-" + _tempBox.max.x.toFixed(2) + "x" + _tempBox.min.y.toFixed(2) + "-" + _tempBox.max.y.toFixed(2)) + " scr" +
+                        // "\n" + (ws.x).toFixed(2) + "x" + " " + maxBoxSize.toFixed(2) + "b" + "\n" +
+                        // allLods + "\n" +
+                        //"----" + "\n" +
+                        // "1000" + " ideal dens"
+                        "";
+                }
+                // if (helper) {
+                //     helper?.setText(text);
+                //     continue;
+                // }
+                const cam = camera as any as IGameObject;
+                const camForward = cam.worldForward;
+                const camWorld = cam.worldPosition;
+                const fwd = getTempVector(camForward);
+                // for debugging very close LDOs, we need to flip the radius...
+                const pos = fwd.multiplyScalar(radius * .7).add(boundsCenter);
+                const distance = pos.distanceTo(camWorld);
+                // const vertexCount = mesh.geometry.index!.count / 3;
+                // const vertexCountFactor = Math.min(1, vertexCount / 1000);
+                const col = colors[Math.min(colors.length - 1, level)] + "88";
+                // const size = Math.min(10, radius);
+                const windowScale = this.context.domHeight > 0 ? screen.height / this.context.domHeight : 1;
+                const fieldOfViewScale = (camera as PerspectiveCamera).isPerspectiveCamera ? Math.tan((camera as PerspectiveCamera).fov * Math.PI / 180 / 2) : 1;
+                Gizmos.DrawLabel(pos, text, distance * .01 * windowScale * fieldOfViewScale, undefined, 0xffffff, col);
+                // mesh["LOD_level_label"] = helper;
+            }
+        }
+    }
+}