@needle-tools/engine 2.58.4-pre → 2.59.0-pre

package/src/engine-components/ParticleSystem.ts

@@ -345,7 +345,6 @@ class VelocityBehaviour extends ParticleSystemBaseBehaviour {
 
     initialize(particle: Particle): void {
         const factor = 1 + this.scaleFactorDiff;
-
         particle.startSpeed = this.system.main.startSpeed.evaluate(Math.random(), Math.random()) * factor;
         particle.velocity.copy(this.system.shape.getDirection(particle.position)).multiplyScalar(particle.startSpeed);
         if (this.system.inheritVelocity?.enabled) {
@@ -414,6 +413,10 @@ class VelocityBehaviour extends ParticleSystemBaseBehaviour {
             // const factor = this.system.worldScale.x;
             limitVelocityOverLifetime.apply(particle.position, baseVelocity, particle.velocity, particle.size, t01, delta, 1);
         }
+
+        if (this.system.worldspace) {
+            particle.velocity.multiply(this.system.worldScale);
+        }
     }
 }
 
@@ -421,14 +424,19 @@ const $colorLerpFactor = Symbol("colorLerpFactor");
 class ColorBehaviour extends ParticleSystemBaseBehaviour {
     type: string = "NeedleColor";
 
-    initialize(particle: Particle): void {
-        const col = this.system.main.startColor.evaluate(particle.age / particle.life, Math.random());
+    initialize(_particle: Particle): void {
+    }
+
+    private _init(particle: Particle) {
+        const col = this.system.main.startColor.evaluate(Math.random());
         particle.startColor.set(col.r, col.g, col.b, col.alpha);
         particle.color.copy(particle.startColor);
         particle[$colorLerpFactor] = Math.random();
     }
 
     update(particle: Particle, _delta: number): void {
+        if (particle.age === 0)
+            this._init(particle);
         if (this.system.colorOverLifetime.enabled) {
             const t = particle.age / particle.life;
             const col = this.system.colorOverLifetime.color.evaluate(t, particle[$colorLerpFactor]);
@@ -767,6 +775,13 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
         this.addSubParticleSystems();
     }
 
+    onDestroy(): void {
+        this._container?.removeFromParent();
+        this._batchSystem?.removeFromParent();
+        this._particleSystem?.emitter.removeFromParent();
+        this._particleSystem?.dispose();
+    }
+
     onEnable() {
         if (this.inheritVelocity)
             this.inheritVelocity.system = this;

package/src/engine-components/WebXR.ts

@@ -233,6 +233,7 @@ export class WebXR extends Behaviour {
             this._vrButton = vrButton;
             buttonsContainer.appendChild(vrButton);
         }
+        
         setTimeout(() => {
             WebXR.resetButtonStyles(vrButton);
             WebXR.resetButtonStyles(arButton);

package/src/engine-components/timeline/PlayableDirector.ts

@@ -126,8 +126,9 @@ export class PlayableDirector extends Behaviour {
     }
 
     onDestroy(): void {
-        for (const track of this._audioTracks) {
-            track.onDestroy?.();
+        for (const tracks of this._allTracks) {
+            for (const track of tracks)
+                track.onDestroy?.();
         }
     }
 
@@ -151,6 +152,7 @@ export class PlayableDirector extends Behaviour {
     }
 
     stop() {
+        for(const track of this._audioTracks) track.stop();
         if (this._isPlaying) {
             this._time = 0;
             this._isPlaying = false;

package/src/engine-components/timeline/TimelineTracks.ts

@@ -182,7 +182,7 @@ export class AnimationTrackHandler extends TrackHandler {
                     clip.tracks.push(track);
                     this.createPositionInterpolant(clip, clipModel, track);
                 }
-                else if(!foundRotationTrack){
+                else if (!foundRotationTrack) {
                     const trackName = clip.tracks[0].name.substring(0, indexOfProperty) + ".quaternion";
                     if (debug) console.warn("Create quaternion track", objName, targetObj);
                     const rot = targetObj.quaternion;
@@ -442,6 +442,8 @@ export class AnimationTrackHandler extends TrackHandler {
 
 }
 
+const muteAudioTracks = getParam("mutetimeline");
+
 export class AudioTrackHandler extends TrackHandler {
     models: Array<Models.ClipModel> = [];
 
@@ -469,7 +471,8 @@ export class AudioTrackHandler extends TrackHandler {
         const audio = new THREE.Audio(this.listener);
         audio.setVolume(model.asset.volume);
         const loader = new THREE.AudioLoader();
-        console.log(path, this.director.sourceId);
+        if (debug)
+            console.log(path, this.director.sourceId);
         loader.load(path, (buffer) => {
             audio.setBuffer(buffer);
             audio.loop = model.asset.loop;
@@ -495,18 +498,26 @@ export class AudioTrackHandler extends TrackHandler {
         }
     }
 
+    stop() {
+        for (let i = 0; i < this.audio.length; i++) {
+            const audio = this.audio[i];
+            if (audio?.isPlaying)
+                audio.stop();
+        }
+    }
     evaluate(time: number) {
+        if(muteAudioTracks) return;
         if (this.track.muted) return;
         for (let i = 0; i < this.models.length; i++) {
             const model = this.models[i];
             const audio = this.audio[i];
             if (time >= model.start && time <= model.end) {
-                if (this.director.isPaused) {
+                if (this.director.isPlaying == false) {
                     if (audio.isPlaying)
                         audio.stop();
                     if (this.lastTime === time) continue;
                 }
-                if (!audio.isPlaying) {
+                else if (!audio.isPlaying) {
                     audio.offset = model.clipIn + (time - model.start) * model.timeScale;
                     audio.play();
                 }

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

@@ -16,6 +16,11 @@ import { $shadowDomOwner } from "./BaseUIComponent";
 
 const debug = getParam("debugeventsystem");
 
+export enum EventSystemEvents {
+    BeforeHandleInput = "BeforeHandleInput",
+    AfterHandleInput = "AfterHandleInput",
+}
+
 export class EventSystem extends Behaviour {
 
 
@@ -45,6 +50,16 @@ export class EventSystem extends Behaviour {
         return this._eventSystemMap.get(context)!;
     }
 
+    static get(ctx: Context): EventSystem | null {
+        const systems = this._eventSystemMap.get(ctx);
+        if (systems && systems.length > 0) return systems[0];
+        return null;
+    }
+
+    static get instance(): EventSystem | null {
+        return this.systems[0];
+    }
+
     //@ts-ignore
     static ensureUpdateMeshUI(instance, context: Context) {
         MeshUIHelper.update(instance, context);
@@ -53,12 +68,8 @@ export class EventSystem extends Behaviour {
         MeshUIHelper.markDirty();
     }
 
-    static get instance(): EventSystem | null {
-        return this.systems[0];
-    }
-
-    private orbitControl: OrbitControls | null = null;
-    private orbitControlWasEnabled: boolean = false;
+    // private orbitControl: OrbitControls | null = null;
+    // private orbitControlWasEnabled: boolean = false;
     private raycaster: Raycaster[] = [];
 
     constructor() {
@@ -66,6 +77,9 @@ export class EventSystem extends Behaviour {
         EventSystem.systems.push(this);
     }
 
+    get hasActiveUI() { return this.currentActiveMeshUIComponents.length > 0; }
+    get isHoveringObjects() { return this.objectsHoveredThisFrame.length > 0; }
+
     onDestroy(): void {
         EventSystem.systems.splice(EventSystem.systems.indexOf(this), 1);
     }
@@ -90,7 +104,7 @@ export class EventSystem extends Behaviour {
     private _selectStartFn?: any;
     private _selectEndFn?: any;
     private _selectUpdateFn?: any;
-    private _onBeforeUpdateFn?: any;
+    private _handleEventFn?: any;
 
     onEnable(): void {
 
@@ -150,9 +164,14 @@ export class EventSystem extends Behaviour {
         WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
         // TODO: unregister
-        this._onBeforeUpdateFn ??= this.onBeforeUpdate.bind(this);
-        this.context.pre_update_callbacks.push(this._onBeforeUpdateFn);
-        this.context.input.addEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
+        this._handleEventFn ??= this.onHandleEvents.bind(this);
+        this.context.pre_update_callbacks.push(this._handleEventFn);
+        // If we subscribe to those events here we get duplicate event handling for e.g. button clicks
+        // I think this was done as a workaround for the InputField where we needed to handle the event within the browser event method
+        // without it (via pre_update callbacks) we handle the events outside of the browser loop delayed which doesnt work for some cases
+        // this.context.input.addEventListener(InputEvents.PointerDown, this._handleEventFn);
+        // this.context.input.addEventListener(InputEvents.PointerUp, this._handleEventFn);
+        // this.context.input.addEventListener(InputEvents.PointerMove, this._handleEventFn);
     }
 
     onDisable(): void {
@@ -160,8 +179,10 @@ export class EventSystem extends Behaviour {
         WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
         WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
-        this.context.pre_update_callbacks.splice(this.context.pre_update_callbacks.indexOf(this._onBeforeUpdateFn), 1);
-        this.context.input.removeEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
+        this.context.pre_update_callbacks.splice(this.context.pre_update_callbacks.indexOf(this._handleEventFn), 1);
+        // this.context.input.removeEventListener(InputEvents.PointerDown, this._handleEventFn);
+        // this.context.input.removeEventListener(InputEvents.PointerUp, this._handleEventFn);
+        // this.context.input.removeEventListener(InputEvents.PointerMove, this._handleEventFn);
     }
 
 
@@ -180,7 +201,8 @@ export class EventSystem extends Behaviour {
 
     private _didMove: boolean = false;
 
-    onBeforeUpdate() {
+
+    onHandleEvents() {
         this.objectsHoveredThisFrame.length = 0;
         this.resetMeshUIStates();
 
@@ -196,7 +218,6 @@ export class EventSystem extends Behaviour {
             this._didMove = true;
         }
 
-        const hits = this.performRaycast(null);
         let pointerId = 0;
         for (const i of this.context.input.foreachPointerId()) {
             const isDown = this.context.input.getPointerDown(i);
@@ -206,6 +227,7 @@ export class EventSystem extends Behaviour {
                 break;
             }
         }
+
         const ptr = this.context.input.getPointerEvent(pointerId);
         // console.log(ptr);
         const args: PointerEventData = new PointerEventData(ptr);
@@ -215,42 +237,25 @@ export class EventSystem extends Behaviour {
         args.isDown = this.context.input.getPointerDown(pointerId);
         args.isUp = this.context.input.getPointerUp(pointerId);
         args.isPressed = this.context.input.getPointerPressed(pointerId);
-        // if(args.isClicked || args.isUp) console.log("clicked", args);
-        this.lastPointerEvent = args;
+        if (debug && args.isClicked) console.log("CLICK", pointerId);
+
+        const hits = this.performRaycast(null);
         if (!hits) return;
+        this.lastPointerEvent = args;
 
-        // handle orbit control before handling input events
-        // this is just so button events that modify OrbitControls.enabled work
-        let orbitControlComponent: OrbitControls | null = null;
-        let previousOrbitControlState: boolean | null = null;
-        if (this.context.input.mouseDown && this.currentActiveMeshUIComponents.length > 0 && this.context.mainCameraComponent) {
-            orbitControlComponent = GameObject.getComponent(this.context.mainCameraComponent.gameObject, OrbitControls) ?? null;
-            if (orbitControlComponent) {
-                previousOrbitControlState = orbitControlComponent.enabled;
-                orbitControlComponent.enabled = false;
-            }
+        const evt = {
+            sender: this,
+            args: args,
+            hasActiveUI: this.currentActiveMeshUIComponents.length > 0,
         }
-
-        // if (args.isClicked)
-        //     console.log(this.guid, ...hits);
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.BeforeHandleInput, { detail: evt }))
         this.handleIntersections(hits, args);
-
-        if (orbitControlComponent) {
-            this.orbitControl = orbitControlComponent;
-            if (this.orbitControl?.enabled) {
-                this.orbitControlWasEnabled = this.orbitControl.enabled;
-                this.orbitControl.enabled = false;
-            }
-            else if (this.orbitControl && !this.context.input.mousePressed) {
-                this.orbitControl.enabled = this.orbitControlWasEnabled;
-                this.orbitControl = null;
-            }
-        }
-
+        this.dispatchEvent(new CustomEvent(EventSystemEvents.AfterHandleInput, { detail: evt }))
     }
 
     private _tempComponentsArray: Behaviour[] = [];
     onBeforeRender() {
+
         if (this.lastPointerEvent)
             this.lastPointerEvent.used = false;
         else return;
@@ -374,6 +379,7 @@ export class EventSystem extends Behaviour {
                 const actualGo = parent[$shadowDomOwner].gameObject;
                 if (actualGo) {
                     const res = UIRaycastUtils.isInteractable(actualGo, this.out);
+                    // console.log(actualGo, res);
                     if (!res) return this.out.canvasGroup?.interactable ?? false;
                     canvasGroup = this.out.canvasGroup ?? null;
 

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

@@ -9,11 +9,11 @@ export class Raycaster extends Behaviour {
     }
 
     onEnable(): void {
-        EventSystem.instance?.register(this);
+        EventSystem.get(this.context)?.register(this);
     }
 
     onDisable(): void {
-        EventSystem.instance?.unregister(this);
+        EventSystem.get(this.context)?.unregister(this);
     }
 
     performRaycast(_opts: RaycastOptions | null = null): THREE.Intersection[] | null {