@needle-tools/engine 2.54.2-pre → 2.55.0-pre

package/src/engine-components/VideoPlayer.ts

@@ -73,37 +73,37 @@ export class VideoPlayer extends Behaviour {
     private _playbackSpeed: number = 1;
     @serializable()
     get playbackSpeed(): number {
-        return this.videoElement?.playbackRate ?? this._playbackSpeed;
+        return this._videoElement?.playbackRate ?? this._playbackSpeed;
     }
     set playbackSpeed(val: number) {
         this._playbackSpeed = val;
-        if (this.videoElement)
-            this.videoElement.playbackRate = val;
+        if (this._videoElement)
+            this._videoElement.playbackRate = val;
     }
 
     private _isLooping: boolean = false;
     get isLooping(): boolean {
-        return this.videoElement?.loop ?? this._isLooping;
+        return this._videoElement?.loop ?? this._isLooping;
     }
     @serializable()
     set isLooping(val: boolean) {
         this._isLooping = val;
-        if (this.videoElement)
-            this.videoElement.loop = val;
+        if (this._videoElement)
+            this._videoElement.loop = val;
     }
 
     get currentTime(): number {
-        return this.videoElement?.currentTime ?? this.time;
+        return this._videoElement?.currentTime ?? this.time;
     }
     set currentTime(val: number) {
-        if (this.videoElement) {
-            this.videoElement.currentTime = val;
+        if (this._videoElement) {
+            this._videoElement.currentTime = val;
         }
         else this.time = val;
     }
 
     get isPlaying(): boolean {
-        const video = this.videoElement;
+        const video = this._videoElement;
         if (video) {
             return video.currentTime > 0 && !video.paused && !video.ended
                 && video.readyState > video.HAVE_CURRENT_DATA;
@@ -112,13 +112,13 @@ export class VideoPlayer extends Behaviour {
     }
 
     get crossOrigin(): string | null {
-        return this.videoElement?.crossOrigin ?? this._crossOrigin;
+        return this._videoElement?.crossOrigin ?? this._crossOrigin;
     }
     set crossOrigin(val: string | null) {
         this._crossOrigin = val;
-        if (this.videoElement) {
-            if (val !== null) this.videoElement.setAttribute("crossorigin", val);
-            else this.videoElement.removeAttribute("crossorigin");
+        if (this._videoElement) {
+            if (val !== null) this._videoElement.setAttribute("crossorigin", val);
+            else this._videoElement.removeAttribute("crossorigin");
         }
     }
 
@@ -126,6 +126,10 @@ export class VideoPlayer extends Behaviour {
         return this._videoTexture;
     }
 
+    get videoElement() {
+        return this._videoElement;
+    }
+
     private _crossOrigin: string | null = "anonymous";
 
     private audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.AudioSource;
@@ -134,7 +138,7 @@ export class VideoPlayer extends Behaviour {
     private clip?: string | MediaStream | null = null;
     private url?: string | null = null;
 
-    private videoElement: HTMLVideoElement | null = null;
+    private _videoElement: HTMLVideoElement | null = null;
     private _videoTexture: THREE.VideoTexture | null = null;
     private videoMaterial: Material | null = null;
 
@@ -144,12 +148,12 @@ export class VideoPlayer extends Behaviour {
     setVideo(video: MediaStream) {
         this.clip = video;
         this.source = VideoSource.VideoClip;
-        if (!this.videoElement) this.create(true);
+        if (!this._videoElement) this.create(true);
         else {
             // TODO: how to prevent interruption error when another video is already playing
-            this.videoElement.srcObject = video;
+            this._videoElement.srcObject = video;
             if (this._isPlaying)
-                this.videoElement.play();
+                this._videoElement.play();
             this.updateAspect();
         }
     }
@@ -160,9 +164,9 @@ export class VideoPlayer extends Behaviour {
         this.url = url;
         this.source = VideoSource.Url;
         if (debug) console.log("set url", url);
-        if (!this.videoElement) this.create(true);
+        if (!this._videoElement) this.create(true);
         else {
-            this.videoElement.src = url;
+            this._videoElement.src = url;
             if (this._isPlaying) {
                 this.stop();
                 this.play();
@@ -201,9 +205,9 @@ export class VideoPlayer extends Behaviour {
     }
 
     onDestroy(): void {
-        if (this.videoElement) {
-            this.videoElement.parentElement?.removeChild(this.videoElement);
-            this.videoElement = null;
+        if (this._videoElement) {
+            this._videoElement.parentElement?.removeChild(this._videoElement);
+            this._videoElement = null;
         }
         if (this._videoTexture) {
             this._videoTexture.dispose();
@@ -231,27 +235,27 @@ export class VideoPlayer extends Behaviour {
     }
 
     play() {
-        if (!this.videoElement) return;
-        if (this._isPlaying && !this.videoElement?.ended && !this.videoElement?.paused) return;
+        if (!this._videoElement) return;
+        if (this._isPlaying && !this._videoElement?.ended && !this._videoElement?.paused) return;
         this._isPlaying = true;
-        if (!this._receivedInput) this.videoElement.muted = true;
+        if (!this._receivedInput) this._videoElement.muted = true;
         this.updateVideoElementSettings();
-        this.videoElement?.play().catch(err => {
+        this._videoElement?.play().catch(err => {
             console.warn(err);
         });
-        if (debug) console.log("play", this.videoElement);
+        if (debug) console.log("play", this._videoElement);
     }
 
     stop() {
         this._isPlaying = false;
-        if (!this.videoElement) return;
-        this.videoElement.currentTime = 0;
-        this.videoElement.pause();
+        if (!this._videoElement) return;
+        this._videoElement.currentTime = 0;
+        this._videoElement.pause();
     }
 
     pause(): void {
         this._isPlaying = false;
-        this.videoElement?.pause();
+        this._videoElement?.pause();
     }
 
 
@@ -270,23 +274,23 @@ export class VideoPlayer extends Behaviour {
 
         // console.log(src, this);
 
-        if (!this.videoElement) {
-            this.videoElement = this.createVideoElement();
-            this.context.domElement?.prepend(this.videoElement);
+        if (!this._videoElement) {
+            this._videoElement = this.createVideoElement();
+            this.context.domElement?.prepend(this._videoElement);
             // hide it because otherwise it would overlay the website with default css
             this.updateVideoElementStyles();
         }
         if (typeof src === "string") {
-            this.videoElement.src = src;
-            const str = this.videoElement["captureStream"]?.call(this.videoElement);
+            this._videoElement.src = src;
+            const str = this._videoElement["captureStream"]?.call(this._videoElement);
             this.clip = str;
         }
         else
-            this.videoElement.srcObject = src;
+            this._videoElement.srcObject = src;
 
 
         if (!this._videoTexture)
-            this._videoTexture = new THREE.VideoTexture(this.videoElement);
+            this._videoTexture = new THREE.VideoTexture(this._videoElement);
         this._videoTexture.flipY = false;
         this._videoTexture.encoding = THREE.sRGBEncoding;
         this.handleBeginPlaying(playAutomatically);
@@ -327,7 +331,7 @@ export class VideoPlayer extends Behaviour {
 
     private handleBeginPlaying(playAutomatically: boolean) {
         if (!this.enabled) return;
-        if (!this.videoElement) return;
+        if (!this._videoElement) return;
 
         this._targetObjects.length = 0;
 
@@ -385,24 +389,24 @@ export class VideoPlayer extends Behaviour {
     }
 
     private updateVideoElementSettings() {
-        if (!this.videoElement) return;
-        this.videoElement.loop = this._isLooping;
-        this.videoElement.currentTime = this.currentTime;
-        this.videoElement.playbackRate = this._playbackSpeed;
+        if (!this._videoElement) return;
+        this._videoElement.loop = this._isLooping;
+        this._videoElement.currentTime = this.currentTime;
+        this._videoElement.playbackRate = this._playbackSpeed;
         // dont open in fullscreen on ios
-        this.videoElement.playsInline = true;
-        this.videoElement.muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
+        this._videoElement.playsInline = true;
+        this._videoElement.muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
         if (this.playOnAwake || this.playOnEnable)
-            this.videoElement.autoplay = true;
+            this._videoElement.autoplay = true;
     }
 
     private updateVideoElementStyles() {
-        if (!this.videoElement) return;
+        if (!this._videoElement) return;
         // set style here so preview frame is rendered
         // set display and selectable because otherwise is interfers with input/focus e.g. breaks orbit control
-        this.videoElement.style.userSelect = "none";
-        this.videoElement.style.visibility = "hidden";
-        this.videoElement.style.display = "none";
+        this._videoElement.style.userSelect = "none";
+        this._videoElement.style.visibility = "hidden";
+        this._videoElement.style.display = "none";
         this.updateAspect();
     }
 

package/src/engine-components/WebARSessionRoot.ts

@@ -92,6 +92,9 @@ export class WebARSessionRoot extends Behaviour {
     placeAt(rig: Object3D | null, mat: Matrix4) {
         if (!this._placementPose) this._placementPose = new Matrix4();
         this._placementPose.copy(mat);
+        // apply session root offset
+        const invertedSessionRoot = this.gameObject.matrixWorld.clone().invert();
+        this._placementPose.premultiply(invertedSessionRoot);
         if (rig) {
 
             if (this.invertForward) {
@@ -146,9 +149,11 @@ export class WebARSessionRoot extends Behaviour {
         if (!rig || !this._placementPose) {
             return;
         }
+        // Capture the rig position before the first time we move it during a session
         if (!this._rigStartPose) {
             this._rigStartPose = rig.matrix.clone();
         }
+        // we apply the transform to the rig because we want to move the user's position for easy networking
         rig.matrixAutoUpdate = false;
         rig.matrix.multiplyMatrices(new Matrix4().makeScale(scale, scale, scale), this._placementPose);
         rig.matrix.decompose(rig.position, rig.quaternion, rig.scale);

package/src/engine-components/WebXR.ts

@@ -143,6 +143,7 @@ export class WebXR extends Behaviour {
         return this.rig;
     }
 
+
     private controllers: WebXRController[] = [];
     public get Controllers(): WebXRController[] {
         return this.controllers;
@@ -249,17 +250,21 @@ export class WebXR extends Behaviour {
         // TODO: figure out why screen is black if we enable the code written here
         // const referenceSpace = renderer.xr.getReferenceSpace();
         const session = this.context.renderer.xr.getSession();
+        
 
         if (session) {
             const pose = frame.getViewerPose(this.context.renderer.xr.getReferenceSpace());
+            if(!pose) return;
             this._currentHeadPose = pose;
-            if (!pose) return; // e.g. if user is not wearing headset
             const transform: XRRigidTransform = pose?.transform;
-
             if (transform) {
                 this._transformOrientation.set(transform.orientation.x, transform.orientation.y, transform.orientation.z, transform.orientation.w);
             }
 
+            if (WebXR._isInXr === false && session) {
+                this.onEnterXR(session, frame);
+            }
+
             for (const ctrl of this.controllers) {
                 ctrl.onUpdate(session);
             }
@@ -269,9 +274,6 @@ export class WebXR extends Behaviour {
             }
         }
 
-        if (WebXR._isInXr === false && session) {
-            this.onEnterXR(session, frame);
-        }
         WebXR.events.dispatchEvent({ type: WebXREvent.XRUpdate, frame: frame, xr: this.context.renderer.xr, rig: this.rig });
     }
 
@@ -329,7 +331,7 @@ export class WebXR extends Behaviour {
             if (xrRig) {
                 // make it match unity forward
                 this.rig = xrRig.gameObject;
-                this.rig.rotateY(Math.PI);
+                // this.rig.rotateY(Math.PI);
                 // this.rig.position.copy(existing.worldPosition);
                 // this.rig.quaternion.premultiply(existing.worldQuaternion);
             }
@@ -577,7 +579,7 @@ export class WebAR {
             this.reticleParent.name = "AR Reticle Parent";
             this.reticleParent.matrixAutoUpdate = false;
             this.reticleParent.add(this.reticle);
-            this.reticleParent.matrix.copy(this.sessionRoot.gameObject.matrixWorld);
+            // this.reticleParent.matrix.copy(this.sessionRoot.gameObject.matrixWorld);
 
             if (this.webxr.scene) {
                 this.context.scene.add(this.reticleParent);
@@ -632,11 +634,11 @@ export class WebAR {
                 this.didPlaceARSessionRoot = true;
                 const rig = this.webxr.Rig;
                 const placementMatrix = arPlacementWithoutHitTestMatrix.clone();
-                if (rig) {
-                    const positionFromRig = new Vector3(0, 0, 0).add(rig.position).divideScalar(this.sessionRoot?.arScale ?? 1);
-                    placementMatrix.multiply(new Matrix4().makeTranslation(positionFromRig.x, positionFromRig.y, positionFromRig.z));
-                    // placementMatrix.setPosition(positionFromRig);
-                }
+                // if (rig) {
+                //     const positionFromRig = new Vector3(0, 0, 0).add(rig.position).divideScalar(this.sessionRoot?.arScale ?? 1);
+                //     placementMatrix.multiply(new Matrix4().makeTranslation(positionFromRig.x, positionFromRig.y, positionFromRig.z));
+                //     // placementMatrix.setPosition(positionFromRig);
+                // }
                 this.sessionRoot?.placeAt(rig, placementMatrix);
             }
             return;
@@ -676,4 +678,4 @@ export class WebAR {
     }
 }
 
-const arPlacementWithoutHitTestMatrix = new Matrix4().identity().makeTranslation(0, -0.5, 0);
+const arPlacementWithoutHitTestMatrix = new Matrix4().identity().makeTranslation(0, 0, 0);

package/src/engine-components/WebXRController.ts

@@ -381,7 +381,7 @@ export class WebXRController extends Behaviour {
         }
 
         if (this.raycastLine) {
-            const allowRaycastLineVisible = this.showRaycastLine && this.context.isInVR;
+            const allowRaycastLineVisible = this.showRaycastLine && this.type !== ControllerType.Touch;
             if (this.type === ControllerType.Touch) {
                 this.raycastLine.visible = false;
             }
@@ -1117,7 +1117,6 @@ export class AttachedObject {
         if (this.rigidbodies != null) {
             for (const rb of this.rigidbodies) {
                 rb.wakeUp();
-                rb.setBodyFromGameObject({ x: 0, y: 0, z: 0 });
             }
         }