@needle-tools/engine 4.6.1-next.26cf56c → 4.6.1-next.2b1af6a

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

@@ -1,70 +1,18 @@
 import type { ToneMappingEffect as _TonemappingEffect, ToneMappingMode } from "postprocessing";
-import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping, WebGLRenderer } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
+import { nameToThreeTonemapping } from "../../../engine/engine_tonemapping.js";
 import { getParam } from "../../../engine/engine_utils.js";
 import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
 import { findPostProcessingManager } from "../utils.js";
 import { VolumeParameter } from "../VolumeParameter.js";
 import { registerCustomEffectType } from "../VolumeProfile.js";
+import { NEToneMappingMode, NEToneMappingModeNames, threeToNeedleToneMapping, threeToneMappingToEffectMode, toThreeToneMapping } from "./Tonemapping.utils.js";
 
 const debug = getParam("debugpost");
 
 
-enum NEToneMappingMode {
-    None = 0,
-    Neutral = 1,            // Neutral tonemapper, close to Reinhard
-    ACES = 2,               // ACES Filmic reference tonemapper (custom approximation)
-    AgX = 3,                // AgX Filmic tonemapper
-    KhronosNeutral = 4,     // PBR Neural tonemapper
-}
-
-type NEToneMappingModeNames = keyof typeof NEToneMappingMode;
-
-
-function toThreeToneMapping(mode: NEToneMappingMode | undefined) {
-    switch (mode) {
-        case NEToneMappingMode.None:
-            return LinearToneMapping;
-        case NEToneMappingMode.Neutral:
-            return ReinhardToneMapping;
-        case NEToneMappingMode.ACES:
-            return ACESFilmicToneMapping;
-        case NEToneMappingMode.AgX:
-            return AgXToneMapping;
-        case NEToneMappingMode.KhronosNeutral:
-            return NeutralToneMapping;
-        default:
-            if(debug) console.warn("[Postprocessing] Unknown tone mapping mode", mode);
-            return NeutralToneMapping;
-    }
-}
-
-function threeToNeToneMapping(mode: number | undefined): NEToneMappingMode {
-    switch (mode) {
-        case LinearToneMapping: return NEToneMappingMode.None;
-        case ACESFilmicToneMapping: return NEToneMappingMode.ACES;
-        case AgXToneMapping: return NEToneMappingMode.AgX;
-        case NeutralToneMapping: return NEToneMappingMode.Neutral;
-        case ReinhardToneMapping: return NEToneMappingMode.Neutral;
-        default: return NEToneMappingMode.None;
-    }
-
-}
-
-
-function threeToneMappingToEffectMode(mode: number | undefined): ToneMappingMode {
-    switch (mode) {
-        case LinearToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.LINEAR;
-        case ACESFilmicToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.ACES_FILMIC;
-        case AgXToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.AGX;
-        case NeutralToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.NEUTRAL;
-        case ReinhardToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.REINHARD;
-        default: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.LINEAR;
-    }
-}
-
 /**
  * @category Effects
  * @group Components
@@ -102,6 +50,7 @@ export class ToneMappingEffect extends PostProcessingEffect {
         super.onEffectEnabled(ppmanager);
     }
 
+    private _didCreateEffect = false;
     onCreateEffect(): EffectProviderResult | undefined {
 
         // TODO: this should be done in the PostProcessingHandler
@@ -118,10 +67,12 @@ export class ToneMappingEffect extends PostProcessingEffect {
         }
 
 
+        this._didCreateEffect = true;
+
         // ensure the effect tonemapping value is initialized
         if (this.mode.isInitialized == false) {
-            const mode = threeToNeToneMapping(this.context.renderer.toneMapping);
-            if(debug) console.log("[PostProcessing] Initializing ToneMapping mode to renderer.toneMapping", this.context.renderer.toneMapping + " → " + mode);
+            const mode = threeToNeedleToneMapping(this.context.renderer.toneMapping);
+            if (debug) console.log("[PostProcessing] Initializing ToneMapping mode to renderer.toneMapping", this.context.renderer.toneMapping + " → " + mode);
             this.mode.initialize(mode);
         }
 
@@ -130,26 +81,33 @@ export class ToneMappingEffect extends PostProcessingEffect {
             mode: threeToneMappingToEffectMode(threeMode),
         });
         this.mode.onValueChanged = (newValue) => {
-            const threeMode = toThreeToneMapping(newValue);
-            tonemapping.mode = threeToneMappingToEffectMode(threeMode);
+            if (typeof newValue === "string") {
+                newValue = nameToThreeTonemapping(newValue);
+                tonemapping.mode = threeToneMappingToEffectMode(newValue);
+            }
+            else {
+                const threeMode = toThreeToneMapping(newValue);
+                tonemapping.mode = threeToneMappingToEffectMode(threeMode);
+            }
+            tonemapping.name = "ToneMapping (" + NEToneMappingMode[newValue] + ")";
             if (debug) console.log("[PostProcessing] ToneMapping mode changed to", NEToneMappingMode[newValue], threeMode, tonemapping.mode);
         };
         if (debug) console.log("[PostProcessing] Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
 
 
-        this.exposure.onValueChanged = (newValue) => {
-            this.context.renderer.toneMappingExposure = newValue;
-        };
-
         return tonemapping;
     }
 
 
     onBeforeRender(): void {
-        if (this.mode.overrideState)
-            this.context.renderer.toneMapping = toThreeToneMapping(this.mode.value);
-        if (this.exposure.overrideState && this.exposure.value !== undefined)
-            this.context.renderer.toneMappingExposure = this.exposure.value
+        if (this._didCreateEffect) {
+            if (this.mode.overrideState)
+                this.context.renderer.toneMapping = toThreeToneMapping(this.mode.value);
+            if (this.exposure.overrideState && this.exposure.value !== undefined) {
+                const newValue = Math.max(0.01, this.exposure.value);
+                this.context.renderer.toneMappingExposure = newValue;
+            }
+        }
     }
 
 

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

@@ -0,0 +1,60 @@
+import type { ToneMappingMode } from "postprocessing";
+import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, ReinhardToneMapping, ToneMapping } from "three";
+
+import { MODULES } from "../../../engine/engine_modules.js";
+
+export enum NEToneMappingMode {
+    None = 0,
+    Neutral = 1,            // Neutral tonemapper, close to Reinhard
+    ACES = 2,               // ACES Filmic reference tonemapper (custom approximation)
+    AgX = 3,                // AgX Filmic tonemapper
+    KhronosNeutral = 4,     // PBR Neural tonemapper
+}
+export type NEToneMappingModeNames = keyof typeof NEToneMappingMode;
+
+const unknownTonemappingWarning = new Map<any, boolean>();
+
+export function toThreeToneMapping(mode: NEToneMappingMode | undefined) {
+    switch (mode) {
+        case NEToneMappingMode.None:
+            return LinearToneMapping;
+        case NEToneMappingMode.Neutral:
+            return ReinhardToneMapping;
+        case NEToneMappingMode.ACES:
+            return ACESFilmicToneMapping;
+        case NEToneMappingMode.AgX:
+            return AgXToneMapping;
+        case NEToneMappingMode.KhronosNeutral:
+            return NeutralToneMapping;
+        default:
+            if(!unknownTonemappingWarning.has(mode)) {
+                unknownTonemappingWarning.set(mode, true);
+                console.warn("[Postprocessing] Unknown tone mapping mode", mode);
+            }
+            return NeutralToneMapping;
+    }
+}
+
+export function threeToNeedleToneMapping(mode: ToneMapping | number | undefined): NEToneMappingMode {
+    switch (mode) {
+        case LinearToneMapping: return NEToneMappingMode.None;
+        case ACESFilmicToneMapping: return NEToneMappingMode.ACES;
+        case AgXToneMapping: return NEToneMappingMode.AgX;
+        case NeutralToneMapping: return NEToneMappingMode.Neutral;
+        case ReinhardToneMapping: return NEToneMappingMode.Neutral;
+        default: return NEToneMappingMode.None;
+    }
+
+}
+
+
+export function threeToneMappingToEffectMode(mode: number | undefined): ToneMappingMode {
+    switch (mode) {
+        case LinearToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.LINEAR;
+        case ACESFilmicToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.ACES_FILMIC;
+        case AgXToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.AGX;
+        case NeutralToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.NEUTRAL;
+        case ReinhardToneMapping: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.REINHARD;
+        default: return MODULES.POSTPROCESSING.MODULE.ToneMappingMode.LINEAR;
+    }
+}

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

@@ -55,6 +55,25 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     get isPostProcessingEffect() { return true; }
 
+    /**
+     * The order of this effect. The higher the order the later the effect will be applied in the post processing stack.
+     * This can be used to control the order of effects when multiple effects are applied.  
+     * It is recommended to use the PostProcessingEffectOrder constant to order your custom effects before or after built-in effects.  
+     * @default `undefined` (no specific order set, will be applied in the order of registration)
+     * 
+     * @example
+     * ```typescript
+     * import { PostProcessingEffectOrder } from "@needle-tools/engine"
+     * 
+     * export class MyCustomEffect extends PostProcessingEffect {
+     *    order: PostProcessingEffectOrder.Bloom + 1; // render after bloom
+     *    // This will ensure that the effect is applied after the bloom effect in the post processing stack.
+     *    // ... the rest of your effect code
+     * }
+     * ```
+     */
+    order: number | undefined = undefined;
+
     constructor(params: any = undefined) {
         super();
         if (params) {
@@ -86,7 +105,7 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     onEnable(): void {
         super.onEnable();
-        if (debug) console.warn("onEnable effect", this, this.__internalDidAwakeAndStart)
+        if (debug) console.warn("Enable", this.constructor.name + (!this.__internalDidAwakeAndStart ? " (awake)" : ""));
         // Dont override the serialized value by enabling (we could also just disable this component / map enabled to active)
         if (this.__internalDidAwakeAndStart)
             this.active = true;
@@ -95,7 +114,7 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
 
     onDisable(): void {
         super.onDisable();
-        if (debug) console.warn("onDisable effect", this)
+        if (debug) console.warn("Disable", this.constructor.name);
         this._manager?.removeEffect(this);
         this.active = false;
     }