@needle-tools/gltf-progressive 1.2.4-beta → 1.2.5-beta

package/lib/lods_manager.js

@@ -3,6 +3,7 @@ import { NEEDLE_progressive } from "./extension.js";
 import { createLoaders } from "./loaders.js";
 import { getParam, isMobileDevice } from "./utils.internal.js";
 import { plugins } from "./plugins/plugin.js";
+import { getRaycastMesh } from "./utils.js";
 const debugProgressiveLoading = getParam("debugprogressive");
 const suppressProgressiveLoading = getParam("noprogressive");
 const $lodsManager = Symbol("Needle:LODSManager");
@@ -84,19 +85,34 @@ export class LODsManager {
     targetTriangleDensity = 200_000;
     /**
      * The update interval in frames. If set to 0, the LODs will be updated every frame. If set to 2, the LODs will be updated every second frame, etc.
+     * @default "auto"
      */
     updateInterval = "auto";
     #updateInterval = 1;
     /**
      * If set to true, the LODsManager will not update the LODs.
+     * @default false
      */
     pause = false;
+    /**
+     * When set to true the LODsManager will not update the LODs. This can be used to manually update the LODs using the `update` method.
+     * Otherwise the LODs will be updated automatically when the renderer renders the scene.
+     * @default false
+     */
+    manual = false;
     _lodchangedlisteners = [];
     addEventListener(evt, listener) {
         if (evt === "changed") {
             this._lodchangedlisteners.push(listener);
         }
     }
+    removeEventListener(evt, listener) {
+        if (evt === "changed") {
+            const index = this._lodchangedlisteners.indexOf(listener);
+            if (index >= 0)
+                this._lodchangedlisteners.splice(index, 1);
+        }
+    }
     // readonly plugins: NEEDLE_progressive_plugin[] = [];
     constructor(renderer, context) {
         this.renderer = renderer;
@@ -126,7 +142,7 @@ export class LODsManager {
             // 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) {
+            if (renderTarget == null || ("isXRRenderTarget" in renderTarget && renderTarget.isXRRenderTarget)) {
                 stack = 0;
                 self.#frame += 1;
                 self.#delta = self.#clock.getDelta();
@@ -137,11 +153,9 @@ export class LODsManager {
                 if (debugProgressiveLoading && self.#frame % 30 === 0)
                     console.log("FPS", Math.round(self.#fps), "Interval:", self.#updateInterval);
             }
-            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);
+            self.onAfterRender(scene, camera, stack_level);
         };
     }
     disable() {
@@ -150,9 +164,10 @@ export class LODsManager {
         this.renderer.render = this.#originalRender;
         this.#originalRender = undefined;
     }
-    onBeforeRender(_scene, _camera, _stack, _frame) {
+    update(scene, camera) {
+        this.internalUpdate(scene, camera);
     }
-    onAfterRender(scene, camera, _stack, frame) {
+    onAfterRender(scene, camera, _stack) {
         if (this.pause)
             return;
         const renderList = this.renderer.renderLists.get(scene, 0);
@@ -201,77 +216,75 @@ export class LODsManager {
                 this.#updateInterval = this.updateInterval;
             }
             // Check if we should update LODs this frame
-            if (this.#updateInterval > 0 && frame % this.#updateInterval != 0) {
+            if (this.#updateInterval > 0 && this.#frame % this.#updateInterval != 0) {
                 return;
             }
-            this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-            this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix, this.renderer.coordinateSystem);
-            const desiredDensity = this.targetTriangleDensity;
-            // 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;
-            }
-            */
-            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);
-                            }
+            this.internalUpdate(scene, camera);
+        }
+    }
+    /**
+     * Update LODs in a scene
+     */
+    internalUpdate(scene, camera) {
+        const renderList = this.renderer.renderLists.get(scene, 0);
+        const opaque = renderList.opaque;
+        this.projectionScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+        this.cameraFrustrum.setFromProjectionMatrix(this.projectionScreenMatrix, this.renderer.coordinateSystem);
+        const desiredDensity = this.targetTriangleDensity;
+        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;
                     }
+                    continue;
                 }
-                switch (entry.material.type) {
-                    case "LineBasicMaterial":
-                    case "LineDashedMaterial":
-                    case "PointsMaterial":
-                    case "ShadowMaterial":
-                    case "MeshDistanceMaterial":
-                    case "MeshDepthMaterial":
-                        continue;
-                }
-                if (debugProgressiveLoading === "color") {
-                    if (entry.material) {
-                        if (!entry.object["progressive_debug_color"]) {
-                            entry.object["progressive_debug_color"] = true;
-                            const randomColor = Math.random() * 0xffffff;
-                            const newMaterial = new MeshStandardMaterial({ color: randomColor });
-                            entry.object.material = newMaterial;
-                        }
+            }
+            switch (entry.material.type) {
+                case "LineBasicMaterial":
+                case "LineDashedMaterial":
+                case "PointsMaterial":
+                case "ShadowMaterial":
+                case "MeshDistanceMaterial":
+                case "MeshDepthMaterial":
+                    continue;
+            }
+            if (debugProgressiveLoading === "color") {
+                if (entry.material) {
+                    if (!entry.object["progressive_debug_color"]) {
+                        entry.object["progressive_debug_color"] = true;
+                        const randomColor = Math.random() * 0xffffff;
+                        const newMaterial = new MeshStandardMaterial({ color: randomColor });
+                        entry.object.material = newMaterial;
                     }
                 }
-                const object = entry.object;
-                if (object instanceof Mesh || (object.isMesh)) {
-                    this.updateLODs(scene, camera, object, desiredDensity, frame);
-                }
             }
-            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, frame);
-                }
+            const object = entry.object;
+            if (object instanceof Mesh || (object.isMesh)) {
+                this.updateLODs(scene, camera, object, desiredDensity);
             }
-            const transmissive = renderList.transmissive;
-            for (const entry of transmissive) {
-                const object = entry.object;
-                if (object instanceof Mesh || (object.isMesh)) {
-                    this.updateLODs(scene, camera, object, desiredDensity, frame);
-                }
+        }
+        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);
+            }
+        }
+        const transmissive = renderList.transmissive;
+        for (const entry of transmissive) {
+            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, _frame) {
+    updateLODs(scene, camera, object, desiredDensity) {
         if (!object.userData) {
             object.userData = {};
         }
@@ -426,8 +439,8 @@ export class LODsManager {
         }
         if (!this.cameraFrustrum?.intersectsObject(mesh)) {
             // the object is not visible by the camera
-            result.mesh_lod = 99;
-            result.texture_lod = 99;
+            result.mesh_lod = 100;
+            result.texture_lod = 100;
             return;
         }
         const canvasHeight = this.renderer.domElement.clientHeight || this.renderer.domElement.height;
@@ -437,6 +450,17 @@ export class LODsManager {
             if (!skinnedMesh.boundingBox) {
                 skinnedMesh.computeBoundingBox();
             }
+            // Fix: https://linear.app/needle/issue/NE-5264
+            else if (state.frames % 30 === 0) {
+                // use lowres geometry for bounding box calculation
+                const raycastmesh = getRaycastMesh(skinnedMesh);
+                const originalGeometry = skinnedMesh.geometry;
+                if (raycastmesh) {
+                    skinnedMesh.geometry = raycastmesh;
+                }
+                skinnedMesh.computeBoundingBox();
+                skinnedMesh.geometry = originalGeometry;
+            }
             boundingBox = skinnedMesh.boundingBox;
         }
         if (boundingBox && camera.isPerspectiveCamera) {

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "1.2.4-beta",
+  "version": "1.2.5-beta",
   "description": "three.js support for loading glTF or GLB files that contain progressive loading data",
   "homepage": "https://needle.tools",
   "author": {