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

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();

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

@@ -1,15 +1,16 @@
 import type { Effect, EffectComposer, Pass, ToneMappingEffect as _TonemappingEffect } from "postprocessing";
-import { Camera as Camera3, HalfFloatType, NoToneMapping, Scene } from "three";
+import { Camera as Camera3, DepthTexture, HalfFloatType, LinearFilter, NoToneMapping, Scene, Texture, ToneMapping, WebGLRenderTarget } from "three";
 
 import { showBalloonWarning } from "../../engine/debug/index.js";
 // import { internal_SetSharpeningEffectModule } from "./Effects/Sharpening.js";
 import { MODULES } from "../../engine/engine_modules.js";
 import { Context } from "../../engine/engine_setup.js";
-import type { Constructor } from "../../engine/engine_types.js";
-import { DeviceUtilities, getParam } from "../../engine/engine_utils.js";
+import { Graphics } from "../../engine/engine_three_utils.js";
+import { getParam } from "../../engine/engine_utils.js";
 import { Camera } from "../Camera.js";
+import { threeToneMappingToEffectMode } from "./Effects/Tonemapping.utils.js";
 import { PostProcessingEffect, PostProcessingEffectContext } from "./PostProcessingEffect.js";
-import { orderEffects, PostprocessingEffectData } from "./utils.js";
+import { orderEffects, PostprocessingEffectData, PostProcessingEffectOrder } from "./utils.js";
 
 declare const NEEDLE_USE_POSTPROCESSING: boolean;
 globalThis["NEEDLE_USE_POSTPROCESSING"] = globalThis["NEEDLE_USE_POSTPROCESSING"] !== undefined ? globalThis["NEEDLE_USE_POSTPROCESSING"] : true;
@@ -19,6 +20,7 @@ const debug = getParam("debugpost");
 
 const activeKey = Symbol("needle:postprocessing-handler");
 const autoclearSetting = Symbol("needle:previous-autoclear-state");
+const previousToneMapping = Symbol("needle:previous-tone-mapping");
 
 /**
  * PostProcessingHandler is responsible for applying post processing effects to the scene. It is internally used by the {@link Volume} component
@@ -29,6 +31,14 @@ export class PostProcessingHandler {
     private _lastVolumeComponents?: PostProcessingEffect[];
     private readonly _effects: Array<PostprocessingEffectData> = [];
 
+    /**
+     * Returns true if a specific effect is currently active in the post processing stack.
+     */
+    getEffectIsActive(effect: Effect): boolean {
+        if (!effect) return false;
+        return this._isActive && this._effects.some(e => e.effect === effect);
+    }
+
     get isActive() {
         return this._isActive;
     }
@@ -78,6 +88,9 @@ export class PostProcessingHandler {
             if (typeof context.renderer[autoclearSetting] === "boolean") {
                 context.renderer.autoClear = context.renderer[autoclearSetting];
             }
+            if (typeof context.renderer[previousToneMapping] === "number") {
+                context.renderer.toneMapping = context.renderer[previousToneMapping] as ToneMapping;
+            }
         }
 
         this._composer?.removeAllPasses();
@@ -153,14 +166,14 @@ export class PostProcessingHandler {
                         for (const effect of res) {
                             this._effects.push({
                                 effect,
-                                priority: component.priority
+                                priority: component.order
                             });
                         }
                     }
                     else {
                         this._effects.push({
                             effect: res,
-                            priority: component.priority
+                            priority: component.order
                         });
                     }
                 }
@@ -171,14 +184,6 @@ export class PostProcessingHandler {
             }
         }
 
-        // Ensure that we have a tonemapping effect if the renderer is set to use a tone mapping
-        if (this.context.renderer.toneMapping != NoToneMapping) {
-            if (!this._effects.find(e => e instanceof MODULES.POSTPROCESSING.MODULE.ToneMappingEffect)) {
-                const tonemapping = new MODULES.POSTPROCESSING.MODULE.ToneMappingEffect();
-                this._effects.push({ effect: tonemapping });
-            }
-        }
-
         this.applyEffects(context);
     }
 
