@needle-tools/engine 4.12.0-next.5d44f6c → 4.12.0-next.8d9ac4f

package/src/engine/engine_context.ts

@@ -27,6 +27,7 @@ import { ObjectUtils } from "./engine_create_objects.js";
 import { destroy, foreachComponent } from './engine_gameobject.js';
 import { getLoader } from './engine_gltf.js';
 import { Input } from './engine_input.js';
+import { Telemetry } from './engine_license.js';
 import { invokeLifecycleFunctions } from './engine_lifecycle_functions_internal.js';
 import { type ILightDataRegistry, LightDataRegistry } from './engine_lightdata.js';
 import { LODsManager } from "./engine_lods.js";
@@ -1403,6 +1404,7 @@ export class Context implements IContext {
 				if (this._renderlooperrors >= 3) {
 					console.warn("Stopping render loop due to error")
 					this.renderer.setAnimationLoop(null);
+					Telemetry.sendError(Context.Current, "renderloop", err instanceof Error ? err : new Error(String(err)) );
 				}
 				this.domElement.dispatchEvent(new CustomEvent("error", { detail: err }));
 			}

package/src/engine/engine_license.ts

@@ -1,9 +1,14 @@
+import { dof } from "three/src/nodes/TSL.js";
+
 import { isDevEnvironment } from "./debug/index.js";
 import { BUILD_TIME, GENERATOR, PUBLIC_KEY, VERSION } from "./engine_constants.js";
 import { ContextEvent, ContextRegistry } from "./engine_context_registry.js";
+import { onInitialized } from "./engine_lifecycle_api.js";
+import { isLocalNetwork } from "./engine_networking_utils.js";
 import { Context } from "./engine_setup.js";
 import type { IContext } from "./engine_types.js";
 import { getParam } from "./engine_utils.js";
+import { InternalAttributeUtils } from "./engine_utils_attributes.js";
 
 const debug = getParam("debuglicense");
 
@@ -67,6 +72,174 @@ function invokeLicenseCheckResultChanged(result: boolean) {
     }
 }
 
