Needle Engine 3.18.0

Files changed (8) hide show

src/engine-components/api.ts +3 -2
src/engine/debug/debug_console.ts +8 -6
src/engine/engine_context.ts +5 -1
src/engine/engine_element_attributes.ts +7 -5
src/engine/engine_element_loading.ts +8 -4
src/engine/engine_element.ts +23 -9
src/engine-components/SceneSwitcher.ts +86 -9
src/engine-components/SpriteRenderer.ts +5 -0

src/engine-components/api.ts CHANGED Viewed

@@ -13,7 +13,8 @@
 export * from "./webxr/index.js"
 export { ClearFlags } from "./Camera.js"
+export { type ISceneEventListener } from "./SceneSwitcher.js";
+import "./CameraUtils.js"
+import "./AnimationUtils.js"
-import "./CameraUtils.js"
-import "./AnimationUtils.js"

src/engine/debug/debug_console.ts CHANGED Viewed

@@ -17,15 +17,16 @@
 }
 if (!suppressConsole && (showConsole || isLocalNetwork())) {
-    if (isLocalNetwork())
-        console.log("Add the ?console query parameter to the url to show the debug console (on mobile it will automatically open for local development when your get errors)");
+    if (isLocalNetwork()) {
+        const currentUrl = new URL(window.location.href);
+        currentUrl.searchParams.set("console", "1");
+        console.log("🌵 Tip: You can add the \"?console\" query parameter to the url to show the debug console (on mobile it will automatically open in the bottom right corner when your get errors during development)", "\nOpen this page console: " + currentUrl.toString());
+    }
     const isMobile = isMobileDevice();
-    if (isMobile)
-    {
+    if (isMobile) {
         beginWatchingLogs();
         createConsole(true);
-        if (isMobile)
-        {
+        if (isMobile) {
             const engineElement = document.querySelector("needle-engine");
             // setTimeout(() => {
             //     const el = getConsoleElement();
@@ -192,6 +193,7 @@
             consoleHtmlElement?.prepend(styles);
             if (startHidden === true)
                 hideDebugConsole();
+            console.log("🌵 Debug console has loaded");
         }
     };

src/engine/engine_context.ts CHANGED Viewed

@@ -796,7 +796,11 @@
 		this._dispatchReadyAfterFrame = true;
 		const res = ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this, { files: loadedFiles });
-		if (res) await res;
+		if (res) {
+			if("internalSetLoadingMessage" in this.domElement && typeof this.domElement.internalSetLoadingMessage === "function")
+				this.domElement?.internalSetLoadingMessage("finish loading");
+			await res;
+		}
 		this._isCreating = false;
 		if (!this.isManagedExternally)

src/engine/engine_element_attributes.ts CHANGED Viewed

@@ -32,15 +32,17 @@
 type LoadingAttributes = {
     "loading-style"?: "light" | "dark",
-    /** requires Pro license */
+    /** Pro feature */
+    "hide-loading-overlay"?: boolean,
+    /** Pro feature */
     "loading-background-color"?: string,
-    /** requires Pro license */
+    /** Pro feature */
     "loading-logo-src"?: string,
-    /** requires Pro license */
+    /** Pro feature */
     "primary-color"?: string,
-    /** requires Pro license */
+    /** Pro feature */
     "secondary-color"?: string,
-    /** requires Pro license */
+    /** Pro feature */
     "loading-text-color"?: string,
 }

src/engine/engine_element_loading.ts CHANGED Viewed

@@ -184,7 +184,7 @@
             else
                 loadingStyle = "light";
         }
         const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "absolute";
@@ -244,18 +244,22 @@
         logo.style.width = `${logoSize}px`;
         logo.style.height = `${logoSize}px`;
         logo.style.marginBottom = "20px";
-        logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
-        logo.style.cursor = "pointer";
         logo.style.userSelect = "none";
-        logo.style.pointerEvents = "all";
         logo.style.objectFit = "contain";
         logo.src = logoSVG;
+        let isUsingCustomLogo = false;
         if (hasLicense && this._element) {
             const customLogo = this._element.getAttribute("loading-logo-src");
             if (customLogo) {
+                isUsingCustomLogo = true;
                 logo.src = customLogo;
             }
         }
+        if (!isUsingCustomLogo) {
+            logo.style.cursor = "pointer";
+            logo.style.pointerEvents = "all";
+            logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
+        }
         this._loadingElement.appendChild(logo);
         this._loadingElement.appendChild(loadingBarContainer);

src/engine/engine_element.ts CHANGED Viewed

@@ -7,9 +7,7 @@
 import { getLoader, registerLoader } from "../engine/engine_gltf.js";
 import { NeedleGltfLoader } from "./engine_scenetools.js";
 import { INeedleEngineComponent, LoadedGLTF } from "./engine_types.js";
-import { isLocalNetwork } from "./engine_networking_utils.js";
 import { isDevEnvironment, showBalloonWarning } from "./debug/index.js";
-import { destroy } from "./engine_gameobject.js";
 import { hasCommercialLicense } from "./engine_license.js";
 import { VERSION } from "./engine_constants.js";
@@ -40,7 +38,7 @@
 // https://developers.google.com/web/fundamentals/web-components/customelements
 /** <needle-engine> web component. See @type {NeedleEngineAttributes} attributes for supported attributes
- * @type {import ("./engine_element_attributes").NeedleEngineAttributes}
+ * @type {import ("./engine_element_attributes.js").NeedleEngineAttributes}
 */
 export class NeedleEngineHTMLElement extends HTMLElement implements INeedleEngineComponent {
@@ -286,6 +284,13 @@
             },
             cancelable: true
         }));
