@needle-tools/engine 2.64.0-pre → 2.65.0-pre

package/src/engine/engine_gltf.ts

@@ -9,7 +9,7 @@ export interface INeedleGltfLoader {
     createBuiltinComponents(context: Context, gltfId: SourceIdentifier, gltf, seed: number | null | UIDProvider, extension?: NEEDLE_components): Promise<void>
     writeBuiltinComponentData(comp: object, context: SerializationContext);
     parseSync(context: Context, data, path: string, seed: number | UIDProvider | null): Promise<GLTF | undefined>;
-    loadSync(context: Context, url: string, seed: number | UIDProvider | null, _allowAddingAnimator: boolean, prog?: (ProgressEvent) => void): Promise<GLTF | undefined>
+    loadSync(context: Context, url: string, seed: number | UIDProvider | null, _allowAddingAnimator: boolean, prog?: (prog : ProgressEvent) => void): Promise<GLTF | undefined>
 }
 
 let gltfLoader: INeedleGltfLoader;

package/src/engine/engine_mainloop_utils.ts

@@ -17,7 +17,7 @@ const new_scripts_buffer: any[] = [];
 export function processNewScripts(context: IContext) {
     if (context.new_scripts.length <= 0) return;
     if (debug)
-        console.log("Register new components", context.new_scripts.length, context.alias ? ("element: " + context.alias) : "");
+        console.log("Register new components", context.new_scripts.length, [...context.new_scripts], context.alias ? ("element: " + context.alias) : context["hash"], context);
 
     // if(new_scripts_post_setup_callbacks.length > 0) console.log(new_scripts_post_setup_callbacks);
     if (context.new_scripts_pre_setup_callbacks.length > 0) {
@@ -222,14 +222,22 @@ export function updateIsActive(obj?: Object3D) {
         console.trace("Invalid call - no current context.");
         return;
     }
-    updateIsActiveInHierarchyRecursiveRuntime(obj, isActiveSelf(obj), true);
+    const wasSuccessful = updateIsActiveInHierarchyRecursiveRuntime(obj, isActiveSelf(obj), true);
+    if (!wasSuccessful) {
+        console.error("Failed to update active state in hierarchy of \"" + obj.name + "\"", obj);
+        console.warn(" ↑ this error might be caused by circular references. Please make sure you don't have files with circular references (e.g. one GLB 1 is loading GLB 2 which is then loading GLB 1 again).")
+    }
 }
 
+function updateIsActiveInHierarchyRecursiveRuntime(go: THREE.Object3D, activeInHierarchy: boolean, allowEventCall: boolean, level: number = 0) {
+    if (level > 1000) {
+        console.warn("Hierarchy is too deep (> 1000 level) - will abort updating active state");
+        return false;
+    }
 
-function updateIsActiveInHierarchyRecursiveRuntime(go: THREE.Object3D, activeInHierarchy: boolean, allowEventCall: boolean) {
-
+    const isActive = isActiveSelf(go);
     if (activeInHierarchy) {
-        activeInHierarchy = isActiveSelf(go);
+        activeInHierarchy = isActive;
         // IF we update activeInHierarchy within a disabled hierarchy we need to check the parent
         if (activeInHierarchy && go.parent) {
             activeInHierarchy = go.parent[constants.activeInHierarchyFieldName]
@@ -243,7 +251,7 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: THREE.Object3D, activeInH
     // only raise events here if we didnt call enable etc already
     if (changed) {
         if (debugHierarchy)
-            console.warn("ACTIVE CHANGE", go.name, activeInHierarchy, "changed?" + changed, go.userData.components, go.children, go);
+            console.warn("ACTIVE CHANGE", go.name, isActive, go.visible, activeInHierarchy, "changed?" + changed, go);
         if (allowEventCall) {
             perComponent(go, comp => {
                 if (activeInHierarchy) {
@@ -263,13 +271,34 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: THREE.Object3D, activeInH
         }
     }
 
+    let success = true;
     if (go.children) {
+        const nextLevel = level + 1;
         for (const ch of go.children) {
-            updateIsActiveInHierarchyRecursiveRuntime(ch, activeInHierarchy, allowEventCall);
+            const res = updateIsActiveInHierarchyRecursiveRuntime(ch, activeInHierarchy, allowEventCall, nextLevel);
+            if (res === false) success = false;
         }
     }
+    return success;
 }
 
+// let isRunning = false;
+// // Prevent: https://github.com/needle-tools/needle-tiny/issues/641
+// const temporyChildArrayBuffer: Array<Array<THREE.Object3D>> = [];
+// export function* iterateChildrenSafe(obj: Object3D) {
+//     if (!obj || !obj.children) yield null;
+//     // if(isRunning) return;
+//     // isRunning = true;
+//     const arr = temporyChildArrayBuffer.pop() || [];
+//     arr.push(...obj.children);
+//     for (const ch of arr) {
+//         yield ch;
+//     }
+//     // isRunning = false;
+//     arr.length = 0;
+//     temporyChildArrayBuffer.push(arr);
+// }
+
 export function updateActiveInHierarchyWithoutEventCall(go: THREE.Object3D) {
     let activeInHierarchy = true;
     let current: THREE.Object3D | null = go;

package/src/engine/engine_setup.ts

@@ -48,8 +48,8 @@ export declare class LoadingOptions {
 }
 
 export class ContextArgs {
-	name: string | undefined | null;
-	alias: string | undefined | null = undefined;
+	name?: string;
+	alias?: string;
 	domElement: HTMLElement | null;
 	renderer?: THREE.WebGLRenderer = undefined;
 	hash?: string;
@@ -227,6 +227,8 @@ export class Context implements IContext {
 	lightmaps: ILightDataRegistry;
 	players: PlayerViewManager;
 
+	get isCreated() { return this._isCreated; }
+
 	private _sizeChanged: boolean = false;
 	private _isCreated: boolean = false;
 	private _isVisible: boolean = false;
@@ -287,9 +289,17 @@ export class Context implements IContext {
 		resizeObserver.observe(this.domElement);
 		this._disposeCallbacks.push(() => resizeObserver.disconnect());
 
-		const intersectionObserver = new IntersectionObserver(entries => { this._isVisible = entries[0].isIntersecting; });
-		intersectionObserver.observe(this.domElement);
-		this._disposeCallbacks.push(() => intersectionObserver.disconnect());
+		this._intersectionObserver = new IntersectionObserver(entries => {
+			this._isVisible = entries[0].isIntersecting;
+		});
+		this._disposeCallbacks.push(() => this._intersectionObserver?.disconnect());
+	}
+
+
+	private _intersectionObserver: IntersectionObserver | null = null;
+	private internalOnUpdateVisible() {
+		this._intersectionObserver?.disconnect();
+		this._intersectionObserver?.observe(this.domElement);
 	}
 
 	private _disposeCallbacks: Function[] = [];
@@ -498,6 +508,8 @@ export class Context implements IContext {
 		}
 		if (!prepare_succeeded) return;
 
+		this.internalOnUpdateVisible();
+
 		// console.log(prepare_succeeded);
 
 		if (!this.isManagedExternally)
@@ -770,14 +782,15 @@ export class Context implements IContext {
 		return paused;
 	}
 
-	private evaluatePaused() {
+	private evaluatePaused(): boolean {
 		if (this.isInXR) return false;
 		if (this.isPaused) return true;
 		// if the element is not visible use the runInBackground flag to determine if we should continue
 		if (this.runInBackground) {
 			return false;
 		}
-		return !this.isVisibleToUser;
+		const paused = !this.isVisibleToUser;
+		return paused;
 	}
 
 	private renderRequiredTextures() {

package/src/engine-components/Camera.ts

@@ -2,7 +2,7 @@ import { Behaviour, GameObject } from "./Component";
 import { getParam } from "../engine/engine_utils";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { RGBAColor } from "./js-extensions/RGBAColor";
-import { XRSessionMode } from "../engine/engine_setup";
+import { Context, XRSessionMode } from "../engine/engine_setup";
 import { ICamera } from "../engine/engine_types"
 import { showBalloonMessage } from "../engine/debug/debug";
 import { getWorldPosition } from "../engine/engine_three_utils";
@@ -267,7 +267,7 @@ export class Camera extends Behaviour implements ICamera {
         if (this._cam && this.context.mainCameraComponent === this) {
             switch (this._clearFlags) {
                 case ClearFlags.Skybox:
-                    if (this.environmentIsTransparent()) {
+                    if (Camera.backgroundShouldBeTransparent(this.context)) {
                         if (!this.ARBackgroundAlpha || this.ARBackgroundAlpha < 0.001) {
                             this.context.scene.background = null;
                             this.context.renderer.setClearColor(0x000000, 0);
@@ -287,7 +287,7 @@ export class Camera extends Behaviour implements ICamera {
                     if (this._backgroundColor) {
                         let alpha = this._backgroundColor.alpha;
                         // when in WebXR use ar background alpha override or set to 0
-                        if (this.environmentIsTransparent()) {
+                        if (Camera.backgroundShouldBeTransparent(this.context)) {
                             alpha = this.ARBackgroundAlpha ?? 0;
                         }
                         this.context.scene.background = null;
@@ -302,15 +302,22 @@ export class Camera extends Behaviour implements ICamera {
         }
     }
 
-    private environmentIsTransparent(): boolean {
-        const session = this.context.renderer.xr?.getSession();
+    private enableSkybox() {
+        if (!this._skybox)
+            this._skybox = new CameraSkybox(this);
+        this._skybox.enable();
+    }
+
+    /** Returns true when in XR on a pass through device where the background shouldbe invisible */
+    static backgroundShouldBeTransparent(context:Context) {
+        const session = context.renderer.xr?.getSession();
         if (!session) return false;
         const environmentBlendMode = session.environmentBlendMode;
         if (debug)
             showBalloonMessage("Environment blend mode: " + environmentBlendMode + " on " + navigator.userAgent);
         const transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
 
-        if (this.context.xrSessionMode === XRSessionMode.ImmersiveAR) {
+        if (context.xrSessionMode === XRSessionMode.ImmersiveAR) {
             if (environmentBlendMode === "opaque") {
                 // workaround for Quest 2 returning opaque when it should be alpha-blend
                 // check user agent if this is the Quest browser and return true if so
@@ -323,14 +330,9 @@ export class Camera extends Behaviour implements ICamera {
                 }
             }
         }
+        
         return transparent;
     }
-
-    private enableSkybox() {
-        if (!this._skybox)
-            this._skybox = new CameraSkybox(this);
-        this._skybox.enable();
-    }
 }
 
 

package/src/engine-components/Component.ts

@@ -30,9 +30,9 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D, IGam
         return isDestroyed(go);
     }
 
-    public static setActive(go: THREE.Object3D, active: boolean, processStart: boolean = true, setVisible: boolean = true) {
+    public static setActive(go: THREE.Object3D, active: boolean, processStart: boolean = true) {
         if (!go) return;
-        setActive(go, active, setVisible);
+        setActive(go, active);
         main.updateIsActive(go);
         if (active && processStart)
             main.processStart(Context.Current, go);

package/src/engine-components/Light.ts

@@ -246,9 +246,9 @@ export class Light extends Behaviour implements ILight {
         return vec;
     }
 
-    public updateIntensity() {
-        this.intensity = this._intensity;
-    }
+    // public updateIntensity() {
+    //     this.intensity = this._intensity;
+    // }
 
     awake() {
         this.color = new THREE.Color(this.color ?? 0xffffff);
@@ -256,10 +256,12 @@ export class Light extends Behaviour implements ILight {
     }
 
     onEnable(): void {
+        if(debug) console.log("ENABLE LIGHT", this.name);
         this.createLight();
         if (this.isBaked) return;
         else if (this.light) {
             this.light.visible = true;
+            this.light.intensity = this._intensity;
             if (this.selfIsLight) {
                 // nothing to do
             }
@@ -273,8 +275,12 @@ export class Light extends Behaviour implements ILight {
     }
 
     onDisable() {
+        if(debug) console.log("DISABLE LIGHT", this.name);
         if (this.light) {
-            this.light.visible = false;
+            if (this.selfIsLight)
+                this.light.intensity = 0;
+            else
+                this.light.visible = false;
         }
         WebXR.removeEventListener(WebXREvent.XRStarted, this._webXRStartedListener);
         WebXR.removeEventListener(WebXREvent.XRStopped, this._webXREndedListener);
@@ -286,19 +292,19 @@ export class Light extends Behaviour implements ILight {
 
     private onWebXRStarted() {
         this._webARRoot = GameObject.getComponentInParent(this.gameObject, WebARSessionRoot) ?? undefined;
-        this.startCoroutine(this._updateLightIntensityInARRoutine());
+        // this.startCoroutine(this._updateLightIntensityInARRoutine());
     }
 
-    private *_updateLightIntensityInARRoutine() {
-        while (this.context.isInAR) {
-            yield;
-            this.updateIntensity();
-            for (let i = 0; i < 30; i++) yield;
-        }
-    }
+    // private *_updateLightIntensityInARRoutine() {
+    //     while (this.context.isInAR) {
+    //         yield;
+    //         // this.updateIntensity();
+    //         for (let i = 0; i < 30; i++) yield;
+    //     }
+    // }
 
     private onWebXREnded() {
-        this.updateIntensity();
+        // this.updateIntensity();
     }
 
     createLight() {
@@ -306,6 +312,7 @@ export class Light extends Behaviour implements ILight {
 
         if (lightAlreadyCreated && !this.light) {
             this.light = this.gameObject as unknown as THREE.Light;
+            this.light.name = this.name;
             this._intensity = this.light.intensity;
 
             switch (this.type) {

package/src/engine-components/Skybox.ts

@@ -4,7 +4,7 @@ import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader";
 import { EquirectangularRefractionMapping, sRGBEncoding, Texture, TextureLoader } from "three"
 import { syncField } from "../engine/engine_networking_auto";
-
+import { Camera } from "./Camera";
 
 export class RemoteSkybox extends Behaviour {
 
@@ -22,6 +22,7 @@ export class RemoteSkybox extends Behaviour {
     environment: boolean = true;
 
     private _loader?: RGBELoader | EXRLoader | TextureLoader;
+    private _prevUrl?: string;
     private _prevLoadedEnvironment?: Texture;
     private _prevEnvironment: Texture | null = null;
     private _prevBackground: any = null;
@@ -33,10 +34,9 @@ export class RemoteSkybox extends Behaviour {
 
     onDisable() {
         if (this.context.scene.environment === this._prevLoadedEnvironment) {
-            if (!this.context.isInXR) {
-                this.context.scene.environment = this._prevEnvironment;
+            this.context.scene.environment = this._prevEnvironment;
+            if (!Camera.backgroundShouldBeTransparent(this.context))
                 this.context.scene.background = this._prevBackground;
-            }
             this._prevLoadedEnvironment = undefined;
         }
         this.unregisterDropEvents();
@@ -48,39 +48,66 @@ export class RemoteSkybox extends Behaviour {
             console.warn("Potentially invalid skybox url", this.url, "on", this.name);
         }
 
-        // if (!this._loader) 
-        {
-            const isEXR = url.endsWith(".exr");
-            const isHdr = url.endsWith(".hdr");
-            if (isEXR) {
+        if (this._prevUrl === url && this._prevLoadedEnvironment) {
+            this.applySkybox();
+            return;
+        }
+        else {
+            this._prevLoadedEnvironment?.dispose();
+            this._prevLoadedEnvironment = undefined;
+        }
+        this._prevUrl = url;
+
+
+        const isEXR = url.endsWith(".exr");
+        const isHdr = url.endsWith(".hdr");
+        if (isEXR) {
+            if (!(this._loader instanceof EXRLoader))
                 this._loader = new EXRLoader();
-            }
-            else if (isHdr) {
+        }
+        else if (isHdr) {
+            if (!(this._loader instanceof RGBELoader))
                 this._loader = new RGBELoader();
-            }
-            else {
+        }
+        else {
+            if (!(this._loader instanceof TextureLoader))
                 this._loader = new TextureLoader();
-            }
         }
+
         console.log("Loading skybox: " + url);
         const envMap = await this._loader.loadAsync(url);
         if (!envMap) return;
+        // Check if we're still enabled
         if (!this.enabled) return;
+        // Update the current url
         this.url = url;
-        envMap.mapping = EquirectangularRefractionMapping;
+        const nameIndex = url.lastIndexOf("/");
+        envMap.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
         if (this._loader instanceof TextureLoader) {
             envMap.encoding = sRGBEncoding;
         }
-        this._prevBackground = this.context.scene.background;
-        this._prevEnvironment = this.context.scene.environment;
-        console.log("Set skybox", this.url);
+        this._prevLoadedEnvironment = envMap;
+        this.applySkybox();
+    }
+
+    private applySkybox() {
+        const envMap = this._prevLoadedEnvironment;
+        if (!envMap) return;
+
+        envMap.mapping = EquirectangularRefractionMapping;
+        envMap.needsUpdate = true;
+
+        // capture state
+        if (this.context.scene.background !== envMap)
+            this._prevBackground = this.context.scene.background;
+        if (this.context.scene.environment !== envMap)
+            this._prevEnvironment = this.context.scene.environment;
+
+        console.log("Set remote skybox", this.url);
         if (this.environment)
             this.context.scene.environment = envMap;
-        if (this.background)
+        if (this.background && !Camera.backgroundShouldBeTransparent(this.context))
             this.context.scene.background = envMap;
-        this._prevLoadedEnvironment = envMap;
-        const nameIndex = url.lastIndexOf("/");
-        envMap.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
         if (this.context.mainCameraComponent?.backgroundBlurriness !== undefined)
             this.context.scene.backgroundBlurriness = this.context.mainCameraComponent.backgroundBlurriness;
     }

package/src/engine-components/Volume.ts

@@ -88,6 +88,7 @@ export class VolumeProfile {
                 }
             }
             else if (component instanceof ColorAdjustments) {
+                if (!component.active) continue;
                 const colorAdjustments = component as ColorAdjustments;
                 // unity range goes from -15..15
                 // three.js range goes from 0..inf

package/src/engine-components/js-extensions/Object3D.ts

@@ -63,7 +63,7 @@ if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "activeSelf")) {
             return isActiveSelf(this)
         },
         set: function (val: boolean | number) {
-            setActive(this, val, true);
+            setActive(this, val);
         }
     });
 }

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

@@ -53,7 +53,7 @@ export class Canvas extends UIRootComponent {
         this.onRenderSettingsChanged();
     }
     get castShadows() { return this._castShadows; }
-    private _castShadows: boolean = true;
+    private _castShadows: boolean = false;
 
     @serializable()
     set receiveShadows(val: boolean) {
@@ -62,7 +62,7 @@ export class Canvas extends UIRootComponent {
         this.onRenderSettingsChanged();
     }
     get receiveShadows() { return this._receiveShadows; }
-    private _receiveShadows: boolean = true;
+    private _receiveShadows: boolean = false;
 
 
     @serializable()