+
+
+// #region Telemetry
+export namespace Telemetry {
+
+    window.addEventListener("error", (event: ErrorEvent) => {
+        sendError(Context.Current, "unhandled_error", event);
+    });
+    window.addEventListener("unhandledrejection", (event: PromiseRejectionEvent) => {
+        sendError(Context.Current, "unhandled_promise_rejection", {
+            message: event.reason?.message,
+            stack: event.reason?.stack,
+            timestamp: Date.now(),
+        });
+    });
+
+    onInitialized((ctx => sendPageViewEvent(ctx)), { once: true });
+
+    function sendPageViewEvent(ctx: IContext) {
+        if (!isAllowed(ctx)) {
+            if (debug) console.debug("Telemetry is disabled via no-telemetry attribute");
+            return;
+        }
+        return doFetch({
+            site_id: "dabb8317376f",
+            type: "pageview",
+            pathname: window.location.pathname,
+            hostname: window.location.hostname,
+            page_title: document.title,
+            referrer: document.referrer,
+            user_agent: navigator.userAgent,
+            querystring: window.location.search,
+            language: navigator.language,
+            screenWidth: window.screen.width,
+            screenHeight: window.screen.height,
+            event_name: "page_view"
+        }).then(res => {
+            if (res instanceof Response && res.ok && isLocalNetwork()) {
+                const src = ctx.domElement?.getAttribute("src") || "";
+                const sessionKey = src + VERSION + GENERATOR + BUILD_TIME + PUBLIC_KEY;
+                if (window.sessionStorage.getItem("session_key") !== sessionKey) {
+                    window.sessionStorage.setItem("session_key", sessionKey);
+                    sendEvent(ctx, "info", {
+                        src: ctx.domElement?.getAttribute("src") || "",
+                        version: VERSION,
+                        generator: GENERATOR,
+                        build_time: BUILD_TIME,
+                        public_key: PUBLIC_KEY,
+                    });
+                }
+            }
+        })
+    }
+
+    export function isAllowed(context: IContext | null | undefined): boolean {
+        let domElement = context?.domElement as HTMLElement | null;
+        if (!domElement) domElement = document.querySelector<HTMLElement>("needle-engine");
+        if (!domElement && !context) return false;
+
+        const attribute = domElement?.getAttribute("no-telemetry");
+        if (attribute === "" || attribute === "true" || attribute === "1") {
+            if (NEEDLE_ENGINE_LICENSE_TYPE === "pro" || NEEDLE_ENGINE_LICENSE_TYPE === "enterprise") {
+                if (debug) console.debug("Telemetry is disabled via no-telemetry attribute");
+                return false;
+            }
+        }
+        return true;
+    }
+
+    const id = "dabb8317376f";
+
+    /**
+     * Sends a telemetry event
+     */
+    export async function sendEvent(context: IContext | null | undefined, eventName: string, properties?: Record<string, any>) {
+        if (!isAllowed(context)) {
+            if (debug) console.debug("Telemetry is disabled");
+            return;
+        }
+        const body = {
+            site_id: id,
+            type: "custom_event",
+            pathname: window.location.pathname,
+            event_name: eventName,
+            properties: properties ? JSON.stringify(properties) : undefined,
+        }
+        return doFetch(body);
+    }
+
+    type ErrorData = {
+        message?: string;
+        stack?: string;
+        filename?: string;
+        lineno?: number;
+        colno?: number;
+        timestamp?: number;
+    }
+
+    export async function sendError(context: IContext, errorName: string, error: ErrorData | ErrorEvent | Error) {
+
+        if (!isAllowed(context)) {
+            if (debug) console.debug("Telemetry is disabled");
+            return;
+        }
+
+        if (error instanceof ErrorEvent) {
+            error = {
+                message: error.message,
+                stack: error.error?.stack,
+                filename: error.filename,
+                lineno: error.lineno,
+                colno: error.colno,
+                timestamp: error.timeStamp || Date.now(),
+
+            };
+        }
+        else if (error instanceof Error) {
+            error = {
+                message: error.message,
+                stack: error.stack,
+                timestamp: Date.now(),
+            };
+        }
+        const body = {
+            site_id: id,
+            type: "error",
+            event_name: errorName || "error",
+            properties: JSON.stringify({
+                error_name: errorName,
+                message: error.message,
+                stack: error.stack,
+                filename: error.filename,
+                lineno: error.lineno,
+                colno: error.colno,
+                timestamp: error.timestamp,
+            })
+        }
+        return doFetch(body);
+    }
+
+    function doFetch(body: Record<string, any>) {
+        try {
+            const url = "https://needle.tools/api/v1/rum/t";
+            return fetch(url, {
+                method: "POST",
+                body: JSON.stringify(body),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                // Ensures request completes even if page unloads
+                keepalive: true,
+                // Allow CORS requests
+                mode: 'cors',
+                // Low priority to avoid blocking other requests
+                // @ts-ignore
+                priority: 'low',
+            }).catch(e => {
+                if (debug) console.error("Failed to send telemetry", e);
+            })
+        }
+        catch (err) {
+            if (debug) console.error(err);
+        }
+        return Promise.resolve();
+    }
+}
+
+
 ContextRegistry.registerCallback(ContextEvent.ContextRegistered, evt => {
     showLicenseInfo(evt.context);
     handleForbidden(evt.context);
@@ -341,14 +514,9 @@ async function sendUsageMessageToAnalyticsBackend(context: IContext) {
     // We can't send beacons from cross-origin isolated pages
     if (window.crossOriginIsolated) return;
 
-    const licenseType = NEEDLE_ENGINE_LICENSE_TYPE;
-    if (licenseType === "pro" || licenseType === "enterprise") {
-        const attribute = context?.domElement?.getAttribute("no-telemetry");
-        if (attribute === "" || attribute === "true" || attribute === "1") {
-            if (debug) console.debug("Telemetry is disabled");
-            return;
-        }
-        if (debug) console.debug("Telemetry attribute: " + attribute);
+    if (!Telemetry.isAllowed(context)) {
+        if (debug) console.debug("Telemetry is disabled via no-telemetry attribute");
+        return;
     }
 
     try {
@@ -379,4 +547,4 @@ async function sendUsageMessageToAnalyticsBackend(context: IContext) {
         if (debug)
             console.log("Failed to send non-commercial usage message to analytics backend", err);
     }
-}
+}

package/src/engine/engine_networking.ts

@@ -6,6 +6,7 @@ import { type Websocket } from 'websocket-ts';
 
 import * as schemes from "../engine-schemes/schemes.js";
 import { isDevEnvironment } from './debug/index.js';
+import { Telemetry } from './engine_license.js';
 import { PeerNetworking } from './engine_networking_peer.js';
 import { type IModel, type INetworkConnection, SendQueue } from './engine_networking_types.js';
 import { isHostedOnGlitch } from './engine_networking_utils.js';
@@ -658,6 +659,9 @@ export class NetworkConnection implements INetworkConnection {
                 .onError((_e) => {
                     console.error("Websocket connection failed...");
                     resolve(false);
+                    Telemetry.sendEvent(this.context, "networking", {
+                        event: "connection_error",
+                    });
                 })
                 .onRetry(() => { console.log("Retry connecting to networking websocket") })
                 .build();
@@ -727,6 +731,9 @@ export class NetworkConnection implements INetworkConnection {
                                 "server did not send connection id", connection.id);
                             console.debug("Your id is: " + connection.id, this.context.alias ?? "");
                             this._connectionId = connection.id;
+                            Telemetry.sendEvent(this.context, "networking", {
+                                event: "connected",
+                            });
                         }
                     }
                     else console.warn("Expected connection id in " + message.key);
@@ -754,6 +761,10 @@ export class NetworkConnection implements INetworkConnection {
                     }
 
                     this.onSendQueued(SendQueue.OnRoomJoin);
+                    Telemetry.sendEvent(this.context, "networking", {
+                        event: "joined_room",
+                        room: this._currentRoomName,
+                    });
                     break;
 
                 case RoomEvents.LeftRoom:
@@ -765,6 +776,10 @@ export class NetworkConnection implements INetworkConnection {
                         this._currentInRoom.length = 0;
                         if (debugnetBin || isDevEnvironment()) console.debug("Left Needle Engine Room: " + model.room);
                     }
+                    Telemetry.sendEvent(this.context, "networking", {
+                        event: "left_room",
+                        room: model.room,
+                    });
                     break;
                 case RoomEvents.UserJoinedRoom:
                     if (message.data) {

package/src/engine/engine_serialization_builtin_serializer.ts

@@ -337,7 +337,7 @@ class EventListSerializer extends TypeSerializer {
                             args = call.arguments.map(deserializeArgument);
                         }
                         const method = target[call.method];
-                        if (!method) {
+                        if (method === undefined) {
                             console.warn(`EventList method not found: \"${call.method}\" on ${target?.name}`);
                         }
                         else {

package/src/engine/engine_three_utils.ts

@@ -242,8 +242,10 @@ export function setWorldPosition(obj: Object3D, val: Vector3): Object3D {
     const wp = _worldPositions.get();
     if (val !== wp)
         wp.copy(val);
-    const obj2 = obj?.parent ?? obj;
-    obj2.worldToLocal(wp);
+
+    if (obj.parent !== null)
+         obj.parent.worldToLocal(wp);
+
     obj.position.set(wp.x, wp.y, wp.z);
     return obj;
 }

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

@@ -104,7 +104,8 @@ export class NeedleSpatialMenu {
         }
 
         const xr = this._context.xr;
-        if (!xr?.running) {
+        const isImmersiveXR = xr?.running && (xr?.isPassThrough || xr?.isVR)
+        if (!isImmersiveXR) {
             if (this._wasInXR) {
                 this._wasInXR = false;
                 this.onExitXR();

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

@@ -1,11 +1,12 @@
 import type { Context } from "../../engine_context.js";
-import { hasCommercialLicense, onLicenseCheckResultChanged } from "../../engine_license.js";
+import { hasCommercialLicense, onLicenseCheckResultChanged, Telemetry } from "../../engine_license.js";
 import { isLocalNetwork } from "../../engine_networking_utils.js";
 import { DeviceUtilities, getParam } from "../../engine_utils.js";
 import { onXRSessionStart, XRSessionEventArgs } from "../../xr/events.js";
 import { ButtonsFactory } from "../buttons.js";
 import { ensureFonts, iconFontUrl, loadFont } from "../fonts.js";
 import { getIconElement } from "../icons.js";
+import { showBalloonMessage } from "../../debug/debug.js";
 import { NeedleLogoElement } from "../logo-element.js";
 import { NeedleSpatialMenu } from "./needle-menu-spatial.js";
 
@@ -149,6 +150,9 @@ export class NeedleMenu {
                             else console.error("NeedleMenu: onclick is not a valid link", buttoninfo.onclick);
                         }
                     }
+                    Telemetry.sendEvent(this._context, "needle-menu", {
+                        action: "button_added_via_postmessage",
+                    });
                     this._menu.appendChild(button);
                 }
                 else if (debug) console.error("NeedleMenu: unknown postMessage event", data);
@@ -935,12 +939,39 @@ export class NeedleMenuElement extends HTMLElement {
     /** @private foldout container used in compact mode */
     private readonly foldout: HTMLDivElement;
 
+
+    private readonly trackedElements: WeakSet<Node> = new WeakSet();
+    private trackElement(el: Node) {
+        if (this.trackedElements.has(el)) return;
+        this.trackedElements.add(el);
+        el.addEventListener("click", (evt) => {
+            Telemetry.sendEvent(this._context, "needle-menu", {
+                action: "button_clicked",
+                element: evt.target instanceof Node ? evt.target.nodeName : el.nodeName,
+                label: el.textContent,
+                title: (el instanceof HTMLElement) ? el.title : undefined,
+                pointerid: (evt instanceof PointerEvent) ? evt.pointerId : undefined,
+            });
+        });
+        // el.addEventListener("pointerenter", (evt) => {
+        //     Telemetry.sendEvent(this._context, "needle-menu", {
+        //         action: "button_hovered",
+        //         element: evt.target instanceof Node ? evt.target.nodeName : el.nodeName,
+        //         label: el.textContent,
+        //         title: (el instanceof HTMLElement) ? el.title : undefined,
+        //         pointerid: (evt instanceof PointerEvent) ? evt.pointerId : undefined,
+        //     });
+        // });
+    }
+
     append(...nodes: (string | Node)[]): void {
         for (const node of nodes) {
             if (typeof node === "string") {
                 const element = document.createTextNode(node);
+                this.trackElement(element);
                 this.options.appendChild(element);
             } else {
+                this.trackElement(node);
                 this.options.appendChild(node);
             }
         }
@@ -987,9 +1018,10 @@ export class NeedleMenuElement extends HTMLElement {
             if (node.class) {
                 button.classList.add(node.class);
             }
+
             node = button as unknown as T;
         }
-
+        this.trackElement(node);
         const res = this.options.appendChild(node);
         return res;
     }
@@ -997,8 +1029,10 @@ export class NeedleMenuElement extends HTMLElement {
         for (const node of nodes) {
             if (typeof node === "string") {
                 const element = document.createTextNode(node);
+                this.trackElement(element);
                 this.options.prepend(element);
             } else {
+                this.trackElement(node);
                 this.options.prepend(node);
             }
         }
@@ -1142,8 +1176,15 @@ export class NeedleMenuElement extends HTMLElement {
         const getCurrentWidth = () => {
             return this.options.clientWidth + this.logoContainer.clientWidth;
         }
+
+        let lastSpaceLeft = -1;
         const getSpaceLeft = () => {
-            return availableWidth - getCurrentWidth();
+            const spaceLeft = availableWidth - getCurrentWidth();
+            if (debug && spaceLeft !== lastSpaceLeft) {
+                lastSpaceLeft = spaceLeft;
+                showBalloonMessage(`Menu space left: ${spaceLeft.toFixed(0)}px`);
+            }
+            return spaceLeft;
         }
     }
 

package/src/engine/xr/NeedleXRSession.ts

@@ -6,6 +6,7 @@ import { Context, FrameEvent } from "../engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine_context_registry.js";
 import { isDestroyed } from "../engine_gameobject.js";
 import { Gizmos } from "../engine_gizmos.js";
+import { Telemetry } from "../engine_license.js";
 import { registerFrameEventCallback, unregisterFrameEventCallback } from "../engine_lifecycle_functions_internal.js";
 import { getBoundingBox, getTempQuaternion, getTempVector, getWorldPosition, getWorldQuaternion, getWorldScale, setWorldPosition, setWorldQuaternion, setWorldScale } from "../engine_three_utils.js";
 import type { ICamera, IComponent, INeedleXRSession } from "../engine_types.js";
@@ -98,12 +99,12 @@ async function handleSessionGranted() {
         }
         // Check if AR is supported, otherwise we can't do anything
         if (!(await navigator.xr?.isSessionSupported("immersive-ar")) && defaultMode === "immersive-ar") {
-            console.warn("[NeedleXRSession:granted] Neither VR nor AR supported, aborting session start.");
+            // console.warn("[NeedleXRSession:granted] Neither VR nor AR supported, aborting session start.");
             // showBalloonMessage("NeidleXRSession: Neither VR nor AR supported, aborting session start.");
             return;
         }
     } catch (e) {
-        console.error("[NeedleXRSession:granted] Error while checking XR support:", e);
+        console.debug("[NeedleXRSession:granted] Error while checking XR support:", e);
         // showBalloonWarning("NeedleXRSession: Error while checking XR support: " + (e as Error).message);
         return;
     }
@@ -148,6 +149,7 @@ async function handleSessionGranted() {
         navigator.xr?.addEventListener('sessiongranted', async () => {
             // enableSpatialConsole(true);
 
+
             const lastSessionMode = sessionStorage.getItem("needle_xr_session_mode") as XRSessionMode;
             const lastSessionInit = sessionStorage.getItem("needle_xr_session_init") ?? null;
             const init = lastSessionInit ? JSON.parse(lastSessionInit) : null;
@@ -466,6 +468,10 @@ export class NeedleXRSession implements INeedleXRSession {
             }
 
             if (mode === "quicklook") {
+                Telemetry.sendEvent(Context.Current, "xr", {
+                    action: "quicklook_export",
+                    source: "NeedleXRSession.start",
+                });
                 InternalUSDZRegistry.exportAndOpen();
                 return null;
             }
@@ -478,6 +484,13 @@ export class NeedleXRSession implements INeedleXRSession {
                 url.searchParams.set("url", location.href);
 
                 const urlStr = url.toString();
+
+                Telemetry.sendEvent(Context.Current, "xr", {
+                    action: "app_clip_launch",
+                    source: "NeedleXRSession.start",
+                    url: urlStr,
+                });
+
                 // if we are in an iframe, we need to navigate the top window
                 const topWindow = window.top || window;
                 try {
@@ -606,6 +619,12 @@ export class NeedleXRSession implements INeedleXRSession {
             listener({ mode, init });
         }
         if (debug) showBalloonMessage("Requesting " + mode + " session (" + Date.now() + ")");
+        Telemetry.sendEvent(Context.Current, "xr", {
+            action: "session_request",
+            mode: mode,
+            features: ((init.requiredFeatures ?? []).concat(init.optionalFeatures ?? [])).join(","),
+            source: "NeedleXRSession.start",
+        });
         this._currentSessionRequest = navigator?.xr?.requestSession(mode, init);
         this._currentSessionRequestMode = mode;
         /**@type {XRSystem} */
@@ -1182,6 +1201,12 @@ export class NeedleXRSession implements INeedleXRSession {
 
         console.debug("XR Session ended");
 
+        Telemetry.sendEvent(Context.Current, "xr", {
+            action: "session_end",
+            mode: this.mode,
+            source: "NeedleXRSession.onEnd",
+        });
+
         deleteSessionInfo();
 
         this.onAfterRender();

package/src/engine-components/DragControls.ts

@@ -447,7 +447,7 @@ export class DragControls extends Behaviour implements IPointerEventHandler {
         if (!this || !this._isDragging) return;
         this._isDragging = false;
         for (const rb of this._draggingRigidbodies) {
-            rb.setVelocity(rb.smoothedVelocity);
+            rb.setVelocity(rb.smoothedVelocity.multiplyScalar(this.context.time.deltaTime));
         }
         this._draggingRigidbodies.length = 0;
         this._targetObject = null;

package/src/engine-components/DropListener.ts

@@ -10,7 +10,7 @@ import { BlobStorage } from "../engine/engine_networking_blob.js";
 import { PreviewHelper } from "../engine/engine_networking_files.js";
 import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
-import { fitObjectIntoVolume, getBoundingBox, placeOnSurface } from "../engine/engine_three_utils.js";
+import { fitObjectIntoVolume, getBoundingBox, getWorldScale, placeOnSurface } from "../engine/engine_three_utils.js";
 import { Model, Vec3 } from "../engine/engine_types.js";
 import { getParam, setParamWithoutReload } from "../engine/engine_utils.js";
 import { determineMimeTypeFromExtension } from "../engine/engine_utils_format.js";
@@ -111,6 +111,7 @@ const blobKeyName = "blob";
 
 /** The DropListener component is used to listen for drag and drop events in the browser and add the dropped files to the scene  
  * It can be used to allow users to drag and drop glTF files into the scene to add new objects.  
+ * Existing child objects will behave like placeholders and will be removed when new files are dropped.  
  * 
  * If {@link useNetworking} is enabled, the DropListener will automatically synchronize dropped files to other connected clients.
  * Enable {@link fitIntoVolume} to automatically scale dropped objects to fit within the volume defined by {@link fitVolumeSize}.
@@ -522,22 +523,42 @@ export class DropListener extends Behaviour {
 
         const obj = model.scene;
 
-        // use attach to ignore the DropListener scale (e.g. if the parent object scale is not uniform)
-        this.gameObject.attach(obj);
-        obj.position.set(0, 0, 0);
-        obj.quaternion.identity();
+        obj.position.copy(this.gameObject.worldPosition);
+        const scale = getWorldScale(this.gameObject);
 
-        this._addedObjects.push(obj);
-        this._addedModels.push(model);
+        let localPos = new Vector3(0,0,0);
+        scale.x = Math.abs(scale.x);
+        scale.y = Math.abs(scale.y);
+        scale.z = Math.abs(scale.z);
+        let localScale =obj.scale.clone();
+
+        // TODOs: handle rotation when Gizmos APIs has changed to support it
 
-        const volume = new Box3().setFromCenterAndSize(new Vector3(0, this.fitVolumeSize.y * .5, 0).add(this.gameObject.worldPosition), this.fitVolumeSize);
+        const volume = new Box3().setFromCenterAndSize(new Vector3(0, this.fitVolumeSize.y * scale.y * .5, 0).add(this.gameObject.worldPosition), this.fitVolumeSize.clone().multiply(scale));
         if (debug) Gizmos.DrawWireBox3(volume, 0x0000ff, 5);
         if (this.fitIntoVolume) {
+
             fitObjectIntoVolume(obj, volume, {
                 position: !this.placeAtHitPosition
             });
+
+            // to match parent scale later, divide by it
+            localScale = obj.scale.clone().divide(scale);
+            // just take the computed offset from fitting 
+            localPos = obj.worldPosition.clone().sub(this.gameObject.worldPosition).divide(scale);
+            if (debug) Gizmos.DrawSphere(localPos, 0.1, 0xff0000, 5);
         }
 
+        // use attach to ignore the DropListener scale (e.g. if the parent object scale is not uniform)
+        this.gameObject.attach(obj);
+        obj.position.copy(localPos);
+        obj.quaternion.identity();
+        obj.scale.copy(localScale);
+        if (debug) Gizmos.DrawArrow(this.gameObject.worldPosition, obj.getWorldPosition(new Vector3()), 0x00ff00, 5);
+
+        this._addedObjects.push(obj);
+        this._addedModels.push(model);
+
         if (this.placeAtHitPosition && ctx && ctx.screenposition) {
             obj.visible = false; // < don't raycast on the placed object
             const rc = this.context.physics.raycast({ screenPoint: this.context.input.convertScreenspaceToRaycastSpace(ctx.screenposition.clone()) });

package/src/engine-components/EventList.ts

@@ -78,7 +78,11 @@ export class CallInfo {
             // If the target is a property
             else {
                 if (this.arguments) {
-                    this.target[this.methodName] = this.arguments[0] || args[0];
+
+                    if (args !== undefined && args.length > 0)
+                        this.target[this.methodName] = args[0];
+                    else
+                        this.target[this.methodName] = this.arguments[0];
                 }
                 else {
                     this.target[this.methodName] = args[0];