@needle-tools/engine 4.4.0-alpha.2 → 4.4.0-alpha.3

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

@@ -15,6 +15,7 @@ globalThis["NEEDLE_USE_POSTPROCESSING"] = globalThis["NEEDLE_USE_POSTPROCESSING"
 
 
 const debug = getParam("debugpost");
+const dontMergePasses = getParam("debugpostpasses");
 
 const activeKey = Symbol("needle:postprocessing-handler");
 const autoclearSetting = Symbol("needle:previous-autoclear-state");
@@ -168,6 +169,7 @@ export class PostProcessingHandler {
     private applyEffects(context: Context) {
 
         const effectsOrPasses = this._effects;
+        
         if (effectsOrPasses.length <= 0) return;
 
         const camera = context.mainCameraComponent as Camera;
@@ -209,7 +211,7 @@ export class PostProcessingHandler {
         composer.addPass(screenpass);
 
         const automaticEffectsOrdering = true;
-        if (automaticEffectsOrdering) {
+        if (automaticEffectsOrdering && !dontMergePasses) {
             try {
                 this.orderEffects();
 
@@ -243,9 +245,16 @@ export class PostProcessingHandler {
             }
         }
         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)
-                    composer.addPass(new MODULES.POSTPROCESSING.MODULE.EffectPass(cam, ef as Effect));
+                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
@@ -255,10 +264,74 @@ export class PostProcessingHandler {
             }
         }
 
-        if (debug)
+        if (debug) {
+
             console.log("[PostProcessing] Passes →", composer.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,
+                inverted: true,
+            });
+            depthEffect.name = "Depth Effect";
+            const depthPass = new MODULES.POSTPROCESSING.MODULE.EffectPass(cam, depthEffect);
+            depthPass.name = "Depth Effect Pass";
+            depthPass.enabled = false;
+            composer.passes.push(depthPass);
+
+            if (this._passIndices !== null) {
+                const newPasses = [composer.passes[0]];
+                if (this._passIndices.length > 0 && this._passIndices[0] !== 0) {
+                    newPasses.push(...this._passIndices.map(index => composer.passes[index]).filter(pass => pass));
+                }
+                if (newPasses.length > 0) {
+                    console.log("[PostProcessing] Passes (selected) →", newPasses);
+                }
+                composer.passes.length = 0;
+                for (const pass of newPasses) {
+                    pass.enabled = true;
+                    composer.addPass(pass);
+                }
+            }
+
+            const menu = this.context.menu;
+            if (menu && this._passIndices === null) {
+                if (this._menuEntry)
+                    this._menuEntry.remove();
+                
+                const select = document.createElement("select");
+                select.multiple = true;
+                const defaultOpt = document.createElement("option");
+                defaultOpt.innerText = "Final Output";
+                defaultOpt.value = "-1";
+                select.appendChild(defaultOpt);
+                for (const eff of composer.passes) {
+                    const opt = document.createElement("option");
+                    opt.innerText = eff.name;
+                    opt.value = `${composer.passes.indexOf(eff)}`;
+                    opt.title = eff.name;
+                    select.appendChild(opt);
+                }
+                menu.appendChild(select);
+                this._menuEntry = select;
+                select.addEventListener("change", () => {
+                    const indices = Array.from(select.selectedOptions).map(option => parseInt(option.value));
+                    if (indices.length === 1 && indices[0] === -1) {
+                        this._passIndices = null;
+                    }
+                    else {
+                        this._passIndices = indices;
+                    }
+
+                    this.applyEffects(context);
+                });
+            }
+        }
     }
 
+    private _menuEntry: HTMLSelectElement | null = null;
+    private _passIndices: number[] | null = null;
+
     private orderEffects() {
         if (debug) console.log("Before ordering effects", [...this._effects]);