@needle-tools/engine 3.28.6-beta → 3.28.7-beta.1

package/lib/engine-components/postprocessing/PostProcessingHandler.js

@@ -1,202 +1,202 @@
-import { HalfFloatType } from "three";
-import { getParam, isMobileDevice } from "../../engine/engine_utils.js";
-import { BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, DepthDownsamplingPass, DepthOfFieldEffect, Effect, EffectComposer, EffectPass, HueSaturationEffect, NormalPass, Pass, PixelationEffect, RenderPass, SelectiveBloomEffect, SSAOEffect, VignetteEffect } from "postprocessing";
-import { showBalloonWarning } from "../../engine/debug/index.js";
-import { N8AOPostPass } from "n8ao";
-const debug = getParam("debugpost");
-const activeKey = Symbol("needle:postprocessing-handler");
-const autoclearSetting = Symbol("needle:previous-autoclear-state");
-export class PostProcessingHandler {
-    _composer = null;
-    _lastVolumeComponents;
-    _effects = [];
-    get isActive() {
-        return this._isActive;
-    }
-    get composer() {
-        return this._composer;
-    }
-    _isActive = false;
-    context;
-    constructor(context) {
-        this.context = context;
-    }
-    apply(components) {
-        this._isActive = true;
-        this.onApply(this.context, components);
-    }
-    unapply() {
-        this._isActive = false;
-        if (this._lastVolumeComponents) {
-            for (const component of this._lastVolumeComponents) {
-                component.unapply();
-            }
-            this._lastVolumeComponents.length = 0;
-        }
-        const context = this.context;
-        const active = context[activeKey];
-        if (active === this) {
-            delete context[activeKey];
-        }
-        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();
-        for (const effect of this._effects) {
-            effect.dispose();
-        }
-        this._effects.length = 0;
-        this._composer = null;
-    }
-    onApply(context, components) {
-        if (!components)
-            return;
-        context[activeKey] = this;
-        if (debug)
-            console.log("refreshing volume profile", components);
-        this._lastVolumeComponents = [...components];
-        // store all effects in an array to apply them all in one pass
-        // const effects: Array<Effect | Pass> = [];
-        this._effects.length = 0;
-        for (const component of components) {
-            //@ts-ignore
-            component.context = context;
-            if (component.apply) {
-                if (component.active) {
-                    if (!context.mainCameraComponent) {
-                        console.error("No camera in scene found or available yet - can not create postprocessing effects");
-                        return;
-                    }
-                    // apply or collect effects
-                    const res = component.apply();
-                    if (!res)
-                        continue;
-                    if (Array.isArray(res)) {
-                        this._effects.push(...res);
-                    }
-                    else
-                        this._effects.push(res);
-                }
-            }
-            else {
-                if (component.active)
-                    showBalloonWarning("Volume component is not a VolumeComponent: " + component["__type"]);
-            }
-        }
-        this.applyEffects(context);
-    }
-    /** Build composer passes */
-    applyEffects(context) {
-        const effectsOrPasses = this._effects;
-        if (effectsOrPasses.length <= 0)
-            return;
-        const camera = context.mainCameraComponent;
-        const renderer = context.renderer;
-        const scene = context.scene;
-        const cam = camera.cam;
-        // 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
-        renderer[autoclearSetting] = renderer.autoClear;
-        // create composer and set active on context
-        if (!this._composer) {
-            // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
-            this._composer = new EffectComposer(renderer, {
-                frameBufferType: HalfFloatType,
-                stencilBuffer: true,
-                multisampling: isMobileDevice() ? 0 : 8,
-            });
-        }
-        context.composer = this._composer;
-        const composer = context.composer;
-        composer.setMainCamera(cam);
-        composer.setRenderer(renderer);
-        composer.setMainScene(scene);
-        for (const prev of composer.passes)
-            prev.dispose();
-        composer.removeAllPasses();
-        // Render to screen pass
-        const screenpass = new RenderPass(scene, cam);
-        screenpass.mainScene = scene;
-        composer.addPass(screenpass);
-        try {
-            this.orderEffects();
-            const effects = [];
-            for (const ef of effectsOrPasses) {
-                if (ef instanceof Effect)
-                    effects.push(ef);
-                else if (ef instanceof Pass) {
-                    const pass = new EffectPass(cam, ...effects);
-                    pass.mainScene = scene;
-                    pass.name = effects.map(e => e.constructor.name).join(", ");
-                    pass.enabled = true;
-                    // composer.addPass(pass);
-                    effects.length = 0;
-                    composer.addPass(ef);
-                }
-            }
-            // create and apply uber pass
-            if (effects.length > 0) {
-                const pass = new EffectPass(cam, ...effects);
-                pass.mainScene = scene;
-                pass.enabled = true;
-                composer.addPass(pass);
-            }
-        }
-        catch (e) {
-            console.error("Error while applying postprocessing effects", e);
-            composer.removeAllPasses();
-            composer.addPass(screenpass);
-        }
-        if (debug)
-            console.log("PostProcessing Passes", effectsOrPasses, "->", composer.passes);
-    }
-    orderEffects() {
-        if (debug)
-            console.log("Before ordering effects", [...this._effects]);
-        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
-        const effects = this._effects;
-        effects.sort((a, b) => {
-            const aidx = effectsOrder.indexOf(a.constructor);
-            const bidx = effectsOrder.indexOf(b.constructor);
-            // Unknown effects should be rendered first
-            if (aidx < 0 && bidx < 0)
-                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];
-            if (effect?.configuration?.gammaCorrection !== undefined) {
-                const isLast = i === effects.length - 1;
-                effect.configuration.gammaCorrection = isLast;
-            }
-        }
-    }
-}
-export const effectsOrder = [
-    NormalPass,
-    DepthDownsamplingPass,
-    SSAOEffect,
-    N8AOPostPass,
-    DepthOfFieldEffect,
-    BloomEffect,
-    SelectiveBloomEffect,
-    VignetteEffect,
-    HueSaturationEffect,
-    ChromaticAberrationEffect,
-    BrightnessContrastEffect,
-    PixelationEffect,
-];
+import { HalfFloatType } from "three";
+import { getParam, isMobileDevice } from "../../engine/engine_utils.js";
+import { BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, DepthDownsamplingPass, DepthOfFieldEffect, Effect, EffectComposer, EffectPass, HueSaturationEffect, NormalPass, Pass, PixelationEffect, RenderPass, SelectiveBloomEffect, SSAOEffect, VignetteEffect } from "postprocessing";
+import { showBalloonWarning } from "../../engine/debug/index.js";
+import { N8AOPostPass } from "n8ao";
+const debug = getParam("debugpost");
+const activeKey = Symbol("needle:postprocessing-handler");
+const autoclearSetting = Symbol("needle:previous-autoclear-state");
+export class PostProcessingHandler {
+    _composer = null;
+    _lastVolumeComponents;
+    _effects = [];
+    get isActive() {
+        return this._isActive;
+    }
+    get composer() {
+        return this._composer;
+    }
+    _isActive = false;
+    context;
+    constructor(context) {
+        this.context = context;
+    }
+    apply(components) {
+        this._isActive = true;
+        this.onApply(this.context, components);
+    }
+    unapply() {
+        this._isActive = false;
+        if (this._lastVolumeComponents) {
+            for (const component of this._lastVolumeComponents) {
+                component.unapply();
+            }
+            this._lastVolumeComponents.length = 0;
+        }
+        const context = this.context;
+        const active = context[activeKey];
+        if (active === this) {
+            delete context[activeKey];
+        }
+        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();
+        for (const effect of this._effects) {
+            effect.dispose();
+        }
+        this._effects.length = 0;
+        this._composer = null;
+    }
+    onApply(context, components) {
+        if (!components)
+            return;
+        context[activeKey] = this;
+        if (debug)
+            console.log("refreshing volume profile", components);
+        this._lastVolumeComponents = [...components];
+        // store all effects in an array to apply them all in one pass
+        // const effects: Array<Effect | Pass> = [];
+        this._effects.length = 0;
+        for (const component of components) {
+            //@ts-ignore
+            component.context = context;
+            if (component.apply) {
+                if (component.active) {
+                    if (!context.mainCameraComponent) {
+                        console.error("No camera in scene found or available yet - can not create postprocessing effects");
+                        return;
+                    }
+                    // apply or collect effects
+                    const res = component.apply();
+                    if (!res)
+                        continue;
+                    if (Array.isArray(res)) {
+                        this._effects.push(...res);
+                    }
+                    else
+                        this._effects.push(res);
+                }
+            }
+            else {
+                if (component.active)
+                    showBalloonWarning("Volume component is not a VolumeComponent: " + component["__type"]);
+            }
+        }
+        this.applyEffects(context);
+    }
+    /** Build composer passes */
+    applyEffects(context) {
+        const effectsOrPasses = this._effects;
+        if (effectsOrPasses.length <= 0)
+            return;
+        const camera = context.mainCameraComponent;
+        const renderer = context.renderer;
+        const scene = context.scene;
+        const cam = camera.cam;
+        // 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
+        renderer[autoclearSetting] = renderer.autoClear;
+        // create composer and set active on context
+        if (!this._composer) {
+            // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
+            this._composer = new EffectComposer(renderer, {
+                frameBufferType: HalfFloatType,
+                stencilBuffer: true,
+                multisampling: isMobileDevice() ? 0 : 8,
+            });
+        }
+        context.composer = this._composer;
+        const composer = context.composer;
+        composer.setMainCamera(cam);
+        composer.setRenderer(renderer);
+        composer.setMainScene(scene);
+        for (const prev of composer.passes)
+            prev.dispose();
+        composer.removeAllPasses();
+        // Render to screen pass
+        const screenpass = new RenderPass(scene, cam);
+        screenpass.mainScene = scene;
+        composer.addPass(screenpass);
+        try {
+            this.orderEffects();
+            const effects = [];
+            for (const ef of effectsOrPasses) {
+                if (ef instanceof Effect)
+                    effects.push(ef);
+                else if (ef instanceof Pass) {
+                    const pass = new EffectPass(cam, ...effects);
+                    pass.mainScene = scene;
+                    pass.name = effects.map(e => e.constructor.name).join(", ");
+                    pass.enabled = true;
+                    // composer.addPass(pass);
+                    effects.length = 0;
+                    composer.addPass(ef);
+                }
+            }
+            // create and apply uber pass
+            if (effects.length > 0) {
+                const pass = new EffectPass(cam, ...effects);
+                pass.mainScene = scene;
+                pass.enabled = true;
+                composer.addPass(pass);
+            }
+        }
+        catch (e) {
+            console.error("Error while applying postprocessing effects", e);
+            composer.removeAllPasses();
+            composer.addPass(screenpass);
+        }
+        if (debug)
+            console.log("PostProcessing Passes", effectsOrPasses, "->", composer.passes);
+    }
+    orderEffects() {
+        if (debug)
+            console.log("Before ordering effects", [...this._effects]);
+        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
+        const effects = this._effects;
+        effects.sort((a, b) => {
+            const aidx = effectsOrder.indexOf(a.constructor);
+            const bidx = effectsOrder.indexOf(b.constructor);
+            // Unknown effects should be rendered first
+            if (aidx < 0 && bidx < 0)
+                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];
+            if (effect?.configuration?.gammaCorrection !== undefined) {
+                const isLast = i === effects.length - 1;
+                effect.configuration.gammaCorrection = isLast;
+            }
+        }
+    }
+}
+export const effectsOrder = [
+    NormalPass,
+    DepthDownsamplingPass,
+    SSAOEffect,
+    N8AOPostPass,
+    DepthOfFieldEffect,
+    BloomEffect,
+    SelectiveBloomEffect,
+    VignetteEffect,
+    HueSaturationEffect,
+    ChromaticAberrationEffect,
+    BrightnessContrastEffect,
+    PixelationEffect,
+];
 //# sourceMappingURL=PostProcessingHandler.js.map

