@needle-tools/engine 4.6.1-next.26cf56c → 4.6.1-next.50abb78

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

@@ -1,4 +1,4 @@
-import type { Effect } from "postprocessing";
+import type { Effect, EffectComposer } from "postprocessing";
 
 import { isDevEnvironment, showBalloonMessage } from "../../engine/debug/index.js";
 import { Context } from "../../engine/engine_context.js";
@@ -187,50 +187,64 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
 
                 this.context.composer.setMainScene(this.context.scene);
 
-                const composer = this.context.composer;
+                const composer = this.context.composer as EffectComposer;
 
-                // 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.`);
+                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 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.`);
+                            }
                         }
                     }
-                }
-                else if (this.multisampling === "auto") {
-
-                    const timeSinceLastChange = this.context.time.realtimeSinceStartup - this._multisampleAutoChangeTime;
-
-                    if (this.context.time.realtimeSinceStartup - this._componentEnabledTime > 2
-                        && timeSinceLastChange > .5
-                    ) {
-                        const prev = composer.multisampling;
+                    else {
+                        const timeSinceLastChange = this.context.time.realtimeSinceStartup - this._multisampleAutoChangeTime;
 
-                        if (composer.multisampling > 0 && this.context.time.smoothedFps <= 50) {
-                            this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
-                            this._multisampleAutoDecreaseTime = this.context.time.realtimeSinceStartup;
-                            composer.multisampling *= .5;
-                            composer.multisampling = Math.floor(composer.multisampling);
-                            if (debug) console.debug(`[PostProcessing] Reduced multisampling from ${prev} to ${composer.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.context.time.realtimeSinceStartup - this._multisampleAutoDecreaseTime > 10
+                        if (this.context.time.realtimeSinceStartup - this._componentEnabledTime > 2
+                            && timeSinceLastChange > .5
                         ) {
-                            this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
-                            composer.multisampling = composer.multisampling <= 0 ? 1 : composer.multisampling * 2;
-                            composer.multisampling = Math.floor(composer.multisampling);
-                            if (debug) console.debug(`[PostProcessing] Increased multisampling from ${prev} to ${composer.multisampling}`);
+                            const prev = composer.multisampling;
+
+                            if (composer.multisampling > 0 && this.context.time.smoothedFps <= 50) {
+                                this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
+                                this._multisampleAutoDecreaseTime = this.context.time.realtimeSinceStartup;
+                                let newMultiSample = composer.multisampling * .5;
+                                newMultiSample = Math.floor(newMultiSample);
+                                if (newMultiSample != composer.multisampling) {
+                                    composer.multisampling = newMultiSample;
+                                }
+                                if (debug) console.debug(`[PostProcessing] Reduced multisampling from ${prev} to ${composer.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.context.time.realtimeSinceStartup - this._multisampleAutoDecreaseTime > 10
+                            ) {
+                                this._multisampleAutoChangeTime = this.context.time.realtimeSinceStartup;
+                                let newMultiSample = composer.multisampling <= 0 ? 1 : composer.multisampling * 2;
+                                newMultiSample = Math.floor(newMultiSample);
+                                if (newMultiSample !== composer.multisampling) {
+                                    composer.multisampling = newMultiSample;
+                                }
+                                if (debug) console.debug(`[PostProcessing] Increased multisampling from ${prev} to ${composer.multisampling}`);
+                            }
                         }
                     }
                 }
                 else {
-                    composer.multisampling = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
+                    const newMultiSample = Math.max(0, Math.min(this.multisampling, this.context.renderer.capabilities.maxSamples));
+                    if (newMultiSample !== composer.multisampling)
+                        composer.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
@@ -257,7 +271,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) {
@@ -269,7 +283,6 @@ export class Volume extends Behaviour implements IEditorModificationReceiver, IP
         }
 
         this._isDirty = false;
-        this.unapply();
 
         this._activeEffects.length = 0;
         // get from profile
@@ -312,16 +325,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";
 
@@ -52,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]);
+}
+
+