@needle-tools/engine 4.6.0 → 4.6.1-next.20d54cd

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

@@ -17,9 +17,18 @@ export class ColorAdjustments extends PostProcessingEffect {
         return "ColorAdjustments";
     }
 
+    /**
+     * Whether values for contrast, hueshift or saturation are remapped to a different range.
+     */
+    remap = true;
+
     @serializable(VolumeParameter)
-    readonly postExposure: VolumeParameter = new VolumeParameter(0);
+    readonly postExposure: VolumeParameter = new VolumeParameter(1);
 
+    /**
+     * Range -1 to 1, where 0 is the default value, -1 is the lowest contrast and 1 is the highest contrast.
+     * @default 0
+     */
     @serializable(VolumeParameter)
     readonly contrast: VolumeParameter = new VolumeParameter(0);
 
@@ -31,11 +40,12 @@ export class ColorAdjustments extends PostProcessingEffect {
 
     init() {
         this.postExposure!.valueProcessor = v => {
+            if(!this.remap) return v;
             v = Math.pow(2.0, v);
             return v;
         }
-
         this.contrast.valueProcessor = (v: number) => {
+            if(!this.remap) return v;
             let divisor = 1;
             if (v > 0) divisor = 200;
             else if (v < 0) divisor = 100;
@@ -45,10 +55,14 @@ export class ColorAdjustments extends PostProcessingEffect {
         };
         this.contrast.defaultValue = 0;
 
-        this.hueShift.valueProcessor = (v: number) => Math.PI * v / 180;
+        this.hueShift.valueProcessor = (v: number) => {
+            if(!this.remap) return v;
+            return Math.PI * v / 180;
+        }
         this.hueShift.defaultValue = 0;
 
         this.saturation.valueProcessor = (v: number) => {
+            if(!this.remap) return v;
             if (v < 0) return (v / 100);
             const sat = (v / (100 * Math.PI));
             return sat;
@@ -60,36 +74,33 @@ export class ColorAdjustments extends PostProcessingEffect {
         const effects: EffectProviderResult = [];
 
         // TODO: do we still need this?
-        if (this.context.renderer.toneMapping !== NoToneMapping && this.postExposure.overrideState)
-            this.context.renderer.toneMapping = NoToneMapping;
-
-
+        // if (this.context.renderer.toneMapping !== NoToneMapping && this.postExposure.overrideState)
+        //     this.context.renderer.toneMapping = NoToneMapping;
         // find the ToneMapping effect because we need it to apply post exposure
         let tonemappingEffect = this.postprocessingContext?.components.find(c => c instanceof ToneMappingEffect) as ToneMappingEffect;
         if (!tonemappingEffect) {
             tonemappingEffect = new ToneMappingEffect();
             this.postprocessingContext?.components.push(tonemappingEffect);
         }
-
         // We need this effect if someone uses ACES or AgX tonemapping;
         // problem is that we CAN'T use this effect for the "Linear" case, the package expects that in this case you remove the effect
         this.postExposure!.onValueChanged = (v) => {
-            if (this.postExposure.overrideState) {
+            if (this.postExposure.overrideState && tonemappingEffect) {
                 tonemappingEffect.exposure.value = v;
             }
+            else console.warn("[PostProcessing] PostExposure is set to override but no ToneMappingEffect found in the postprocessing stack. Please add a ToneMappingEffect to your postprocessing stack to use PostExposure.");
         };
 
         const brightnesscontrast = new MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect();
         this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;
 
         const hueSaturationEffect = new MODULES.POSTPROCESSING.MODULE.HueSaturationEffect();
-
-        effects.push(brightnesscontrast);
-        effects.push(hueSaturationEffect);
-
         this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
         this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;
 
+
+        effects.push(brightnesscontrast);
+        effects.push(hueSaturationEffect);
         return effects;
     }
 }

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

@@ -124,6 +124,7 @@ export class ScreenSpaceAmbientOcclusionN8 extends PostProcessingEffect {
             cam,
             width, height
         ) as N8AOPostPass;
+        ssao.name = "SSAO N8";
 
         const mode = ScreenSpaceAmbientOcclusionN8QualityMode[this.quality];
         ssao.setQualityMode(mode);

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

@@ -1,8 +1,10 @@
+import { EffectAttribute } from "postprocessing";
 import { Uniform } from "three";
 
 import { MODULES } from "../../../engine/engine_modules.js";
 import { serializable } from "../../../engine/engine_serialization.js";
 import { PostProcessingEffect } from "../PostProcessingEffect.js";
+import { PostProcessingEffectOrder } from "../utils.js";
 // import type { createSharpeningEffectType } from "./Sharpening.effect";
 
 // let __SHARPENING_MODULE: typeof import("./Sharpening.effect");
@@ -21,6 +23,8 @@ export class SharpeningEffect extends PostProcessingEffect {
         return "Sharpening";
     }
 
+    order: number | undefined = PostProcessingEffectOrder.Sharpening;
+
     private _effect?: any;
 
     onCreateEffect() {
@@ -130,6 +134,7 @@ function createSharpeningEffectType() {
                     ["radius", new Uniform(1)],
                     // ["threshold", new Uniform(0)],
                 ]),
+                attributes: EffectAttribute.CONVOLUTION
             });
         }
     }

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

@@ -1,69 +1,18 @@
 import type { ToneMappingEffect as _TonemappingEffect, ToneMappingMode } from "postprocessing";
-import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping } 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:
-            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
@@ -84,7 +33,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;
@@ -101,53 +50,52 @@ export class ToneMappingEffect extends PostProcessingEffect {
         super.onEffectEnabled(ppmanager);
     }
 
+    private _tonemappingEffect: _TonemappingEffect | null = null;
     onCreateEffect(): EffectProviderResult | undefined {
 
-        // TODO: this should be done in the PostProcessingHandler
-        if (this.postprocessingContext) {
-            for (const other of this.postprocessingContext.components) {
-                // If we're the first tonemapping effect it's all good
-                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 });
-                    return undefined;
-                }
-            }
-        }
-
 
         // 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 = 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);
         }
 
+        this._tonemappingEffect?.dispose();
+
         const threeMode = toThreeToneMapping(this.mode.value);
-        const tonemapping = new MODULES.POSTPROCESSING.MODULE.ToneMappingEffect({
+        const tonemapping = this._tonemappingEffect = new MODULES.POSTPROCESSING.MODULE.ToneMappingEffect({
             mode: threeToneMappingToEffectMode(threeMode),
         });
         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 (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("Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
 
 
-        this.exposure.onValueChanged = (newValue) => {
-            this.context.renderer.toneMappingExposure = newValue;
-        };
+        if (debug) console.log("[PostProcessing] Use ToneMapping", NEToneMappingMode[this.mode.value], threeMode, tonemapping.mode, "renderer.tonemapping: " + this.context.renderer.toneMapping);
 
         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._tonemappingEffect && this.postprocessingContext?.handler.getEffectIsActive(this._tonemappingEffect)) {
+            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;
     }
@@ -103,7 +122,8 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
     protected onEffectEnabled(manager?: IPostProcessingManager) {
         if (manager && manager.isPostProcessingManager === true) this._manager = manager;
         else if (!this._manager) this._manager = getPostProcessingManager(this);
-        this._manager?.addEffect(this);
+        this._manager!.addEffect(this);
+        this._manager!.dirty = true;
     }
 
     /** override to initialize bindings on parameters */