Needle Engine 3.19.1

Files changed (9) hide show

src/engine-components/ui/Canvas.ts +25 -6
src/engine-components/CharacterController.ts +13 -9
src/engine-components/ui/EventSystem.ts +7 -3
src/engine-components/ui/Interfaces.ts +7 -0
src/engine-components/ParticleSystem.ts +19 -14
src/engine-components/SceneSwitcher.ts +9 -1
src/engine-components/ui/Text.ts +16 -7
src/engine-components/webxr/WebARSessionRoot.ts +35 -5
src/engine-components/webxr/WebXR.ts +3 -2

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

@@ -5,7 +5,7 @@
 import { GameObject } from "../Component.js";
 import { Matrix4, Object3D } from "three";
 import { RectTransform } from "./RectTransform.js";
-import { ICanvas, ILayoutGroup, IRectTransform } from "./Interfaces.js";
+import { ICanvas, ICanvasEventReceiver, ILayoutGroup, IRectTransform } from "./Interfaces.js";
 import { Camera } from "../Camera.js";
 import { EventSystem } from "./EventSystem.js";
 import * as ThreeMeshUI from 'three-mesh-ui'
@@ -189,15 +189,26 @@
         this._layoutGroups.delete(obj);
     }
+    private _receivers: ICanvasEventReceiver[] = [];
+    registerEventReceiver(receiver: ICanvasEventReceiver) {
+        this._receivers.push(receiver);
+    }
+    unregisterEventReceiver(receiver: ICanvasEventReceiver) {
+        const index = this._receivers.indexOf(receiver);
+        if (index !== -1) {
+            this._receivers.splice(index, 1);
+        }
+    }
     onBeforeRenderRoutine = () => {
         if (this.context.isInVR) {
             this.onUpdateRenderMode();
             this.handleLayoutUpdates();
             // TODO TMUI @swingingtom - For VR this is so we don't have text clipping
             this.shadowComponent?.updateMatrixWorld(true);
             this.shadowComponent?.updateWorldMatrix(true, true);
-            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
+            this.invokeBeforeRenderEvents();
+            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context, true);
             return;
         }
@@ -214,6 +225,7 @@
             // TODO: we might need to optimize this. This is here to make sure the TMUI text clipping matrices are correct. Ideally the text does use onBeforeRender and apply the clipping matrix there so we dont have to force update all the matrices here
             this.shadowComponent?.updateMatrixWorld(true);
             this.shadowComponent?.updateWorldMatrix(true, true);
+            this.invokeBeforeRenderEvents();
             EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
         }
     }
@@ -236,7 +248,8 @@
             this.handleLayoutUpdates();
             this.shadowComponent?.updateMatrixWorld(true);
             // this.handleLayoutUpdates();
-            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context);
+            this.invokeBeforeRenderEvents();
+            EventSystem.ensureUpdateMeshUI(ThreeMeshUI, this.context, true);
             this.context.renderer.render(this.gameObject, this.context.mainCamera);
             this.context.renderer.autoClear = prevAutoClearDepth;
             this.context.renderer.autoClearColor = prevAutoClearColor;
@@ -245,6 +258,12 @@
         this._lastMatrixWorld?.copy(this.gameObject.matrixWorld);
     }