+        if (allowOverridingDefaultLoading) {
+            // Handle the <needle-engine hide-loading-overlay> attribute
+            const hideOverlay = this.getAttribute("hide-loading-overlay");
+            if (hideOverlay !== null  && hideOverlay !== undefined && hideOverlay !== "0") {
+                useDefaultLoading = false;
+            }
+        }
         // for local development we allow overriding the loading screen - but we notify the user that it won't work in a deployed environment
         if (useDefaultLoading === false && !allowOverridingDefaultLoading) {
             if (!isDevEnvironment())
@@ -372,6 +377,10 @@
     private onReady = () => this._loadingView?.onLoadingFinished();
     private onError = () => this._loadingView?.setMessage("Loading failed!");
+    private internalSetLoadingMessage(str: string) {
+        this._loadingView?.setMessage(str);
+    }
     private getSourceFiles(): Array<string> {
         const src: string | null | string[] = this.getAttribute("src");
         if (!src) return [];
@@ -426,13 +435,18 @@
             this.removeEventListener(eventName, prev as any);
         }
         if (typeof code === "string" && code.length > 0) {
-            // indirect eval https://esbuild.github.io/content-types/#direct-eval
-            const fn = (0, eval)(code);
-            // const fn = new Function(newValue);
-            if (typeof fn === "function") {
-                this._previouslyRegisteredMap.set(eventName, fn);
-                this.addEventListener(eventName, evt => fn?.call(globalThis, this._context, evt));
+            try {
+                // indirect eval https://esbuild.github.io/content-types/#direct-eval
+                const fn = (0, eval)(code);
+                // const fn = new Function(newValue);
+                if (typeof fn === "function") {
+                    this._previouslyRegisteredMap.set(eventName, fn);
+                    this.addEventListener(eventName, evt => fn?.call(globalThis, this._context, evt));
+                }
             }
+            catch (err) {
+                console.error("Error registering event " + eventName + "=\"" + code + "\" failed with the following error:\n", err);
+            }
         }
     }

src/engine-components/SceneSwitcher.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import { AssetReference } from "../engine/engine_addressables.js";
 import { InputEvents } from "../engine/engine_input.js";
 import { isLocalNetwork } from "../engine/engine_networking_utils.js";
-import { getParam, setParamWithoutReload } from "../engine/engine_utils.js";
+import { delay, getParam, setParamWithoutReload } from "../engine/engine_utils.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { Behaviour, GameObject } from "./Component.js";
 import { registerObservableAttribute } from "../engine/engine_element_extras.js";
+import { Object3D } from "three";
 const debug = getParam("debugsceneswitcher");
@@ -29,11 +30,22 @@
     index: number;
 }
