@needle-tools/engine 3.1.0-alpha.2 → 3.2.0-alpha

package/src/engine-components/RendererLightmap.ts

@@ -14,7 +14,7 @@ export class RendererLightmap {
     set lightmap(tex: Texture | null) {
         if (tex !== this.lightmapTexture) {
             this.lightmapTexture = tex;
-            this.setupLightmap();
+            this.applyLightmap();
         }
     }
 
@@ -27,8 +27,6 @@ export class RendererLightmap {
     private lightmapScaleOffsetUniform = { value: new THREE.Vector4(1, 1, 0, 0) };
     private lightmapUniform: { value: THREE.Texture | null } = { value: null };
 
-    private beforeRenderCallback?: OnBeforeRenderCallback;
-
     constructor(gameObject: GameObject, context: Context) {
         this.gameObject = gameObject;
         this.context = context;
@@ -44,20 +42,19 @@ export class RendererLightmap {
 
         const debugLightmaps = debug;
         if (debugLightmaps) this.setLightmapDebugMaterial();
-        this.setupLightmap();
+        this.applyLightmap();
     }
 
     bindOnBeforeRender() {
-        this.beforeRenderCallback = this.onBeforeRenderThreeComplete.bind(this);
-        this.context.addBeforeRenderListener(this.gameObject, this.beforeRenderCallback);
-        // this.gameObject.onBeforeRender = this.onBeforeRenderThreeComplete.bind(this);
+        this.context.removeBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
+        this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThreeComplete);
     }
 
-    private onBeforeRenderThreeComplete(_renderer, _scene, _camera, _geometry, material, _group) {
+    private onBeforeRenderThreeComplete = (_renderer, _scene, _camera, _geometry, material, _group) => {
         this.onBeforeRenderThree(material);
     }
 
-    private setupLightmap() {
+    private applyLightmap() {
 
         if (this.gameObject.type === "Object3D") {
             // console.warn("Can not add lightmap. Is this object missing a renderer?");
@@ -65,13 +62,12 @@ export class RendererLightmap {
         }
 
         if (this.gameObject.type === "Group") {
-            console.warn("Lightmap on multimaterial object is not supported yet... please ask kindly for implementation.");
+            console.warn("Lightmap on multimaterial object is not supported yet... please open a feature request on https://github.com/needle-tools/needle-engine-support if your project requires it");
             return;
         }
 
         console.assert(this.gameObject.type === "Mesh", "Lightmap only works on meshes", this);
 
-
         const mesh = this.gameObject as unknown as THREE.Mesh;
         // TODO: ensure uv2 exists
         if (!mesh.geometry.getAttribute("uv2"))

package/src/engine-components/SceneSwitcher.ts

@@ -0,0 +1,224 @@
+import { AssetReference } from "../engine/engine_addressables";
+import { NeedleEngineHTMLElement } from "../engine/engine_element";
+import { InputEvents } from "../engine/engine_input";
+import { isLocalNetwork } from "../engine/engine_networking_utils";
+import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry";
+import { getParam, isMobileDevice, setParamWithoutReload } from "../engine/engine_utils";
+import { serializable } from "../engine/engine_serialization";
+import { Behaviour, GameObject } from "./Component";
+
+const ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME = "scene";
+
+ContextRegistry.registerCallback(ContextEvent.ContextRegistered, _ => {
+    if (!NeedleEngineHTMLElement.observedAttributes.includes(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME))
+        NeedleEngineHTMLElement.observedAttributes.push(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+});
+
+const couldNotLoadScenePromise = Promise.resolve(false);
+
+export class SceneSwitcher extends Behaviour {
+
+    @serializable(AssetReference)
+    scenes!: AssetReference[];
+
+    /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable */
+    @serializable()
+    queryParameterName: string = "scene";
+
+    /** when enabled the new scene is pushed to the browser navigation history, only works with a valid query parameter set */
+    @serializable()
+    useHistory: boolean = true;
+
+    /** when enabled you can switch between scenes using keyboard left, right, A and D or number keys */
+    @serializable()
+    useKeyboard: boolean = true;
+
+    /** when enabled you can switch between scenes using swipe (mobile only) */
+    @serializable()
+    useSwipe: boolean = true;
+
+    private _currentIndex: number = -1;
+    private _currentScene: AssetReference | undefined = undefined;
+    private _engineElementOverserver: MutationObserver | undefined = undefined;
+
+    start() {
+        if (!this.tryLoadFromQueryParam()) {
+            const value = this.context.domElement.getAttribute(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+            // let locked = this.lock;
+            try {
+                // this.lock = false;
+                if (value === null || !this.trySelectSceneFromValue(value))
+                    this.select(0);
+            }
+            finally {
+                // this.lock = locked;
+            }
+        }
+    }
+
+    onEnable(): void {
+        globalThis.addEventListener("popstate", this.onPopState);
+        this.context.input.addEventListener(InputEvents.KeyDown, this.onKeyDown);
+        this.context.input.addEventListener(InputEvents.PointerMove, this.onPointerMove);
+        this.context.input.addEventListener(InputEvents.PointerUp, this.onPointerUp);
+
+        if (!this._engineElementOverserver) {
+            this._engineElementOverserver = new MutationObserver((mutations) => {
+                for (const mut of mutations) {
+                    if (mut.type === "attributes" && mut.attributeName === ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME) {
+                        const value = this.context.domElement.getAttribute(ENGINE_ELEMENT_SCENE_ATTRIBUTE_NAME);
+                        if (value !== null) {
+                            this.trySelectSceneFromValue(value);
+                        }
+                    }
+                }
+            });
+        }
+
+        this._engineElementOverserver.observe(this.context.domElement, {
+            attributes: true
+        });
+    }
+
+    onDisable(): void {
+        globalThis.removeEventListener("popstate", this.onPopState);
+        this.context.input.removeEventListener(InputEvents.KeyDown, this.onKeyDown);
+        this.context.input.removeEventListener(InputEvents.PointerMove, this.onPointerMove);
+        this.context.input.removeEventListener(InputEvents.PointerUp, this.onPointerUp);
+    }
+
+    private onPopState = async (_state: PopStateEvent) => {
+        if (!this.useHistory) return;
+        let wasUsingHistory = this.useHistory;
+        try {
+            this.useHistory = false;
+            await this.tryLoadFromQueryParam();
+        }
+        finally {
+            this.useHistory = wasUsingHistory;
+        }
+    }
+
+    private normalizedSwipeThresholdX = 0.1;
+    private _didSwipe: boolean = false;
+    private onPointerMove = (e: any) => {
+        if (!this._didSwipe && e.button === 0 && e.pointerType === "touch" && this.context.input.getPointerPressedCount() === 1) {
+            const delta = this.context.input.getPointerPositionDelta(e.button);
+            if (delta) {
+                const normalizedX = delta.x / this.context.domWidth;
+                if (normalizedX >= this.normalizedSwipeThresholdX) {
+                    this._didSwipe = true;
+                    this.selectPrev();
+                }
+                else if (normalizedX <= -this.normalizedSwipeThresholdX) {
+                    this._didSwipe = true;
+                    this.selectNext();
+                }
+            }
+        }
+    }
+
+    private onPointerUp = (e: any) => {
+        if (e.button === 0) {
+            this._didSwipe = false;
+        }
+    };
+
+    private onKeyDown = (e: any) => {
+        if (!this.useKeyboard) return;
+        if (!this.scenes) return;
+        const key = e.key.toLowerCase();
+        if (!key) return;
+        const index = parseInt(key) - 1;
+        if (index >= 0) {
+            this.trySelectSceneFromValue(index);
+            return;
+        }
+        switch (key) {
+            case "arrowright":
+            case "d":
+                this.selectNext();
+                break;
+            case "arrowleft":
+            case "a":
+                this.selectPrev();
+                break;
+        }
+    }
+
+    selectNext() {
+        return this.select(this._currentIndex + 1);
+    }
+
+    selectPrev() {
+        return this.select(this._currentIndex - 1);
+    }
+
+    select(index: number) {
+        if (!this.scenes?.length) return couldNotLoadScenePromise;
+        if (index < 0) index = this.scenes.length - 1;
+        if (index >= this.scenes.length) index = 0;
+        const scene = this.scenes[index];
+        return this.switchScene(scene);
+    }
+
+    async switchScene(scene: AssetReference): Promise<boolean> {
+        if (scene === this._currentScene) return true;
+        if (this._currentScene)
+            GameObject.remove(this._currentScene.asset);
+        const index = this._currentIndex = this.scenes?.indexOf(scene) ?? -1;
+        this._currentScene = scene;
+        try {
+            await scene.loadAssetAsync();
+            if (!scene.asset) return false;
+            if (this._currentIndex === index) {
+                GameObject.add(scene.asset, this.gameObject);
+                // save the loaded scene as an url parameter
+                if (this.queryParameterName?.length)
+                    setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);
+                return true;
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        return false;
+    }
+
+    private tryLoadFromQueryParam() {
+        if (!this.queryParameterName?.length) return false;
+        // try restore the scene from the url
+        const value = getParam(this.queryParameterName);
+        if (typeof value === "boolean") return false;
+        return this.trySelectSceneFromValue(value);
+    }
+
+    /** try to select a scene from a string or index */
+    private trySelectSceneFromValue(value: string | number) {
+
+        if (typeof value === "string") {
+            const index = parseInt(value as string);
+            if (index >= 0 && index < this.scenes.length) {
+                return this.select(index);;
+            }
+            else {
+                // Try to find a scene with a matching name
+                for (let i = 0; i < this.scenes.length; i++) {
+                    const scene = this.scenes[i];
+                    if (scene.uri.toLowerCase().includes(value)) {
+                        return this.select(i);;
+                    }
+                }
+            }
+        }
+        else if (typeof value === "number") {
+            if (value >= 0 && value < this.scenes.length) {
+                return this.select(value);;
+            }
+        }
+
+        if (isLocalNetwork()) console.warn("Unknown scene value or index: \"" + value + "\"", this)
+
+        return couldNotLoadScenePromise;
+    }
+}

package/src/engine-components/ScreenCapture.ts

@@ -96,6 +96,7 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
             console.log("Screensharing", this.name, this);
         AudioSource.registerWaitForAllowAudio(() => {
             if (this.videoPlayer && this._currentStream && this._currentMode === ScreenCaptureMode.Receiving) {
+                this.videoPlayer.playInBackground = true;
                 this.videoPlayer.setVideo(this._currentStream);
             }
         });

package/src/engine-components/VideoPlayer.ts

@@ -52,7 +52,7 @@ export class VideoPlayer extends Behaviour {
 
     @serializable()
     aspectMode: AspectMode = AspectMode.None;
-    
+
     @serializable(URL)
     private clip?: string | MediaStream | null = null;
 
@@ -106,12 +106,12 @@ export class VideoPlayer extends Behaviour {
     get isPlaying(): boolean {
         const video = this._videoElement;
         if (video) {
-            if(video.currentTime > 0 && !video.paused && !video.ended
+            if (video.currentTime > 0 && !video.paused && !video.ended
                 && video.readyState > video.HAVE_CURRENT_DATA)
                 return true;
-            else if(video.srcObject){
+            else if (video.srcObject) {
                 const stream = video.srcObject as MediaStream;
-                if(stream.active) return true;
+                if (stream.active) return true;
             }
         }
         return false;
@@ -149,6 +149,9 @@ export class VideoPlayer extends Behaviour {
     }
     private _muted: boolean = false;
 
+    /** Set this to false to pause video playback while the tab is not active */
+    playInBackground: boolean = true;
+
     private _crossOrigin: string | null = "anonymous";
 
     private audioOutputMode: VideoAudioOutputMode = VideoAudioOutputMode.AudioSource;
@@ -198,11 +201,13 @@ export class VideoPlayer extends Behaviour {
         window.addEventListener('visibilitychange', _evt => {
             switch (document.visibilityState) {
                 case "hidden":
-                    this.wasPlaying = this._isPlaying;
-                    this.pause();
+                    if(!this.playInBackground){
+                        this.wasPlaying = this._isPlaying;
+                        this.pause();
+                    }
                     break;
                 case "visible":
-                    if (this.wasPlaying) this.play();
+                    if (this.wasPlaying && !this._isPlaying) this.play();
                     break;
             }
         });
@@ -260,7 +265,7 @@ export class VideoPlayer extends Behaviour {
         this.updateVideoElementSettings();
         this._videoElement?.play().catch(err => {
             // https://developer.chrome.com/blog/play-request-was-interrupted/
-            if(debug)
+            if (debug)
                 console.error("Error playing video", err, "CODE=" + err.code, this.videoElement?.src, this);
             setTimeout(() => {
                 if (this._isPlaying && !this.destroyed && this.activeAndEnabled)
@@ -318,7 +323,7 @@ export class VideoPlayer extends Behaviour {
         this._videoTexture.flipY = false;
         this._videoTexture.encoding = THREE.sRGBEncoding;
         this.handleBeginPlaying(playAutomatically);
-        if(debug)
+        if (debug)
             console.log(this);
     }
 
@@ -420,7 +425,7 @@ export class VideoPlayer extends Behaviour {
         // dont open in fullscreen on ios
         this._videoElement.playsInline = true;
         let muted = !this._receivedInput && this.audioOutputMode !== VideoAudioOutputMode.None;
-        if(!muted && this._muted) muted = true;
+        if (!muted && this._muted) muted = true;
         this._videoElement.muted = muted;
         if (this.playOnAwake)
             this._videoElement.autoplay = true;
@@ -540,7 +545,7 @@ class VideoOverlay {
             if (!this._screenspaceModeQuad) return;
             this._screenspaceModeQuad.geometry.scale(2, 2, 2);
         }
-        
+
         const quad = this._screenspaceModeQuad;
         this.context.scene.add(quad);
         this.updateScreenspaceMaterialUniforms();

package/src/engine-components/XRFlag.ts

@@ -79,6 +79,9 @@ export class XRFlag extends Behaviour {
             XRFlag.firstApply = true;
             XRFlag.Apply();
         }
+        else {
+            this.UpdateVisible(XRState.Global);
+        }
     }
 
     onDestroy(): void {

package/src/engine-components/codegen/components.ts

@@ -114,6 +114,7 @@ export { RGBAColor } from "../js-extensions/RGBAColor";
 export { Rigidbody } from "../RigidBody";
 export { RotationBySpeedModule } from "../ParticleSystemModules";
 export { RotationOverLifetimeModule } from "../ParticleSystemModules";
+export { SceneSwitcher } from "../SceneSwitcher";
 export { ScreenCapture } from "../ScreenCapture";
 export { ScreenSpaceAmbientOcclusion } from "../postprocessing/Effects/ScreenspaceAmbientOcclusion";
 export { ShadowCatcher } from "../ShadowCatcher";

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

@@ -452,7 +452,6 @@ export class PlayableDirector extends Behaviour {
                         const anim = GameObject.getOrAddComponent(binding, Animator);
                         if(anim) binding = anim;
                     }
-                    if (typeof binding.enabled === "boolean") binding.enabled = false;
                     const animationClips = binding?.gameObject?.animations;
                     if (animationClips) {
                         const handler = new Tracks.AnimationTrackHandler();

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

@@ -145,7 +145,7 @@ export class AnimationTrackHandler extends TrackHandler {
     onPauseChanged() {
         // When the timeline is paused the original animator will be enabled again if it was before
         if (this._animator && this._animatorWasEnabled !== undefined) {
-            this._animator.enabled = this.director.isPaused ? this._animatorWasEnabled : false;
+            this._animator.enabled = this.director.isPlaying === false ? this._animatorWasEnabled : false;
         }
     }
 
@@ -225,7 +225,12 @@ export class AnimationTrackHandler extends TrackHandler {
             // We need to disable the animator component in case it also animates
             // which overrides the timeline
             this._animator = GameObject.getComponent(this.target, Animator) ?? null;
-            this._animatorWasEnabled = this._animator?.enabled;
+            if (this._animator)
+            {
+                this._animatorWasEnabled = this._animator.enabled;
+                this._animator.enabled = false;
+            }
+            else this._animatorWasEnabled = false;
         }
 
         // Clip Offsets
@@ -323,6 +328,7 @@ export class AnimationTrackHandler extends TrackHandler {
                 // const clip = this.clips[i];
                 let weight = 1;
                 weight *= this.evaluateWeight(time, i, this.models, isActive);
+                weight *= this.director.weight;
 
                 let handleLoop = isInTimeRange;
                 if(doPreExtrapolate){
@@ -370,7 +376,7 @@ export class AnimationTrackHandler extends TrackHandler {
                 else action.time = t;
 
                 action.timeScale = 0;
-                const effectiveWeight = weight * this.director.weight;
+                const effectiveWeight = weight;
                 action.weight = effectiveWeight;
                 action.clampWhenFinished = true;
                 if (!action.isRunning())