@@ -191,6 +196,18 @@ export class PostProcessingHandler {
     get hasSmaaEffect() { return this._hasSmaaEffect; }
 
 
+
+    private _customInputBuffer: WebGLRenderTarget<Texture> | null = null;
+    private _customInputBufferId = 0;
+    private _multisampling: number = 0;
+    set multisampling(value: number) {
+        this._multisampling = value;
+    }
+    get multisampling() {
+        return this._multisampling;
+    }
+
+
     /** Build composer passes */
     private applyEffects(context: Context) {
         // Reset state
@@ -198,8 +215,7 @@ export class PostProcessingHandler {
         this._anyPassHasNormal = false;
         this._hasSmaaEffect = false;
 
-        const effectsOrPasses = this._effects;
-        if (effectsOrPasses.length <= 0) {
+        if (this._effects.length <= 0) {
             return;
         }
 
@@ -217,6 +233,21 @@ export class PostProcessingHandler {
         }
         renderer[autoclearSetting] = renderer.autoClear;
 
+        if (typeof renderer[previousToneMapping] === "number") {
+            renderer.toneMapping = renderer[previousToneMapping] as ToneMapping;
+        }
+        renderer[previousToneMapping] = renderer.toneMapping;
+
+        // Ensure that we have a tonemapping effect if the renderer is set to use a tone mapping
+        if (renderer.toneMapping != NoToneMapping) {
+            if (!this._effects.find(e => e instanceof MODULES.POSTPROCESSING.MODULE.ToneMappingEffect)) {
+                const tonemapping = new MODULES.POSTPROCESSING.MODULE.ToneMappingEffect();
+                tonemapping.name = `ToneMapping (${renderer.toneMapping})`;
+                tonemapping.mode = threeToneMappingToEffectMode(renderer.toneMapping);
+                this._effects.push({ effect: tonemapping, priority: PostProcessingEffectOrder.ToneMapping });
+            }
+        }
+
         // create composer and set active on context
         if (!this._composer) {
             // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
@@ -236,7 +267,7 @@ export class PostProcessingHandler {
         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)
-        composer.multisampling = 0;
+        composer.multisampling = 0; // Disable multisampling by default
 
         for (const prev of composer.passes)
             prev.dispose();
@@ -244,17 +275,95 @@ export class PostProcessingHandler {
 
         // Render to screen pass
         const screenpass = new MODULES.POSTPROCESSING.MODULE.RenderPass(scene, cam);
-        screenpass.name = "Render To Screen";
+        screenpass.name = "RenderPass";
         screenpass.mainScene = scene;
         composer.addPass(screenpass);
 
+        const screenPassRender = screenpass.render;
+        this._customInputBuffer?.dispose();
+        this._customInputBuffer = null;
+        screenpass.render = (renderer, inputBuffer, outputBuffer, deltaTime, stencilTest) => {
+            if (!inputBuffer) return;
+
+            // screenPassRender.call(screenpass, renderer, inputBuffer, outputBuffer, deltaTime, stencilTest);
+            // return;
+
+            // Make sure multisampling is disabled on the composer buffers. Technically a user could still set multisampling directly on the composer so this is to override that and make sure these textures do NOT use multisampling
+            inputBuffer.samples = 0;
+            if (outputBuffer) {
+                outputBuffer.samples = 0;
+            }
+
+            // Make sure the input buffer is a WebGLRenderTarget with the correct settings
+            if (!this._customInputBuffer
+                || this._customInputBuffer.width !== inputBuffer.width
+                || this._customInputBuffer.height !== inputBuffer.height
+                || this._customInputBuffer.samples !== this._multisampling
+                || this._customInputBuffer.texture.format !== inputBuffer.texture.format
+                || this._customInputBuffer.texture.type !== HalfFloatType
+            ) {
+                this._customInputBuffer?.dispose();
+
+                this._customInputBuffer = new WebGLRenderTarget(inputBuffer.width, inputBuffer.height, {
+                    format: inputBuffer.texture.format,
+                    type: HalfFloatType,
+                    depthBuffer: inputBuffer.depthBuffer,
+                    depthTexture: inputBuffer.depthTexture
+                        ? new DepthTexture(inputBuffer.width, inputBuffer.height)
+                        : undefined,
+                    stencilBuffer: inputBuffer.stencilBuffer,
+                    samples: Math.max(0, this._multisampling),
+                    minFilter: inputBuffer.texture.minFilter ?? LinearFilter,
+                    magFilter: inputBuffer.texture.magFilter ?? LinearFilter,
+                    generateMipmaps: inputBuffer.texture.generateMipmaps,
+                });
+                this._customInputBufferId++;
+                this._customInputBuffer.texture.name = `CustomInputBuffer-${this._customInputBufferId}`;
+                if (this._customInputBuffer.depthTexture && inputBuffer.depthTexture) {
+                    this._customInputBuffer.depthTexture.format = inputBuffer.depthTexture.format;
+                    this._customInputBuffer.depthTexture.type = inputBuffer.depthTexture.type;
+                }
+                // https://github.com/pmndrs/postprocessing/blob/ad338df710ef41fee4e5d10ad2c2c299030d46ef/src/core/EffectComposer.js#L366
+                if (this._customInputBuffer.samples > 0)
+                    (this._customInputBuffer as any).ignoreDepthForMultisampleCopy = false;
+
+                if (debug) console.warn(`[PostProcessing] Input buffer created with size ${this._customInputBuffer.width}x${this._customInputBuffer.height} and samples ${this._customInputBuffer.samples}`);
+            }
+            // Calling the original render function with the input buffer
+            screenPassRender.call(screenpass, renderer, this._customInputBuffer, outputBuffer, deltaTime, stencilTest);
+            // Blit the resulting buffer to the input buffer passed in by the composer so it's used for subsequent effects
+            Graphics.blit(this._customInputBuffer.texture, inputBuffer, {
+                renderer,
+                depthTexture: this._customInputBuffer.depthTexture,
+                depthWrite: true,
+                depthTest: true,
+            });
+        };
+
+
         try {
             orderEffects(this._effects);
 
+            let foundTonemappingEffect = false;
+            let activeTonemappingEffect: _TonemappingEffect | null = null;
+            for (let i = this._effects.length - 1; i >= 0; i--) {
+                const ef = this._effects[i].effect;
+                if (ef instanceof MODULES.POSTPROCESSING.MODULE.ToneMappingEffect) {
+                    // If we already have a tonemapping effect, we can skip this one
+                    if (foundTonemappingEffect) {
+                        if (debug) console.warn(`[PostProcessing] Found multiple tonemapping effects in the scene: ${ef.name} and ${activeTonemappingEffect?.name}. Only the last one added will be used.`);
+                        this._effects.splice(i, 1);
+                        continue;
+                    }
+                    activeTonemappingEffect = ef;
+                    foundTonemappingEffect = true;
+                }
+            }
+
             const effectsToMerge: Array<Effect> = [];
             let hasConvolutionEffectInArray = false;
 
-            for (const entry of effectsOrPasses) {
+            for (const entry of this._effects) {
                 const ef = entry.effect;
 
                 if (ef instanceof MODULES.POSTPROCESSING.MODULE.SMAAEffect) {
@@ -264,6 +373,21 @@ export class PostProcessingHandler {
                     this._anyPassHasNormal = true;
                 }
 
+
+                // There can be only one tonemapping effect in the scene, so we can skip all others
+                if (ef instanceof MODULES.POSTPROCESSING.MODULE.ToneMappingEffect && activeTonemappingEffect !== ef) {
+                    // If we already have a tonemapping effect, we can skip this one
+                    continue;
+                }
+
+                // We can also not merge multiple effects of the same type in one pass
+                // So we first need to create a new pass with whatever effects we have so far
+                // TODO: this seems to work fine for some effects (like ColorAdjustments) and only caused issues with multiple Tonemapping effects so far which is handled above
+                // const constructor = ef.constructor as Constructor<Effect | Pass>;
+                // if(effectsToMerge.find(e => e.constructor === constructor)) {
+                //     // this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
+                // }
+
                 if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect) {
                     const attributes = ef.getAttributes();
                     const convolution = MODULES.POSTPROCESSING.MODULE.EffectAttribute.CONVOLUTION;

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

@@ -187,14 +187,12 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
 
                 this.context.composer.setMainScene(this.context.scene);
 
-                const composer = this.context.composer as EffectComposer;
-
                 if (this.multisampling === "auto") {
 
                     // If the postprocessing handler is using depth+normals (e.g. with SMAA) we ALWAYS disable multisampling to avoid ugly edges
                     if (this._postprocessing && (this._postprocessing.hasSmaaEffect)) {
-                        if (composer.multisampling !== 0) {
-                            composer.multisampling = 0;
+                        if (this._postprocessing.multisampling !== 0) {
+                            this._postprocessing.multisampling = 0;
                             if (debug || isDevEnvironment()) {
                                 console.warn(`[PostProcessing] Disabling multisampling you're using SMAA and have set the 'multisampling: auto' on your PostprocessingManager/Volume component. If you need anti-aliasing, consider adding an Antialiasing component or SMAA effect to the PostprocessingManager.`);
                             }
@@ -206,45 +204,41 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
                         if (this.context.time.realtimeSinceStartup - this._componentEnabledTime > 2
                             && timeSinceLastChange > .5
                         ) {
-                            const prev = composer.multisampling;
+                            const prev = this._postprocessing.multisampling;
 
-                            if (composer.multisampling > 0 && this.context.time.smoothedFps <= 50) {
+                            if (this._postprocessing.multisampling > 0 && this.context.time.smoothedFps <= 50) {
                                 this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
                                 this._multisampleAutoDecreaseTime = this.context.time.realtimeSinceStartup;
-                                let newMultiSample = composer.multisampling * .5;
+                                let newMultiSample = this._postprocessing.multisampling * .5;
                                 newMultiSample = Math.floor(newMultiSample);
-                                if (newMultiSample != composer.multisampling) {
-                                    composer.multisampling = newMultiSample;
+                                if (newMultiSample != this._postprocessing.multisampling) {
+                                    this._postprocessing.multisampling = newMultiSample;
                                 }
-                                if (debug) console.debug(`[PostProcessing] Reduced multisampling from ${prev} to ${composer.multisampling}`);
+                                if (debug) console.debug(`[PostProcessing] Reduced multisampling from ${prev} to ${this._postprocessing.multisampling}`);
                             }
                             // if performance is good for a while try increasing multisampling again
                             else if (timeSinceLastChange > 1
                                 && this.context.time.smoothedFps >= 59
-                                && composer.multisampling < this.context.renderer.capabilities.maxSamples
+                                && this._postprocessing.multisampling < this.context.renderer.capabilities.maxSamples
                                 && this.context.time.realtimeSinceStartup - this._multisampleAutoDecreaseTime > 10
                             ) {
                                 this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
-                                let newMultiSample = composer.multisampling <= 0 ? 1 : composer.multisampling * 2;
+                                let newMultiSample = this._postprocessing.multisampling <= 0 ? 1 : this._postprocessing.multisampling * 2;
                                 newMultiSample = Math.floor(newMultiSample);
-                                if (newMultiSample !== composer.multisampling) {
-                                    composer.multisampling = newMultiSample;
+                                if (newMultiSample !== this._postprocessing.multisampling) {
+                                    this._postprocessing.multisampling = newMultiSample;
                                 }
-                                if (debug) console.debug(`[PostProcessing] Increased multisampling from ${prev} to ${composer.multisampling}`);
+                                if (debug) console.debug(`[PostProcessing] Increased multisampling from ${prev} to ${this._postprocessing.multisampling}`);
                             }
                         }
                     }
                 }
                 else {
                     const newMultiSample = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
-                    if (newMultiSample !== composer.multisampling)
-                        composer.multisampling = newMultiSample;
+                    if (newMultiSample !== this._postprocessing.multisampling)
+                        this._postprocessing.multisampling = newMultiSample;
                 }
 
-                // Fix multisampling for the composer, it ONLY needs to be done for the input buffer
-                // this is super important for performance a negative visual impact
-                composer.outputBuffer.samples = 0;
-
                 // only set the main camera if any pass has a different camera
                 // trying to avoid doing this regularly since it involves doing potentially unnecessary work
                 // https://github.com/pmndrs/postprocessing/blob/3d3df0576b6d49aec9e763262d5a1ff7429fd91a/src/core/EffectComposer.js#L406
@@ -309,17 +303,16 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
 
                     this._applyPostQueue();
 
-                    const composer = this._postprocessing?.composer;
-                    if (composer) {
+                    if (this._postprocessing) {
                         if (this.multisampling === "auto") {
-                            composer.multisampling = DeviceUtilities.isMobileDevice()
+                            this._postprocessing.multisampling = DeviceUtilities.isMobileDevice()
                                 ? 2
                                 : 4;
                         }
                         else {
-                            composer.multisampling = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
+                            this._postprocessing.multisampling = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
                         }
-                        if (debug) console.debug(`[PostProcessing] Set multisampling to ${composer.multisampling} (Is Mobile: ${DeviceUtilities.isMobileDevice()})`);
+                        if (debug) console.debug(`[PostProcessing] Set multisampling to ${this._postprocessing.multisampling} (Is Mobile: ${DeviceUtilities.isMobileDevice()})`);
                     }
                     else if (debug) {
                         console.warn(`[PostProcessing] No composer found`);

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

@@ -1,6 +1,6 @@
 export * from "./PostProcessingEffect.js";
 export * from "./PostProcessingHandler.js"
-export { PostProcessingEffectPriority } from "./utils.js";
+export { PostProcessingEffectOrder } from "./utils.js";
 export { PostProcessingManager } from "./Volume.js"
 export * from "./VolumeParameter.js"
 export * from "./VolumeProfile.js";