@needle-tools/engine 4.11.5-next.753a642 → 4.11.5-next.a900688

package/src/engine/engine_scenelighting.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, LightProbe, SphericalHarmonics3, SRGBColorSpace,Texture, Vector4, WebGLCubeRenderTarget } from "three";
+import { EquirectangularReflectionMapping, LightProbe, Source, SphericalHarmonics3, SRGBColorSpace, Texture, Vector4, WebGLCubeRenderTarget } from "three";
 
 import { AssetReference } from "./engine_addressables.js";
 import { Context } from "./engine_setup.js";
@@ -44,9 +44,16 @@ export class RendererData {
         this.context.pre_update_callbacks.push(this.preUpdate.bind(this))
     }
 
+    /**
+     * The id of the currently active scene light settings (source identifier).
+     */
     private _currentLightSettingsId?: SourceIdentifier;
     private _sceneLightSettings?: Map<SourceIdentifier, SceneLightSettings>;
 
+    get currentLightSettingsId(): SourceIdentifier | undefined {
+        return this._currentLightSettingsId;
+    }
+
     private preUpdate() {
         const time = this.context.time;
         this._timevec4.x = time.time;
@@ -82,11 +89,11 @@ export class RendererData {
 
     /** set the scene lighting from a specific scene. Will disable any previously enabled lighting settings */
     enable(sourceId: SourceIdentifier | AssetReference) {
-        if(sourceId instanceof AssetReference)
+        if (sourceId instanceof AssetReference)
             sourceId = sourceId.url;
         const settings = this._sceneLightSettings?.get(sourceId);
         if (!settings) {
-            if(debug) console.warn("No light settings found for", sourceId);
+            if (debug) console.warn("No light settings found for", sourceId);
             return false;
         }
         if (debug) console.log("Enable scene light settings", sourceId, settings);
@@ -100,7 +107,7 @@ export class RendererData {
 
     /** disable the lighting of a specific scene, will only have any effect if it is currently active */
     disable(sourceId: SourceIdentifier | AssetReference) {
-        if(sourceId instanceof AssetReference)
+        if (sourceId instanceof AssetReference)
             sourceId = sourceId.url;
         if (sourceId === null || sourceId === undefined) return false;
         const settings = this._sceneLightSettings?.get(sourceId);
@@ -112,8 +119,22 @@ export class RendererData {
         return true;
     }
 
-    /** Disables the currently active scene lighting (if any), returns the id of the previously active lighting */
-    disableCurrent() : SourceIdentifier | null {
+    /**
+     * Enables the currently active scene lighting (if any), returns the id of the enabled lighting.
+     * @returns The id of the enabled lighting, or null if no lighting is currently active.
+     */
+    enableCurrent(): SourceIdentifier | null {
+        if (this._currentLightSettingsId) {
+            this.enable(this._currentLightSettingsId);
+            return this._currentLightSettingsId ?? null;
+        }
+        return null;
+    }
+
+    /** Disables the currently active scene lighting (if any), returns the id of the previously active lighting
+     * @returns The id of the previously active lighting, or null if no lighting was active.
+     */
+    disableCurrent(): SourceIdentifier | null {
         if (this._currentLightSettingsId) {
             const prev = this._currentLightSettingsId;
             this.disable(this._currentLightSettingsId);
@@ -162,7 +183,7 @@ export class RendererData {
     private __currentReflectionId: SourceIdentifier | null = null;
 
     /** @internal */
-    internalEnableReflection(sourceId: SourceIdentifier) : Texture | null {
+    internalEnableReflection(sourceId: SourceIdentifier): Texture | null {
         this.__currentReflectionId = sourceId;
         const settings = this._sceneLightSettings?.get(sourceId);
 
@@ -181,6 +202,7 @@ export class RendererData {
                     const tex = existing.Source;
                     tex.mapping = EquirectangularReflectionMapping;
                     scene.environment = tex;
+                    scene.environmentIntensity = this.environmentIntensity || 1;
                     return tex;
                 }
                 else if (debug) console.warn("Could not find reflection for source", sourceId);
@@ -216,7 +238,7 @@ export class RendererData {
     /** @internal */
     internalDisableReflection(sourceId?: SourceIdentifier) {
         if (sourceId && sourceId !== this.__currentReflectionId) {
-            if(debug) console.log("Not disabling reflection for", sourceId, "because it is not the current light settings id", this.__currentReflectionId)
+            if (debug) console.log("Not disabling reflection for", sourceId, "because it is not the current light settings id", this.__currentReflectionId)
             return;
         }
         if (debug) console.log("Disable reflection", sourceId)

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -95,8 +95,8 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                     }
                     const results = await PromiseAllWithErrors(dependencies);
                     if (results?.anyFailed) {
-                        if (isDevEnvironment())
-                            console.error("Failed to load lightmap extension", results);
+                        if (isDevEnvironment() || debug)
+                            console.error("[NEEDLE_lightmaps]Error during extension loading:", results);
                     }
                     resolve();
                 });

package/src/engine/extensions/extensions.ts

@@ -92,18 +92,24 @@ class PointerResolver {
     }
 }
 
-export async function registerExtensions(loader: GLTFLoader, context: Context, url: string) {
+export async function registerExtensions(loader: GLTFLoader, context: Context, url: string, sourceId: SourceIdentifier) {
 
     // Make sure to remove any url parameters from the sourceId (because the source id in the renderer does not have a ?v=xxx so it will not be able to register the resolved lightmap otherwise)
     const idEnd = url.indexOf("?");
     if (idEnd >= 0) url = url.substring(0, idEnd);
+    if (!sourceId) {
+        sourceId = url;
+    }
+    if (sourceId.startsWith("blob:") || sourceId.startsWith("data:")) {
+        console.debug("[GLTFLoader] Suspicious sourceId detected");
+    }
 
     loader.register(p => new NEEDLE_gameobject_data(p));
     loader.register(p => new NEEDLE_persistent_assets(p));
-    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, url));
-    loader.register(p => new NEEDLE_lighting_settings(p, url, context));
-    loader.register(p => new NEEDLE_techniques_webgl(p, url));
-    loader.register(p => new NEEDLE_render_objects(p, url));
+    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, sourceId));
+    loader.register(p => new NEEDLE_lighting_settings(p, sourceId, context));
+    loader.register(p => new NEEDLE_techniques_webgl(p, sourceId));
+    loader.register(p => new NEEDLE_render_objects(p, sourceId));
     loader.register(p => new NEEDLE_progressive(p));
     loader.register(p => new EXT_texture_exr(p));
     if (isResourceTrackingEnabled()) loader.register(p => new InternalUsageTrackerPlugin(p))

package/src/engine/xr/NeedleXRSession.ts

@@ -527,7 +527,9 @@ export class NeedleXRSession implements INeedleXRSession {
         else
             console.log("%c" + `Requesting ${mode} session`, "font-weight:bold;");
         for (const script of scripts) {
-            if (script.onBeforeXR) script.onBeforeXR(mode, init);
+            if (script.onBeforeXR && script.activeAndEnabled && !script.destroyed) {
+                script.onBeforeXR(mode, init);
+            }
         }
         for (const listener of this._sessionRequestStartListeners) {
             listener({ mode, init });

package/src/engine-components/ReflectionProbe.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
+import { CubeReflectionMapping, CubeTexture, EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
 
 import { isDevEnvironment, showBalloonWarning } from "../engine/debug/index.js";
 import { serializable } from "../engine/engine_serialization.js";
@@ -63,13 +63,19 @@ export class ReflectionProbe extends Behaviour {
 
     // @serializable(Texture)
     set texture(tex: Texture) {
-        if (tex && !(tex instanceof Texture)) {
-            console.error("ReflectionProbe.texture must be a Texture", tex);
-            return;
-        }
+
+        if (this._texture === tex) return;
         this._texture = tex;
+
+        if (debug) console.debug("[ReflectionProbe] Set reflection probe texture " + (tex?.name || "(removed)"));
+
         if (tex) {
-            tex.mapping = EquirectangularReflectionMapping;
+            if (tex instanceof CubeTexture) {
+                // cube textures use CubeReflectionMapping by default
+            }
+            else if (tex.mapping !== EquirectangularReflectionMapping) {
+                tex.mapping = EquirectangularReflectionMapping;
+            }
             tex.colorSpace = LinearSRGBColorSpace;
             tex.needsUpdate = true;
         }
@@ -110,9 +116,8 @@ export class ReflectionProbe extends Behaviour {
         }
     }
     start(): void {
-        if (!this._texture && isDevEnvironment()) {
+        if (!this._texture) {
             console.warn(`[ReflectionProbe] Missing texture. Please assign a custom cubemap texture. To use reflection probes assign them to your renderer's "anchor" property.`);
-            showBalloonWarning("ReflectionProbe configuration hint: See browser console for details")
         }
     }
 
@@ -206,8 +211,11 @@ export class ReflectionProbe extends Behaviour {
             /** this is the material that we copied and that has the reflection probe */
             const copy = cached?.copy;
 
-            // make sure the reflection probe is assigned
-            copy["envMap"] = this.texture;
+            if ("envMap" in copy) {
+                // make sure the reflection probe is assigned
+                copy.envMap = this.texture;
+                copy.needsUpdate = true;
+            }
 
             _rend.sharedMaterials[i] = copy;
         }

package/src/engine-components/Renderer.ts

@@ -702,7 +702,6 @@ export class Renderer extends Behaviour implements IRenderer {
                 // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
                 if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
                     mat.envMap = this.context.scene.environment;
-                    mat.envMapIntensity = this.context.scene.environmentIntensity;
                     mat.envMapRotation = this.context.scene.environmentRotation;
                 }
             }
@@ -713,8 +712,9 @@ export class Renderer extends Behaviour implements IRenderer {
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
         if (material.envMapIntensity !== undefined) {
             const factor = this.hasLightmap ? Math.PI : 1;
-            const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
+            const environmentIntensity = this.context.scene.environmentIntensity;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
+            // console.log(this.context.sceneLighting.environmentIntensity);
         }
         if (this._lightmaps) {
             for (const lm of this._lightmaps) {

package/src/engine-components/Skybox.ts

@@ -1,16 +1,14 @@
-import { CompressedCubeTexture, CubeRefractionMapping, CubeTexture, CubeUVReflectionMapping, EquirectangularRefractionMapping, SRGBColorSpace, Texture, TextureLoader } from "three"
-import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader.js";
-import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader.js";
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { CompressedCubeTexture, CubeTexture, CubeUVReflectionMapping, EquirectangularRefractionMapping, Texture } from "three"
+import { isDevEnvironment } from "../engine/debug/debug.js";
 
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { syncField } from "../engine/engine_networking_auto.js";
 import { loadPMREM } from "../engine/engine_pmrem.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
-import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback, toSourceId } from "../engine/engine_utils.js";
+import { addAttributeChangeCallback, getParam, removeAttributeChangeCallback, toSourceId } from "../engine/engine_utils.js";
 import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
-import { Camera, ClearFlags } from "./Camera.js";
+import { Camera } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
 
 const debug = getParam("debugskybox");
@@ -18,6 +16,29 @@ const debug = getParam("debugskybox");
 registerObservableAttribute("background-image");
 registerObservableAttribute("environment-image");
 
+
+type MagicSkyboxName = "studio" | "blurred-skybox" | "quicklook-ar" | "quicklook";
+const MagicSkyboxNames: Record<MagicSkyboxName, { url: string, url_low: string }> = {
+    "studio": {
+        url: "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.pmrem4x4.ktx2?pmrem",
+        url_low: "https://cdn.needle.tools/static/skybox/modelviewer-Neutral-small.pmrem4x4.ktx2?pmrem"
+    },
+    "blurred-skybox": {
+        url: "https://cdn.needle.tools/static/skybox/blurred-skybox.pmrem4x4.ktx2?pmrem",
+        url_low: "https://cdn.needle.tools/static/skybox/blurred-skybox-small.pmrem4x4.ktx2?pmrem"
+    },
+    "quicklook-ar": {
+        url: "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.pmrem4x4.ktx2?pmrem",
+        url_low: "https://cdn.needle.tools/static/skybox/QuickLook-ARMode-small.pmrem4x4.ktx2?pmrem"
+    },
+    "quicklook": {
+        url: "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.pmrem4x4.ktx2?pmrem",
+        url_low: "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode-small.pmrem4x4.ktx2?pmrem"
+    }
+} as const;
+type AnyString = string & { _brand?: never };
+
+
 function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boolean, environment: boolean, attribute: "background-image" | "environment-image") {
 
     // when the user sets the attribute to a color we can not handle it as a skybox url.
@@ -91,8 +112,9 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, () => {
 });
 
 
+
 /**
- * RemoteSkybox is a component that allows you to set the skybox of a scene from a URL or a local file.  
+ * RemoteSkybox is a component that allows you to set the skybox or environment texture of a scene from a URL, a local file or a static skybox name.  
  * It supports .hdr, .exr, .jpg, .png files.
  * 
  * ### Events
@@ -127,8 +149,13 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, () => {
 export class RemoteSkybox extends Behaviour {
 
     /**
-     * URL to a remote skybox. This value can also use a magic skybox name. Options are "quicklook", "quicklook-ar", "studio", "blurred-skybox".  
-     * To update the skybox/environment map use `setSkybox(url)`
+     * URL to a remote skybox.   
+     * To update the skybox/environment map use `setSkybox(url)`. 
+     * 
+     * The url can also be set to a magic skybox name.   
+     * Magic name options are: "quicklook", "quicklook-ar", "studio", "blurred-skybox".     
+     * These will resolve to built-in skyboxes hosted on the Needle CDN that are static, optimized for the web and will never change.  
+     * 
      * @example
      * ```ts
      * skybox.url = "https://example.com/skybox.hdr";
@@ -136,7 +163,7 @@ export class RemoteSkybox extends Behaviour {
      */
     @syncField(RemoteSkybox.prototype.urlChangedSyncField)
     @serializable(URL)
-    url?: string;
+    url: MagicSkyboxName | AnyString = "studio";
 
     /**
      * When enabled a user can drop a link to a skybox image on the scene to set the skybox.
@@ -208,7 +235,7 @@ export class RemoteSkybox extends Behaviour {
      * @param name Define name of the file with extension if it isn't apart of the url
      * @returns Whether the skybox was successfully set
      */
-    async setSkybox(url: string | undefined | null, name?: string) {
+    async setSkybox(url: MagicSkyboxName | AnyString | undefined | null, name?: string) {
         if (!this.activeAndEnabled) return false;
 
         url = tryParseMagicSkyboxName(url, this.environment, this.background);
@@ -404,38 +431,22 @@ export class RemoteSkybox extends Behaviour {
 
 
 
-
 function tryParseMagicSkyboxName(str: string | null | undefined, environment: boolean, background: boolean): string | null {
 
     if (str === null || str === undefined) return null;
 
     const useLowRes = environment && !background;
 
-    switch (str.toLowerCase()) {
-        case "studio":
-            if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral-small.pmrem4x4.ktx2?pmrem";
-            }
-            return "https://cdn.needle.tools/static/skybox/modelviewer-Neutral.pmrem4x4.ktx2?pmrem";
-
-        case "blurred-skybox":
-            if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/blurred-skybox-small.pmrem4x4.ktx2?pmrem";
-            }
-            return "https://cdn.needle.tools/static/skybox/blurred-skybox.pmrem4x4.ktx2?pmrem";
-        case "quicklook-ar":
-            if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode-small.pmrem4x4.ktx2?pmrem";
-            }
-            return "https://cdn.needle.tools/static/skybox/QuickLook-ARMode.pmrem4x4.ktx2?pmrem";
-        case "quicklook":
-            if (useLowRes) {
-                return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode-small.pmrem4x4.ktx2?pmrem";
-            }
-            return "https://cdn.needle.tools/static/skybox/QuickLook-ObjectMode.pmrem4x4.ktx2?pmrem";
+    const value = MagicSkyboxNames[str.toLowerCase() as MagicSkyboxName];
+    if (value) {
+        return useLowRes ? value.url_low : value.url;
+    }
+    else if (typeof str === "string" && str?.length && (isDevEnvironment() || debug)) {
+        const noUrlOrFile = !str.startsWith("http") && !str.startsWith("file:") && !str.startsWith("blob:") && !str.startsWith("data:");
+        if(noUrlOrFile) {
+            console.warn(`RemoteSkybox: Unknown magic skybox name "${str}". Valid names are: ${Object.keys(MagicSkyboxNames).map(n => `"${n}"`).join(", ")}`);
+        }
     }
-
-
 
     return str;
 }

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

@@ -331,6 +331,10 @@ export class WebXR extends Behaviour {
             console.warn(`WebXR: another WebXR component is already active (${WebXR.activeWebXRComponent?.name}). This is ignored: ${this.name}`);
             return;
         }
+        if (this.activeAndEnabled === false || this.destroyed) {
+            console.debug("[WebXR] onBeforeXR called on disabled or destroyed component");
+            return;
+        }
         WebXR.activeWebXRComponent = this;
 
         if (_mode == "immersive-ar" && this.useDepthSensing) {

package/src/engine-components/webxr/controllers/XRControllerModel.ts

@@ -284,7 +284,7 @@ export class XRControllerModel extends Behaviour {
 
         const loader = new GLTFLoader();
         addDracoAndKTX2Loaders(loader, context);
-        await registerExtensions(loader, context, this.sourceId ?? "");
+        await registerExtensions(loader, context, this.sourceId ?? "", this.sourceId ?? "");
         const componentsExtension = registerComponentExtension(loader);
 
         let filename = "";