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

package/src/engine/debug/debug_spector.ts

@@ -0,0 +1,43 @@
+import type { Context } from "../engine_setup.js";
+import { isDevEnvironment } from "./debug.js";
+
+declare global {
+    interface Window {
+        SPECTOR?: {
+            Spector: new () => Spector;
+        }
+    }
+    interface Spector {
+        displayUI: () => void;
+        setCanvas: (canvas: HTMLCanvasElement) => void;
+        spyCanvases: boolean;
+        startCaptureOnNextFrame: () => void;
+        captureCanvas: (canvas: HTMLCanvasElement) => any;
+    }
+}
+
+
+export function initSpectorIfAvailable(_context: Context, canvas: HTMLCanvasElement): void {
+    if (typeof window !== undefined && window.SPECTOR) {
+        console.log(window.SPECTOR);
+        const params = new URLSearchParams(window.location.search);
+        if (params.has("spector")) {
+            const frame = Number.parseInt(params.get("spector") || "0") || 0;
+            console.log("Scheduled Spector capture at frame #" + frame);
+            const spector = new window.SPECTOR.Spector();
+            spector.spyCanvases = true;
+            waitForFrameAndCapture();
+            return;
+
+            function waitForFrameAndCapture() {
+                if (frame > _context.time.frame) return window.requestAnimationFrame(() => waitForFrameAndCapture());
+                const res = spector.captureCanvas(canvas);
+                if (res && res instanceof Promise) res.then(() => spector.displayUI());
+                else spector.displayUI();
+            }
+        }
+        else if (isDevEnvironment()) {
+            console.debug("Spector available: Add '?spector=<frame>' to the URL to enable it and capture a frame.");
+        }
+    }
+}

package/src/engine/engine_application.ts