+/** The ISceneEventListener is called by the SceneSwitcher when a scene is loaded or unloaded. It must be added to the root object of your scene */
+export interface ISceneEventListener {
+    /** Called when the scene is loaded and added */
+    sceneOpened?(): Promise<void>
+    /** Called before the scene is being removed (due to another scene being loaded) */
+    sceneClosing?(): Promise<void>
+}
 export class SceneSwitcher extends Behaviour {
     @serializable(AssetReference)
     scenes!: AssetReference[];
+    @serializable(AssetReference)
+    loadingScene!: AssetReference;
     /** the url parameter that is set/used to store the currently loaded scene in, set to "" to disable */
     @serializable()
     queryParameterName: string = "scene";
@@ -86,7 +98,7 @@
     private _preloadScheduler?: PreLoadScheduler;
     awake(): void {
-        if(debug) console.log("SceneSwitcher", this);
+        if (debug) console.log("SceneSwitcher", this);
     }
     async start() {
@@ -135,6 +147,9 @@
         this._preloadScheduler.maxLoadBehind = this.preloadPrevious;
         this._preloadScheduler.maxConcurrent = this.preloadConcurrent;
         this._preloadScheduler.begin();
+        // Begin loading the loading scene
+        // if (this.loadingScene) this.loadingScene.loadAssetAsync();
     }
     onDisable(): void {
@@ -157,7 +172,7 @@
                 const state = _state?.state;
                 if (state && state.startsWith(this.guid)) {
                     const value = state.substr(this.guid.length + 2);
-                    if(debug) console.log("PopState", value);
+                    if (debug) console.log("PopState", value);
                     await this.trySelectSceneFromValue(value);
                 }
             }
@@ -170,7 +185,7 @@
     private normalizedSwipeThresholdX = 0.1;
     private _didSwipe: boolean = false;
     private onPointerMove = (e: any) => {
-        if(!this.useSwipe) return;
+        if (!this.useSwipe) return;
         if (!this._didSwipe && e.button === 0 && e.pointerType === "touch" && this.context.input.getPointerPressedCount() === 1) {
             const delta = this.context.input.getPointerPositionDelta(e.button);
             if (delta) {
@@ -294,7 +309,12 @@
     }
     async __internalSwitchScene(scene: AssetReference): Promise<boolean> {
         if (this._currentScene) {
-            if(debug) console.log("UNLOAD", scene.uri)
+            if (debug) console.log("UNLOAD", scene.uri)
+            const sceneListener = this.tryGetSceneEventListener(this._currentScene.asset as any as Object3D);
+            if (sceneListener?.sceneClosing) {
+                const res = sceneListener.sceneClosing();
+                if (res instanceof Promise) await res;
+            }
             this._currentScene.unload();
         }
         this._currentScene = undefined;
@@ -303,7 +323,9 @@
         try {
             const loadStartEvt = new CustomEvent<LoadSceneEvent>("loadscene-start", { detail: { scene: scene, switcher: this, index: index } })
             this.dispatchEvent(loadStartEvt);
-            await scene.loadAssetAsync();
+            await this.onStartLoading();
+            await scene.loadAssetAsync().catch(console.error);
+            await this.onEndLoading();
             const finishedEvt = new CustomEvent<LoadSceneEvent>("loadscene-finished", { detail: { scene: scene, switcher: this, index: index } });
             this.dispatchEvent(finishedEvt);
             if (finishedEvt.defaultPrevented) {
@@ -315,11 +337,11 @@
                 return false;
             }
             if (this._currentIndex === index) {
-                if(debug) console.log("ADD", scene.uri)
+                if (debug) console.log("ADD", scene.uri)
                 this._currentScene = scene;
                 GameObject.add(scene.asset, this.gameObject);
                 if (this.useSceneLighting)
-                    this.context.sceneLighting.enable(scene)
+                    this.context.sceneLighting.enable(scene);
                 if (this.useHistory && index >= 0) {
                     // take the index as the query parameter value
                     let queryParameterValue = index.toString();
@@ -338,6 +360,12 @@
                             history.pushState(stateName, "unused", location.href);
                     }
                 }
+                // Call SceneListener opened callback (if a SceneListener is in the scene)
+                const sceneListener = this.tryGetSceneEventListener(scene.asset as any as Object3D);
+                if (sceneListener?.sceneOpened) {
+                    const res = sceneListener.sceneOpened();
+                    if (res instanceof Promise) await res;
+                }
                 return true;
             }
         }
@@ -350,7 +378,7 @@
     preload(index: number) {
         if (index >= 0 && index < this.scenes.length) {
             const scene = this.scenes[index];
-            if(scene instanceof AssetReference)
+            if (scene instanceof AssetReference)
                 return scene.preload();
         }
         return couldNotLoadScenePromise;
@@ -378,6 +406,7 @@
                 const lowerCaseValue = value.toLowerCase();
                 for (let i = 0; i < this.scenes.length; i++) {
                     const scene = this.scenes[i];
+                    if (!scene) continue;
                     if (sceneUriToName(scene.uri).toLowerCase().includes(lowerCaseValue)) {
                         return this.select(i);;
                     }
@@ -394,6 +423,54 @@
         return couldNotLoadScenePromise;
     }
+    private _lastLoadingScene: AssetReference | undefined = undefined;
+    private _loadingScenePromise: Promise<boolean> | undefined = undefined;
+    private _isCurrentlyLoading: boolean = false;
+    private async onStartLoading() {
+        this._isCurrentlyLoading = true;
+        if (this.loadingScene) {
+            // save the last loading scene reference so that it can be changed at runtime
+            // since we cache the loading promise here
+            if(this._lastLoadingScene !== this.loadingScene) {
+                this._loadingScenePromise = undefined;
+            }
+            this._lastLoadingScene = this.loadingScene;
+            if (!this._loadingScenePromise) {
+                this._loadingScenePromise = this.loadingScene?.loadAssetAsync();
+            }
+            await this._loadingScenePromise;
+            if (this._isCurrentlyLoading && this.loadingScene?.asset) {
+                if (debug) console.log("Add loading scene", this.loadingScene.uri, this.loadingScene.asset)
+                const obj = this.loadingScene.asset as any as Object3D;
+                GameObject.add(obj, this.gameObject);
+                const sceneListener = this.tryGetSceneEventListener(obj);
+                if (sceneListener?.sceneOpened) {
+                    const res = sceneListener.sceneOpened();
+                    if (res instanceof Promise) await res;
+                }
+            }
+        }
+    }
+    private async onEndLoading() {
+        this._isCurrentlyLoading = false;
+        if (this.loadingScene?.asset) {
+            if (debug) console.log("Remove loading scene", this.loadingScene.uri);
+            const obj = this.loadingScene.asset as any as Object3D;
+            // try to find an ISceneEventListener component
+            const sceneListener = this.tryGetSceneEventListener(obj);
+            if (typeof sceneListener?.sceneClosing === "function") {
+                const res = sceneListener.sceneClosing();
+                if (res instanceof Promise) await res;
+            }
+            GameObject.remove(obj);
+        }
+    }
+    private tryGetSceneEventListener(obj: Object3D): ISceneEventListener | null {
+        const sceneListener = GameObject.foreachComponent(obj, c => (c as any as ISceneEventListener).sceneClosing ? c : null) as ISceneEventListener | null;
+        return sceneListener;
+    }
 }

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -187,6 +187,11 @@
         if (!this.__didAwake) return;
         if (!this.sprite?.spriteSheet?.sprites) return;
         const sprite = this.sprite.spriteSheet.sprites[this.spriteIndex];
+        if (!sprite) {
+            if (debug)
+                console.warn("Sprite not found", this.spriteIndex, this.sprite.spriteSheet.sprites);
+            return;
+        }
         if (!this._currentSprite) {
             const mat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
             if (!mat) return;