Needle Engine 3.25.0

Files changed (18) hide show

src/engine-components/AudioSource.ts +18 -48
src/engine-components/AxesHelper.ts +2 -0
src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts +3 -3
src/engine-components/ui/Button.ts +4 -0
src/engine-components/codegen/components.ts +1 -0
src/engine-components/ContactShadows.ts +26 -9
src/engine/engine_camera.ts +18 -3
src/engine/engine_math.ts +85 -2
src/engine/engine_physics_rapier.ts +1 -1
src/engine/engine_physics.ts +23 -1
src/engine-components/ui/EventSystem.ts +34 -5
src/engine-components/OrbitControls.ts +161 -80
src/engine-components/ui/PointerEvents.ts +18 -0
src/engine-components/ui/Raycaster.ts +14 -0
src/engine/codegen/register_types.ts +2 -0
src/engine-components/webxr/WebARSessionRoot.ts +2 -0
src/engine-components/webxr/WebXR.ts +4 -5
src/engine-components/webxr/WebXRImageTracking.ts +77 -66

src/engine-components/AudioSource.ts CHANGED Viewed

@@ -26,63 +26,33 @@
 }
+let userInteractionRegistered = false;
+function onUserInteraction() {
+    userInteractionRegistered = true;
+}
+document.addEventListener('pointerdown', onUserInteraction);
+document.addEventListener('click', onUserInteraction);
+document.addEventListener('dragstart', onUserInteraction);
+document.addEventListener('touchstart', onUserInteraction);
 export class AudioSource extends Behaviour {
-    private static _didCallBeginWaitForUserInteraction: boolean = false;
     public static get userInteractionRegistered(): boolean {
-        if (!AudioSource._didCallBeginWaitForUserInteraction) {
-            AudioSource._didCallBeginWaitForUserInteraction = true;
-            AudioSource._beginWaitForUserInteraction();
-        }
-        return AudioSource._userInteractionRegistered;
+        return userInteractionRegistered;
     }
     private static callbacks: Function[] = [];
     public static registerWaitForAllowAudio(cb: Function) {
         if (cb !== null) {
-            if (this._userInteractionRegistered) {
+            if (userInteractionRegistered) {
                 cb();
                 return;
             }
             if (this.callbacks.indexOf(cb) === -1)
                 this.callbacks.push(cb);
-            if (!AudioSource._didCallBeginWaitForUserInteraction) {
-                AudioSource._didCallBeginWaitForUserInteraction = true;
-                AudioSource._beginWaitForUserInteraction();
-            }
         }
     }
-    private static _userInteractionRegistered: boolean = false;
-    private static _beginWaitForUserInteraction(cb: Function | null = null) {
-        if (this._userInteractionRegistered) {
-            if (cb) cb();
-            return;
-        }
-        if (cb !== null)
-            this.registerWaitForAllowAudio(cb);
-        const callback = () => {
-            if (fn == undefined) return;
-            if (AudioSource._userInteractionRegistered) return;
-            AudioSource._userInteractionRegistered = true;
-            if (debug) console.log("🔊 registered interaction, can play audio now");
-            document.removeEventListener('pointerdown', fn);
-            document.removeEventListener('click', fn);
-            document.removeEventListener('dragstart', fn);
-            document.removeEventListener('touchstart', fn);
-            for (const cb of this.callbacks) {
-                cb();
-            }
-            this.callbacks.length = 0;
-        };
-        const fn = callback.bind(this);
-        document.addEventListener('pointerdown', fn);
-        document.addEventListener('click', fn);
-        document.addEventListener('dragstart', fn);
-        document.addEventListener('touchstart', fn);
-    }
     @serializable(URL)
     clip: string | MediaStream = "";
@@ -160,7 +130,7 @@
     private _audioElement: HTMLAudioElement | null = null;
     public get Sound(): PositionalAudio | null {
-        if (!this.sound && AudioSource._userInteractionRegistered) {
+        if (!this.sound && AudioSource.userInteractionRegistered) {
             let listener = GameObject.getComponent(this.context.mainCamera, AudioListener) ?? GameObject.findObjectOfType(AudioListener, this.context);
             if (!listener && this.context.mainCamera) listener = GameObject.addNewComponent(this.context.mainCamera, AudioListener);
             if (listener?.listener) {
@@ -181,8 +151,8 @@
     }
     onEnable(): void {
-        if (!AudioSource._userInteractionRegistered) {
-            AudioSource._beginWaitForUserInteraction(() => {
+        if (!AudioSource.userInteractionRegistered) {
+            AudioSource.registerWaitForAllowAudio(() => {
                 if (this.enabled && !this.destroyed && this.shouldPlay)
                     this.onNewClip(this.clip);
             });
@@ -211,8 +181,8 @@
                 }
                 break;
             case "visible":
-                if (debug) console.log("visible", this.enabled, this.playOnAwake, !this.isPlaying, AudioSource._userInteractionRegistered, this.wasPlaying);
-                if (this.enabled && this.playOnAwake && !this.isPlaying && AudioSource._userInteractionRegistered && this.wasPlaying) {
+                if (debug) console.log("visible", this.enabled, this.playOnAwake, !this.isPlaying, AudioSource.userInteractionRegistered, this.wasPlaying);
+                if (this.enabled && this.playOnAwake && !this.isPlaying && AudioSource.userInteractionRegistered && this.wasPlaying) {
                     this.play();
                 }
                 break;
@@ -257,7 +227,7 @@
             if (debug) console.log(this.name, this.shouldPlay, AudioSource.userInteractionRegistered, this);
-            if (this.shouldPlay && AudioSource._userInteractionRegistered)
+            if (this.shouldPlay && AudioSource.userInteractionRegistered)
                 this.play();
         });
     }
@@ -322,7 +292,7 @@
     /** Play a mediastream */
     play(clip: string | MediaStream | undefined = undefined) {
         // use audio source's clip when no clip is passed in
-        if(!clip && this.clip)
+        if (!clip && this.clip)
             clip = this.clip;
         // We only support strings and media stream

src/engine-components/AxesHelper.ts CHANGED Viewed

@@ -17,6 +17,8 @@
         if (this.isGizmo && !params.showGizmos) return;
         if (!this._axes)
             this._axes = new _AxesHelper(this.length);
+        this._axes.layers.disableAll();
+        this._axes.layers.set(this.layer);
         this.gameObject.add(this._axes);
         const mat: any = this._axes.material;
         if (mat) {

src/engine-components/export/usdz/extensions/behavior/BehaviourComponents.ts CHANGED Viewed

@@ -478,16 +478,16 @@
     onPointerClick(args: PointerEventData) {
         args.use();
-        if (!this.target && !this.clip) return;
+        if (!this.clip) return;
         if (!this.target) {
             const newAudioSource = this.gameObject.addNewComponent(AudioSource);
             if (newAudioSource) {
+                this.target = newAudioSource;
                 newAudioSource.spatialBlend = 1;
                 newAudioSource.volume = 1;
                 newAudioSource.loop = false;
-                this.target = newAudioSource;
             }
         }

src/engine-components/ui/Button.ts CHANGED Viewed

@@ -7,6 +7,7 @@
 import { Animator } from "../Animator.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { showBalloonMessage } from "../../engine/debug/index.js";
+import { GraphicRaycaster, ObjectRaycaster, Raycaster } from "./Raycaster.js";
 const debug = getParam("debugbutton");
@@ -176,6 +177,9 @@
     start() {
         this._image?.setInteractable(this.interactable);
+        if (!this.gameObject.getComponentInParent(Raycaster)) {
+            this.gameObject.addComponent(GraphicRaycaster);
+        }
     }
     onEnable() {

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -38,6 +38,7 @@
 export { Button } from "../ui/Button.js";
 export { CallInfo } from "../EventList.js";
 export { Camera } from "../Camera.js";
+export { CameraTargetReachedEvent } from "../OrbitControls.js";
 export { Canvas } from "../ui/Canvas.js";
 export { CanvasGroup } from "../ui/CanvasGroup.js";
 export { CapsuleCollider } from "../Collider.js";

src/engine-components/ContactShadows.ts CHANGED Viewed

@@ -4,7 +4,11 @@
 import { CustomBlending, DoubleSide, Group, Matrix4, MaxEquation, Mesh, MeshBasicMaterial, MeshDepthMaterial, MinEquation, OrthographicCamera, PlaneGeometry, ShaderMaterial, WebGLRenderTarget } from "three";
 import { HorizontalBlurShader } from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
 import { VerticalBlurShader } from 'three/examples/jsm/shaders/VerticalBlurShader.js';
+import { getParam } from "../engine/engine_utils.js"
+import { setCustomVisibility } from "../engine/js-extensions/Layers.js";
+const debug = getParam("debugcontactshadows");
 // Adapted from https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadow_contact.html.
 // Improved with
@@ -40,6 +44,7 @@
     private verticalBlurMaterial?: ShaderMaterial;
     awake(): void {
+        if(debug) console.log("Create ContactShadows on " + this.gameObject.name, this)
         const textureSize = 512;
         this.shadowGroup = new Group();
@@ -55,11 +60,17 @@
         // make a plane and make it face up
         const planeGeometry = new PlaneGeometry(1, 1).rotateX(Math.PI / 2);
-        //@ts-ignore
-        if (this.gameObject.isMesh) {
+        if (this.gameObject instanceof Mesh) {
+            if (debug) console.log("ContactShadows: use existing mesh", this.gameObject)
             this.plane = this.gameObject as any as Mesh;
-            const mat = this.plane!.material as MeshBasicMaterial;
+            // Make sure we clone the material once because it might be used on another object as well
+            const mat = this.plane.material = (this.plane.material as MeshBasicMaterial).clone();
             mat.map = this.renderTarget.texture;
+            mat.opacity = this.opacity;
+            // mat.transparent = true;
+            // mat.depthWrite = false;
+            // mat.needsUpdate = true;
             // When someone makes a custom mesh, they can set these values right on the material.
             // mat.opacity = this.state.plane.opacity;
             // mat.transparent = true;
@@ -85,7 +96,9 @@
                 depthWrite: true,
                 stencilWrite: true,
                 colorWrite: false,
-            })).rotateX(Math.PI).translateY(0.0001);
+            }))
+                // .rotateX(Math.PI)
+                .translateY(-0.0001);
             this.occluderMesh.renderOrder = -100;
             this.gameObject.add(this.occluderMesh);
         }
@@ -159,13 +172,12 @@
         if (!this.renderTarget || !this.renderTargetBlur ||
             !this.depthMaterial || !this.shadowCamera ||
             !this.blurPlane || !this.shadowGroup || !this.plane ||
-            !this.horizontalBlurMaterial || !this.verticalBlurMaterial)
+            !this.horizontalBlurMaterial || !this.verticalBlurMaterial) {
+            if(debug)
+                console.error("ContactShadows: not initialized yet");
             return;
+        }
-        //@ts-ignore
-        if (this.gameObject.isMesh)
-            this.gameObject.visible = false;
         // Idea: shear the shadowCamera matrix to add some light direction to the ground shadows
         /*
         const mat = this.shadowCamera.projectionMatrix.clone();
@@ -177,6 +189,11 @@
         const planeWasVisible = this.plane.visible;
         this.plane.visible = false;
+        if (this.gameObject instanceof Mesh) {
+            this.gameObject.visible = false;
+            setCustomVisibility(this.gameObject, false);
+        }
         // remove the background
         const initialBackground = scene.background;
         scene.background = null;

src/engine/engine_camera.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ICameraController } from "./engine_types.js";
-import { Camera } from "three";
+import { Camera, Object3D } from "three";
 const $cameraController = Symbol("cameraController");
@@ -11,8 +11,23 @@
 export function setCameraController(cam: Camera, cameraController: ICameraController, active: boolean) {
     if (active)
         cam[$cameraController] = cameraController;
-    else{
-        if(cam[$cameraController] === cameraController)
+    else {
+        if (cam[$cameraController] === cameraController)
             cam[$cameraController] = null;
     }
+}
+const $autofit = Symbol("camera autofit");
+export function useForAutoFit(obj: Object3D): boolean {
+    // if autofit is not defined we assume it may be included
+    if (obj[$autofit] === undefined) return true;
+    // otherwise if anything is set except false we assume it should be included
+    return obj[$autofit] !== false;
+}
+export function setAutoFitEnabled(obj: Object3D, enabled: boolean): void {
+    obj[$autofit] = enabled;
 }

src/engine/engine_math.ts CHANGED Viewed

@@ -84,9 +84,92 @@
         }
         return true;
     }
+    easeInOutCubic(x: number) {
+        return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+    }
 };
 const vectorKeys = ["x", "y", "z", "w"]
-const Mathf = new MathHelper();
-export { Mathf };
+export const Mathf = new MathHelper();
+class LowPassFilter {
+    y: number | null;
+    s: number | null;
+    alpha = 0;
+    constructor(alpha: number) {
+        this.setAlpha(alpha);
+        this.y = null;
+        this.s = null;
+    }
+    setAlpha(alpha: number) {
+        if (alpha <= 0 || alpha > 1.0) {
+            throw new Error();
+        }
+        this.alpha = alpha;
+    }
+    filter(value: number, alpha: number) {
+        if (alpha) {
+            this.setAlpha(alpha);
+        }
+        let s: number;
+        if (!this.y) {
+            s = value;
+        } else {
+            s = this.alpha * value + (1.0 - this.alpha) * this.s!;
+        }
+        this.y = value;
+        this.s = s;
+        return s;
+    }
+    lastValue() {
+        return this.y;
+    }
+}
+export class OneEuroFilter {
+    freq: number;
+    minCutOff: number;
+    beta: number;
+    dCutOff: number;
+    x: LowPassFilter;
+    dx: LowPassFilter;
+    lasttime: number | null;
+    constructor(freq: number, minCutOff = 1.0, beta = 0.0, dCutOff = 1.0) {
+        if (freq <= 0 || minCutOff <= 0 || dCutOff <= 0) {
+            throw new Error();
+        }
+        this.freq = freq;
+        this.minCutOff = minCutOff;
+        this.beta = beta;
+        this.dCutOff = dCutOff;
+        this.x = new LowPassFilter(this.alpha(this.minCutOff));
+        this.dx = new LowPassFilter(this.alpha(this.dCutOff));
+        this.lasttime = null;
+    }
+    alpha(cutOff: number) {
+        const te = 1.0 / this.freq;
+        const tau = 1.0 / (2 * Math.PI * cutOff);
+        return 1.0 / (1.0 + tau / te);
+    }
+    filter(x: number, time: number | null = null) {
+        if (this.lasttime && time) {
+            this.freq = 1.0 / (time - this.lasttime);
+        }
+        this.lasttime = time;
+        const prevX = this.x.lastValue();
+        const dx = !prevX ? 0.0 : (x - prevX) * this.freq;
+        const edx = this.dx.filter(dx, this.alpha(this.dCutOff));
+        const cutOff = this.minCutOff + this.beta * Math.abs(edx);
+        return this.x.filter(x, this.alpha(cutOff));
+    }
+}

src/engine/engine_physics_rapier.ts CHANGED Viewed

@@ -563,7 +563,7 @@
         const finalRadius = radius * scale.x;
         // half height = distance between capsule origin and top sphere origin (not the top end of the capsule)
         height = Math.max(height, finalRadius * 2);
-        const hh = (height * .5 * scale.y) - (radius * scale.x);
+        const hh = Mathf.clamp((height * .5 * scale.y) - (radius * scale.x), 0, Number.MAX_SAFE_INTEGER);
         const desc = ColliderDesc.capsule(hh, finalRadius);
         this.createCollider(collider, desc, center);
     }

src/engine/engine_physics.ts CHANGED Viewed

@@ -8,6 +8,8 @@
 const debugPhysics = getParam("debugphysics");
 const layerMaskHelper: Layers = new Layers();
+declare type IgnoreCallback = (obj: Object3D) => void | boolean | "continue in children";
 export class RaycastOptions {
     ray: Ray | undefined = undefined;
     cam: Camera | undefined | null = undefined;
@@ -22,6 +24,10 @@
     /** raw layer mask, use setLayer to set an individual layer active */
     layerMask: Layers | number | undefined = undefined;
     ignore: Object3D[] | undefined = undefined;
+    /** if defined it's called per object before tested for intersections.
+     * Return `false` to ignore the object completely or `"continue in children"` to skip the object but continue to traverse its children (if you do raycast with `recursive` enabled)
+     * */
+    testObject?: IgnoreCallback = undefined;
     screenPointFromOffset(ox: number, oy: number) {
         if (this.screenPoint === undefined) this.screenPoint = new Vector2();
@@ -212,7 +218,8 @@
         // shoot
         results.length = 0;
-        rc.intersectObjects(targets, options.recursive, results);
+        this.intersect(this.raycaster, targets, results, options);
+        results.sort((a, b) => a.distance - b.distance);
         // TODO: instead of doing this we should temporerly set these objects to layer 2 during raycasting
         const ignorelist = options.ignore;
@@ -221,4 +228,19 @@
         }
         return results;
     }
+    private intersect(raycaster: Raycaster, objects: Object3D[], results: Intersection[], options: RaycastOptions) {
+        for (const obj of objects) {
+            const testResult = options.testObject?.(obj);
+            if (testResult === false) continue;
+            const checkObject = testResult !== "continue in children";
+            if (checkObject)
+                raycaster.intersectObject(obj, false, results);
+            if (options.recursive) {
+                this.intersect(raycaster, obj.children, results, options);
+            }
+        }
+        return results;
+    }
 }

src/engine-components/ui/EventSystem.ts CHANGED Viewed

@@ -92,11 +92,25 @@
             const res = GameObject.findObjectOfType(Raycaster, this.context);
             if (!res) {
                 const rc = GameObject.addNewComponent(this.context.scene, ObjectRaycaster);
+                rc.ignoreSkinnedMeshes = true;
                 this.raycaster.push(rc);
                 if (isDevEnvironment() || debug)
-                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found");
+                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found. Skinnedmeshes will be ignored for better performance");
             }
         }
+        if (isDevEnvironment()) {
+            const foundProblematicObjects: string[] = [];
+            for (const rc of this.raycaster) {
+                if (rc instanceof ObjectRaycaster) {
+                    if (rc.ignoreSkinnedMeshes === false) {
+                        foundProblematicObjects.push(rc.gameObject.name);
+                    }
+                }
+            }
+            if (foundProblematicObjects.length > 0)
+                console.warn("Found ObjectRaycaster that doesn't ignore skinned meshes. This might cause performance issues. Consider enabling \"ignoreSkinnedMeshes\" on the ObjectRaycaster components in your scene", foundProblematicObjects);
+        }
     }
     register(rc: Raycaster) {
@@ -166,7 +180,7 @@
         const controllerRcOpts = new RaycastOptions();
         this._selectUpdateFn ??= (_ctrl: WebXRController) => {
             controllerRcOpts.ray = _ctrl.getRay();
-            const rc = this.performRaycast(controllerRcOpts);
+            const rc = this.performRaycast(controllerRcOpts, _ctrl.selectionClick);
             if (!rc) return;
             const opts = new PointerEventData(this.context.input);
             opts.inputSource = _ctrl;
@@ -226,7 +240,7 @@
         data.inputSource = this.context.input;
         data.pointerId = pointerId;
-        data.isClicked =  pointerEvent.type == InputEvents.PointerUp && this.context.input.getPointerClicked(pointerId)
+        data.isClicked = pointerEvent.type == InputEvents.PointerUp && this.context.input.getPointerClicked(pointerId)
         // using the input type directly instead of input API -> otherwise onMove events can sometimes be getPointerUp() == true
         data.isDown = pointerEvent.type == InputEvents.PointerDown;
         data.isUp = pointerEvent.type == InputEvents.PointerUp;
@@ -238,7 +252,7 @@
         const options = new RaycastOptions();
         options.screenPoint = this.context.input.getPointerPositionRC(pointerId)!;
-        const hits = this.performRaycast(options);
+        const hits = this.performRaycast(options, data.isClicked);
         if (!hits) return;
         if (debug && data.isClicked) {
@@ -277,12 +291,27 @@
     private readonly _sortedHits: THREE.Intersection[] = [];
-    private performRaycast(opts: RaycastOptions | null): THREE.Intersection[] | null {
+    private performRaycast(opts: RaycastOptions | null, isClick: boolean): THREE.Intersection[] | null {
         if (!this.raycaster) return null;
         this._sortedHits.length = 0;
         for (const rc of this.raycaster) {
             if (!rc.activeAndEnabled) continue;
+            // TODO: it would be better to filter out the objects that actually have components with callback methods either themselves or in their parents(?)
+            let didIgnoreSkinnedMeshes: boolean | undefined = undefined;;
+            if (rc instanceof ObjectRaycaster) {
+                didIgnoreSkinnedMeshes = rc.ignoreSkinnedMeshes;
+                if (!isClick) rc.ignoreSkinnedMeshes = true;
+            }
             const res = rc.performRaycast(opts);
+            if (rc instanceof ObjectRaycaster) {
+                if (didIgnoreSkinnedMeshes !== undefined) {
+                    rc.ignoreSkinnedMeshes = didIgnoreSkinnedMeshes;
+                }
+            }
             if (res && res.length > 0)
                 this._sortedHits.push(...res);
         }

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -1,19 +1,20 @@
 import { Behaviour, GameObject } from "./Component.js";
 import { Camera } from "./Camera.js";
 import { LookAtConstraint } from "./LookAtConstraint.js";
-import { getWorldPosition, getWorldRotation, setWorldPosition, setWorldRotation, slerp } from "../engine/engine_three_utils.js";
+import { getWorldDirection, getWorldPosition, getWorldRotation, setWorldPosition, setWorldRotation, slerp } from "../engine/engine_three_utils.js";
 import { RaycastOptions } from "../engine/engine_physics.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getParam, isMobileDevice } from "../engine/engine_utils.js";
-import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3, Box3Helper, GridHelper, Mesh, ShadowMaterial, RGBA_ASTC_10x10_Format } from "three";
+import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3, Box3Helper, GridHelper, Mesh, ShadowMaterial, RGBA_ASTC_10x10_Format, Ray } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { type AfterHandleInputEvent, EventSystem, EventSystemEvents } from "./ui/EventSystem.js";
 import type { ICameraController } from "../engine/engine_types.js";
-import { setCameraController } from "../engine/engine_camera.js";
+import { setCameraController, useForAutoFit } from "../engine/engine_camera.js";
 import { SyncedTransform } from "./SyncedTransform.js";
 import { tryGetUIComponent } from "./ui/Utils.js";
 import { GroundProjectedSkybox } from "three/examples/jsm/objects/GroundProjectedSkybox.js";
+import { Mathf } from "../engine/engine_math.js";
 const freeCam = getParam("freecam");
 const debugCameraFit = getParam("debugcamerafit");
@@ -22,6 +23,21 @@
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
 let defaultKeys: any = undefined;
+export enum OrbitControlsEventsType {
+    /** Invoked with a CameraTargetReachedEvent */
+    CameraTargetReached = "target-reached",
+}
+export class CameraTargetReachedEvent extends CustomEvent<{ controls: OrbitControls, type: "camera" | "lookat" }> {
+    constructor(ctrls: OrbitControls, type: "camera" | "lookat") {
+        super(OrbitControlsEventsType.CameraTargetReached, {
+            detail: {
+                controls: ctrls,
+                type: type,
+            }
+        });
+    }
+}
 export class OrbitControls extends Behaviour implements ICameraController {
     get isCameraController(): boolean {
@@ -86,20 +102,35 @@
     debugLog: boolean = false;
-    /** The speed at which the camera target and the camera will be lerping to their destinations (if set via script or user input) */
-    targetLerpSpeed = 5;
+    /**
+     * @deprecated use `targetLerpDuration` instead
+     * ~~The speed at which the camera target and the camera will be lerping to their destinations (if set via script or user input)~~
+     * */
+    get targetLerpSpeed() { return 5 }
+    set targetLerpSpeed(v) { this.targetLerpDuration = 1 / v; }
+    /** The duration in seconds it takes for the camera look ad and position lerp to reach their destination (when set via `setCameraTargetPosition` and `setLookTargetPosition`) */
+    @serializable()
+    targetLerpDuration = 1;
     /** When enabled OrbitControls will automatically raycast find a look at target in start */
     autoTarget: boolean = true;
-    private _lookTargetPosition!: Vector3;
     private _controls: ThreeOrbitControls | null = null;
     private _cameraObject: Object3D | null = null;
-    private _lerpToTargetPosition: boolean = false;
-    private _lerpCameraToTarget: boolean = false;
-    private _cameraTargetPosition: Vector3 | null = null;
+    private _lookTargetLerpActive: boolean = false;
+    private _lookTargetStartPosition: Vector3 = new Vector3();
+    private _lookTargetEndPosition: Vector3 = new Vector3();
+    private _lookTargetLerp01: number = 0;
+    private _lookTargetLerpDuration: number = 0;
+    private _cameraLerpActive: boolean = false;
+    private _cameraStartPosition: Vector3 = new Vector3();
+    private _cameraEndPosition: Vector3 = new Vector3();
+    private _cameraLerp01: number = 0;
+    private _cameraLerpDuration: number = 0;
     private _inputs: number = 0;
     private _enableTime: number = 0; // use to disable double click when double clicking on UI
     private _startedListeningToKeyEvents: boolean = false;
@@ -114,7 +145,6 @@
     awake(): void {
         this._didStart = false;
-        this._lookTargetPosition = new Vector3();
         this._startedListeningToKeyEvents = false;
     }
@@ -123,22 +153,22 @@
         if (this.autoTarget) {
             if (this._controls) {
                 const camGo = GameObject.getComponent(this.gameObject, Camera);
-                if (camGo && !this.setFromTargetPosition()) {
+                if (camGo && !this.setLookTargetFromConstraint()) {
                     if (this.debugLog)
                         console.log("NO TARGET");
                     const worldPosition = getWorldPosition(camGo.cam);
                     const distanceToCenter = worldPosition.length();
                     const forward = new Vector3(0, 0, -distanceToCenter).applyMatrix4(camGo.cam.matrixWorld);
-                    this.setTarget(forward, true);
+                    this.setLookTargetPosition(forward, true);
                 }
-                if (this.autoTarget && !this.setFromTargetPosition()) {
+                if (this.autoTarget && !this.setLookTargetFromConstraint()) {
                     const opts = new RaycastOptions();
                     // center of the screen:
                     opts.screenPoint = new Vector2(0, 0);
                     opts.lineThreshold = 0.1;
                     const hits = this.context.physics.raycast(opts);
                     if (hits.length > 0) {
-                        this.setTarget(hits[0].point, true);
+                        this.setLookTargetPosition(hits[0].point, true);
                     }
                     if (debugCameraFit)
                         console.log("OrbitControls hits", ...hits);
@@ -267,8 +297,8 @@
             if (this.enableRotate) {
                 this.autoRotate = false;
             }
-            this._lerpCameraToTarget = false;
-            this._lerpToTargetPosition = false;
+            this._cameraLerpActive = false;
+            this._lookTargetLerpActive = false;
         }
         this._inputs = 0;
@@ -278,35 +308,32 @@
             this.setTargetFromRaycast();
         }
-        if (this._lerpToTargetPosition || this._lerpCameraToTarget) {
-            const step = this.context.time.deltaTime * this.targetLerpSpeed;
+        if (this._lookTargetLerpActive || this._cameraLerpActive) {
-            // confusing naming ahead:
-            // _targetObject: the target where the camera moves to
-            // targetPosition: the target where the look target moves to
             // lerp the camera
-            if (this._lerpCameraToTarget && this._cameraTargetPosition && this._cameraObject) {
-                // setWorldPosition(this._cameraObject, this._cameraTargetPosition);
-                if (this.useSlerp) {
-                    const position = this._cameraObject?.position;
-                    slerp(position, this._cameraTargetPosition, step);
+            if (this._cameraLerpActive && this._cameraObject) {
+                this._cameraLerp01 += this.context.time.deltaTime / this._cameraLerpDuration;
+                if (this._cameraLerp01 >= 1) {
+                    this._cameraObject.position.copy(this._cameraEndPosition);
+                    this._cameraLerpActive = false;
+                    this.dispatchEvent(new CameraTargetReachedEvent(this, "camera"));
                 }
                 else {
-                    this._cameraObject?.position.lerp(this._cameraTargetPosition, step);
+                    const t = Mathf.easeInOutCubic(this._cameraLerp01);
+                    this._cameraObject.position.lerpVectors(this._cameraStartPosition, this._cameraEndPosition, t);
                 }
-                const minDist = this.autoRotate ? .02 : .001;
-                const dist = this._cameraObject.position.distanceTo(this._cameraTargetPosition);
-                if (dist < minDist) {
-                    this._lerpCameraToTarget = false;
-                }
             }
             // lerp the look target
-            if (this._lerpToTargetPosition) {
-                this.lerpTarget(this._lookTargetPosition, step);
-                if (this._lookTargetPosition.distanceTo(this._controls.target) < .00001) {
-                    this._lerpToTargetPosition = false;
+            if (this._lookTargetLerpActive) {
+                this._lookTargetLerp01 += this.context.time.deltaTime / this._lookTargetLerpDuration;
+                if (this._lookTargetLerp01 >= 1) {
+                    this._controls.target.copy(this._lookTargetEndPosition);
+                    this._lookTargetLerpActive = false;
+                    this.dispatchEvent(new CameraTargetReachedEvent(this, "lookat"));
+                } else {
+                    const t = Mathf.easeInOutCubic(this._lookTargetLerp01);
+                    this._controls.target.lerpVectors(this._lookTargetStartPosition, this._lookTargetEndPosition, t);
                 }
             }
         }
@@ -324,76 +351,134 @@
             this._controls.dampingFactor = this.dampingFactor;
             this._controls.enablePan = this.enablePan;
             this._controls.enableRotate = this.enableRotate;
             if (typeof smoothcam === "number" || smoothcam === true) {
                 this._controls.enableDamping = true;
                 const factor = typeof smoothcam === "number" ? smoothcam : .99;
                 this._controls.dampingFactor = Math.max(.001, 1 - Math.min(1, factor));
             }
+            if (!this.allowInterrupt) {
+                if (this._lookTargetLerpActive) {
+                    this._controls.enablePan = false;
+                }
+                if (this._cameraLerpActive) {
+                    this._controls.enableRotate = false;
+                    this._controls.autoRotate = false;
+                }
+                if (this._lookTargetLerpActive || this._cameraLerpActive) {
+                    this._controls.enableZoom = false;
+                }
+            }
             //@ts-ignore
             // this._controls.zoomToCursor = this.zoomToCursor;
             if (!this.context.isInXR) {
-                if (!freeCam && this.lookAtConstraint?.locked) this.setFromTargetPosition(0, this.lookAtConstraint01);
+                if (!freeCam && this.lookAtConstraint?.locked) this.setLookTargetFromConstraint(0, this.lookAtConstraint01);
                 this._controls.update();
             }
         }
     }
-    /** Moves the camera to position smoothly. @deprecated use `setCameraTargetPosition` */
-    public setCameraTarget(position?: Vector3 | null, immediate: boolean = false) {
-        return this.setCameraTargetPosition(position, immediate);
+    /**
+     * Sets camera target position and look direction. Does perform a raycast in the forward direction of the passed in object to find an orbit point
+     */
+    public setCameraAndLookTarget(target: Object3D) {
+        if (!target || !(target instanceof Object3D)) return;
+        const worldPosition = getWorldPosition(target);
+        const forward = getWorldDirection(target);
+        this.setTargetFromRaycast(new Ray(worldPosition, forward));
+        this.setCameraTargetPosition(worldPosition);
     }
     /** Moves the camera to position smoothly.
      * @param position The position in local space of the controllerObject to move the camera to. If null the camera will stop lerping to the target.
     */
-    public setCameraTargetPosition(position?: Vector3 | null, immediate: boolean = false) {
-        if (!position) this._lerpCameraToTarget = false;
+    public setCameraTargetPosition(position?: Object3D | Vector3 | null, immediateOrDuration: boolean | number = false) {
+        if (!position) return;
+        if (position instanceof Object3D) {
+            position = getWorldPosition(position) as Vector3;
+        }
+        if (!this._cameraEndPosition) this._cameraEndPosition = new Vector3();
+        this._cameraEndPosition.copy(position);
+        if (immediateOrDuration === true) {
+            this._cameraLerpActive = false;
+            this.controllerObject?.position.copy(this._cameraEndPosition);
+        }
+        else if (this._cameraObject) {
+            this._cameraLerpActive = true;
+            this._cameraLerp01 = 0;
+            this._cameraStartPosition.copy(this._cameraObject?.position);
+            if (typeof immediateOrDuration === "number") {
+                this._cameraLerpDuration = immediateOrDuration;
+            }
+            else this._cameraLerpDuration = this.targetLerpDuration;
+        }
+    }
+    /** True while the camera position is being lerped */
+    get cameraLerpActive() { return this._cameraLerpActive; }
+    /** Call to stop camera position lerping */
+    public stopCameraLerp() {
+        this._cameraLerpActive = false;
+    }
+    /** Moves the camera look-at target to a position smoothly. */
+    public setLookTargetPosition(position: Object3D | Vector3 | null = null, immediateOrDuration: boolean = false) {
+        if (!this._controls) return;
+        if (!position) return
+        if (position instanceof Object3D) {
+            position = getWorldPosition(position) as Vector3;
+        }
+        this._lookTargetEndPosition.copy(position);
+        if (immediateOrDuration === true) {
+            this._controls.target.copy(this._lookTargetEndPosition);
+        }
         else {
-            this._lerpCameraToTarget = true;
-            this._cameraTargetPosition = position.clone();
-            if (immediate && this._cameraTargetPosition) {
-                this.controllerObject?.position.copy(this._cameraTargetPosition);
+            this._lookTargetLerpActive = true;
+            this._lookTargetLerp01 = 0;
+            this._lookTargetStartPosition.copy(this._controls.target);
+            if (typeof immediateOrDuration === "number") {
+                this._lookTargetLerpDuration = immediateOrDuration;
             }
+            else this._lookTargetLerpDuration = this.targetLerpDuration;
         }
     }
+    /** True while the camera look target is being lerped */
+    get lookTargetLerpActive() { return this._lookTargetLerpActive; }
+    /** Call to stop camera look target lerping */
+    public stopLookTargetLerp() {
+        this._lookTargetLerpActive = false;
+    }
     /** Sets the look at target from an assigned lookAtConstraint source by index */
-    public setFromTargetPosition(index: number = 0, t: number = 1): boolean {
+    private setLookTargetFromConstraint(index: number = 0, t: number = 1): boolean {
         if (!this._controls) return false;
         const sources = this.lookAtConstraint?.sources;
         if (sources && sources.length > 0) {
             const target = sources[index];
             if (target) {
-                target.getWorldPosition(this._lookTargetPosition);
-                this.lerpTarget(this._lookTargetPosition, t);
+                target.getWorldPosition(this._lookTargetEndPosition);
+                this.lerpLookTarget(this._lookTargetEndPosition, t);
                 return true;
             }
         }
         return false;
     }
-    /** Moves the camera look-at target to a position smoothly. */
-    public setTarget(position: Vector3 | null = null, immediate: boolean = false) {
-        if (!this._controls) return;
-        if (position !== null) this._lookTargetPosition.copy(position);
-        if (immediate)
-            this._controls.target.copy(this._lookTargetPosition);
-        else this._lerpToTargetPosition = true;
-    }
+    /** @deprecated use `controls.target.lerp(position, delta)` */
+    public lerpTarget(position: Vector3, delta: number) { return this.lerpLookTarget(position, delta); }
-    public lerpTarget(position: Vector3, delta: number) {
+    private lerpLookTarget(position: Vector3, delta: number) {
         if (!this._controls) return;
-        this._controls.target.lerp(position, delta);
+        if (delta >= 1) this._controls.target.copy(position);
+        else this._controls.target.lerp(position, delta);
     }
-    public distanceToTarget(position: Vector3): number {
-        if (!this._controls) return -1;
-        return this._controls.target.distanceTo(position);
-    }
-    private setTargetFromRaycast() {
+    private setTargetFromRaycast(ray?: Ray) {
         if (!this.controls) return;
-        const rc = this.context.physics.raycast();
+        const rc = ray ? this.context.physics.raycastFromRay(ray) : this.context.physics.raycast();
         for (const hit of rc) {
             if (hit.distance > 0 && GameObject.isActiveInHierarchy(hit.object)) {
@@ -404,19 +489,14 @@
                         break;
                     }
                 }
-                // if (hit.object && hit.object.parent) {
-                //     const par: any = hit.object.parent;
-                //     if (par.isUI) continue;
-                // }
-                // console.log("Set target", this.targetPosition, hit.object.name, hit.object);
-                this._lookTargetPosition.copy(hit.point);
-                this._lerpToTargetPosition = true;
-                this._cameraTargetPosition = null;
+                this.setLookTargetPosition(hit.point);
                 if (this.context.mainCamera) {
-                    this._lerpCameraToTarget = true;
                     const pos = getWorldPosition(this.context.mainCamera);
-                    this._cameraTargetPosition = pos.clone().sub(this.controls.target).add(this._lookTargetPosition);
-                    this._cameraObject?.parent?.worldToLocal(this._cameraTargetPosition);
+                    const cameraTarget = pos.clone().sub(this.controls.target).add(this._lookTargetEndPosition);
+                    this._cameraObject?.parent?.worldToLocal(cameraTarget);
+                    this.setCameraTargetPosition(cameraTarget);
                 }
                 break;
             }
@@ -449,6 +529,7 @@
             let allowExpanding = true;
             // we dont want to check invisible objects
             if (!obj.visible) return;
+            if (useForAutoFit(obj) === false) return;
             // ignore Box3Helpers
             if (obj instanceof Box3Helper) allowExpanding = false;
             if (obj instanceof GridHelper) allowExpanding = false;
@@ -516,7 +597,7 @@
         controls.maxDistance = distance * 10;
         controls.minDistance = distance * 0.01;
-        this.setTarget(center, immediate);
+        this.setLookTargetPosition(center, immediate);
         this.autoTarget = false;
         // TODO: this doesnt take the Camera component nearClipPlane into account
@@ -528,7 +609,7 @@
         if (camera.parent) {
             const cameraLocalPosition = camera.parent!.worldToLocal(controls.target.clone().sub(direction));
-            this.setCameraTarget(cameraLocalPosition, immediate);
+            this.setCameraTargetPosition(cameraLocalPosition, immediate);
         }
         else console.error(`Can not fit camera ${camera.name} because it has no parent`)

src/engine-components/ui/PointerEvents.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Input, NEPointerEvent } from "../../engine/engine_input.js";
+import { Object3D } from "three";
 export interface IInputEventArgs {
     get used(): boolean;
@@ -83,3 +84,20 @@
 export interface IPointerEventHandler extends IPointerDownHandler,
     IPointerUpHandler, IPointerEnterHandler, IPointerMoveHandler, IPointerExitHandler, IPointerClickHandler { }
+/**
+ * @internal tests if the object has any PointerEventComponent used by the EventSystem
+ * This is used to skip raycasting on objects that have no components that use pointer events
+ */
+// export function hasPointerEventComponent(obj: Object3D) {
+//     const res = GameObject.foreachComponent(obj, comp => {
+//         const handler = comp as IPointerEventHandler;
+//         if (handler.onPointerDown || handler.onPointerUp || handler.onPointerEnter || handler.onPointerExit || handler.onPointerClick)
+//             return true;
+//         return undefined;
+//     });
+//     if (res === true) return true;
+//     return false;
+// }

src/engine-components/ui/Raycaster.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { RaycastOptions } from "../../engine/engine_physics.js";
 import { Behaviour, Component } from "../Component.js";
 import { EventSystem } from "./EventSystem.js";
+import { SkinnedMesh } from "three";
 export class Raycaster extends Behaviour {
@@ -26,6 +27,8 @@
     private targets: THREE.Object3D[] | null = null;
     private raycastHits: THREE.Intersection[] = [];
+    ignoreSkinnedMeshes = false;
     start(): void {
         this.targets = [this.gameObject];
     }
@@ -35,6 +38,12 @@
         opts ??= new RaycastOptions();
         opts.targets = this.targets;
         opts.results = this.raycastHits;
+        opts.testObject = obj => {
+            if (this.ignoreSkinnedMeshes && obj instanceof SkinnedMesh) {
+                return "continue in children";
+            }
+            return true;
+        };
         const hits = this.context.physics.raycast(opts);
         // console.log(this.context.alias, hits);
         return hits;
@@ -45,6 +54,11 @@
     // eventCamera: Camera | null = null;
     // ignoreReversedGraphics: boolean = false;
     // rootRaycaster: GraphicRaycaster | null = null;
+    constructor() {
+        super();
+        this.ignoreSkinnedMeshes = true;
+    }
 }

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -40,6 +40,7 @@
 import { Button } from "../../engine-components/ui/Button.js";
 import { CallInfo } from "../../engine-components/EventList.js";
 import { Camera } from "../../engine-components/Camera.js";
+import { CameraTargetReachedEvent } from "../../engine-components/OrbitControls.js";
 import { Canvas } from "../../engine-components/ui/Canvas.js";
 import { CanvasGroup } from "../../engine-components/ui/CanvasGroup.js";
 import { CapsuleCollider } from "../../engine-components/Collider.js";
@@ -259,6 +260,7 @@
 TypeStore.add("Button", Button);
 TypeStore.add("CallInfo", CallInfo);
 TypeStore.add("Camera", Camera);
+TypeStore.add("CameraTargetReachedEvent", CameraTargetReachedEvent);
 TypeStore.add("Canvas", Canvas);
 TypeStore.add("CanvasGroup", CanvasGroup);
 TypeStore.add("CapsuleCollider", CapsuleCollider);

src/engine-components/webxr/WebARSessionRoot.ts CHANGED Viewed

@@ -114,6 +114,8 @@
         hit?.createAnchor?.call(hit, pose.transform)?.then(anchor => {
             if (this.context.isInAR)
                 this._anchor = anchor;
+        }).catch(ex => {
+            console.warn("Failed to create anchor", ex);
         });
     }

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -188,6 +188,9 @@
     public get IsInVR() { return this._isInVR; }
     public get IsInAR() { return this._isInAR; }
+    /** When enabled */
+    allowARPlacementReticle: boolean = true;
     private rig!: Object3D;
     private isInit: boolean = false;
@@ -229,10 +232,6 @@
         this.context.renderer.xr.enabled = true;
-        // general WebXR support?
-        const browserSupportsXR = WebXR.XRSupported;
         // TODO: move the whole buttons positioning out of here and make it configureable from css
         // better set proper classes so user code can react to it instead
         // of this hardcoded stuff
@@ -740,7 +739,7 @@
                 }
                 if (this.reticle) {
-                    this.reticle.visible = this.reticleActive;
+                    this.reticle.visible = this.reticleActive && this._webxr.allowARPlacementReticle;
                     if (this.reticleActive) {
                         if (pose) {
                             const matrix = pose.transform.matrix;

src/engine-components/webxr/WebXRImageTracking.ts CHANGED Viewed

@@ -4,7 +4,7 @@
 import { Object3D, Quaternion, Vector3 } from "three";
 import { CircularBuffer, getParam } from "../../engine/engine_utils.js";
 import { AssetReference } from "../../engine/engine_addressables.js";
-import { showBalloonWarning } from "../../engine/debug/index.js";
+import { showBalloonMessage, showBalloonWarning } from "../../engine/debug/index.js";
 import { USDZExporter } from "../../engine-components/export/usdz/USDZExporter.js";
 import { USDZExporterContext, USDWriter, imageToCanvas } from "../../engine-components/export/usdz/ThreeUSDZExporter.js";
@@ -143,11 +143,15 @@
     private readonly trackedImageIndexMap: Map<number, WebXRImageTrackingModel> = new Map();
     private static _imageElements: Map<string, ImageBitmap | null> = new Map();
+    private webxr: WebXR | null = null;
     awake(): void {
-        if(debug) console.log(this)
+        if (debug) console.log(this)
         if (!this.trackedImages) return;
         for (const trackedImage of this.trackedImages) {
+            if (trackedImage.object?.asset) {
+                trackedImage.object.asset.visible = false;
+            }
             if (trackedImage.image) {
                 if (WebXRImageTracking._imageElements.has(trackedImage.image)) {
                 }
@@ -181,10 +185,9 @@
         }
     }
-    private xr: WebXR | null = null;
     onEnable(): void {
-        this.xr = GameObject.findObjectOfType(WebXR);
+        this.webxr = GameObject.findObjectOfType(WebXR);
         WebXR.addEventListener(WebXREvent.ModifyAROptions, this.onModifyAROptions);
         WebXR.addEventListener(WebXREvent.XRStarted, this.onXRStarted);
         WebXR.addEventListener(WebXREvent.XRUpdate, this.onXRUpdate);
@@ -221,17 +224,71 @@
         }
     }
-    private imageToObjectMap: Map<WebXRImageTrackingModel, { object: GameObject | null, frames: number }> = new Map();
+    private onXRStarted = (_: any) => {
+        // clear out all frame counters for tracking
+        for (const trackedData of this.imageToObjectMap.values()) {
+            trackedData.frames = 0;
+        }
+    };
-    private onImageTrackingUpdate = (event: any) => {
-        const images = event.detail as WebXRTrackedImage[];
+    private readonly imageToObjectMap = new Map<WebXRImageTrackingModel, { object: GameObject | null, frames: number }>();
+    private readonly currentImages: WebXRTrackedImage[] = [];
+    private onXRUpdate = (evt): void => {
+        this.currentImages.length = 0;
+        const frame = evt.frame;
+        if (!frame) return;
+        if (frame.session && !("getImageTrackingResults" in frame)) {
+            const warning = "Image tracking is currently not supported on this device. On Chrome for Android, you can enable the <a href=\"chrome://flags/#webxr-incubations\">chrome://flags/#webxr-incubations</a> flag.";
+            console.log(warning);
+            showBalloonWarning(warning);
+            return;
+        }
+        if (frame.session && typeof frame.getImageTrackingResults === "function") {
+            const results = frame.getImageTrackingResults();
+            if (results.length > 0) {
+                const space = this.context.renderer.xr.getReferenceSpace();
+                if (space) {
+                    for (const result of results) {
+                        const state = result.trackingState;
+                        const imageIndex = result.index;
+                        const trackedImage = this.trackedImageIndexMap.get(imageIndex);
+                        if (trackedImage) {
+                            const pose = frame.getPose(result.imageSpace, space);
+                            const imageData = new WebXRTrackedImage(this, trackedImage, result.image, result.measuredSize, state, pose);
+                            this.currentImages.push(imageData);
+                        }
+                        else {
+                            if (debug) {
+                                console.warn("No tracked image for index", imageIndex);
+                            }
+                        }
+                    }
+                    if (this.currentImages.length > 0) {
+                        try {
+                            this.dispatchEvent(new CustomEvent("image-tracking", { detail: this.currentImages }));
+                            if (this.webxr && this.webxr.allowARPlacementReticle) {
+                                this.webxr.allowARPlacementReticle = false;
+                            }
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                    }
+                }
+            }
+        }
         // disable any objects that are no longer tracked
         for (const [model, object] of this.imageToObjectMap) {
             if (!object.object || !model) continue;
             let found = false;
-            for (const trackedImage of images) {
-                if (trackedImage.model === model) {
+            for (const trackedImage of this.currentImages) {
+                if (trackedImage.state === "tracked" && trackedImage.model === model) {
                     found = true;
                     break;
                 }
@@ -240,7 +297,12 @@
                 GameObject.setActive(object.object, false);
             }
         }
+    }
+    private onImageTrackingUpdate = (event: any) => {
+        const images = event.detail as WebXRTrackedImage[];
         for (const image of images) {
             const model = image.model;
             // don't do anything if we don't have an object to track - can be handled externally through events
@@ -252,15 +314,16 @@
                 this.imageToObjectMap.set(model, trackedData);
                 model.object.loadAssetAsync().then((asset: GameObject | null) => {
-                    if (model.createObjectInstance)
+                    if (model.createObjectInstance) {
                         asset = GameObject.instantiate(asset);
+                    }
                     if (asset) {
                         trackedData!.object = asset;
                         // make sure to parent to the WebXR.rig
-                        if (this.xr) {
-                            this.xr.Rig.add(asset);
+                        if (this.webxr) {
+                            this.webxr.Rig.add(asset);
                         }
                         image.applyToObject(asset);
@@ -279,8 +342,8 @@
                 if (!trackedData.object) continue;
-                if (this.xr) {
-                    this.xr.Rig.add(trackedData.object);
+                if (this.webxr) {
+                    this.webxr.Rig.add(trackedData.object);
                 }
                 image.applyToObject(trackedData.object);
@@ -289,56 +352,4 @@
             }
         }
     }
-    private onXRStarted = (_: any) => {
-        // clear out all frame counters for tracking
-        for (const trackedData of this.imageToObjectMap.values()) {
-            trackedData.frames = 0;
-        }
-    };
-    private onXRUpdate = (evt): void => {
-        const frame = evt.frame;
-        if (!frame) return;
-        if (frame.session && !("getImageTrackingResults" in frame)) {
-            showBalloonWarning("Image tracking is currently not supported on this device. On Chrome for Android, you can enable the <a href=\"chrome://flags/#webxr-incubations\">chrome://flags/#webxr-incubations</a> flag.");
-            return;
-        }
-        //@ts-ignore
-        if (frame.session && typeof frame.getImageTrackingResults === "function") {
-            //@ts-ignore
-            const results = frame.getImageTrackingResults();
-            if (results.length) {
-                const space = this.context.renderer.xr.getReferenceSpace();
-                if (space) {
-                    const images: WebXRTrackedImage[] = [];
-                    for (const result of results) {
-                        const imageIndex = result.index;
-                        const trackedImage = this.trackedImageIndexMap.get(imageIndex);
-                        if (trackedImage) {
-                            const pose = frame.getPose(result.imageSpace, space);
-                            const state = result.trackingState;
-                            const imageData = new WebXRTrackedImage(this, trackedImage, result.image, result.measuredSize, state, pose);
-                            images.push(imageData);
-                        }
-                        else {
-                            if (debug) {
-                                console.warn("No tracked image for index", imageIndex);
-                            }
-                        }
-                    }
-                    if (images.length > 0) {
-                        try {
-                            this.dispatchEvent(new CustomEvent("image-tracking", { detail: images }));
-                        }
-                        catch (e) {
-                            console.error(e);
-                        }
-                    }
-                }
-            }
-        }
-    }
 }