@needle-tools/engine 4.7.2-next.d24ebbc → 4.7.3-next.1603bb0

package/plugins/vite/logger.client.js

@@ -1,3 +1,6 @@
+import path from "path";
+
+let isStringifying = false;
 
 /**
  * Patches console methods to capture log messages and send them to the server.
@@ -6,52 +9,108 @@
  * @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 });
     }
 }
 
-// const obj = {
-//     hello: "world"
-// }
-// obj["test"] = obj;
-// sendLogToServer("internal", "Test circular reference", obj);
+function logHelper(fn, args) {
+    const error = new Error();
+    const stack = error.stack;
+    const caller = stack?.split('\n')[3]; // Get the actual caller
+    const path = caller?.trim();
+    if (!path) {
+        return fn(...args);
+    }
+    const pathWithoutBrackets = path.replaceAll("(", "").replaceAll(")", "");
+    fn(...args, `\n» ${pathWithoutBrackets}`);
+}
 
 if (import.meta && "hot" in import.meta) {
 
-    const originalLog = console.log;
-    const originalWarn = console.warn;
-    const originalInfo = console.info;
-    const originalDebug = console.debug;
-    const originalError = console.error;
+    function patchLogs() {
+        const originalLog = console.log.bind(console);
+        const originalWarn = console.warn.bind(console);
+        const originalInfo = console.info.bind(console);
+        const originalDebug = console.debug.bind(console);
+        const originalError = console.error.bind(console);
 
-    console.log = (...args) => {
-        originalLog(...args);
-        sendLogToServer("log", ...args);
-    }
-    console.warn = (...args) => {
-        originalWarn(...args);
-        sendLogToServer("warn", ...args);
-    }
-    console.info = (...args) => {
-        originalInfo(...args);
-        sendLogToServer("info", ...args);
+        console.log = function (...args) {
+            logHelper(originalLog, args);
+            sendLogToServer("log", ...args);
+        }
+        console.warn = (...args) => {
+            logHelper(originalWarn, args);
+            sendLogToServer("warn", ...args);
+        }
+        console.info = (...args) => {
+            logHelper(originalInfo, args);
+            sendLogToServer("info", ...args);
+        }
+        console.debug = (...args) => {
+            logHelper(originalDebug, args);
+            sendLogToServer("debug", ...args);
+        }
+        console.error = (...args) => {
+            logHelper(originalError, args);
+            sendLogToServer("error", ...args);
+        }
+        return () => {
+            console.log = originalLog;
+            console.warn = originalWarn;
+            console.info = originalInfo;
+            console.debug = originalDebug;
+            console.error = originalError;
+        }
     }
-    console.debug = (...args) => {
-        originalDebug(...args);
-        sendLogToServer("debug", ...args);
+
+    const query = new URLSearchParams(window.location.search);
+    if (query.has("needle-debug")) {
+        patchLogs();
     }
-    console.error = (...args) => {
-        originalError(...args);
-        sendLogToServer("error", ...args);
+    else {
+        // const unpatch = patchLogs();
+        // setTimeout(() => {
+        //     sendLogToServer("internal", "Stop listening to console.log.");
+        //     unpatch();
+        // }, 10_000);
+
+        const threshold = 100;
+        const devToolsArePotentiallyOpen = window.outerHeight - window.innerHeight > threshold || window.outerWidth - window.innerWidth > threshold;
+        if (devToolsArePotentiallyOpen) {
+            sendLogToServer("internal", "Console logging is disabled (devtools are open)");
+        }
+        else {
+            sendLogToServer("internal", "Console logging is enabled");
+            patchLogs();
+        }
     }
 
+
+
     try {
         sendLogToServer("internal", `Page loaded
 URL: ${window.location.href}
@@ -67,7 +126,6 @@ User Activation: ${"userActivation" in navigator ? JSON.stringify(navigator.user
 `);
 
         if ("gpu" in navigator) {
-
             // @ts-ignore
             navigator.gpu.requestAdapter()
                 .then(adapter => adapter ? adapter.requestDevice() : null)
@@ -102,10 +160,9 @@ User Activation: ${"userActivation" in navigator ? JSON.stringify(navigator.user
         sendLogToServer("error", `Unhandled promise rejection: ${reason}`);
     });
     window.addEventListener('beforeunload', () => {
-        sendLogToServer("internal", "Page is unloading");
+        sendLogToServer("internal", "Page is unloading\n\n");
     });
     document.addEventListener('visibilitychange', () => {
-        console.log("Visibility changed:", document.visibilityState);
         if (document.visibilityState === 'hidden') {
             sendLogToServer("internal", "Page is hidden");
         }
@@ -174,11 +231,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 +258,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 +282,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 +323,7 @@ function stringifyLog(log, seen = new Set(), depth = 0) {
         // });
         // return `{ ${entries.join(", ")} }`;
     }
+
     return String(log);
 
     function stringifyArray(arr) {

package/plugins/vite/logger.js

@@ -92,10 +92,10 @@ function logRequests(server, log_http_requests = false) {
         });
     }
     // Log HTTP requests
-    if (log_http_requests) {
-        server.middlewares.use((req, res, next) => {
+    server.middlewares.use((req, res, next) => {
+        if (log_http_requests) {
             captureLogMessage("client-http", "info", [req.method, req.url], null);
-            next();
-        });
-    }
+        }
+        next();
+    });
 }

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_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/webcomponents/needle-engine.ts

@@ -869,19 +869,21 @@ function getDisplayName(str: string) {
 
 
 function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
-    const userBlurSetting = needleEngineElement.getAttribute("loading-blur");
-    if (userBlurSetting !== null && userBlurSetting !== "0") {
-        onStart((ctx) => {
+    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 = "10px";
+                let blur = "20px";
                 if (userBlurSetting.endsWith("px")) blur = userBlurSetting;
-                const duration = 500;
+                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
@@ -896,30 +898,30 @@ function handleLoadingBlur(needleEngineElement: NeedleEngineWebComponent) {
                         const animation = canvas.animate([{
                             filter: "blur(0px)",
                         }
-                        ], { duration: duration, easing: "ease-in" });
+                        ], { duration: duration, easing: "ease-in", });
                         animation.onfinish = () => {
                             canvas.style.filter = originalFilterValue;
                             domElement.style.overflow = originalOverflowValue;
                         };
                     });
                 }
-                else 
-                {
+                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;";
+                    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" });
+                        ], { duration: duration, easing: "ease-in", });
                         animation.onfinish = () => {
                             blurryElement.remove();
                         };
                     });
                 }
             }
-        }, { once: true });
-    }
-}
+        }
+    }, { once: true });
+}