@needle-tools/engine 4.6.1-next.f9f2e7d → 4.6.2-next.fb486b2

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

@@ -48,10 +48,10 @@ export class BloomEffect extends PostProcessingEffect {
 
     /**
      * Scatter value. The higher the value, the more the bloom will scatter.
-     * @default 0.3
+     * @default 0.7
      */
     @serializable(VolumeParameter)
-    readonly scatter: VolumeParameter = new VolumeParameter(.3);
+    readonly scatter: VolumeParameter = new VolumeParameter(.7);
 
     /**
      * Set to true to use selective bloom when the effect gets created.
@@ -93,8 +93,6 @@ export class BloomEffect extends PostProcessingEffect {
                 radius: 0.85, // default value
                 intensity: this.intensity.value, 
             });
-            // @ts-ignore Well... it's protected but bloom needs this :(
-            bloom.setAttributes(EffectAttribute.CONVOLUTION);
         }
 
         this.intensity.onValueChanged = newValue => {

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,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,54 +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("[PostProcessing] 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 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);
         }
 
+        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 (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;
-        };
+        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

@@ -56,23 +56,23 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
     get isPostProcessingEffect() { return true; }
 
     /**
-     * The priority of this effect. The higher the priority the later the effect will be applied in the post processing stack.
+     * 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 PostProcessingEffectPriority constant to order your custom effects before or after built-in effects.  
-     * @default `undefined` (no specific priority set, will be applied in the order of registration)
+     * 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 { PostProcessingEffectPriority } from "@needle-tools/engine"
+     * import { PostProcessingEffectOrder } from "@needle-tools/engine"
      * 
      * export class MyCustomEffect extends PostProcessingEffect {
-     *    priority: PostProcessingEffectPriority.Bloom + 1; // render after bloom
-     *    
+     *    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
      * }
      * ```
      */
-    priority: number | undefined = undefined;
+    order: number | undefined = undefined;
 
     constructor(params: any = undefined) {
         super();
@@ -105,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;
@@ -114,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;
     }