@needle-tools/engine 4.5.8 → 4.6.0-next.16a31e7

package/src/engine-components/Skybox.ts

@@ -124,11 +124,17 @@ function registerLoadedTexture(src: string, texture: Promise<Texture>) {
  *    evt.detail.apply(url);
  * });
  * ```
+ * 
+ * @example update skybox url
+ * ```ts
+ * skybox.setSkybox("https://example.com/skybox.hdr");
+ * ```
  */
 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".
+     * 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)`
      * @example
      * ```ts
      * skybox.url = "https://example.com/skybox.hdr";
@@ -197,6 +203,9 @@ export class RemoteSkybox extends Behaviour {
             if (this.isRemoteTexture(this.url)) {
                 this.setSkybox(this.url);
             }
+            else if (debug) {
+                console.warn(`RemoteSkybox: Not setting skybox: ${this.url} is not a remote texture. If you want to set a local texture, set allowNetworking to false.`);
+            }
         }
     }
 
@@ -222,7 +231,7 @@ export class RemoteSkybox extends Behaviour {
         if (debug) console.log("Set remote skybox url: " + url);
 
         if (this._prevUrl === url && this._prevLoadedEnvironment) {
-            this.applySkybox();
+            this.apply();
             return true;
         }
         else {
@@ -231,19 +240,30 @@ export class RemoteSkybox extends Behaviour {
         }
         this._prevUrl = url;
 
-        const envMap = await this.loadTexture(url, name);
-        if (!envMap) return false;
+        const texture = await this.loadTexture(url, name);
+        if (!texture) {
+            if (debug) console.warn("RemoteSkybox: Failed to load texture from url", url);
+            return false;
+        }
         // Check if we're still enabled
-        if (!this.enabled) return false;
+        if (!this.enabled) {
+            if (debug) console.warn("RemoteSkybox: Component is not enabled, aborting setSkybox");
+            return false;
+        }
+        // Check if the url has changed while loading
+        if (this._prevUrl !== url) {
+            if (debug) console.warn("RemoteSkybox: URL changed while loading texture, aborting setSkybox");
+            return false; // URL changed while loading
+        }
         // Update the current url
         this.url = url;
         const nameIndex = url.lastIndexOf("/");
-        envMap.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
+        texture.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
         if (this._loader instanceof TextureLoader) {
-            envMap.colorSpace = SRGBColorSpace;
+            texture.colorSpace = SRGBColorSpace;
         }
-        this._prevLoadedEnvironment = envMap;
-        this.applySkybox();
+        this._prevLoadedEnvironment = texture;
+        this.apply();
         return true;
     }
 
@@ -284,7 +304,7 @@ export class RemoteSkybox extends Behaviour {
         return envMap;
     }
 
-    private applySkybox() {
+    private apply() {
         const envMap = this._prevLoadedEnvironment;
         if (!envMap) return;
 

package/src/engine-components/postprocessing/Effects/Tonemapping.ts

@@ -1,5 +1,5 @@
 import type { ToneMappingEffect as _TonemappingEffect, ToneMappingMode } from "postprocessing";
-import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping } from "three";
+import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping, WebGLRenderer } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
@@ -36,6 +36,7 @@ function toThreeToneMapping(mode: NEToneMappingMode | undefined) {
         case NEToneMappingMode.KhronosNeutral:
             return NeutralToneMapping;
         default:
+            if(debug) console.warn("[Postprocessing] Unknown tone mapping mode", mode);
             return NeutralToneMapping;
     }
 }
@@ -84,7 +85,7 @@ export class ToneMappingEffect extends PostProcessingEffect {
     setMode(mode: NEToneMappingModeNames) {
         const enumValue = NEToneMappingMode[mode as NEToneMappingModeNames];
         if (enumValue === undefined) {
-            console.error("Invalid ToneMapping mode", mode);
+            console.error("[PostProcessing] Invalid ToneMapping mode", mode);
             return this;
         }
         this.mode.value = enumValue;
@@ -110,7 +111,7 @@ export class ToneMappingEffect extends PostProcessingEffect {
                 if (other === this) break;
                 // If another tonemapping effect is found, warn the user
                 if (other != this && other instanceof ToneMappingEffect) {
-                    console.warn("Multiple tonemapping effects found in the same postprocessing stack: Please check your scene setup.", { activeEffect: other, ignoredEffect: this });
+                    console.warn("[PostProcessing] Multiple tonemapping effects found in the same postprocessing stack: Please check your scene setup.", { activeEffect: other, ignoredEffect: this });
                     return undefined;
                 }
             }
@@ -119,8 +120,9 @@ export class ToneMappingEffect extends PostProcessingEffect {
 
         // ensure the effect tonemapping value is initialized
         if (this.mode.isInitialized == false) {
-            const init = threeToNeToneMapping(this.context.renderer.toneMapping);
-            this.mode.initialize(init);
+            const mode = threeToNeToneMapping(this.context.renderer.toneMapping);
+            if(debug) console.log("[PostProcessing] Initializing ToneMapping mode to renderer.toneMapping", this.context.renderer.toneMapping + " → " + mode);
+            this.mode.initialize(mode);
         }
 
         const threeMode = toThreeToneMapping(this.mode.value);
@@ -130,9 +132,9 @@ export class ToneMappingEffect extends PostProcessingEffect {
         this.mode.onValueChanged = (newValue) => {
             const threeMode = toThreeToneMapping(newValue);
             tonemapping.mode = threeToneMappingToEffectMode(threeMode);
-            if (debug) console.log("ToneMapping mode changed to", NEToneMappingMode[newValue], threeMode, tonemapping.mode);
+            if (debug) console.log("[PostProcessing] ToneMapping mode changed to", NEToneMappingMode[newValue], threeMode, tonemapping.mode);
         };
-        if (debug) console.log("Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
+        if (debug) console.log("[PostProcessing] Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
 
 
         this.exposure.onValueChanged = (newValue) => {

package/src/engine-components/postprocessing/PostProcessingHandler.ts

@@ -1,5 +1,5 @@
 import type { Effect, EffectComposer, Pass, ToneMappingEffect as _TonemappingEffect } from "postprocessing";
-import { HalfFloatType, NoToneMapping } from "three";
+import { HalfFloatType, NoToneMapping, Camera as Camera3 } from "three";
 
 import { showBalloonWarning } from "../../engine/debug/index.js";
 // import { internal_SetSharpeningEffectModule } from "./Effects/Sharpening.js";
@@ -44,7 +44,7 @@ export class PostProcessingHandler {
         this.context = context;
     }
 
-    apply(components: PostProcessingEffect[]) : Promise<void> {
+    apply(components: PostProcessingEffect[]): Promise<void> {
         if ("env" in import.meta && import.meta.env.VITE_NEEDLE_USE_POSTPROCESSING === "false") {
             if (debug) console.warn("Postprocessing is disabled via vite env setting");
             else console.debug("Postprocessing is disabled via vite env setting");
@@ -169,9 +169,7 @@ export class PostProcessingHandler {
     private applyEffects(context: Context) {
 
         const effectsOrPasses = this._effects;
-        
         if (effectsOrPasses.length <= 0) return;
-
         const camera = context.mainCameraComponent as Camera;
         const renderer = context.renderer;
         const scene = context.scene;
@@ -199,6 +197,7 @@ export class PostProcessingHandler {
         composer.setMainCamera(cam);
         composer.setRenderer(renderer);
         composer.setMainScene(scene);
+        composer.autoRenderToScreen = true; // Must be enabled because it might be disabled during addPass by the composer itself (depending on the effect's settings or order)
 
         for (const prev of composer.passes)
             prev.dispose();
@@ -218,9 +217,11 @@ export class PostProcessingHandler {
                 const effects: Array<Effect> = [];
 
                 for (const ef of effectsOrPasses) {
-                    if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect)
+                    if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect) {
                         effects.push(ef as Effect);
+                    }
                     else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass) {
+                        ef.renderToScreen = false;
                         composer.addPass(ef as Pass);
                     }
                     else {
@@ -233,9 +234,10 @@ export class PostProcessingHandler {
                 // create and apply uber pass
                 if (effects.length > 0) {
                     const pass = new MODULES.POSTPROCESSING.MODULE.EffectPass(cam, ...effects);
-                    pass.name = effects.map(e => e.name).join(" ");
+                    pass.name = effects.map(e => e.name).join(", ");
                     pass.mainScene = scene;
                     pass.enabled = true;
+                    pass.renderToScreen = false;
                     composer.addPass(pass);
                 }
             }
@@ -255,8 +257,10 @@ export class PostProcessingHandler {
                     pass.name = ef.name;
                     composer.addPass(pass);
                 }
-                else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass)
+                else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass) {
+                    ef.renderToScreen = false;
                     composer.addPass(ef as Pass);
+                }
                 else
                     // seems some effects are not correctly typed, but three can deal with them,
                     // so we just pass them through
@@ -264,10 +268,83 @@ export class PostProcessingHandler {
             }
         }
 
-        if (debug) {
 
-            console.log("[PostProcessing] Passes →", composer.passes);
+        // The last pass is the one that renders to the screen, so we need to set the gamma correction for it (and enable it for all others)
+        for (let i = 0; i < composer.passes.length; i++) {
+            const pass = composer.passes[i] as any;
+            const isLast = i === composer.passes.length - 1;
+            if (pass?.configuration !== undefined) {
+                pass.configuration.gammaCorrection = isLast;
+            }
+            else if ("autosetGamma" in pass) {
+                // Some effects have a autosetGamma property that we can use to set the gamma correction
+                pass.autosetGamma = isLast;
+            }
+        }
+
+        // DEBUG LAND BELOW
+        if (debug) console.log("[PostProcessing] Passes →", [...composer.passes], "\n---------------------------------\n• " + composer.passes.map(i => i.name).join("\n• ") + "\n");
+        if (debug) this._onCreateEffectsDebug(this._composer!, cam);
+    }
+
+    private orderEffects() {
+        if (debug === "verbose") console.debug("Before ordering effects", [...this._effects]);
+
+        // Order of effects for correct results.
+        // Aligned with https://github.com/pmndrs/postprocessing/wiki/Effect-Merging#effect-execution-order
+        // We can not put this into global scope because then the module might not yet be initialized
+        effectsOrder ??= [
+            MODULES.POSTPROCESSING.MODULE.NormalPass,
+            MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass,
+            MODULES.POSTPROCESSING.MODULE.SMAAEffect,
+            MODULES.POSTPROCESSING.MODULE.SSAOEffect,
+            MODULES.POSTPROCESSING_AO.MODULE.N8AOPostPass,
+            MODULES.POSTPROCESSING.MODULE.TiltShiftEffect,
+            MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect,
+            MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect,
+            MODULES.POSTPROCESSING.MODULE.BloomEffect,
+            MODULES.POSTPROCESSING.MODULE.SelectiveBloomEffect,
+            MODULES.POSTPROCESSING.MODULE.VignetteEffect,
+            MODULES.POSTPROCESSING.MODULE.PixelationEffect,
+            MODULES.POSTPROCESSING.MODULE.ToneMappingEffect,
+            MODULES.POSTPROCESSING.MODULE.HueSaturationEffect,
+            MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect,
+            // __SHARPENING_MODULE._SharpeningEffect,
+        ];
+
+
+        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
+        const effects = this._effects;
+        effects.sort((a, b) => {
+            // we use find index here because sometimes constructor names are prefixed with `_`
+            // TODO: find a more robust solution that isnt name based (not sure if that exists tho... maybe we must give effect TYPES some priority/index)
+            const aidx = effectsOrder!.findIndex(e => a.constructor.name.endsWith(e.name));
+            const bidx = effectsOrder!.findIndex(e => b.constructor.name.endsWith(e.name));
+            // Unknown effects should be rendered first
+            if (aidx < 0) {
+                if (debug) console.warn("Unknown effect found: ", a.constructor.name);
+                return -1;
+            }
+            else if (bidx < 0) {
+                if (debug) console.warn("Unknown effect found: ", b.constructor.name);
+                return 1;
+            }
+            // if (aidx < 0) return 1;
+            // if (bidx < 0) return -1;
+            return aidx - bidx;
+        });
+
+        if (debug === "verbose") console.debug("After ordering effects", [...this._effects]);
+    }
+
+
+
 
+    private _menuEntry: HTMLSelectElement | null = null;
+    private _passIndices: number[] | null = null;
+
+    private _onCreateEffectsDebug(composer: EffectComposer, cam: Camera3) {
+        if (debug === "passes") {
             // DepthEffect for debugging purposes, disabled by default, can be selected in the debug pass select
             const depthEffect = new MODULES.POSTPROCESSING.MODULE.DepthEffect({
                 blendFunction: MODULES.POSTPROCESSING.MODULE.BlendFunction.NORMAL,
@@ -303,7 +380,7 @@ export class PostProcessingHandler {
             if (menu && this._passIndices === null) {
                 if (this._menuEntry)
                     this._menuEntry.remove();
-                
+
                 const select = document.createElement("select");
                 select.multiple = true;
                 const defaultOpt = document.createElement("option");
@@ -327,73 +404,12 @@ export class PostProcessingHandler {
                     else {
                         this._passIndices = indices;
                     }
-
-                    this.applyEffects(context);
+                    this.applyEffects(this.context);
                 });
             }
         }
     }
 
-    private _menuEntry: HTMLSelectElement | null = null;
-    private _passIndices: number[] | null = null;
-
-    private orderEffects() {
-        if (debug) console.log("Before ordering effects", [...this._effects]);
-
-
-
-        // Order of effects for correct results.
-        // Aligned with https://github.com/pmndrs/postprocessing/wiki/Effect-Merging#effect-execution-order
-        // We can not put this into global scope because then the module might not yet be initialized
-        effectsOrder ??= [
-            MODULES.POSTPROCESSING.MODULE.NormalPass,
-            MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass,
-            MODULES.POSTPROCESSING.MODULE.SMAAEffect,
-            MODULES.POSTPROCESSING.MODULE.SSAOEffect,
-            MODULES.POSTPROCESSING_AO.MODULE.N8AOPostPass,
-            MODULES.POSTPROCESSING.MODULE.TiltShiftEffect,
-            MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect,
-            MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect,
-            MODULES.POSTPROCESSING.MODULE.BloomEffect,
-            MODULES.POSTPROCESSING.MODULE.SelectiveBloomEffect,
-            MODULES.POSTPROCESSING.MODULE.VignetteEffect,
-            MODULES.POSTPROCESSING.MODULE.PixelationEffect,
-            MODULES.POSTPROCESSING.MODULE.ToneMappingEffect,
-            MODULES.POSTPROCESSING.MODULE.HueSaturationEffect,
-            MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect,
-            // __SHARPENING_MODULE._SharpeningEffect,
-        ];
-
-
-        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
-        const effects = this._effects;
-        effects.sort((a, b) => {
-            // we use find index here because sometimes constructor names are prefixed with `_`
-            // TODO: find a more robust solution that isnt name based (not sure if that exists tho... maybe we must give effect TYPES some priority/index)
-            const aidx = effectsOrder!.findIndex(e => a.constructor.name.endsWith(e.name));
-            const bidx = effectsOrder!.findIndex(e => b.constructor.name.endsWith(e.name));
-            // Unknown effects should be rendered first
-            if (aidx < 0) {
-                if (debug) console.warn("Unknown effect found: ", a.constructor.name);
-                return -1;
-            }
-            else if (bidx < 0) {
-                if (debug) console.warn("Unknown effect found: ", b.constructor.name);
-                return 1;
-            }
-            if (aidx < 0) return 1;
-            if (bidx < 0) return -1;
-            return aidx - bidx;
-        });
-        if (debug) console.log("After ordering effects", [...this._effects]);
-        for (let i = 0; i < effects.length; i++) {
-            const effect = effects[i] as any;
-            if (effect?.configuration?.gammaCorrection !== undefined) {
-                const isLast = i === effects.length - 1;
-                effect.configuration.gammaCorrection = isLast;
-            }
-        }
-    }
 }
 
 let effectsOrder: Array<Constructor<Effect | Pass>> | null = null;