@needle-tools/engine 4.6.0 → 4.6.1-next.cd98b8c

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 { Camera as Camera3, HalfFloatType, NoToneMapping, Scene } from "three";
 
 import { showBalloonWarning } from "../../engine/debug/index.js";
 // import { internal_SetSharpeningEffectModule } from "./Effects/Sharpening.js";
@@ -9,13 +9,13 @@ import type { Constructor } from "../../engine/engine_types.js";
 import { DeviceUtilities, getParam } from "../../engine/engine_utils.js";
 import { Camera } from "../Camera.js";
 import { PostProcessingEffect, PostProcessingEffectContext } from "./PostProcessingEffect.js";
+import { orderEffects, PostprocessingEffectData } from "./utils.js";
 
 declare const NEEDLE_USE_POSTPROCESSING: boolean;
 globalThis["NEEDLE_USE_POSTPROCESSING"] = globalThis["NEEDLE_USE_POSTPROCESSING"] !== undefined ? globalThis["NEEDLE_USE_POSTPROCESSING"] : true;
 
 
 const debug = getParam("debugpost");
-const dontMergePasses = getParam("debugpostpasses");
 
 const activeKey = Symbol("needle:postprocessing-handler");
 const autoclearSetting = Symbol("needle:previous-autoclear-state");