+    private invokeBeforeRenderEvents() {
+        for (const receiver of this._receivers) {
+            receiver.onBeforeCanvasRender?.(this);
+        }
+    }
     private handleLayoutUpdates() {
         if (this._lastMatrixWorld === null) {
             this._lastMatrixWorld = new Matrix4();
@@ -309,8 +328,8 @@
         let camera = this.context.mainCameraComponent;
         let planeDistance: number = 10;
         if (camera && camera.nearClipPlane > 0 && camera.farClipPlane > 0) {
-            // TODO: this is a hack/workaround for event system currently only passing events to the nearest object
-            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .15);
+            // TODO: this is a hack/workaround for event system currently only passing events to the nearest object so we move the canvas close to the nearplane
+            planeDistance = Mathf.lerp(camera.nearClipPlane, camera.farClipPlane, .01);
         }
         if (this._renderMode === RenderMode.ScreenSpaceCamera) {
             if (this.worldCamera)

src/engine-components/CharacterController.ts CHANGED Viewed

@@ -38,21 +38,25 @@
         let collider = this.gameObject.getComponent(CapsuleCollider);
         if (!collider)
             collider = this.gameObject.addNewComponent(CapsuleCollider) as CapsuleCollider;
-        // rb.isKinematic = true;
         collider.center.copy(this.center);
         collider.radius = this.radius;
         collider.height = this.height;
-        this.gameObject.rotation.x = 0;
-        this.gameObject.rotation.z = 0;
+        // discard any rotation besides Y axis
+        const wForward = new Vector3(0, 0, 1);
+        const wRight = new Vector3(1, 0, 0);
+        const wUp = new Vector3(0, 1, 0);
+        const fwd = this.gameObject.getWorldDirection(new Vector3());
+        fwd.y = 0;
+        const sign = wRight.dot(fwd) < 0 ? -1 : 1;
+        const angleY = wForward.angleTo(fwd) * sign;
+        this.gameObject.setRotationFromAxisAngle(wUp, angleY);
         rb.lockRotationX = true;
         rb.lockRotationY = true;
         rb.lockRotationZ = true;
-        // TODO: this doesnt work yet
-        // setInterval(()=>{
-        //     this.rigidbody.isKinematic = !this.rigidbody.isKinematic;
-        //     console.log(this.rigidbody.isKinematic);
-        // }, 1000)
     }
     move(vec: Vector3) {

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

@@ -68,8 +68,8 @@
     }
     //@ts-ignore
-    static ensureUpdateMeshUI(instance, context: Context) {
-        MeshUIHelper.update(instance, context);
+    static ensureUpdateMeshUI(instance, context: Context, force: boolean = false) {
+        MeshUIHelper.update(instance, context, force);
     }
     static markUIDirty(_context: Context) {
         MeshUIHelper.markDirty();
@@ -533,7 +533,11 @@
         this.needsUpdate = true;
     }
-    static update(threeMeshUI: any, context: Context) {
+    static update(threeMeshUI: any, context: Context, force: boolean = false) {
+        if (force) {
+            threeMeshUI.update();
+            return;
+        }
         const currentFrame = context.time.frameCount;
         for (const lu of this.lastUpdateFrame) {
             if (lu.context === context) {

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

@@ -6,6 +6,8 @@
     get screenspace(): boolean;
     registerTransform(rt: IRectTransform);
     unregisterTransform(rt: IRectTransform);
+    registerEventReceiver(receiver: ICanvasEventReceiver);
+    unregisterEventReceiver(receiver: ICanvasEventReceiver);
 }
 export interface ICanvasGroup {
@@ -39,6 +41,11 @@
     updateLayout();
 }
+export interface ICanvasEventReceiver {
+    /** Called before the canvas is rendering */
+    onBeforeCanvasRender?(canvas: ICanvas);
+}
 // export abstract class LayoutGroup extends Behaviour implements IRectTransformChangedReceiver, ILayoutGroup {
 //     get isLayoutGroup(): boolean {
 //         return true;

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -52,6 +52,12 @@
     @serializable()
     minParticleSize!: number;
+    @serializable()
+    velocityScale?: number;
+    @serializable()
+    cameraVelocityScale?: number;
+    @serializable()
+    lengthScale?: number;
     start() {
         if (this.maxParticleSize !== .5 && this.minParticleSize !== 0) {
@@ -99,15 +105,8 @@
         return material;
     }
-    getMesh(renderMode?: ParticleSystemRenderMode) {
+    getMesh(_renderMode?: ParticleSystemRenderMode) {
         let geo: BufferGeometry | null = null;
-        if (renderMode === ParticleSystemRenderMode.HorizontalBillboard) {
-            geo = new THREE.BoxGeometry(1, 1, 0);
-        }
-        else if (renderMode === ParticleSystemRenderMode.VerticalBillboard) {
-            geo = new THREE.BoxGeometry(1, 0, 1);
-        }
         if (!geo) {
             if (this.particleMesh instanceof Mesh) {
                 geo = this.particleMesh.geometry;
@@ -556,7 +555,7 @@
     }
     get prewarm() { return false; } // force disable three.quark prewarm, we have our own!
-    get material() { return this.system.renderer.getMaterial(this.system.trails.enabled) as Material;}
+    get material() { return this.system.renderer.getMaterial(this.system.trails.enabled) as Material; }
     get layers() { return this.system.gameObject.layers; }
     update() {
@@ -590,8 +589,8 @@
         switch (this.system.renderer.renderMode) {
             case ParticleSystemRenderMode.Billboard: return RenderMode.BillBoard;
             case ParticleSystemRenderMode.Stretch: return RenderMode.StretchedBillBoard;
-            case ParticleSystemRenderMode.HorizontalBillboard: return RenderMode.BillBoard;
-            case ParticleSystemRenderMode.VerticalBillboard: return RenderMode.BillBoard;
+            case ParticleSystemRenderMode.HorizontalBillboard: return RenderMode.HorizontalBillBoard;
+            case ParticleSystemRenderMode.VerticalBillboard: return RenderMode.VerticalBillBoard;
             case ParticleSystemRenderMode.Mesh: return RenderMode.Mesh;
         }
         return RenderMode.BillBoard;
@@ -600,7 +599,13 @@
         startLength: new ConstantValue(220),
         followLocalOrigin: false,
     };
-    get speedFactor() { return this.system.main.simulationSpeed; }
+    get speedFactor() {
+        let factor = this.system.main.simulationSpeed;
+        if (this.system.renderer?.renderMode === ParticleSystemRenderMode.Stretch) {
+            factor *= this.system.renderer.velocityScale ?? 1;
+        }
+        return factor;
+    }
     get texture(): THREE.Texture {
         const mat = this.material;
         if (mat && mat["map"]) {
@@ -882,7 +887,7 @@
     awake(): void {
         this._renderer = this.gameObject.getComponent(ParticleSystemRenderer) as ParticleSystemRenderer;
-        if (!this.main) {
+        if (!this.main) {
             throw new Error("Not Supported: ParticleSystem needs a serialized MainModule. Creating new particle systems at runtime is currently not supported.");
         }
@@ -986,7 +991,7 @@
     private onSimulate(dt: number) {
         if (this._batchSystem) {
             let needsUpdate = this.context.time.frameCount % 60 === 0;
-            if(this._lastBatchesCount !== this._batchSystem.batches.length) {
+            if (this._lastBatchesCount !== this._batchSystem.batches.length) {
                 this._lastBatchesCount = this._batchSystem.batches.length;
                 needsUpdate = true;
             }

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -467,8 +467,16 @@
         }
     }
-    private tryGetSceneEventListener(obj: Object3D): ISceneEventListener | null {
+    private tryGetSceneEventListener(obj: Object3D, level: number = 0): ISceneEventListener | null {
         const sceneListener = GameObject.foreachComponent(obj, c => (c as any as ISceneEventListener).sceneClosing ? c : null) as ISceneEventListener | null;
+        // if we didnt find any component with the listener on the root object
+        // we also check the first level of its children because a scene might be a group
+        if (level === 0 && !sceneListener && obj.children.length) {
+            for (const ch of obj.children) {
+                const res = this.tryGetSceneEventListener(ch, level + 1);
+                if (res) return res;
+            }
+        }
         return sceneListener;
     }
 }

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

@@ -6,7 +6,7 @@
 import { Canvas } from './Canvas.js';
 import { serializable } from '../../engine/engine_serialization_decorator.js';
 import { getParam, resolveUrl } from '../../engine/engine_utils.js';
-import { ICanvas, IHasAlphaFactor } from './Interfaces.js';
+import { ICanvas, ICanvasEventReceiver, IHasAlphaFactor } from './Interfaces.js';
 const debug = getParam("debugtext");
@@ -38,7 +38,7 @@
     BoldAndItalic = 3,
 }
-export class Text extends Graphic implements IHasAlphaFactor {
+export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiver {
     @serializable()
     alignment: TextAnchor = TextAnchor.UpperLeft;
@@ -102,11 +102,15 @@
         }
     }
-    onBeforeRender(): void {
-        // TODO TMUI @swingingtom this is so we don't have text clipping
-        if (this.uiObject && (this.Canvas?.screenspace || this.context.isInVR)) {
-            this.updateOverflow();
-        }
+    // onBeforeRender(): void {
+    //     // TODO TMUI @swingingtom this is so we don't have text clipping
+    //     if (this.uiObject && (this.Canvas?.screenspace || this.context.isInVR)) {
+    //         this.updateOverflow();
+    //     }
+    // }
+    onBeforeCanvasRender(_canvas: ICanvas) {
+        // ensure the text clipping matrix is updated (this was a problem with multiple screenspace canvases due to canvas reparenting)
+        this.updateOverflow();
     }
     private updateOverflow() {
@@ -220,7 +224,12 @@
         }
         setTimeout(() => this.markDirty(), 10);
+        this.canvas?.registerEventReceiver(this);
     }
+    onDisable(): void {
+        super.onDisable();
+        this.canvas?.unregisterEventReceiver(this);
+    }
     private getAlignment(opts: ThreeMeshUIEveryOptions): ThreeMeshUIEveryOptions {

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

@@ -46,6 +46,7 @@
     private _isTouching: boolean = false;
     private _rigStartPose: Matrix4 | undefined | null = null;
     private _gotFirstHitTestResult: boolean = false;
+    private _anchor: XRAnchor | null = null;
     onBegin(session: XRSession) {
         this._placementPose = null;
@@ -54,6 +55,7 @@
         this._startPose = this.gameObject.matrix.clone();
         this._rigStartPose = this.rig?.matrix.clone();
         this._gotFirstHitTestResult = false;
+        this._anchor = null;
         session.addEventListener('selectstart', this._selectStartFn);
         session.addEventListener('selectend', this._selectEndFn);
         // setTimeout(() => this.gameObject.visible = false, 1000); // TODO test on phone AR and Hololens if this was still needed
@@ -73,8 +75,9 @@
         this.dispatchEvent(new CustomEvent('onBeginSession'));
     }
-    onUpdate(rig: Object3D | null, _session: XRSession, pose: XRPose | null | undefined): boolean {
+    onUpdate(rig: Object3D | null, _session: XRSession, hit: XRHitTestResult | null, pose: XRPose | null | undefined): boolean {
         if (pose && !this._placementPose) {
             if (!this._gotFirstHitTestResult) {
@@ -89,6 +92,8 @@
                 if (this.webAR) this.webAR.setReticleActive(false);
                 this.placeAt(rig, poseMatrix);
+                if (hit && pose)
+                    this.onCreatePlacementAnchor(hit, pose);
                 return true;
             }
         }
@@ -104,11 +109,34 @@
         // }
     }
+    private async onCreatePlacementAnchor(hit: XRHitTestResult, pose: XRPose) {
+        this._anchor = null;
+        hit.createAnchor?.call(hit, pose.transform)?.then(anchor => {
+            if (this.context.isInAR)
+                this._anchor = anchor;
+        });
+    }
+    private _anchorMatrix: Matrix4 = new Matrix4();
+    onBeforeRender(frame: XRFrame | null): void {
+        if (frame && this._anchor && this._rig) {
+            const referenceSpace = this.context.renderer.xr.getReferenceSpace();
+            if (referenceSpace) {
+                const pose = frame.getPose(this._anchor.anchorSpace, referenceSpace);
+                if (pose) {
+                    const poseMatrix = this._anchorMatrix.fromArray(pose.transform.matrix).invert();
+                    this.placeAt(this._rig, poseMatrix);
+                }
+            }
+        }
+    }
+    private _invertedSessionRootMatrix: Matrix4 = new Matrix4();
     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();
+        const invertedSessionRoot = this._invertedSessionRootMatrix.copy(this.gameObject.matrixWorld).invert();
         this._placementPose.premultiply(invertedSessionRoot);
         if (rig) {
@@ -132,6 +160,7 @@
         this._placementPose = null;
         this.gameObject.visible = false;
         this.gameObject.matrixAutoUpdate = false;
+        this._anchor = null;
         if (this._startPose) {
             this.gameObject.matrix.copy(this._startPose);
         }
@@ -171,9 +200,10 @@
         }
         // 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.multiplyMatrices(tempMatrix.makeScale(scale, scale, scale), this._placementPose);
         rig.matrix.decompose(rig.position, rig.quaternion, rig.scale);
         rig.updateMatrixWorld();
-        console.log("Place", rig.position);
     }
-}
+}
+const tempMatrix = new Matrix4();

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

@@ -122,6 +122,7 @@
             options.domOverlay = { root: domOverlayRoot };
             options.optionalFeatures.push('dom-overlay')
             options.optionalFeatures.push('hit-test');
+            options.optionalFeatures.push('anchors');
         }
         else {
             console.warn("No dom overlay root found, HTML overlays on top of screen-based AR will not work.");
@@ -712,7 +713,7 @@
                 const pose = hit.getPose(referenceSpace);
                 if (this.sessionRoot) {
-                    const didPlace = this.sessionRoot.onUpdate(this.webxr.Rig, session, pose);
+                    const didPlace = this.sessionRoot.onUpdate(this.webxr.Rig, session, hit, pose);
                     this.didPlaceARSessionRoot = didPlace;
                 }
@@ -730,7 +731,7 @@
             }
         } else {
-            this.sessionRoot?.onUpdate(this.webxr.Rig, session, null);
+            this.sessionRoot?.onUpdate(this.webxr.Rig, session, null, null);
             if (this.reticle)
                 this.reticle.visible = false;
         }