@@ -15,7 +15,7 @@ const userInteractionCallbacks: Function[] = [];
  */
 export function internalOnUserInputRegistered() {
     if (userInteractionRegistered) return;
-    if (isDevEnvironment()) console.debug("User interaction registered: audio can now be played");
+    if (isDevEnvironment()) console.debug("[Needle Engine] User input registered: Media playback is now allowed.");
     userInteractionRegistered = true;
     const copy = [...userInteractionCallbacks];
     userInteractionCallbacks.length = 0;
@@ -28,6 +28,21 @@ document.addEventListener('dragstart', internalOnUserInputRegistered);
 document.addEventListener('touchend', internalOnUserInputRegistered);
 document.addEventListener('keydown', internalOnUserInputRegistered);
 
+
+declare global {
+    interface Navigator {
+        userActivation?: {
+            isActive: boolean;
+        };
+    }
+}
+// User Activation should be available across browsers since November 2023 https://developer.mozilla.org/en-US/docs/Web/API/UserActivation
+if (typeof window !== "undefined" && "userActivation" in navigator && navigator.userActivation?.isActive) {
+    if (isDevEnvironment()) console.debug("[Needle Engine] User input already active: Media playback is now allowed.");
+    userInteractionCallbacks.length = 0;
+    userInteractionRegistered = true;
+}
+
 /** 
  * The Application class can be used to mute audio globally, and to check if the application (canvas) is currently visible (it's tab is active and not minimized). 
  */

package/src/engine/engine_context.ts

@@ -13,6 +13,7 @@ import * as Stats from 'three/examples/jsm/libs/stats.module.js';
 import type { EffectComposer as ThreeEffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 import { nodeFrame } from "three/examples/jsm/renderers/webgl-legacy/nodes/WebGLNodeBuilder.js";
 
+import { initSpectorIfAvailable } from './debug/debug_spector.js';
 import { isDevEnvironment, LogType, showBalloonError, showBalloonMessage } from './debug/index.js';
 import { Addressables } from './engine_addressables.js';
 import { AnimationsRegistry } from './engine_animation.js';
@@ -37,7 +38,7 @@ import { RendererData as SceneLighting } from './engine_scenelighting.js';
 import { getTempColor, logHierarchy } from './engine_three_utils.js';
 import { Time } from './engine_time.js';
 import { patchTonemapping } from './engine_tonemapping.js';
-import type { CoroutineData, ICamera, IComponent, IContext, ILight, LoadedModel, Model, Vec2 } from "./engine_types.js";
+import type { CoroutineData, ICamera, IComponent, IContext, ILight, LoadedModel, Model, SourceIdentifier, Vec2 } from "./engine_types.js";
 import { deepClone, delay, DeviceUtilities, getParam } from './engine_utils.js';
 import type { INeedleXRSessionEventReceiver, NeedleXRSession } from './engine_xr.js';
 import { NeedleMenu } from './webcomponents/needle menu/needle-menu.js';
@@ -372,6 +373,7 @@ export class Context implements IContext {
 	 */
 	composer: EffectComposer | ThreeEffectComposer | null = null;
 
+	// #region internal script lists
 	/**
 	 * @internal All known components. Don't use directly
 	 */
@@ -439,6 +441,9 @@ export class Context implements IContext {
 	/** @internal */
 	readonly new_scripts_xr: INeedleXRSessionEventReceiver[] = [];
 
+	// #endregion
+	// #region Properties
+
 	/** 
 	 * The **main camera component** of the scene - this camera is used for rendering.  
 	 * Use `setCurrentCamera` for updating the main camera.
@@ -483,25 +488,36 @@ export class Context implements IContext {
 	physics: Physics;
 	/** access networking methods (use it to send or listen to messages or join a networking backend) */
 	connection: NetworkConnection;
-	/** 
-	 * @deprecated AssetDataBase is deprecated
-	 */
+	/**  @deprecated AssetDatabase is deprecated */
 	assets: AssetDatabase;
 	/** The main light in the scene */
 	mainLight: ILight | null = null;
 	/** @deprecated Use sceneLighting */
 	get rendererData() { return this.sceneLighting }
+	/** Access the scene lighting manager to control lighting settings in the context */
 	sceneLighting: SceneLighting;
 	addressables: Addressables;
 	lightmaps: ILightDataRegistry;
 	players: PlayerViewManager;
+
+	/** Access the LODs manager to control LOD behavior in the context */
 	readonly lodsManager: LODsManager;
 	/** Access the needle menu to add or remove buttons to the menu element */
 	readonly menu: NeedleMenu;
 
-	/** @returns true if the context is fully created and ready */
+	/** 
+	 * Checks if the context is fully created and ready
+	 * @returns true if the context is fully created and ready 
+	 */
 	get isCreated() { return this._isCreated; }
 
+	/** 
+	 * The source identifier(s) of the root scene(s) loaded into this context.
+	 * When using `<needle-engine>` web component this will be the `src` attribute(s).
+	 * @returns The source identifier for of the root scene
+	*/
+	get rootSourceId(): SourceIdentifier | undefined { return this.rootSceneSourceIdentifiers[0] || undefined; }
+
 	private _needsUpdateSize: boolean = false;
 	private _isCreated: boolean = false;
 	private _isCreating: boolean = false;
@@ -556,6 +572,7 @@ export class Context implements IContext {
 		ContextRegistry.register(this);
 	}
 
+	// #region Renderer
 	/** 
 	 * Calling this function will dispose the current renderer and create a new one which will then be assigned to the context. It can be used to create a new renderer with custom WebGLRendererParameters.   
 	 * **Note**: Instead you can also modify the static `Context.DefaultWebGlRendererParameters` before the context is created.  
@@ -606,6 +623,8 @@ export class Context implements IContext {
 
 		this.input.bindEvents();
 
+		initSpectorIfAvailable(this, this.renderer.domElement);
+
 		return this.renderer;
 	}
 
@@ -909,6 +928,7 @@ export class Context implements IContext {
 		}
 	}
 
+	// #region onBeforeRender / onAfterRender listeners
 	private readonly _onBeforeRenderListeners = new Map<string, OnRenderCallback[]>();
 	private readonly _onAfterRenderListeners = new Map<string, OnRenderCallback[]>();
 
@@ -1006,6 +1026,8 @@ export class Context implements IContext {
 	private _lastStyleComputedResult: boolean | undefined = undefined;
 
 	private _createId: number = 0;
+
+	// #region internal create
 	private async internalOnCreate(opts?: ContextCreateArgs): Promise<boolean> {
 		const createId = ++this._createId;
 
@@ -1215,6 +1237,11 @@ export class Context implements IContext {
 		if (opts?.abortSignal?.aborted) {
 			return false;
 		}
+
+
+		const mainIdentifier = this.rootSourceId;
+		if (mainIdentifier) this.sceneLighting.enable(mainIdentifier);
+
 		invokeLifecycleFunctions(this, ContextEvent.ContextCreated);
 		if (debug) console.log("Context Created...", this.renderer, this.renderer.domElement)
 
@@ -1224,13 +1251,18 @@ export class Context implements IContext {
 		return true;
 	}
 
+
+	private readonly rootSceneSourceIdentifiers: SourceIdentifier[] = [];
 	private async internalLoadInitialContent(createId: number, args: ContextCreateArgs): Promise<Array<LoadedModel>> {
+		this.rootSceneSourceIdentifiers.length = 0;
+
 		const results = new Array<LoadedModel>();
 		// early out if we dont have any files to load
 		if (args.files.length === 0) return results;
 
-
 		const files = [...args.files];
+		this.rootSceneSourceIdentifiers.push(...files);
+
 		const progressArg: LoadingProgressArgs = {
 			name: "",
 			progress: null!,
@@ -1238,6 +1270,7 @@ export class Context implements IContext {
 			count: files.length
 		}
 
+
 		const loader = getLoader();
 		// this hash should be constant since it is used to initialize the UIDProvider per initially loaded scene
 		const loadingHash = 0;
@@ -1676,7 +1709,8 @@ export class Context implements IContext {
 
 		if (this._stats) {
 			this._stats.end();
-			if (this.time.frameCount % 150 === 0)
+			const dt = this.time.fps < 20 ? 50 : 150;
+			if (this.time.frameCount % dt === 0)
 				console.log(this.renderer.info.render.calls + " DrawCalls", "\nRender:", { ...this.renderer.info.render }, "\nMemory:", { ...this.renderer.info.memory }, "\nTarget Framerate: " + this.targetFrameRate);
 		}
 

package/src/engine/engine_gltf_builtin_components.ts

@@ -119,7 +119,7 @@ declare type IHasResolveGuids = {
     resolveGuids: (guidsMap: GuidsMap) => void;
 }
 
-const originalComponentNameKey = Symbol("original-component-name");
+const originalComponentNameKey = "needle-component-name";// Symbol("original-component-name");
 
 /** 
  * We want to create one id provider per component

package/src/engine/engine_loaders.ts

@@ -13,7 +13,7 @@ import { registerPrewarmObject } from "./engine_mainloop_utils.js";
 import { SerializationContext } from "./engine_serialization_core.js";
 import { Context } from "./engine_setup.js"
 import { postprocessFBXMaterials } from "./engine_three_utils.js";
-import { CustomModel, isGLTFModel, Model, type UIDProvider } from "./engine_types.js";
+import { CustomModel, isGLTFModel, Model, SourceIdentifier, type UIDProvider } from "./engine_types.js";
 import * as utils from "./engine_utils.js";
 import { tryDetermineMimetypeFromURL } from "./engine_utils_format.js"
 import { invokeLoadedImportPluginHooks, registerComponentExtension, registerExtensions } from "./extensions/extensions.js";
@@ -43,7 +43,7 @@ const debugFileTypes = utils.getParam("debugfileformat");
 
 
 
-export async function onCreateLoader(url: string, context: Context): Promise<CustomLoader | GLTFLoader | FBXLoader | USDZLoader | OBJLoader | null> {
+async function onCreateLoader(url: string, context: Context, sourceId: SourceIdentifier): Promise<CustomLoader | GLTFLoader | FBXLoader | USDZLoader | OBJLoader | null> {
 
     const type = await tryDetermineMimetypeFromURL(url, { useExtension: true }) || "unknown";
     if (debugFileTypes) console.debug(`Determined file type: '${type}' for url '${url}'`, { registeredModelLoaderCallbacks });
@@ -67,7 +67,7 @@ export async function onCreateLoader(url: string, context: Context): Promise<Cus
             {
                 console.warn(`Unknown file type (${type}). Needle Engine will fallback to the GLTFLoader - To support more model formats please create a Needle loader plugin.\nUse import { NeedleEngineModelLoader } from \"@needle-tools/engine\" namespace to register your loader.`, url);
                 const loader = new GLTFLoader();
-                await registerExtensions(loader, context, url);
+                await registerExtensions(loader, context, url, sourceId);
                 return loader;
             }
         case "model/fbx":
@@ -88,7 +88,7 @@ export async function onCreateLoader(url: string, context: Context): Promise<Cus
         case "model/vrm":
             {
                 const loader = new GLTFLoader();
-                await registerExtensions(loader, context, url);
+                await registerExtensions(loader, context, url, sourceId);
                 return loader;
             }
     }
@@ -117,7 +117,7 @@ export async function parseSync(context: Context, data: string | ArrayBuffer, pa
         path = "";
     }
     if (printGltf) console.log("Parse glTF", path)
-    const loader = await onCreateLoader(path, context);
+    const loader = await onCreateLoader(path, context, path);
     if (!loader) {
         return undefined;
     }
@@ -193,7 +193,7 @@ export async function loadSync(context: Context, url: string, sourceId: string,
     // but due to the async nature and potentially triggering multiple loads at the same time
     // we need to make sure the extensions dont override each other
     // creating new loaders should not be expensive as well
-    const loader = await onCreateLoader(url, context);
+    const loader = await onCreateLoader(url, context, sourceId);
     if (!loader) {
         return undefined;
     }

package/src/engine/engine_physics.ts

@@ -13,6 +13,7 @@ import type { IPhysicsEngine } from './engine_types.js';
 import { getParam } from "./engine_utils.js"
 
 const debugPhysics = getParam("debugphysics");
+const debugWorker = getParam("debugworker");
 const layerMaskHelper: Layers = new Layers();
 
 
@@ -654,6 +655,9 @@ namespace NEMeshBVH {
                     // if there are no workers available, create a new one
                     if (!workerInstance && workerInstances.length < 3) {
                         try {
+                            if (debugWorker) {
+                                console.warn("[GenerateMeshBVHWorker] Creating worker with import.meta.url:", import.meta.url);
+                            }
                             workerInstance = new _GenerateMeshBVHWorker();
                             workerInstances.push(workerInstance);
                         }
@@ -665,8 +669,8 @@ namespace NEMeshBVH {
                                 failedToCreateMeshBVHWorker += 10;
                             }
                             else {
-                                console.error("Failed to create MeshBVH worker");
-                                console.debug(err);
+                                console.error("Failed to create MeshBVH worker. Please see below for more details:");
+                                console.log(err);
                             }
                             failedToCreateMeshBVHWorker++;
                         }

package/src/engine/engine_physics_rapier.ts

@@ -67,7 +67,7 @@ export class RapierPhysics implements IPhysicsEngine {
     debugRenderRaycasts: boolean = false;
 
     removeBody(obj: IComponent) {
-        if(debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
+        if (debugPhysics) console.log("REMOVE BODY", obj?.name, obj[$bodyKey]);
         if (!obj) return;
         this.validate();
         const body = obj[$bodyKey];
@@ -817,7 +817,16 @@ export class RapierPhysics implements IPhysicsEngine {
         return component;
     }
 
-    private createCollider(collider: ICollider, desc: ColliderDesc) {
+    /**
+     * Creates a collider in the physics world.
+     * 
+     * @param collider - The collider component.
+     * @param desc - The collider description.
+     * @returns The created collider.
+     * 
+     * @throws Will throw an error if the physics world is not initialized. Make sure to call `initialize()` before creating colliders.  
+     */
+    createCollider(collider: ICollider, desc: ColliderDesc) {
         if (!this.world) throw new Error("Physics world not initialized");
         const matrix = this._tempMatrix;
         let rigidBody: RigidBody | undefined = undefined;

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/engine_types.ts

@@ -566,6 +566,23 @@ export interface IPhysicsEngine {
      */
     boxOverlap(point: Vector3, size: Vector3, rotation: Vector4Like | null): Array<ShapeOverlapResult>;
 
+    /**
+     * Creates a collider in the physics world.
+     * 
+     * @param collider - The collider component.
+     * @param desc - The collider description.
+     * @returns The created collider.
+     * 
+     * @throws Will throw an error if the physics world is not initialized. Make sure to call `initialize()` before creating colliders.
+     * 
+     * @example
+     * ```typescript
+     * const boxColliderDesc = NEEDLE_ENGINE_MODULES.RAPIER_PHYSICS.MODULE.ColliderDesc.cuboid(1, 1, 1);
+     * const collider = physicsEngine.createCollider(myBoxColliderComponent, boxColliderDesc);
+     * ```
+     */
+    createCollider(collider: ICollider, desc: any): any;
+
     // Collider methods
     /**
      * Adds a sphere collider to the physics world

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/webcomponents/needle-engine.ts

@@ -296,6 +296,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         }
     }
 
+    connectedMoveCallback() {
+        // we dont want needle-engine to cleanup JUST because the element is moved in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks
+    }
+
     /**
      * @internal
      */

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) {