@@ -27,7 +27,7 @@ export class PostProcessingHandler {
 
     private _composer: EffectComposer | null = null;
     private _lastVolumeComponents?: PostProcessingEffect[];
-    private _effects: Array<Effect | Pass> = [];
+    private readonly _effects: Array<PostprocessingEffectData> = [];
 
     get isActive() {
         return this._isActive;
@@ -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");
@@ -60,7 +60,7 @@ export class PostProcessingHandler {
         return this.onApply(this.context, components);
     }
 
-    unapply() {
+    unapply(dispose: boolean = true) {
         if (debug) console.log("Unapplying postprocessing effects");
         this._isActive = false;
         if (this._lastVolumeComponents) {
@@ -73,21 +73,26 @@ export class PostProcessingHandler {
         const active = context[activeKey] as PostProcessingHandler | null;
         if (active === this) {
             delete context[activeKey];
+
+            // Restore the auto clear setting
+            if (typeof context.renderer[autoclearSetting] === "boolean") {
+                context.renderer.autoClear = context.renderer[autoclearSetting];
+            }
         }
+
+        this._composer?.removeAllPasses();
+        if (dispose) this._composer?.dispose();
+
         if (context.composer === this._composer) {
-            context.composer?.dispose();
             context.composer = null;
         }
-        if (typeof context.renderer[autoclearSetting] === "boolean") {
-            context.renderer.autoClear = context.renderer[autoclearSetting];
-        }
     }
 
     dispose() {
-        this.unapply();
+        this.unapply(true);
 
         for (const effect of this._effects) {
-            effect.dispose();
+            effect.effect.dispose();
         }
         this._effects.length = 0;
         this._composer = null;
@@ -105,6 +110,7 @@ export class PostProcessingHandler {
             // import("./Effects/Sharpening.effect")
         ]);
 
+
         // try {
         //     internal_SetSharpeningEffectModule(modules[2]);
         // }
@@ -141,10 +147,22 @@ export class PostProcessingHandler {
                     // apply or collect effects
                     const res = component.apply(ctx);
                     if (!res) continue;
+
+
                     if (Array.isArray(res)) {
-                        this._effects.push(...res);
+                        for (const effect of res) {
+                            this._effects.push({
+                                effect,
+                                priority: component.priority
+                            });
+                        }
+                    }
+                    else {
+                        this._effects.push({
+                            effect: res,
+                            priority: component.priority
+                        });
                     }
-                    else this._effects.push(res);
                 }
             }
             else {
@@ -157,20 +175,33 @@ export class PostProcessingHandler {
         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(tonemapping);
+                this._effects.push({ effect: tonemapping });
             }
         }
 
         this.applyEffects(context);
     }
 
+    private _anyPassHasDepth = false;
+    private _anyPassHasNormal = false;
+    private _hasSmaaEffect = false;
+
+    get anyPassHasDepth() { return this._anyPassHasDepth; }
+    get anyPassHasNormal() { return this._anyPassHasNormal; }
+    get hasSmaaEffect() { return this._hasSmaaEffect; }
+
 
     /** Build composer passes */
     private applyEffects(context: Context) {
+        // Reset state
+        this._anyPassHasDepth = false;
+        this._anyPassHasNormal = false;
+        this._hasSmaaEffect = false;
 
         const effectsOrPasses = this._effects;
-        
-        if (effectsOrPasses.length <= 0) return;
+        if (effectsOrPasses.length <= 0) {
+            return;
+        }
 
         const camera = context.mainCameraComponent as Camera;
         const renderer = context.renderer;
@@ -180,8 +211,18 @@ export class PostProcessingHandler {
         // Store the auto clear setting because the postprocessing composer just disables it
         // and when we disable postprocessing we want to restore the original setting
         // https://github.com/pmndrs/postprocessing/blob/271944b74b543a5b743a62803a167b60cc6bb4ee/src/core/EffectComposer.js#L230C12-L230C12
+        // First we need to get the previously set autoClear setting, if it exists
+        if (typeof renderer[autoclearSetting] === "boolean") {
+            renderer.autoClear = renderer[autoclearSetting];
+        }
         renderer[autoclearSetting] = renderer.autoClear;
 
+        for (const ef of effectsOrPasses) {
+            if (ef instanceof MODULES.POSTPROCESSING.MODULE.SMAAEffect) {
+                this._hasSmaaEffect = true;
+            }
+        }
+
         // create composer and set active on context
         if (!this._composer) {
             // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
@@ -194,11 +235,13 @@ export class PostProcessingHandler {
         if (context.composer && context.composer !== this._composer) {
             console.warn("There's already an active EffectComposer in your scene: replacing it with a new one. This might cause unexpected behaviour. Make sure to only use one PostprocessingManager/Volume in your scene.");
         }
+
         context.composer = this._composer;
         const composer = context.composer;
         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();
@@ -210,64 +253,100 @@ export class PostProcessingHandler {
         screenpass.mainScene = scene;
         composer.addPass(screenpass);
 
-        const automaticEffectsOrdering = true;
-        if (automaticEffectsOrdering && !dontMergePasses) {
-            try {
-                this.orderEffects();
+        try {
+            orderEffects(this._effects);
 
-                const effects: Array<Effect> = [];
+            const effectsToMerge: Array<Effect> = [];
+            let hasConvolutionEffectInArray = false;
 
-                for (const ef of effectsOrPasses) {
-                    if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect)
-                        effects.push(ef as Effect);
-                    else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass) {
-                        composer.addPass(ef as Pass);
-                    }
-                    else {
-                        // seems some effects are not correctly typed, but three can deal with them,
-                        // so we might need to just pass them through
-                        composer.addPass(ef);
+            for (const entry of effectsOrPasses) {
+                const ef = entry.effect;
+                if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect) {
+                    const attributes = ef.getAttributes();
+                    const convolution = MODULES.POSTPROCESSING.MODULE.EffectAttribute.CONVOLUTION;
+                    if (attributes & convolution) {
+                        console.log("[PostProcessing] Convolution effect detected: " + ef.name, hasConvolutionEffectInArray);
+                        if (hasConvolutionEffectInArray) {
+                            hasConvolutionEffectInArray = false;
+                            console.log("[PostProcessing] Merging effects with convolution effect in array", effectsToMerge.map(e => e.name).join(", "));
+                            this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
+
+                        }
+                        hasConvolutionEffectInArray = true;
                     }
+                    // Otherwise we can merge it
+                    effectsToMerge.push(ef as Effect);
                 }
-
-                // 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.mainScene = scene;
-                    pass.enabled = true;
-                    composer.addPass(pass);
+                else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass) {
+                    hasConvolutionEffectInArray = false;
+                    this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
+                    ef.renderToScreen = false;
+                    composer.addPass(ef as Pass);
+                }
+                else {
+                    // seems some effects are not correctly typed, but three can deal with them,
+                    // so we might need to just pass them through
+                    hasConvolutionEffectInArray = false;
+                    this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
+                    composer.addPass(ef);
                 }
             }
-            catch (e) {
-                console.error("Error while applying postprocessing effects", e);
-                composer.removeAllPasses();
-            }
+
+            this.createPassForMergeableEffects(effectsToMerge, composer, cam, scene);
+        }
+        catch (e) {
+            console.error("Error while applying postprocessing effects", e);
+            composer.removeAllPasses();
         }
-        else {
-            // we still want to sort passes, but we do not want to merge them for debugging
-            if (automaticEffectsOrdering)
-                this.orderEffects();
 
-            for (const ef of effectsOrPasses) {
-                if (ef instanceof MODULES.POSTPROCESSING.MODULE.Effect) {
-                    const pass = new MODULES.POSTPROCESSING.MODULE.EffectPass(cam, ef as Effect);
-                    pass.name = ef.name;
-                    composer.addPass(pass);
-                }
-                else if (ef instanceof MODULES.POSTPROCESSING.MODULE.Pass)
-                    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
-                    composer.addPass(ef);
+        // 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];
+            const isLast = i === composer.passes.length - 1;
+            if ((pass as any)?.configuration !== undefined) {
+                (pass as any).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;
+            }
+
+            this._anyPassHasDepth ||= pass.needsDepthTexture;
+            if (pass instanceof MODULES.POSTPROCESSING.MODULE.NormalPass) {
+                this._anyPassHasNormal = true;
+            }
+            if (pass instanceof MODULES.POSTPROCESSING.MODULE.SMAAEffect) {
+                this._hasSmaaEffect = true;
+            }
+        }
+
+        // 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);
+    }
+
+
+
+    /** Should be called before `composer.addPass()` to create an effect pass with all previously collected effects that can be merged up to that point */
+    private createPassForMergeableEffects(effects: Array<Effect>, composer: EffectComposer, camera: Camera3, scene: Scene) {
+        if (effects.length > 0) {
+            const pass = new MODULES.POSTPROCESSING.MODULE.EffectPass(camera, ...effects);
+            pass.name = effects.map(e => e.name).join(", ");
+            pass.mainScene = scene;
+            pass.enabled = true;
+            pass.renderToScreen = false;
+            composer.addPass(pass);
+            effects.length = 0; // Clear effects after adding them to the pass
         }
+    }
 
-        if (debug) {
 
-            console.log("[PostProcessing] Passes →", composer.passes);
 
+    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 +382,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 +406,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;

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

@@ -56,6 +56,9 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         return this._activeEffects;
     }
 
+    get dirty() { return this._isDirty; }
+    set dirty(value: boolean) { this._isDirty = value; }
+
     @serializeable(VolumeProfile)
     sharedProfile?: VolumeProfile;
 
@@ -185,7 +188,17 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
                 this.context.composer.setMainScene(this.context.scene);
 
                 const composer = this.context.composer;
-                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 (debug || isDevEnvironment()) {
+                            console.warn(`[PostProcessing] Disabling multisampling because depth or normals are used. If you need anti-aliasing, consider adding an Antialiasing component or SMAA effect to the PostprocessingManager.`);
+                        }
+                    }
+                }
+                else if (this.multisampling === "auto") {
 
                     const timeSinceLastChange = this.context.time.realtimeSinceStartup - this._multisampleAutoChangeTime;
 
@@ -244,7 +257,7 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
     private _isDirty: boolean = false;
 
     private apply() {
-        if (debug) console.log(`Apply PostProcessing "${this.name}"`);
+        if (debug) console.log(`Apply PostProcessing "${this.name || "unnamed"}"`);
 
         if (isDevEnvironment()) {
             if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
@@ -256,7 +269,6 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         }
 
         this._isDirty = false;
-        this.unapply();
 
         this._activeEffects.length = 0;
         // get from profile
@@ -299,16 +311,13 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
                         console.warn(`[PostProcessing] No composer found`);
                     }
                 })
-
+        }
+        else {
+            this._postprocessing?.unapply(false);
         }
 
     }
 
-    private unapply() {
-        this._postprocessing?.unapply();
-    }
-
-
     private _applyPostQueue() {
         if (this._modificationQueue) {
             for (const entry of this._modificationQueue.values()) this.onEditorModification(entry);

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

@@ -3,3 +3,4 @@ export * from "./PostProcessingHandler.js"
 export { PostProcessingManager } from "./Volume.js"
 export * from "./VolumeParameter.js"
 export * from "./VolumeProfile.js";
+export { PostProcessingEffectPriority } from "./utils.js";

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

@@ -1,9 +1,11 @@
+import type { Effect, Pass } from "postprocessing";
 import { Object3D } from "three";
 
 import { isDevEnvironment } from "../../engine/debug/index.js";
 import { addComponent } from "../../engine/engine_components.js";
 import { foreachComponentEnumerator } from "../../engine/engine_gameobject.js";
-import { ConstructorConcrete, IComponent } from "../../engine/engine_types.js";
+import { MODULES } from "../../engine/engine_modules.js";
+import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { type PostProcessingEffect } from "./PostProcessingEffect.js";
 
@@ -11,6 +13,8 @@ export const debug = getParam("debugpost");
 
 export type IPostProcessingManager = IComponent & {
     get isPostProcessingManager(): boolean;
+    get dirty(): boolean;
+    set dirty(value: boolean);
     addEffect(effect: PostProcessingEffect): void;
     removeEffect(effect: PostProcessingEffect): void;
 }
@@ -50,4 +54,116 @@ export function getPostProcessingManager(effect: PostProcessingEffect): IPostPro
         }
     }
     return manager;
-}
+}
+
+
+
+export type PostprocessingEffectData = {
+    effect: Effect | Pass;
+    priority?: number,
+}
+
+/**
+ * Default priority for post-processing effects. This can be used to sort effects by their rendering order when creating custom effects.
+ * E.g. in your custom effect, you can set `priority: PostProcessingEffectPriority.Bloom + 1;` to ensure it gets rendered after the bloom effect.
+ * OR `priority: PostProcessingEffectPriority.Bloom - 1;` to ensure it gets rendered before the bloom effect.
+ * @example
+ * ```typescript
+ * import { PostProcessingEffectPriority } from "@needle-tools/engine"
+ * 
+ * export class MyCustomEffect extends PostProcessingEffect {
+ *    priority: PostProcessingEffectPriority.Bloom + 1; // render after bloom
+ *    
+ *    // ... your effect code
+ * }
+ * ```
+ */
+export const PostProcessingEffectPriority = {
+    NormalPass: 0,
+    DepthDownsamplingPass: 10,
+    SMAA: 20,
+    SSAO: 30,
+    TiltShift: 40,
+    DepthOfField: 50,
+    ChromaticAberration: 60,
+    Bloom: 70,
+    Vignette: 80,
+    Pixelation: 90,
+    ToneMapping: 100,
+    HueSaturation: 110,
+    BrightnessContrast: 120,
+    // Sharpening: 130,
+}
+// let effectsOrder: Array<Constructor<Effect | Pass>> | null = null;
+
+let builtinOrder: Map<Constructor<Effect | Pass>, number> | null = null;
+
+export function orderEffects(effects: Array<PostprocessingEffectData>) {
+    if (debug === "verbose") console.debug("Before ordering effects", [...effects]);
+
+    if (!builtinOrder) {
+        builtinOrder = new Map<Constructor<Effect | Pass>, number>();
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.NormalPass, PostProcessingEffectPriority.NormalPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthDownsamplingPass, PostProcessingEffectPriority.DepthDownsamplingPass);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SMAAEffect, PostProcessingEffectPriority.SMAA);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.SSAOEffect, PostProcessingEffectPriority.SSAO);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.TiltShiftEffect, PostProcessingEffectPriority.TiltShift);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect, PostProcessingEffectPriority.DepthOfField);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ChromaticAberrationEffect, PostProcessingEffectPriority.ChromaticAberration);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BloomEffect, PostProcessingEffectPriority.Bloom);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.VignetteEffect, PostProcessingEffectPriority.Vignette);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.PixelationEffect, PostProcessingEffectPriority.Pixelation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.ToneMappingEffect, PostProcessingEffectPriority.ToneMapping);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.HueSaturationEffect, PostProcessingEffectPriority.HueSaturation);
+        builtinOrder.set(MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect, PostProcessingEffectPriority.BrightnessContrast);
+    }
+
+    // enforce correct order of effects (e.g. DOF before Bloom)
+    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 = typeof a.priority === "number" ? a.priority : builtinOrder!.get(a.effect.constructor as Constructor<Effect | Pass>) || -1;
+        const bidx = typeof b.priority === "number" ? b.priority : builtinOrder!.get(b.effect.constructor as Constructor<Effect | Pass>) || -1;
+
+        // 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;
+    });
+
+    // effects.sort((a, b) => {
+    //     if (a.beforeEffect) {
+    //         const beforeA = effectsOrder!.findIndex(e => a.beforeEffect!.constructor.name.endsWith(e.name));
+    //         if (beforeA >= 0) {
+    //             return -1; // before effect should be rendered first
+    //         }
+    //         else {
+    //             return 1; // no before effect, so we can keep the order
+    //         }
+    //     }
+    //     else if (b.beforeEffect) {
+    //         const beforeB = effectsOrder!.findIndex(e => b.beforeEffect!.constructor.name.endsWith(e.name));
+    //         if (beforeB >= 0) {
+    //             return 1; // before effect should be rendered first
+    //         }
+    //         else if (a.beforeEffect) {
+    //             return -1; // no before effect, so we can keep the order
+    //         }
+
+    //     }
+    //     return 0; // no before effect, so we can keep the order
+    // });
+
+
+    if (debug === "verbose") console.debug("After ordering effects", [...effects]);
+}
+
+