@needle-tools/engine 4.12.3 → 4.12.4-next.4498846

package/src/engine/xr/NeedleXRSession.ts

@@ -454,6 +454,9 @@ export class NeedleXRSession implements INeedleXRSession {
      */
     static async start(mode: XRSessionMode | "ar" | "quicklook", init?: XRSessionInit, context?: Context): Promise<NeedleXRSession | null> {
 
+        // setup session init args, make sure we have default values
+        if (!init) init = {};
+
         // handle iOS platform where "immersive-ar" is special:
         // - we either launch QuickLook
         // - or forward to the Needle App Clip experience for WebXR AR
@@ -477,7 +480,9 @@ export class NeedleXRSession implements INeedleXRSession {
             }
 
             if (!arSupported && (mode === "immersive-ar" || mode === "ar")) {
-                // const debugAppClip = getParam("debugappclip")
+
+                this.invokeSessionRequestStart("immersive-ar", init);
+
                 // Forward to the AppClip experience (Using the apple.com url the appclip overlay shows immediately)
                 // const url =`https://appclip.needle.tools/ar?url=${(location.href)}`;
                 const url = new URL("https://appclip.apple.com/id?p=tools.needle.launch-app.Clip");
@@ -511,6 +516,10 @@ export class NeedleXRSession implements INeedleXRSession {
                     else window.location.href = urlStr;
                 }
 
+                setTimeout(() => {
+                    this.invokeSessionRequestEnd("immersive-ar", init || {}, null);
+                }, 3000);
+
                 return null;
             }
         }
@@ -549,9 +558,6 @@ export class NeedleXRSession implements INeedleXRSession {
 
         //performance.mark('NeedleXRSession start');
 
-        // setup session init args, make sure we have default values
-        if (!init) init = {};
-
         switch (mode) {
 
             // Setup VR initialization parameters
@@ -615,9 +621,7 @@ export class NeedleXRSession implements INeedleXRSession {
                 script.onBeforeXR(mode, init);
             }
         }
-        for (const listener of this._sessionRequestStartListeners) {
-            listener({ mode, init });
-        }
+        this.invokeSessionRequestStart(mode, init);
         if (debug) showBalloonMessage("Requesting " + mode + " session (" + Date.now() + ")");
         Telemetry.sendEvent(Context.Current, "xr", {
             action: "session_request",
@@ -637,9 +641,7 @@ export class NeedleXRSession implements INeedleXRSession {
         });
         this._currentSessionRequest = undefined;
         this._currentSessionRequestMode = null;
-        for (const listener of this._sessionRequestEndListeners) {
-            listener({ mode, init, newSession: newSession || null });
-        }
+        this.invokeSessionRequestEnd(mode, init, newSession);
         if (!newSession) {
             console.warn("XR Session request was rejected");
             return null;
@@ -650,6 +652,17 @@ export class NeedleXRSession implements INeedleXRSession {
         return session;
     }
 
+    private static invokeSessionRequestStart(mode: XRSessionMode, init: XRSessionInit) {
+        for (const listener of this._sessionRequestStartListeners) {
+            listener({ mode, init });
+        }
+    }
+    private static invokeSessionRequestEnd(mode: XRSessionMode, init: XRSessionInit, session: XRSession | null | undefined | void) {
+        for (const listener of this._sessionRequestEndListeners) {
+            listener({ mode, init, newSession: session || null });
+        }
+    }
+
     static setSession(mode: XRSessionMode, session: XRSession, init: XRSessionInit, context: Context) {
         if (this._activeSession) {
             console.error("A XRSession is already running");

package/src/engine-components/Animation.ts

@@ -1,4 +1,5 @@
 import { AnimationAction, AnimationClip, AnimationMixer, LoopOnce, LoopRepeat } from "three";
+import { AnimationUtils } from "../engine/engine_animation.js";
 
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
@@ -447,7 +448,7 @@ export class Animation extends Behaviour implements IAnimationComponent {
             action.time = Mathf.lerp(options.minMaxOffsetNormalized.x, options.minMaxOffsetNormalized.y, Math.random()) * clip.duration;
         }
         // If the animation is at the end, reset the time
-        else if(action.time >= action.getClip().duration) {
+        else if (action.time >= action.getClip().duration) {
             action.time = 0;
         }
 
@@ -473,6 +474,8 @@ export class Animation extends Behaviour implements IAnimationComponent {
         action.paused = false;
         action.play();
 
+        window.requestAnimationFrame(() => AnimationUtils.testIfRootCanAnimate(action));
+
         if (debug) console.log("PLAY", action.getClip().name, action)
         const handle = new AnimationHandle(action, this.mixer!, options, _ => {
             this._handles.splice(this._handles.indexOf(handle), 1);

package/src/engine-components/AnimatorController.ts

@@ -1,6 +1,7 @@
 import { AnimationAction, AnimationClip, AnimationMixer, AxesHelper, Euler, KeyframeTrack, LoopOnce, Object3D, Quaternion, Vector3 } from "three";
 
 import { isDevEnvironment } from "../engine/debug/index.js";
+import { AnimationUtils } from "../engine/engine_animation.js";
 import { Mathf } from "../engine/engine_math.js";
 import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { assign, SerializationContext, TypeSerializer } from "../engine/engine_serialization_core.js";
@@ -775,6 +776,8 @@ export class AnimatorController {
             else action.weight = 1;
             action.play();
 
+            window.requestAnimationFrame(() => AnimationUtils.testIfRootCanAnimate(action));
+
             if (this.rootMotionHandler) {
                 this.rootMotionHandler.onStart(action);
             }

package/src/engine-components/Light.ts

@@ -1,4 +1,5 @@
 import { CameraHelper, Color, DirectionalLight, DirectionalLightHelper, Light as ThreeLight, OrthographicCamera, PointLight, SpotLight, Vector3 } from "three";
+import { get } from "three-mesh-ui/build/types/core/DefaultValues.js";
 
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { FrameEvent } from "../engine/engine_setup.js";
@@ -82,25 +83,64 @@ enum LightShadows {
 export class Light extends Behaviour implements ILight {
 
     /**
-     * The type of light (spot, directional, point, etc.)
+     * The type of light (spot, directional, point, etc.)  
+     * Can not be changed at runtime.  
      */
     @serializable()
     private type: LightType = 0;
 
     /**
-     * The maximum distance the light affects
+     * The maximum distance the light affects.  
+     * Only applicable for spot and point lights.
      */
-    public range: number = 1;
-    
+    @serializable()
+    get range(): number {
+        return this._range;
+    }
+    set range(value: number) {
+        this._range = value;
+        if (this.light && (this.light.type === "SpotLight" || this.light.type === "PointLight") && ("distance" in this.light)) {
+            this.light.distance = value;
+        }
+    }
+    private _range: number = 1;
+
     /**
-     * The full outer angle of the spotlight cone in degrees
+     * The full outer angle of the spotlight cone in degrees.  
+     * Only applicable for spot lights.
      */
-    public spotAngle: number = 1;
-    
+    @serializable()
+    get spotAngle(): number {
+        return this._spotAngle;
+    }
+    set spotAngle(value: number) {
+        this._spotAngle = value;
+        if (this.light && this.light.type === "SpotLight" && ("angle" in this.light)) {
+            (this.light as SpotLight).angle = toRadians(value / 2);
+        }
+    }
+    private _spotAngle: number = 30;
+
+
     /**
-     * The angle of the inner cone in degrees for soft-edge spotlights
+     * The angle of the inner cone in degrees for soft-edge spotlights.  
+     * Must be less than or equal to the outer spot angle.  
+     * Only applicable for spot lights.
      */
-    public innerSpotAngle: number = 1;
+    @serializable()
+    get innerSpotAngle(): number {
+        return this._innerSpotAngle;
+    }
+    set innerSpotAngle(value: number) {
+        this._innerSpotAngle = value;
+        if (this.light && this.light.type === "SpotLight" && ("penumbra" in this.light)) {
+            const outerAngle = this.spotAngle;
+            const innerAngle = value;
+            const penumbra = 1 - (toRadians(innerAngle / 2) / toRadians(outerAngle / 2));
+            (this.light as SpotLight).penumbra = penumbra;
+        }
+    }
+    private _innerSpotAngle: number = 10;
 
     /**
      * The color of the light
@@ -194,14 +234,7 @@ export class Light extends Behaviour implements ILight {
     set intensity(val: number) {
         this._intensity = val;
         if (this.light) {
-            let factor: number = 1;
-            if (this.context.isInXR && this._webARRoot) {
-                const scaleFactor = this._webARRoot?.arScale;
-                if (typeof scaleFactor === "number" && scaleFactor > 0) {
-                    factor /= scaleFactor;
-                }
-            }
-            this.light.intensity = val * factor;
+            this.light.intensity = val;
         }
         if (debug) console.log("Set light intensity to " + this._intensity, val, this)
     }
@@ -297,10 +330,6 @@ export class Light extends Behaviour implements ILight {
         return vec;
     }
 
-    // public updateIntensity() {
-    //     this.intensity = this._intensity;
-    // }
-
     awake() {
         this.color = new Color(this.color ?? 0xffffff);
         if (debug) console.log(this.name, this);
@@ -334,27 +363,6 @@ export class Light extends Behaviour implements ILight {
         }
     }
 
-    private _webXRStartedListener?: Function;
-    private _webXREndedListener?: Function;
-    private _webARRoot?: WebARSessionRoot;
-
-    onEnterXR(_args: NeedleXREventArgs): void {
-        this._webARRoot = GameObject.getComponentInParent(this.gameObject, WebARSessionRoot) ?? undefined;
-        // this.startCoroutine(this._updateLightIntensityInARRoutine());
-    }
-
-    // private *_updateLightIntensityInARRoutine() {
-    //     while (this.context.isInAR) {
-    //         yield;
-    //         // this.updateIntensity();
-    //         for (let i = 0; i < 30; i++) yield;
-    //     }
-    // }
-
-    onLeaveXR(_args: NeedleXREventArgs): void {
-        // this.updateIntensity();
-    }
-
     /**
      * Creates the appropriate three.js light based on the configured light type
      * and applies all settings like shadows, intensity, and color.

package/src/engine-components/webxr/WebXR.ts

@@ -551,8 +551,6 @@ export class WebXR extends Behaviour {
      * and device capabilities. Handles creating AR, VR, QuickLook buttons and utility buttons like QR codes.
      */
     private handleCreatingHTML() {
-        const xrButtonsPriority = 50;
-
         if (this.createARButton || this.createVRButton || this.useQuicklookExport) {
             // Quicklook / iOS
             if ((DeviceUtilities.isiOS() && DeviceUtilities.isSafari()) || debugQuicklook) {
@@ -560,18 +558,18 @@ export class WebXR extends Behaviour {
                     const usdzExporter = GameObject.findObjectOfType(USDZExporter);
                     if (!usdzExporter || (usdzExporter && usdzExporter.allowCreateQuicklookButton)) {
                         const button = this.getButtonsFactory().createQuicklookButton();
-                        this.addButton(button, xrButtonsPriority);
+                        this.addButton(button);
                     }
                 }
             }
             // WebXR
             if (this.createARButton) {
                 const arbutton = this.getButtonsFactory().createARButton();
-                this.addButton(arbutton, xrButtonsPriority);
+                this.addButton(arbutton);
             }
             if (this.createVRButton) {
                 const vrbutton = this.getButtonsFactory().createVRButton();
-                this.addButton(vrbutton, xrButtonsPriority);
+                this.addButton(vrbutton);
             }
         }
 
@@ -579,7 +577,7 @@ export class WebXR extends Behaviour {
             NeedleXRSession.isVRSupported().then(supported => {
                 if (!supported) {
                     const button = this.getButtonsFactory().createSendToQuestButton();
-                    this.addButton(button, xrButtonsPriority);
+                    this.addButton(button);
                 }
             });
         }
@@ -592,7 +590,7 @@ export class WebXR extends Behaviour {
             }
             else if (!DeviceUtilities.isMobileDevice()) {
                 const qrCode = ButtonsFactory.getOrCreate().createQRCode();
-                this.addButton(qrCode, xrButtonsPriority);
+                this.addButton(qrCode,);
             }
         }
     }
@@ -607,9 +605,8 @@ export class WebXR extends Behaviour {
      * @param button The HTML element to add
      * @param priority The button's priority value (lower numbers appear first)
      */
-    private addButton(button: HTMLElement, priority: number) {
+    private addButton(button: HTMLElement) {
         this._buttons.push(button);
-        button.setAttribute("priority", priority.toString());
         this.context.menu.appendChild(button);
     }
 

package/src/engine-components/webxr/WebXRImageTracking.ts

@@ -1,7 +1,7 @@
 import { ImageBitmapLoader, Matrix4, Object3D, Quaternion, Vector3 } from "three";
 import { Object3DEventMap } from "three";
 
-import { isDevEnvironment, showBalloonWarning } from "../../engine/debug/index.js";
+import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../engine/debug/index.js";
 import { AssetReference } from "../../engine/engine_addressables.js";
 import { Context } from "../../engine/engine_context.js";
 import { serializable } from "../../engine/engine_serialization.js";
@@ -18,6 +18,8 @@ import { Renderer } from "../Renderer.js";
 
 const debug = getParam("debugimagetracking");
 
+// #region WebXRTrackedImage
+
 export class WebXRTrackedImage {
 
     get url(): string { return this._trackedImage.image ?? ""; }
@@ -100,6 +102,10 @@ declare type InitialTrackedObjectState = {
     parent: Object3D | undefined | null;
     matrix: Matrix4;
 }
+
+
+// #region Model
+
 /**
  * WebXRImageTracking allows you to track images in the real world and place objects on top of them.  
  * This component is only available in WebXR sessions.  
@@ -171,6 +177,8 @@ export class WebXRImageTrackingModel {
     }
 }
 
+
+// #region USDZ Extension
 class ImageTrackingExtension implements IUSDExporterExtension {
 
 
@@ -289,6 +297,7 @@ class ImageTrackingExtension implements IUSDExporterExtension {
 }
 
 
+// #region Tracking Component
 /**
  * Add this component to a object to enable image tracking in WebXR sessions.    
  * 
@@ -394,7 +403,7 @@ export class WebXRImageTracking extends Behaviour {
             if (!args.optionalFeatures.includes("image-tracking"))
                 args.optionalFeatures.push("image-tracking");
 
-            args.trackedImages = [];
+            if(!args.trackedImages) args.trackedImages = [];
             for (const trackedImage of this.trackedImages) {
                 if (trackedImage.image?.length && trackedImage.widthInMeters > 0) {
                     const bitmap = _imageElements.get(trackedImage.image);
@@ -533,6 +542,7 @@ export class WebXRImageTracking extends Behaviour {
                 if (trackedImage.model === key) {
                     // Make sure to keep the object visible if it's marked as static OR is tracked OR was tracked very recently (e.g. low framerate or bad tracking on device)
                     const timeSinceLastTracking = Date.now() - value.lastTrackingTime;
+                    if(debug) showBalloonMessage(key.image + ", State: " + trackedImage.state + (key.imageDoesNotMove ? " (static)" : "") + (timeSinceLastTracking <= hysteresis ? " (hysteresis)" : ""));
                     if (key.imageDoesNotMove || trackedImage.state === "tracked" || timeSinceLastTracking <= hysteresis) {
                         found = true;
                         break;