@needle-tools/engine 3.19.0 → 3.19.1

package/src/engine-components/ParticleSystem.ts

@@ -52,6 +52,12 @@ export class ParticleSystemRenderer extends Behaviour {
     @serializable()
     minParticleSize!: number;
 
+    @serializable()
+    velocityScale?: number;
+    @serializable()
+    cameraVelocityScale?: number;
+    @serializable()
+    lengthScale?: number;
 
     start() {
         if (this.maxParticleSize !== .5 && this.minParticleSize !== 0) {
@@ -99,15 +105,8 @@ export class ParticleSystemRenderer extends Behaviour {
         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 @@ class ParticleSystemInterface implements ParticleSystemParameters {
     }
 
     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 @@ class ParticleSystemInterface implements ParticleSystemParameters {
         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 @@ class ParticleSystemInterface implements ParticleSystemParameters {
         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 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
     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 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
     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;
             }

package/src/engine-components/SceneSwitcher.ts

@@ -467,8 +467,16 @@ export class SceneSwitcher extends Behaviour {
         }
     }
 
-    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;
     }
 }

package/src/engine-components/ui/Canvas.ts

@@ -5,7 +5,7 @@ import { BaseUIComponent, UIRootComponent } from "./BaseUIComponent.js";
 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 @@ export class Canvas extends UIRootComponent implements ICanvas {
         this._layoutGroups.delete(obj);
     }
 
-    onBeforeRenderRoutine = () => {
+    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 @@ export class Canvas extends UIRootComponent implements ICanvas {
             // 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 @@ export class Canvas extends UIRootComponent implements ICanvas {
             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 @@ export class Canvas extends UIRootComponent implements ICanvas {
         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 @@ export class Canvas extends UIRootComponent implements ICanvas {
         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)

package/src/engine-components/ui/EventSystem.ts

@@ -68,8 +68,8 @@ export class EventSystem extends Behaviour {
     }
 
     //@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 @@ class MeshUIHelper {
         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) {

package/src/engine-components/ui/Interfaces.ts

@@ -6,6 +6,8 @@ export interface ICanvas extends IComponent {
     get screenspace(): boolean;
     registerTransform(rt: IRectTransform);
     unregisterTransform(rt: IRectTransform);
+    registerEventReceiver(receiver: ICanvasEventReceiver);
+    unregisterEventReceiver(receiver: ICanvasEventReceiver);
 }
 
 export interface ICanvasGroup {
@@ -39,6 +41,11 @@ export interface ILayoutGroup extends IComponent {
     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;

package/src/engine-components/ui/Text.ts

@@ -6,7 +6,7 @@ import { updateRenderSettings } from './Utils.js';
 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 @@ export enum FontStyle {
     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 @@ export class Text extends Graphic implements IHasAlphaFactor {
         }
     }
 
-    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,6 +224,11 @@ export class Text extends Graphic implements IHasAlphaFactor {
         }
 
         setTimeout(() => this.markDirty(), 10);
+        this.canvas?.registerEventReceiver(this);
+    }
+    onDisable(): void {
+        super.onDisable();
+        this.canvas?.unregisterEventReceiver(this);
     }
 
     private getAlignment(opts: ThreeMeshUIEveryOptions): ThreeMeshUIEveryOptions {

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

@@ -46,6 +46,7 @@ export class WebARSessionRoot extends Behaviour {
     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 @@ export class WebARSessionRoot extends Behaviour {
         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,7 +75,8 @@ export class WebARSessionRoot extends Behaviour {
         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) {
 
@@ -89,6 +92,8 @@ export class WebARSessionRoot extends Behaviour {
 
                 if (this.webAR) this.webAR.setReticleActive(false);
                 this.placeAt(rig, poseMatrix);
+                if (hit && pose)
+                    this.onCreatePlacementAnchor(hit, pose);
                 return true;
             }
         }
@@ -104,11 +109,34 @@ export class WebARSessionRoot extends Behaviour {
         // }
     }
 
+    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 @@ export class WebARSessionRoot extends Behaviour {
         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 @@ export class WebARSessionRoot extends Behaviour {
         }
         // 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();

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

@@ -122,6 +122,7 @@ export class WebXR extends Behaviour {
             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 @@ export class WebAR {
                 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 @@ export class WebAR {
             }
 
         } 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;
         }