@needle-tools/engine 4.7.2-next.6f2cd71 → 4.7.2

package/plugins/common/logger.js

@@ -106,17 +106,17 @@ export function captureLogMessage(process, key, log, connectionId, time = Date.n
 // #region stringify log
 
 
+
 /**
  * Stringifies a log message, handling circular references and formatting.
  * @param {any} log
  * @param {Set<any>} [seen]
  */
 function stringifyLog(log, seen = new Set(), depth = 0) {
-
     const isServer = typeof window === "undefined";
     const stringify_limits = {
-        string: isServer ? 100_000 : 2000,
-        object_keys: isServer ? 300 : 100,
+        string: isServer ? 100_000 : 1_000,
+        object_keys: isServer ? 300 : 200,
         object_depth: isServer ? 10 : 3,
         array_items: isServer ? 2_000 : 100,
     }
@@ -140,7 +140,20 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
 
     if (seen.has(log)) return "<circular>";
 
-    if (Array.isArray(log)) {
+    if (Array.isArray(log)
+        || log instanceof ArrayBuffer
+        || log instanceof Uint8Array
+        || log instanceof Float32Array
+        || log instanceof Int32Array
+        || log instanceof Uint32Array
+        || log instanceof Uint16Array
+        || log instanceof Uint8ClampedArray
+        || log instanceof Int16Array
+        || log instanceof Int8Array
+        || log instanceof BigInt64Array
+        || log instanceof BigUint64Array
+        || log instanceof Float64Array
+    ) {
         seen.add(log);
         return stringifyArray(log);
     }
@@ -151,25 +164,26 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
         }
 
         seen.add(log);
-        // const str = JSON.stringify(log, (key, value) => {
-        //     if (typeof value === "function") return "<function>";
-        //     if (typeof value === "string") return stringifyLog(value, seen, depth + 1);
-        //     if (typeof value === "object") {
-        //         if (seen.has(value)) return "<circular>";
-        //         seen.add(value);
-        //     }
-        //     return value;
-        // });
-        // return str;
+
+        if(log instanceof Error) {
+            return `<Error: ${log.message}\nStack: ${log.stack}>`;
+        }
+
         const keys = Object.keys(log);
         let res = "{";
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
             let value = log[key];
+            if (i >= stringify_limits.object_keys) {
+                res += `, ... <truncated ${keys.length - i} keys>`;
+                break;
+            }
 
             if (typeof value === "number") {
-                // clamp precision for numbers
-                value = Number(value.toFixed(6));
+                // clamp precision for numbers if it has decimal places
+                if (value % 1 !== 0) {
+                    value = Number(value.toFixed(4));
+                }
             }
             let str = stringifyLog(value, seen, depth + 1);
             if (typeof value === "object") {
@@ -191,6 +205,7 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
         // });
         // return `{ ${entries.join(", ")} }`;
     }
+
     return String(log);
 
     function stringifyArray(arr) {
@@ -212,6 +227,9 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
 
 
 
+
+
+
 // #region utility functions
 
 /**

package/plugins/vite/logger.client.js

@@ -1,4 +1,6 @@
 
+let isStringifying = false;
+
 /**
  * Patches console methods to capture log messages and send them to the server.
  * This is useful for debugging and logging in the client.
@@ -6,14 +8,31 @@
  * @param {any} message - The log message to capture.
  */
 function sendLogToServer(level, ...message) {
+    if (isStringifying) return;
     if ("hot" in import.meta) {
-        message = stringifyLog(message);
-        // keep messages below payload limit
-        if(message.length > 100_000) { 
-            message = message.slice(0, 100_000) + "... <truncated>";
+        try {
+            isStringifying = true;
+            // console.time("sendLogToServer");
+            message = stringifyLog(message);
+            // console.timeEnd("sendLogToServer");
+            // keep messages below payload limit
+            if (message.length > 100_000) {
+                message = message.slice(0, 100_000) + "... <truncated>";
+            }
+            // @ts-ignore
+            import.meta.hot.send("needle:client-log", { level, message: message });
+        } catch (e) {
+            // silently fail but send a message
+            try {
+                import.meta.hot.send("needle:client-log", { level: "error", message: `Error during logging: ${e.message}` });
+            }
+            catch (e2) {
+                // fallback failed as well
+            }
+        }
+        finally {
+            isStringifying = false;
         }
-        // @ts-ignore
-        import.meta.hot.send("needle:client-log", { level, message: message });
     }
 }
 
@@ -174,11 +193,10 @@ User Activation: ${"userActivation" in navigator ? JSON.stringify(navigator.user
  * @param {Set<any>} [seen]
  */
 function stringifyLog(log, seen = new Set(), depth = 0) {
-
     const isServer = typeof window === "undefined";
     const stringify_limits = {
-        string: isServer ? 100_000 : 2000,
-        object_keys: isServer ? 300 : 100,
+        string: isServer ? 100_000 : 1_000,
+        object_keys: isServer ? 300 : 200,
         object_depth: isServer ? 10 : 3,
         array_items: isServer ? 2_000 : 100,
     }
@@ -202,7 +220,20 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
 
     if (seen.has(log)) return "<circular>";
 
-    if (Array.isArray(log)) {
+    if (Array.isArray(log)
+        || log instanceof ArrayBuffer
+        || log instanceof Uint8Array
+        || log instanceof Float32Array
+        || log instanceof Int32Array
+        || log instanceof Uint32Array
+        || log instanceof Uint16Array
+        || log instanceof Uint8ClampedArray
+        || log instanceof Int16Array
+        || log instanceof Int8Array
+        || log instanceof BigInt64Array
+        || log instanceof BigUint64Array
+        || log instanceof Float64Array
+    ) {
         seen.add(log);
         return stringifyArray(log);
     }
@@ -213,25 +244,26 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
         }
 
         seen.add(log);
-        // const str = JSON.stringify(log, (key, value) => {
-        //     if (typeof value === "function") return "<function>";
-        //     if (typeof value === "string") return stringifyLog(value, seen, depth + 1);
-        //     if (typeof value === "object") {
-        //         if (seen.has(value)) return "<circular>";
-        //         seen.add(value);
-        //     }
-        //     return value;
-        // });
-        // return str;
+
+        if (log instanceof Error) {
+            return `<Error: ${log.message}\nStack: ${log.stack}>`;
+        }
+
         const keys = Object.keys(log);
         let res = "{";
         for (let i = 0; i < keys.length; i++) {
             const key = keys[i];
             let value = log[key];
+            if (i >= stringify_limits.object_keys) {
+                res += `, ... <truncated ${keys.length - i} keys>`;
+                break;
+            }
 
             if (typeof value === "number") {
-                // clamp precision for numbers
-                value = Number(value.toFixed(6));
+                // clamp precision for numbers if it has decimal places
+                if (value % 1 !== 0) {
+                    value = Number(value.toFixed(4));
+                }
             }
             let str = stringifyLog(value, seen, depth + 1);
             if (typeof value === "object") {
@@ -253,6 +285,7 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
         // });
         // return `{ ${entries.join(", ")} }`;
     }
+
     return String(log);
 
     function stringifyArray(arr) {

package/src/engine/engine_context.ts

@@ -1039,8 +1039,6 @@ export class Context implements IContext {
 		}
 		this.renderer?.setAnimationLoop(null);
 
-		await delay(1);
-
 		Context.Current = this;
 		await ContextRegistry.dispatchCallback(ContextEvent.ContextCreationStart, this);
 

package/src/engine/engine_create_objects.ts

@@ -1,5 +1,5 @@
 import { createLoaders } from "@needle-tools/gltf-progressive";
-import { BoxGeometry, BufferGeometry, Color, ColorRepresentation, CylinderGeometry, DoubleSide, ExtrudeGeometry, Group, Material, Mesh, MeshBasicMaterial, MeshStandardMaterial, Object3D, PlaneGeometry, Shape, SphereGeometry, Sprite, SpriteMaterial, Texture } from "three"
+import { BoxGeometry, BufferGeometry, Color, ColorRepresentation, CylinderGeometry, DoubleSide, ExtrudeGeometry, Group, Material, Mesh, MeshBasicMaterial, MeshStandardMaterial, Object3D, PlaneGeometry, Shape, SphereGeometry, Sprite, SpriteMaterial, Texture, Vector2 } from "three"
 import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js";
 import { Font, FontLoader } from "three/examples/jsm/loaders/FontLoader.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
@@ -300,9 +300,29 @@ function createBoxWithRoundedEdges(width: number, height: number, _depth: number
         bevelSize: radius,
         bevelThickness: radius0,
         curveSegments: smoothness,
+        UVGenerator: {
+            generateTopUV: (_, vertices: number[]) => {
+                const uvs: Vector2[] = [];
+                for (let i = 0; i < vertices.length; i += 3) {
+                    uvs.push(new Vector2(vertices[i] / width, vertices[i + 1] / height));
+                }
+                return uvs;
+            },
+            generateSideWallUV: (_, vertices: number[], indexA: number, indexB: number, indexC: number, indexD: number) => {
+                const uvs: Vector2[] = [];
+                uvs.push(new Vector2(vertices[indexA] / width, vertices[indexA + 1] / height));
+                uvs.push(new Vector2(vertices[indexB] / width, vertices[indexB + 1] / height));
+                uvs.push(new Vector2(vertices[indexC] / width, vertices[indexC + 1] / height));
+                uvs.push(new Vector2(vertices[indexD] / width, vertices[indexD + 1] / height));
+                return uvs;
+            }
+        },
     });
     geometry.scale(1, 1, 1 - radius0)
     geometry.center();
+    // Ensure we have an index buffer
+    if (!geometry.index)
+        geometry.setIndex(Array.from({ length: geometry.attributes.position.count }, (_, i) => i));
     geometry.computeVertexNormals();
     return geometry;
 }
@@ -389,6 +409,9 @@ function loadShaderball(group: Group, opts?: ObjectOptions) {
         const instance = res.clone();
         const mesh = instance.children[0] as Mesh;
         if (mesh?.type === "Mesh") {
+            // Ensure we have tangents for the Shaderball mesh
+            if (!mesh.geometry.attributes.tangent)
+                mesh.geometry.computeTangents();
             updateShaderballMaterial(mesh, opts);
         }
         group.add(instance);

package/src/engine/engine_input.ts

@@ -241,6 +241,9 @@ declare type EventListenerOptions = {
     signal?: AbortSignal;
 }
 
+
+type RegisteredEventListenerValue = Array<{ priority: number, listeners: Array<{ callback: InputEventListener, options: EventListenerOptions }> }>;
+
 /**
  * The input system is responsible for handling all input events like pointer events (mouse, touch, xr controllers) and keyboard events.
  */
@@ -250,7 +253,7 @@ export class Input implements IInput {
      * That way users can control if they want to receive events before or after other listeners (e.g subscribe to pointer events before the EventSystem receives them) - this allows certain listeners to be always invoked first (or last) and stop propagation  
      * Listeners per event are sorted
      */
-    private readonly _eventListeners: { [key: string]: Array<{ priority: number, listeners: Array<{ callback: InputEventListener, options: EventListenerOptions }> }> } = {};
+    private readonly _eventListeners: Record<string, RegisteredEventListenerValue> = {};
 
     /** Adds an event listener for the specified event type. The callback will be called when the event is triggered.
      * @param type The event type to listen for
@@ -846,6 +849,10 @@ export class Input implements IInput {
     }
 
     unbindEvents() {
+        for (const key in this._eventListeners) {
+            this._eventListeners[key].length = 0; // clear all listeners for this event
+        }
+
         window.removeEventListener('contextmenu', this.onContextMenu);
 
         this._htmlEventSource?.removeEventListener('pointerdown', this.onPointerDown);

package/src/engine/engine_lods.ts

@@ -1,8 +1,7 @@
+import type { LOD_Results } from "@needle-tools/gltf-progressive";
 import { LODsManager as _LODsManager, NEEDLE_progressive, NEEDLE_progressive_plugin } from "@needle-tools/gltf-progressive";
-import type { LOD_Results } from "@needle-tools/gltf-progressive/src/lods_manager.js";
 import { Box3, Camera, Mesh, PerspectiveCamera, Scene, Sphere, WebGLRenderer } from "three";
 
-import { findResourceUsers } from "./engine_assetdatabase.js";
 import type { Context } from "./engine_context.js";
 import { Gizmos } from "./engine_gizmos.js";
 import { getTempVector } from "./engine_three_utils.js";

package/src/engine/engine_physics.ts

@@ -68,9 +68,15 @@ export declare interface IRaycastOptions {
 
     /**
      * Use MeshBVH for raycasting. This is faster than the default threejs raycaster but uses more memory.
-     * @default undefined
+     * @default true
      */
     useAcceleratedRaycast?: boolean;
+
+    /**
+     * When enabled raycasting will use the 'slower' traditional three.js raycasting method while the MeshBVH is being generated in the background. When disabled objects that don't have a BVH available *Yet* because it's still being generated will be ignored and not generate any hits. This is useful to improve performance for cases where raycasting happens frequently and it won't matter if raycasts don't produce hits for a few frames. 
+     * @default true
+     */
+    allowSlowRaycastFallback?: boolean;
 }
 
 export class RaycastOptions implements IRaycastOptions {
@@ -90,6 +96,7 @@ export class RaycastOptions implements IRaycastOptions {
     ignore?: Object3D[];
     testObject?: RaycastTestObjectCallback;
     useAcceleratedRaycast?: boolean | undefined;
+    allowSlowRaycastFallback?: boolean = true;
 
     screenPointFromOffset(ox: number, oy: number) {
         if (this.screenPoint === undefined) this.screenPoint = new Vector2();
@@ -356,7 +363,7 @@ export class Physics {
                     // did handle raycast
                 }
                 else if (options.useAcceleratedRaycast !== false) {
-                    NEMeshBVH.runMeshBVHRaycast(raycaster, mesh, results, this.context);
+                    NEMeshBVH.runMeshBVHRaycast(raycaster, mesh, results, this.context, options);
                 }
                 else {
                     raycaster.intersectObject(mesh, false, results);
@@ -416,7 +423,7 @@ export class Physics {
                 sphere.center.copy(spherePos);
                 sphere.radius = radius;
                 const previousResults = results.length;
-                NEMeshBVH.runMeshBVHRaycast(this.sphere, mesh, results, this.context);
+                NEMeshBVH.runMeshBVHRaycast(this.sphere, mesh, results, this.context, {});
                 if (previousResults != results.length && !traverseChildsAfterHit) {
                     return;
                 }
@@ -539,7 +546,13 @@ declare module 'three' {
         acceleratedRaycast?: any;
     }
     export interface SkinnedMesh {
+        /** @deprecated use autoUpdateMeshBvhInterval */
         autoUpdateMeshBVH?: boolean;
+        /**
+         * Interval in milliseconds to automatically update the mesh BVH. When set to >= 0 the BVH will be updated every x milliseconds.
+         * @default undefined (disabled)
+         */
+        autoUpdateMeshBvhInterval?: number;
         bvhNeedsUpdate?: boolean;
     }
 }
@@ -547,7 +560,7 @@ declare module 'three' {
 
 
 namespace NEMeshBVH {
-    export function runMeshBVHRaycast(method: Raycaster | Sphere, mesh: Mesh, results: Intersection[], context: Pick<Context, "xr">): boolean {
+    export function runMeshBVHRaycast(method: Raycaster | Sphere, mesh: Mesh, results: Intersection[], context: Pick<Context, "xr">, options: { allowSlowRaycastFallback?: boolean }): boolean {
         if (!mesh.geometry) {
             return false;
         }
@@ -570,15 +583,16 @@ namespace NEMeshBVH {
                     skinnedMesh.staticGeometry = skinnedMesh.staticGenerator.generate();
                     geom.boundsTree = _computeBoundsTree?.call(skinnedMesh.staticGeometry);
                     skinnedMesh.staticGeometryLastUpdate = performance.now() + Math.random() * 200;
-                    if (skinnedMesh.autoUpdateMeshBVH === undefined)
-                        skinnedMesh.autoUpdateMeshBVH = false;
+                    skinnedMesh.bvhNeedsUpdate = true;
                 }
             }
-            else if (geom.boundsTree && (skinnedMesh.autoUpdateMeshBVH === true || skinnedMeshBVHNeedsUpdate === true)) {
+            else if (geom.boundsTree && ((skinnedMesh.autoUpdateMeshBvhInterval !== undefined && skinnedMesh.autoUpdateMeshBvhInterval >= 0) || skinnedMeshBVHNeedsUpdate === true)) {
                 // automatically refit the tree every 300ms
                 const now = performance.now();
                 const timeSinceLastUpdate = now - skinnedMesh.staticGeometryLastUpdate!;
-                if (skinnedMeshBVHNeedsUpdate || timeSinceLastUpdate > 100) {
+                const interval = skinnedMesh.autoUpdateMeshBvhInterval ?? 100;
+                if (skinnedMeshBVHNeedsUpdate || timeSinceLastUpdate > interval) {
+                    if(debugPhysics) console.warn(`Physics: updating skinned mesh bvh for ${mesh.name} after ${timeSinceLastUpdate.toFixed(2)}ms`);
                     skinnedMesh.bvhNeedsUpdate = false;
                     skinnedMesh.staticGeometryLastUpdate = now;
                     skinnedMesh.staticGenerator?.generate(skinnedMesh.staticGeometry);
@@ -694,6 +708,10 @@ namespace NEMeshBVH {
             }
             else {
                 if (debugPhysics) console.warn("No bounds tree found for mesh", mesh.name, { workerTask: geom[workerTaskSymbol], hasAcceleratedRaycast: _acceleratedRaycast != null });
+                if (options.allowSlowRaycastFallback === false) {
+                    if (debugPhysics) console.warn("Skipping raycast because no bounds tree is available and allowSlowRaycastFallback is false");
+                    return false;
+                }
             }
             const prevFirstHitOnly = raycaster.firstHitOnly;
             raycaster.firstHitOnly = false;

package/src/engine/engine_tonemapping.ts

@@ -164,6 +164,7 @@ vec3 _agxLook(vec3 val) {
 vec3 AgXToneMapping( vec3 color ) {
     // apply AGX
     color *= toneMappingExposure;
+    color = max(color, vec3(0.001)); // Prevent NaN
     color = _agx(color);
     color = _agxLook(color); // Optional
     color = _agxEotf(color);

package/src/engine/webcomponents/needle-engine.ts

@@ -1,7 +1,9 @@
 import { isDevEnvironment, showBalloonWarning } from "../debug/index.js";
 import { PUBLIC_KEY, VERSION } from "../engine_constants.js";
+import { ContextEvent, ContextRegistry } from "../engine_context_registry.js";
 import { registerLoader } from "../engine_gltf.js";
 import { hasCommercialLicense } from "../engine_license.js";
+import { onStart } from "../engine_lifecycle_api.js";
 import { setDracoDecoderPath, setDracoDecoderType, setKtx2TranscoderPath } from "../engine_loaders.gltf.js";
 import { NeedleLoader } from "../engine_loaders.js";
 import { Context, ContextCreateArgs } from "../engine_setup.js";
@@ -232,6 +234,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         this.setPublicKey();
         this.setVersion();
 
+        // If tabindex is not defined we set it to 0 to make it focusable and reachable via keyboard. Also keyboard events will be dispatched to the element (e.g. keydown, keyup) which is used by OrbitControls
+        if (this.getAttribute("tabindex") === null || this.getAttribute("tabindex") === undefined)
+            this.setAttribute("tabindex", "0");
+
         this.addEventListener("xr-session-started", this.onXRSessionStarted);
         this.onSetupDesktop();
 
@@ -489,6 +495,11 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
             }
         }
 
+
+
+        // Experimental loading blur
+        handleLoadingBlur(this);
+
         const currentHash = this.getAttribute("hash");
         if (currentHash !== null && currentHash !== undefined)
             this._context.hash = currentHash;
@@ -578,10 +589,6 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     private onReady = () => this._loadingView?.onLoadingFinished();
     private onError = () => this._loadingView?.setMessage("Loading failed!");
 
-    private internalSetLoadingMessage(str: string) {
-        this._loadingView?.setMessage(str);
-    }
-
     private getSourceFiles(): Array<string> {
         const src: string | null | string[] = this.getAttribute("src");
         if (!src) return [];
@@ -858,4 +865,63 @@ function getDisplayName(str: string) {
     if (isDevEnvironment())
         console.debug("Loading: use default name", name);
     return name;
-}
+}
+
+
+function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
+    onStart((ctx) => {
+        const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
+        if (userBlurSetting !== null && userBlurSetting !== "0") {
+            if (ctx.domElement === needleEngineElement) {
+
+                const promise = ctx.lodsManager.manager?.awaitLoading({
+                    frames: 5,
+                    signal: AbortSignal.timeout(10_000), // Limit how long the page can be blurred
+                    maxPromisesPerObject: 1,
+                }).catch(_ => {
+                    // Ignore errors (none are expected tho...)
+                });
+                let blur = "20px";
+                if (userBlurSetting.endsWith("px")) blur = userBlurSetting;
+                const duration = 170;
+
+                // If the scene has a transparent background we apply a blur to the canvas directly to not *also* blur images
+                // But don't always use this effect because the edges don't look as good as with a backdrop filter
+                if (ctx.scene.background === null) {
+                    const domElement = needleEngineElement;
+                    const canvas = ctx.renderer.domElement;
+                    const originalFilterValue = canvas.style.filter;
+                    const originalOverflowValue = canvas.style.overflow;
+                    canvas.style.filter += `blur(${blur})`;
+                    domElement.style.overflow = "hidden";
+                    promise?.then(() => {
+                        const animation = canvas.animate([{
+                            filter: "blur(0px)",
+                        }
+                        ], { duration: duration, easing: "ease-in", });
+                        animation.onfinish = () => {
+                            canvas.style.filter = originalFilterValue;
+                            domElement.style.overflow = originalOverflowValue;
+                        };
+                    });
+                }
+                else {
+                    const blurryElement = document.createElement("div");
+                    ctx.domElement.prepend(blurryElement);
+                    blurryElement.style.cssText = "position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none";
+                    blurryElement.style.backdropFilter = `blur(${blur})`;
+                    promise?.then(() => {
+                        const animation = blurryElement.animate([{
+                            backdropFilter: "blur(0px)",
+                            opacity: 0,
+                        }
+                        ], { duration: duration, easing: "ease-in", });
+                        animation.onfinish = () => {
+                            blurryElement.remove();
+                        };
+                    });
+                }
+            }
+        }
+    }, { once: true });
+}