package/lib/engine-components/postprocessing/Volume.d.ts

@@ -1,25 +1,25 @@
-import { Behaviour } from "../Component.js";
-import { VolumeProfile } from "./VolumeProfile.js";
-import type { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync.js";
-/** Handles PostProcessing effects */
-export declare class Volume extends Behaviour implements IEditorModificationReceiver {
-    sharedProfile?: VolumeProfile;
-    private _postprocessing?;
-    private _effects;
-    markDirty(): void;
-    awake(): void;
-    onDisable(): void;
-    onBeforeRender(): void;
-    onDestroy(): void;
-    private _lastApplyTime?;
-    private _rapidApplyCount;
-    private _isDirty;
-    private apply;
-    private unapply;
-    private _applyPostQueue;
-    /** called from needle editor sync package if its active */
-    onEditorModification(modification: EditorModification): void | boolean | undefined;
-    private _modificationQueue?;
-    private _recreateId;
-    private scheduleRecreate;
-}
+import { Behaviour } from "../Component.js";
+import { VolumeProfile } from "./VolumeProfile.js";
+import type { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync.js";
+/** Handles PostProcessing effects */
+export declare class Volume extends Behaviour implements IEditorModificationReceiver {
+    sharedProfile?: VolumeProfile;
+    private _postprocessing?;
+    private _effects;
+    markDirty(): void;
+    awake(): void;
+    onDisable(): void;
+    onBeforeRender(): void;
+    onDestroy(): void;
+    private _lastApplyTime?;
+    private _rapidApplyCount;
+    private _isDirty;
+    private apply;
+    private unapply;
+    private _applyPostQueue;
+    /** called from needle editor sync package if its active */
+    onEditorModification(modification: EditorModification): void | boolean | undefined;
+    private _modificationQueue?;
+    private _recreateId;
+    private scheduleRecreate;
+}