Needle Engine 3.44.0-beta

Files changed (22) hide show

src/engine-components/postprocessing/Effects/Antialiasing.ts +1 -1
src/engine-components/postprocessing/Effects/Bloom.ts +0 -94
src/engine-components/postprocessing/Effects/ChromaticAberration.ts +1 -4
src/engine-components/postprocessing/Effects/ColorAdjustments.ts +13 -47
src/engine-components/codegen/components.ts +2 -2
src/engine-components/postprocessing/Effects/DepthOfField.ts +12 -13
src/engine/engine_context.ts +1 -1
src/engine/engine_tonemapping.ts +1 -1
src/engine-components/postprocessing/Effects/Pixelation.ts +1 -1
src/engine-components-experimental/networking/PlayerSync.ts +4 -3
src/engine-components/postprocessing/PostProcessingEffect.ts +26 -54
src/engine-components/postprocessing/PostProcessingHandler.ts +73 -57
src/engine/codegen/register_types.ts +4 -4
src/engine-components/postprocessing/Effects/ScreenspaceAmbientOcclusion.ts +5 -5
src/engine-components/postprocessing/Effects/Sharpening.ts +26 -20
src/engine-components/postprocessing/Effects/TiltShiftEffect.ts +0 -2
src/engine-components/postprocessing/Effects/Tonemapping.ts +105 -33
src/engine-components/postprocessing/utils.ts +7 -4
src/engine-components/postprocessing/Volume.ts +3 -3
src/engine-components/postprocessing/VolumeParameter.ts +55 -6
src/engine-components/webxr/WebXR.ts +2 -1
src/engine-components/postprocessing/Effects/BloomEffect.ts +113 -0

src/engine-components/postprocessing/Effects/Antialiasing.ts CHANGED Viewed

@@ -24,7 +24,7 @@
     // edgeDetectionThreshold!: VolumeParameter;
     @serializable(VolumeParameter)
-    preset!: VolumeParameter;
+    readonly preset: VolumeParameter = new VolumeParameter();
     onCreateEffect(): EffectProviderResult {

src/engine-components/postprocessing/Effects/Bloom.ts DELETED Viewed

@@ -1,94 +0,0 @@
-import { BlendFunction, BloomEffect, SelectiveBloomEffect } from "postprocessing";
-import { MathUtils } from "three";
-import { serializable } from "../../../engine/engine_serialization.js";
-import { PostProcessingEffect } from "../PostProcessingEffect.js";
-import { VolumeParameter } from "../VolumeParameter.js";
-import { registerCustomEffectType } from "../VolumeProfile.js";
-export class Bloom extends PostProcessingEffect {
-    /** Whether to use selective bloom by default */
-    static useSelectiveBloom = false;
-    get typeName() {
-        return "Bloom";
-    }
-    @serializable(VolumeParameter)
-    threshold!: VolumeParameter;
-    @serializable(VolumeParameter)
-    intensity!: VolumeParameter;
-    @serializable(VolumeParameter)
-    scatter!: VolumeParameter;
-    selectiveBloom?: boolean;
-    init() {
-        this.threshold.defaultValue = 1;
-        this.intensity.defaultValue = 0;
-        this.scatter.defaultValue = .2;
-        if (this.selectiveBloom) {
-            this.threshold.valueProcessor = (v: number) => v;
-            this.intensity.valueProcessor = (v: number) => v;
-            this.scatter.valueProcessor = (v: number) => 1 * Math.PI * (1 - v);
-        }
-        else {
-            this.threshold.valueProcessor = (v: number) => v;
-            this.intensity.valueProcessor = (v: number) => v;
-            this.scatter.valueProcessor = (v: number) => 1 * Math.PI * (1 - v);
-        }
-    }
-    onCreateEffect() {
-        let bloom: BloomEffect;
-        if (this.selectiveBloom == undefined) {
-            this.selectiveBloom = Bloom.useSelectiveBloom;
-        }
-        if (this.selectiveBloom) {
-            // https://github.com/pmndrs/postprocessing/blob/64d2829f014cfec97a46bf3c109f3abc55af0715/demo/src/demos/BloomDemo.js#L265
-            const selectiveBloom = bloom = new SelectiveBloomEffect(this.context.scene, this.context.mainCamera!, {
-                blendFunction: BlendFunction.ADD,
-                mipmapBlur: true,
-                luminanceThreshold: this.threshold.value,
-                luminanceSmoothing: this.scatter.value,
-                radius: 0.85, // default value
-                intensity: this.intensity.value,
-            });
-            selectiveBloom.inverted = true;
-        }
-        else {
-            bloom = new BloomEffect({
-                blendFunction: BlendFunction.ADD,
-                mipmapBlur: true,
-                luminanceThreshold: this.threshold.value,
-                luminanceSmoothing: this.scatter.value,
-                radius: 0.85, // default value
-                intensity: this.intensity.value,
-            });
-        }
-        this.intensity.onValueChanged = newValue => {
-            bloom!.intensity = newValue;
-        };
-        this.threshold.onValueChanged = newValue => {
-            // for some reason the threshold needs to be gamma-corrected
-            bloom!.luminanceMaterial.threshold = Math.pow(newValue, 2.2);
-        };
-        this.scatter.onValueChanged = newValue => {
-            bloom!.luminancePass.enabled = true;
-            console.log("Scatter", newValue);
-            bloom!.luminanceMaterial.smoothing = newValue;
-            if (bloom["mipmapBlurPass"])
-                // heuristic so it looks similar to "scatter" in other engines
-                bloom!["mipmapBlurPass"].radius = MathUtils.lerp(0.1, 0.9, 1 - newValue / Math.PI);
-        };
-        return bloom;
-    }
-}
-registerCustomEffectType("Bloom", Bloom);

src/engine-components/postprocessing/Effects/ChromaticAberration.ts CHANGED Viewed

@@ -13,11 +13,8 @@
     }
     @serializable(VolumeParameter)
-    intensity!: VolumeParameter;
+    readonly intensity: VolumeParameter = new VolumeParameter(0);
-    init() {
-        this.intensity.defaultValue = 0;
-    }
     onCreateEffect(): EffectProviderResult {
         const chromatic = new ChromaticAberrationEffect();

src/engine-components/postprocessing/Effects/ColorAdjustments.ts CHANGED Viewed

@@ -1,15 +1,12 @@
-import { BrightnessContrastEffect, HueSaturationEffect, ToneMappingEffect, ToneMappingMode } from "postprocessing";
-import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping } from "three";
+import { BrightnessContrastEffect, HueSaturationEffect } from "postprocessing";
+import { NoToneMapping } from "three";
 import { serializable } from "../../../engine/engine_serialization.js";
-import { GameObject } from "../../Component.js";
 import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
-import { Volume } from "../Volume.js";
 import { VolumeParameter } from "../VolumeParameter.js";
 import { registerCustomEffectType } from "../VolumeProfile.js";
-import { ToneMapping, TonemappingMode } from "./Tonemapping.js";
+import { ToneMappingEffect } from "./Tonemapping.js";
 export class ColorAdjustments extends PostProcessingEffect {
     get typeName() {
@@ -17,16 +14,16 @@
     }
     @serializable(VolumeParameter)
-    postExposure!: VolumeParameter;
+    readonly postExposure: VolumeParameter = new VolumeParameter(0);
     @serializable(VolumeParameter)
-    contrast!: VolumeParameter;
+    readonly contrast: VolumeParameter = new VolumeParameter(0);
     @serializable(VolumeParameter)
-    hueShift!: VolumeParameter;
+    readonly hueShift: VolumeParameter = new VolumeParameter(0);
     @serializable(VolumeParameter)
-    saturation!: VolumeParameter;
+    readonly saturation: VolumeParameter = new VolumeParameter(0);
     init() {
         this.postExposure!.valueProcessor = v => {
@@ -56,55 +53,25 @@
         this.saturation.defaultValue = 0;
     }
-    unapply() {
-        // reset to the current value in the toneMappingEffect if that exists, else Linear
-        const currentMode: any = this.toneMappingEffect?.mode?.value;
-        const newMode = this.toneMappingEffect?.getThreeToneMapping(currentMode)
-        this.context.renderer.toneMapping = newMode ?? LinearToneMapping;
-    }
-    private threeToneMappingToEffectMode(mode: number | undefined): ToneMappingMode {
-        switch (mode) {
-            case LinearToneMapping: return ToneMappingMode.LINEAR;
-            case ACESFilmicToneMapping: return ToneMappingMode.ACES_FILMIC;
-            case AgXToneMapping: return ToneMappingMode.AGX;
-            case NeutralToneMapping: return ToneMappingMode.NEUTRAL;
-            case ReinhardToneMapping: return ToneMappingMode.REINHARD;
-            default: return ToneMappingMode.LINEAR;
-        }
-    }
-    private toneMappingEffect: ToneMapping | null = null;
     onCreateEffect(): EffectProviderResult {
         const effects: EffectProviderResult = [];
+        // TODO: do we still need this?
         if (this.context.renderer.toneMapping !== NoToneMapping && this.postExposure.overrideState)
             this.context.renderer.toneMapping = NoToneMapping;
-        // workaround: find the ToneMapping effect in the scene so we can apply the mode
-        this.toneMappingEffect = GameObject.findObjectOfType(Volume)?.sharedProfile?.components.find(c => c.typeName === "ToneMapping") as ToneMapping | null;
-        const currentMode: any = this.toneMappingEffect?.mode?.value;
-        const expectedThreeMode = this.toneMappingEffect?.getThreeToneMapping(currentMode);
+        // find the ToneMapping effect because we need it to apply post exposure
+        const hasTonemapping = this.postprocessingContext?.components.find(c => c instanceof ToneMappingEffect) as ToneMappingEffect;
+        if(!hasTonemapping){
+            this.postprocessingContext?.components.push(new ToneMappingEffect());
+        }
         // We need this effect if someone uses ACES or AgX tonemapping;
         // problem is that we CAN'T use this effect for the "Linear" case, the package expects that in this case you remove the effect
-        const tonemapping = new ToneMappingEffect({
-            mode: this.threeToneMappingToEffectMode(expectedThreeMode),
-            // middleGrey: 0.5,
-            // averageLuminance: 1,
-        });
         this.postExposure!.onValueChanged = (v) => {
             if (this.postExposure.overrideState)
                 this.context.renderer.toneMappingExposure = v;
-            // this is a workaround so that we can apply tonemapping options – no access to the ToneMappingEffect instance from the Tonemapping effect right now...
-            const currentMode = this.toneMappingEffect?.mode?.value;
-            const threeMode = this.toneMappingEffect?.getThreeToneMapping(currentMode);
-            const mappedMode = this.threeToneMappingToEffectMode(threeMode);
-            if (mappedMode !== undefined)
-                tonemapping.mode = mappedMode;
         };
         const brightnesscontrast = new BrightnessContrastEffect();
@@ -114,7 +81,6 @@
         effects.push(brightnesscontrast);
         effects.push(hueSaturationEffect);
-        effects.push(tonemapping);
         this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
         this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;

src/engine-components/codegen/components.ts CHANGED Viewed

@@ -31,7 +31,7 @@
 export { BasicIKConstraint } from "../BasicIKConstraint.js";
 export { BehaviorExtension } from "../export/usdz/extensions/behavior/Behaviour.js";
 export { BehaviorModel } from "../export/usdz/extensions/behavior/BehavioursBuilder.js";
-export { Bloom } from "../postprocessing/Effects/Bloom.js";
+export { BloomEffect } from "../postprocessing/Effects/BloomEffect.js";
 export { BoxCollider } from "../Collider.js";
 export { BoxGizmo } from "../Gizmos.js";
 export { BoxHelperComponent } from "../BoxHelperComponent.js";
@@ -181,7 +181,7 @@
 export { TextExtension } from "../export/usdz/extensions/USDZText.js";
 export { TextureSheetAnimationModule } from "../ParticleSystemModules.js";
 export { TiltShiftEffect } from "../postprocessing/Effects/TiltShiftEffect.js";
-export { ToneMapping } from "../postprocessing/Effects/Tonemapping.js";
+export { ToneMappingEffect } from "../postprocessing/Effects/Tonemapping.js";
 export { TrailModule } from "../ParticleSystemModules.js";
 export { TransformData } from "../export/usdz/extensions/Animation.js";
 export { TransformGizmo } from "../TransformGizmo.js";

src/engine-components/postprocessing/Effects/DepthOfField.ts CHANGED Viewed

@@ -25,22 +25,22 @@
     mode!: DepthOfFieldMode;
     @serializable(VolumeParameter)
-    focusDistance!: VolumeParameter;
+    readonly focusDistance: VolumeParameter = new VolumeParameter();
     @serializable(VolumeParameter)
-    focalLength!: VolumeParameter;
+    readonly focalLength: VolumeParameter = new VolumeParameter();
     @serializable(VolumeParameter)
-    aperture!: VolumeParameter;
+    readonly aperture: VolumeParameter = new VolumeParameter();
     @serializable(VolumeParameter)
-    gaussianMaxRadius!: VolumeParameter;
+    readonly gaussianMaxRadius: VolumeParameter = new VolumeParameter();
     @serializable(VolumeParameter)
-    resolutionScale?: VolumeParameter;
+    readonly resolutionScale: VolumeParameter = new VolumeParameter(1 * 1 / window.devicePixelRatio);
     @serializable(VolumeParameter)
-    bokehScale?: VolumeParameter;
+    readonly bokehScale: VolumeParameter = new VolumeParameter();
     init() {
         this.focalLength.valueProcessor = v => {
@@ -62,14 +62,13 @@
             return undefined;
         }
-        const factor = 1 / window.devicePixelRatio;
+        // const factor = 1 / window.devicePixelRatio;
+        // if (this.resolutionScale === undefined) {
+        //     let defaultValue = 1;
+        //     if(isMobileDevice()) defaultValue = .6;
+        //     this.resolutionScale = new VolumeParameter(defaultValue * factor);
+        // }
-        if (this.resolutionScale === undefined) {
-            let defaultValue = 1;
-            if(isMobileDevice()) defaultValue = .6;
-            this.resolutionScale = new VolumeParameter(defaultValue * factor);
-        }
         // console.log(this.focusDistance.overrideState, this.focusDistance.value);
         // const depth = new DepthEffect({
         //     inverted: true,

src/engine/engine_context.ts CHANGED Viewed

@@ -475,7 +475,7 @@
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.setSize(this.domWidth, this.domHeight);
 		this.renderer.outputColorSpace = SRGBColorSpace;
-		this.renderer.toneMapping = AgXToneMapping;
+		// this.renderer.toneMapping = AgXToneMapping;
 		this.lodsManager.setRenderer(this.renderer);
 		this.input.bindEvents();

src/engine/engine_tonemapping.ts CHANGED Viewed

@@ -69,7 +69,7 @@
     vec3 x2 = x * x;
     vec3 x4 = x2 * x2;
-    return + 15.5     * x4 * x2
+    return  + 15.5     * x4 * x2
             - 40.14    * x4 * x
             + 31.96    * x4
             - 6.868    * x2 * x

src/engine-components/postprocessing/Effects/Pixelation.ts CHANGED Viewed

@@ -11,7 +11,7 @@
     }
     @serializable(VolumeParameter)
-    granularity!: VolumeParameter;
+    readonly granularity: VolumeParameter = new VolumeParameter(10);
     onCreateEffect(): EffectProviderResult {

src/engine-components-experimental/networking/PlayerSync.ts CHANGED Viewed

@@ -65,9 +65,10 @@
         this._localInstance = this.asset?.instantiateSynced({ parent: this.gameObject }, true) as Promise<IGameObject>;
         const instance = await this._localInstance;
         if (instance) {
-            const pl = GameObject.getComponent(instance, PlayerState);
-            if (pl) {
-                pl.owner = this.context.connection.connectionId!;
+            const pl = GameObject.getComponentsInChildren(instance, PlayerState);
+            if (pl?.length) {
+                for (const state of pl)
+                    state.owner = this.context.connection.connectionId!;
                 this.onPlayerSpawned?.invoke(instance);
             }
             else {

src/engine-components/postprocessing/PostProcessingEffect.ts CHANGED Viewed

@@ -2,18 +2,23 @@
 import type { EditorModification, IEditorModification } from "../../engine/engine_editor-sync.js";
 import { serializable } from "../../engine/engine_serialization.js";
-import type { ISerializable, SerializationContext } from "../../engine/engine_serialization_core.js";
 import { getParam } from "../../engine/engine_utils.js";
 import { Component } from "../Component.js";
-import { getPostProcessingManager,IPostProcessingManager } from "./utils.js";
+import type { PostProcessingHandler } from "./PostProcessingHandler.js";
+import { getPostProcessingManager, IPostProcessingManager } from "./utils.js";
 import { VolumeParameter } from "./VolumeParameter.js";
 const debug = getParam("debugpost");
 export declare type EffectProviderResult = Effect | Pass | Array<Effect | Pass>;
+export declare type PostProcessingEffectContext = {
+    handler: PostProcessingHandler;
+    components: PostProcessingEffect[];
+};
 export interface IEffectProvider {
-    apply(): void | undefined | EffectProviderResult;
+    apply(context: PostProcessingEffectContext): void | undefined | EffectProviderResult;
     unapply(): void;
 }
@@ -43,13 +48,12 @@
  * registerCustomEffectType("Antialiasing", Antialiasing)
  * ```
  */
-export abstract class PostProcessingEffect extends Component implements IEffectProvider, ISerializable, IEditorModification {
+export abstract class PostProcessingEffect extends Component implements IEffectProvider, IEditorModification {
     get isPostProcessingEffect() { return true; }
     constructor(params: any = undefined) {
         super();
-        this.ensureVolumeParameters();
         if (params) {
             for (const key of Object.keys(params)) {
                 const value = params[key];
@@ -59,7 +63,7 @@
                 }
                 // allow assigning values to properties that are not VolumeParameters
                 // this is useful when effects are created in code
-                else if(param !== undefined){
+                else if (param !== undefined) {
                     this[key] = value;
                 }
             }
@@ -68,11 +72,13 @@
     abstract get typeName(): string;
+    @serializable()
+    active: boolean = true;
     private _manager: IPostProcessingManager | null = null;
     onEnable(): void {
-        this._manager = getPostProcessingManager(this);
-        this._manager?.addEffect(this);
+        this.onEffectEnabled();
         // Dont override the serialized value by enabling (we could also just disable this component / map enabled to active)
         if (this.__internalDidAwakeAndStart)
             this.active = true;
@@ -83,24 +89,28 @@
         this.active = false;
     }
-    @serializable()
-    active: boolean = true;
+    protected onEffectEnabled(manager?: IPostProcessingManager) {
+        if (manager && manager.isPostProcessingManager === true) this._manager = manager;
+        else if (!this._manager) this._manager = getPostProcessingManager(this);
+        this._manager?.addEffect(this);
+    }
     /** override to initialize bindings on parameters */
-    init() {
+    init() { }
-    }
     /** previously created effect (if any) */
     private _result: void | undefined | EffectProviderResult;
+    private _postprocessingContext: PostProcessingEffectContext | null = null;
+    protected get postprocessingContext() { return this._postprocessingContext; }
     /** Apply post settings. Make sure to call super.apply() if you also create an effect */
-    apply(): void | undefined | EffectProviderResult {
-        this.ensureVolumeParameters();
+    apply(ctx: PostProcessingEffectContext): void | undefined | EffectProviderResult {
+        this._postprocessingContext = ctx;
         if (!this._result) {
+            this.initParameters();
             this._result = this.onCreateEffect?.call(this);
         }
+        // TODO: calling this twice because otherwise the Postprocessing sample doesnt look correct. Need to investigate which effect is causing this (init parameters should be refactored either way https://linear.app/needle/issue/NE-5182)
         if (this._result) {
             this.initParameters();
         }
@@ -137,25 +147,6 @@
         }
     }
-    onAfterDeserialize(data: any, _context: SerializationContext): void {
-        // When using additional effects and parameters exported from the editor are not in the volume parameter format
-        if (typeof data === "object") {
-            const types = this["$serializedTypes"];
-            if (types) {
-                for (const fieldName of Object.keys(types)) {
-                    const type = types[fieldName];
-                    if (type === VolumeParameter) {
-                        const value = data[fieldName];
-                        if (value !== undefined) {
-                            const parameter = this[fieldName];
-                            parameter.value = value;
-                        }
-                    }
-                }
-            }
-        }
-    }
     // TODO this is currently not used for post processing effects that are part of Volume stacks,
     // since these handle that already.
     onEditorModification(modification: EditorModification): void | boolean | undefined {
@@ -168,23 +159,4 @@
         }
     }
-    private _didCreateVolumeParameters: boolean = false;
-    /** Creates volume parameter fields that have not been initialized yet */
-    protected ensureVolumeParameters() {
-        if (this._didCreateVolumeParameters) return;
-        this._didCreateVolumeParameters = true;
-        const types = this["$serializedTypes"];
-        if (types) {
-            for (const fieldName of Object.keys(types)) {
-                const type = types[fieldName];
-                if (type === VolumeParameter) {
-                    const parameter = this[fieldName];
-                    if (!parameter) {
-                        this[fieldName] = new VolumeParameter();
-                    }
-                }
-            }
-        }
-    }
 }

src/engine-components/postprocessing/PostProcessingHandler.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { N8AOPostPass } from "n8ao";
-import { BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, DepthDownsamplingPass, DepthOfFieldEffect, Effect, EffectComposer, EffectPass, HueSaturationEffect, NormalPass, Pass, PixelationEffect, RenderPass, SelectiveBloomEffect, SMAAEffect, SSAOEffect, ToneMappingEffect, VignetteEffect } from "postprocessing";
-import { HalfFloatType } from "three";
+import {
+    BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, DepthDownsamplingPass, DepthOfFieldEffect, Effect, EffectComposer, EffectPass, HueSaturationEffect, NormalPass, Pass, PixelationEffect, RenderPass, SelectiveBloomEffect, SMAAEffect, SSAOEffect,
+    ToneMappingEffect as _TonemappingEffect, VignetteEffect
+} from "postprocessing";
+import { HalfFloatType, NoToneMapping } from "three";
 import { showBalloonWarning } from "../../engine/debug/index.js";
 import { Context } from "../../engine/engine_setup.js";
@@ -8,10 +11,8 @@
 import { getParam, isMobileDevice } from "../../engine/engine_utils.js";
 import { Camera } from "../Camera.js";
 import { Antialiasing } from "./Effects/Antialiasing.js";
-import { ColorAdjustments } from "./Effects/ColorAdjustments.js";
 import { SharpeningEffect } from "./Effects/Sharpening.js";
-import { ToneMapping } from "./Effects/Tonemapping.js";
-import { PostProcessingEffect } from "./PostProcessingEffect.js";
+import { PostProcessingEffect, PostProcessingEffectContext } from "./PostProcessingEffect.js";
 const debug = getParam("debugpost");
@@ -31,7 +32,7 @@
         return this._isActive;
     }
-    get composer() {
+    get composer() {
         return this._composer;
     }
@@ -79,8 +80,6 @@
         this._composer = null;
     }
-    private tempColorAdjustments: ColorAdjustments | null = null;
     private onApply(context: Context, components: PostProcessingEffect[]) {
         if (!components) return;
@@ -95,17 +94,14 @@
         // const effects: Array<Effect | Pass> = [];
         this._effects.length = 0;
-        // Tonemapping is currently applied from the ColorAdjustments effect, so we need to check if that is present,
-        // and add a default ColorAdjustments effect if not.
-        const haveTonemappingComponent = components.some(c => c instanceof ToneMapping);
-        const haveColorAdjustmentsComponent = components.some(c => c instanceof ColorAdjustments && c.active);
-        if (haveTonemappingComponent && !haveColorAdjustmentsComponent) {
-            if (debug) console.log("Adding a default ColorAdjustments component to apply tonemapping.", ...components);
-            if (this.tempColorAdjustments === null) this.tempColorAdjustments = new ColorAdjustments();
-            this._lastVolumeComponents.push(this.tempColorAdjustments);
+        // TODO: if an effect is added or removed during the loop this might not be correct anymore
+        const ctx: PostProcessingEffectContext = {
+            handler: this,
+            components: this._lastVolumeComponents,
         }
-        for (const component of this._lastVolumeComponents) {
+        for (let i = 0; i < this._lastVolumeComponents.length; i++) {
+            const component = this._lastVolumeComponents[i];
             //@ts-ignore
             component.context = context;
             if (component.apply) {
@@ -115,7 +111,7 @@
                         return;
                     }
                     // apply or collect effects
-                    const res = component.apply();
+                    const res = component.apply(ctx);
                     if (!res) continue;
                     if (Array.isArray(res)) {
                         this._effects.push(...res);
@@ -129,6 +125,14 @@
             }
         }
+        // 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 _TonemappingEffect)) {
+                const tonemapping = new _TonemappingEffect();
+                this._effects.push(tonemapping);
+            }
+        }
         this.applyEffects(context);
     }
@@ -143,7 +147,7 @@
         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
@@ -159,6 +163,9 @@
                 multisampling: Math.min(isMobileDevice() ? 4 : 8, maxSamples),
             });
         }
+        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);
@@ -177,44 +184,44 @@
         const automaticEffectsOrdering = true;
         if (automaticEffectsOrdering) {
-        try {
-            this.orderEffects();
+            try {
+                this.orderEffects();
-            const effects: Array<Effect> = [];
-            for (const ef of effectsOrPasses) {
-                if (ef instanceof Effect)
-                    effects.push(ef as Effect);
-                else if (ef instanceof Pass) {
+                const effects: Array<Effect> = [];
+                for (const ef of effectsOrPasses) {
+                    if (ef instanceof Effect)
+                        effects.push(ef as Effect);
+                    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 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);
+                    }
+                }
+                // create and apply uber pass
+                if (effects.length > 0) {
                     const pass = new EffectPass(cam, ...effects);
+                    pass.name = effects.map(e => e.name).join(" ");
                     pass.mainScene = scene;
-                    pass.name = effects.map(e => e.constructor.name).join(", ");
                     pass.enabled = true;
-                    // composer.addPass(pass);
-                    effects.length = 0;
-                    composer.addPass(ef as Pass);
+                    composer.addPass(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);
-                }
             }
-            // create and apply uber pass
-            if (effects.length > 0) {
-                const pass = new EffectPass(cam, ...effects);
-                pass.name = effects.map(e => e.name).join(" ");
-                pass.mainScene = scene;
-                pass.enabled = true;
-                composer.addPass(pass);
+            catch (e) {
+                console.error("Error while applying postprocessing effects", e);
+                composer.removeAllPasses();
             }
         }
-        catch(e) {
-            console.error("Error while applying postprocessing effects", e);
-            composer.removeAllPasses();
-        }
-        }
         else {
             for (const ef of effectsOrPasses) {
                 if (ef instanceof Effect)
@@ -237,10 +244,19 @@
         // 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 as any);
-            const bidx = effectsOrder.indexOf(b.constructor as any);
+            // 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 && bidx < 0) return -1;
+            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;
@@ -268,10 +284,10 @@
     BloomEffect,
     SelectiveBloomEffect,
     VignetteEffect,
-    ToneMappingEffect,
+    PixelationEffect,
+    SharpeningEffect,
+    _TonemappingEffect,
     HueSaturationEffect,
     BrightnessContrastEffect,
-    PixelationEffect,
-    SharpeningEffect,
-    Antialiasing
+    Antialiasing,
 ];

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -33,7 +33,7 @@
 import { BasicIKConstraint } from "../../engine-components/BasicIKConstraint.js";
 import { BehaviorExtension } from "../../engine-components/export/usdz/extensions/behavior/Behaviour.js";
 import { BehaviorModel } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
-import { Bloom } from "../../engine-components/postprocessing/Effects/Bloom.js";
+import { BloomEffect } from "../../engine-components/postprocessing/Effects/BloomEffect.js";
 import { BoxCollider } from "../../engine-components/Collider.js";
 import { BoxGizmo } from "../../engine-components/Gizmos.js";
 import { BoxHelperComponent } from "../../engine-components/BoxHelperComponent.js";
@@ -186,7 +186,7 @@
 import { TextExtension } from "../../engine-components/export/usdz/extensions/USDZText.js";
 import { TextureSheetAnimationModule } from "../../engine-components/ParticleSystemModules.js";
 import { TiltShiftEffect } from "../../engine-components/postprocessing/Effects/TiltShiftEffect.js";
-import { ToneMapping } from "../../engine-components/postprocessing/Effects/Tonemapping.js";
+import { ToneMappingEffect } from "../../engine-components/postprocessing/Effects/Tonemapping.js";
 import { TrailModule } from "../../engine-components/ParticleSystemModules.js";
 import { TransformData } from "../../engine-components/export/usdz/extensions/Animation.js";
 import { TransformGizmo } from "../../engine-components/TransformGizmo.js";
@@ -254,7 +254,7 @@
 TypeStore.add("BasicIKConstraint", BasicIKConstraint);
 TypeStore.add("BehaviorExtension", BehaviorExtension);
 TypeStore.add("BehaviorModel", BehaviorModel);
-TypeStore.add("Bloom", Bloom);
+TypeStore.add("BloomEffect", BloomEffect);
 TypeStore.add("BoxCollider", BoxCollider);
 TypeStore.add("BoxGizmo", BoxGizmo);
 TypeStore.add("BoxHelperComponent", BoxHelperComponent);
@@ -407,7 +407,7 @@
 TypeStore.add("TextExtension", TextExtension);
 TypeStore.add("TextureSheetAnimationModule", TextureSheetAnimationModule);
 TypeStore.add("TiltShiftEffect", TiltShiftEffect);
-TypeStore.add("ToneMapping", ToneMapping);
+TypeStore.add("ToneMappingEffect", ToneMappingEffect);
 TypeStore.add("TrailModule", TrailModule);
 TypeStore.add("TransformData", TransformData);
 TypeStore.add("TransformGizmo", TransformGizmo);

src/engine-components/postprocessing/Effects/ScreenspaceAmbientOcclusion.ts CHANGED Viewed

@@ -14,19 +14,19 @@
     }
     @serializable(VolumeParameter)
-    intensity!: VolumeParameter;
+    readonly intensity: VolumeParameter = new VolumeParameter(2);
     @serializable(VolumeParameter)
-    falloff!: VolumeParameter;
+    readonly falloff: VolumeParameter = new VolumeParameter(1);
     @serializable(VolumeParameter)
-    samples!: VolumeParameter;
+    readonly samples: VolumeParameter = new VolumeParameter(9);
     @serializable(VolumeParameter)
-    color!: VolumeParameter;
+    readonly color: VolumeParameter = new VolumeParameter(new Color(0, 0, 0));
     @serializable(VolumeParameter)
-    luminanceInfluence!: VolumeParameter;
+    readonly luminanceInfluence: VolumeParameter = new VolumeParameter(.7);
     onBeforeRender() {
         if (this._ssao && this.context.mainCamera instanceof PerspectiveCamera) {

src/engine-components/postprocessing/Effects/Sharpening.ts CHANGED Viewed

@@ -56,35 +56,41 @@
 `
 const frag = `
-  uniform sampler2D tDiffuse;
-  uniform float amount;
-  uniform float threshold;
-  uniform float radius;
+uniform sampler2D tDiffuse;
+uniform float amount;
+uniform float radius;
-  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
     float tx = 1.0 / resolution.x;
     float ty = 1.0 / resolution.y;
     vec2 texelSize = vec2(tx, ty);
-    vec4 color = texture2D(tDiffuse, uv);
     vec4 blurred = vec4(0.0);
     float total = 0.0;
     for (float x = -radius; x <= radius; x++) {
-      for (float y = -radius; y <= radius; y++) {
-        vec2 offset = vec2(x, y) * texelSize;
-        vec4 diffuse = texture2D(tDiffuse, uv + offset);
-        float weight = exp(-length(offset) * amount);
-        blurred += diffuse * weight;
-        total += weight;
-      }
+        for (float y = -radius; y <= radius; y++) {
+            vec2 offset = vec2(x, y) * texelSize;
+            vec4 diffuse = texture2D(tDiffuse, uv + offset);
+            float weight = exp(-length(offset) * amount);
+            blurred += diffuse * weight;
+            total += weight;
+        }
     }
-    blurred /= total;
+    if (total > 0.0) {
+        blurred /= total;
+    }
+    // Calculate the sharpened color using inputColor
     vec4 sharp = inputColor + (inputColor - blurred) * amount;
-    // float luma = dot(inputColor.rgb, vec3(0.299, 0.587, 0.114));
-    // float blend = smoothstep(threshold, 1.0, luma);
-    outputColor = sharp; //mix(inputColor, sharp, blend);
+    // Ensure the sharp color does not go below 0 or above 1
+    sharp = clamp(sharp, 0.0, 1.0);
+    outputColor = sharp;
 }
 `
 class _SharpeningEffect extends Effect {
@@ -93,8 +99,8 @@
             vertexShader: vert,
             blendFunction: BlendFunction.NORMAL,
             uniforms: new Map<string, Uniform<any>>([
-                ["amount", new Uniform(.8)],
-                ["radius", new Uniform(.5)],
+                ["amount", new Uniform(1)],
+                ["radius", new Uniform(1)],
                 // ["threshold", new Uniform(0)],
             ]),
         });

src/engine-components/postprocessing/Effects/TiltShiftEffect.ts CHANGED Viewed

@@ -36,8 +36,6 @@
     onCreateEffect(): EffectProviderResult | undefined {
-        console.log(this);
         const effect = new TiltShift({
             kernelSize: KernelSize.VERY_LARGE,
         });

src/engine-components/postprocessing/Effects/Tonemapping.ts CHANGED Viewed

@@ -1,12 +1,17 @@
+import { ToneMappingEffect as _TonemappingEffect, ToneMappingMode } from "postprocessing";
 import { ACESFilmicToneMapping, AgXToneMapping, LinearToneMapping, NeutralToneMapping, NoToneMapping, ReinhardToneMapping } from "three";
 import { serializable } from "../../../engine/engine_serialization.js";
-import { PostProcessingEffect } from "../PostProcessingEffect.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";
+const debug = getParam("debugpost");
-export enum TonemappingMode {
+enum NEToneMappingMode {
     None = 0,
     Neutral = 1,            // Neutral tonemapper, close to Reinhard
     ACES = 2,               // ACES Filmic reference tonemapper (custom approximation)
@@ -14,52 +19,119 @@
     KhronosNeutral = 4,     // PBR Neural tonemapper
 }
-export class ToneMapping extends PostProcessingEffect {
+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:
+            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 ToneMappingMode.LINEAR;
+        case ACESFilmicToneMapping: return ToneMappingMode.ACES_FILMIC;
+        case AgXToneMapping: return ToneMappingMode.AGX;
+        case NeutralToneMapping: return ToneMappingMode.NEUTRAL;
+        case ReinhardToneMapping: return ToneMappingMode.REINHARD;
+        default: return ToneMappingMode.LINEAR;
+    }
+}
+export class ToneMappingEffect extends PostProcessingEffect {
     get typeName() {
         return "ToneMapping";
     }
     @serializable(VolumeParameter)
-    mode: VolumeParameter | undefined;
+    readonly mode: VolumeParameter = new VolumeParameter(undefined);
+    setMode(mode: NEToneMappingModeNames) {
+        const enumValue = NEToneMappingMode[mode as NEToneMappingModeNames];
+        if (enumValue === undefined) {
+            console.error("Invalid ToneMapping mode", mode);
+            return this;
+        }
+        this.mode.value = enumValue;
+        return this;
+    }
     get isToneMapping() { return true; }
-    init(): void {
-        if (!this.mode) this.mode = new VolumeParameter(NoToneMapping);
-        this.mode.defaultValue = NoToneMapping;
+    onEffectEnabled(): void {
+        // Tonemapping works with and without a postprocessing manager.
+        // If there's no manager already in the scene we don't need to create one because tonemapping can also be applied without a postprocessing pass
+        const ppmanager = findPostProcessingManager(this);
+        if (!ppmanager) return;
+        super.onEffectEnabled(ppmanager);
     }
-    apply() {
-        if (!this.mode) this.init();
-        this.mode!.onValueChanged = this._apply.bind(this);
-        this._apply(this.mode!.value)
-    }
+    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("Multiple tonemapping effects found in the same postprocessing stack: Please check your scene setup.", { activeEffect: other, ignoredEffect: this });
+                    return undefined;
+                }
+            }
+        }
-    private _apply(v: TonemappingMode) {
-        // The renderer tonemapping mode is used when NO volume is in effect.
-        // It does not have an effect when a composer exists, and then tonemapping is applied as posteffect
-        // from ColodAdjustments.ts
-        this.context.renderer.toneMapping = this.getThreeToneMapping(v);
+        // ensure the effect tonemapping value is initialized
+        if (this.mode.isInitialized == false) {
+            const init = threeToNeToneMapping(this.context.renderer.toneMapping);
+            this.mode.initialize(init);
+        }
+        const threeMode = toThreeToneMapping(this.mode.value);
+        const tonemapping = new _TonemappingEffect({
+            mode: threeToneMappingToEffectMode(threeMode),
+        });
+        this.mode.onValueChanged = (newValue) => {
+            const threeMode = toThreeToneMapping(newValue);
+            tonemapping.mode = threeToneMappingToEffectMode(threeMode);
+            if (debug) console.log("ToneMapping mode changed to", newValue, NEToneMappingMode[threeMode], ToneMappingMode[tonemapping.mode]);
+        };
+        if (debug) console.log("Use ToneMapping", this.context.renderer.toneMapping, this.mode.value, NEToneMappingMode[threeMode], ToneMappingMode[tonemapping.mode]);
+        return tonemapping;
     }
-    getThreeToneMapping(mode: TonemappingMode | undefined) {
-        switch (mode) {
-            case TonemappingMode.None:
-                return LinearToneMapping;
-            case TonemappingMode.Neutral:
-                return ReinhardToneMapping;
-            case TonemappingMode.ACES:
-                return ACESFilmicToneMapping;
-            case TonemappingMode.AgX:
-                return AgXToneMapping;
-            case TonemappingMode.KhronosNeutral:
-                return NeutralToneMapping;
-            default:
-                return NeutralToneMapping;
-        }
+    onBeforeRender(): void {
+        this.context.renderer.toneMapping = toThreeToneMapping(this.mode.value);
     }
 }
-registerCustomEffectType("Tonemapping", ToneMapping);
+registerCustomEffectType("Tonemapping", ToneMappingEffect);

src/engine-components/postprocessing/utils.ts CHANGED Viewed

@@ -22,18 +22,21 @@
     PostprocessingManagerType = type;
 }
-export function getPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null {
-    let manager: IPostProcessingManager | null = null;
+export function findPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null {
     let obj = effect.gameObject as Object3D | null;
     while (obj) {
         for (const comp of foreachComponentEnumerator(obj)) {
             if ((comp as unknown as IPostProcessingManager).isPostProcessingManager === true) {
-                manager = comp as unknown as IPostProcessingManager;
-                break;
+                return comp as unknown as IPostProcessingManager;
             }
         }
         obj = obj.parent;
     }
+    return null;
+}
+export function getPostProcessingManager(effect: PostProcessingEffect): IPostProcessingManager | null {
+    let manager: IPostProcessingManager | null = findPostProcessingManager(effect);
     if (!manager) {
         if (PostprocessingManagerType) {
             if (debug)

src/engine-components/postprocessing/Volume.ts CHANGED Viewed

@@ -99,7 +99,7 @@
     /** @internal */
     awake() {
         if (debug) {
-            console.log(this);
+            console.log("PostprocessingManager Awake", this);
             console.log("Press P to toggle post processing");
             window.addEventListener("keydown", (e) => {
                 if (e.key === "p") {
@@ -159,7 +159,7 @@
     private _isDirty: boolean = false;
     private apply() {
-        if (debug) console.log("Apply PostProcessing", this, this.context.mainCamera?.name);
+        if (debug) console.log("Apply PostProcessing " + this.name);
         if (isDevEnvironment()) {
             if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
@@ -198,7 +198,7 @@
     }
     private unapply() {
-        if (debug) console.log("Unapply PostProcessing", this);
+        if (debug) console.log("Unapply PostProcessing " + this.name);
         this._postprocessing?.unapply();
     }

src/engine-components/postprocessing/VolumeParameter.ts CHANGED Viewed

@@ -1,6 +1,9 @@
-import { serializable } from "../../engine/engine_serialization.js";
+import { deserializeObject, serializable,SerializationContext } from "../../engine/engine_serialization.js";
+import { TypeSerializer } from "../../engine/engine_serialization_core.js";
 import { getParam } from "../../engine/engine_utils.js";
 export declare type VolumeParameterChangedEvent = (newValue: any, oldValue: any, parameter: VolumeParameter) => void;
 export declare type VolumeParameterValueProcessor = (value: any) => any;
@@ -8,12 +11,25 @@
 export class VolumeParameter {
+    readonly isVolumeParameter = true;
     constructor(value?: any) {
-        this._value = value;
-        this._defaultValue = value;
-        this._valueRaw = value;
+        if (value !== undefined)
+            this.initialize(value);
     }
+    private _isInitialized: boolean = false;
+    get isInitialized() { return this._isInitialized; }
+    initialize(value?: any) {
+        if (value !== undefined) {
+            this._value = value;
+            this._defaultValue = value;
+            this._valueRaw = value;
+            this._isInitialized = true;
+        }
+    }
     @serializable()
     get overrideState(): boolean {
         return this._active;
@@ -73,8 +89,6 @@
                 }
                 else hasChanged = false;
             }
-            if (hasChanged)
-                console.log("VolumeParameter: value changed from", oldValue, "to", val);
         }
         if (!this._active && this._defaultValue !== undefined) {
@@ -109,3 +123,38 @@
         return true;
     }
 }
+class VolumeParameterSerializer extends TypeSerializer {
+    constructor() {
+        super([VolumeParameter]);
+    }
+    onSerialize(_data: any, _context: SerializationContext) {
+    }
+    onDeserialize(data: { value: any, overrideState: boolean }, context: SerializationContext) {
+        const target = context.target;
+        const name = context.path;
+        let parameter: VolumeParameter | undefined;
+        if (target && name) {
+            parameter = target[name];
+        }
+        if (!(typeof parameter === "object") || (typeof parameter === "object" && (parameter as VolumeParameter).isVolumeParameter !== true)) {
+            parameter = new VolumeParameter();
+        }
+        if (typeof data === "object" && "value" in data) {
+            const value = data.value;
+            parameter.value = value;
+            parameter.overrideState = data.overrideState;
+        }
+        else {
+            parameter.value = data;
+        }
+        return parameter;
+    }
+}
+new VolumeParameterSerializer();

src/engine-components/webxr/WebXR.ts CHANGED Viewed

@@ -269,7 +269,8 @@
     private onAvatarSpawned = (instance: GameObject) => {
         // spawned webxr avatars must have a avatar component
         if (debug) console.log("WebXR.onAvatarSpawned", instance);
-        GameObject.getOrAddComponent(instance, Avatar);
+        let avatar = GameObject.getComponentInChildren(instance, Avatar);
+        avatar ??= GameObject.addComponent(instance, Avatar)!;
     };

src/engine-components/postprocessing/Effects/BloomEffect.ts ADDED Viewed

@@ -0,0 +1,113 @@
+import { BlendFunction, BloomEffect as _BloomEffect, SelectiveBloomEffect } from "postprocessing";
+import { MathUtils } from "three";
+import { serializable } from "../../../engine/engine_serialization.js";
+import { PostProcessingEffect } from "../PostProcessingEffect.js";
+import { VolumeParameter } from "../VolumeParameter.js";
+import { registerCustomEffectType } from "../VolumeProfile.js";
+/**
+ * Bloom can be used to make bright areas in the scene glow.
+ * @link Sample https://engine.needle.tools/samples/postprocessing
+ * @example
+ * ```typescript
+ * const bloom = new Bloom();
+ * bloom.intensity.value = 1.5;
+ * bloom.threshold.value = 0.5;
+ * bloom.scatter.value = 0.5;
+ * volume.add(bloom);
+ * ```
+ */
+export class BloomEffect extends PostProcessingEffect {
+    /** Whether to use selective bloom by default */
+    static useSelectiveBloom = false;
+    get typeName() {
+        return "Bloom";
+    }
+    /**
+     * The bloom threshold controls at what brightness level the bloom effect will be applied.
+     * A higher value means the bloom will be applied to brighter areas or lights only
+     * @default 0.9
+     */
+    @serializable(VolumeParameter)
+    readonly threshold: VolumeParameter = new VolumeParameter(.9);
+    /**
+     * Intensity of the bloom effect. A higher value will increase the intensity of the bloom effect.
+     * @default 1
+     */
+    @serializable(VolumeParameter)
+    readonly intensity: VolumeParameter = new VolumeParameter(1);
+    /**
+     * Scatter value. The higher the value, the more the bloom will scatter.
+     * @default 0.3
+     */
+    @serializable(VolumeParameter)
+    readonly scatter: VolumeParameter = new VolumeParameter(.3);
+    /**
+     * Set to true to use selective bloom when the effect gets created.
+     * @default false
+     */
+    selectiveBloom?: boolean;
+    init() {
+        this.threshold.valueProcessor = (v: number) => v;
+        this.intensity.valueProcessor = (v: number) => v;
+        this.scatter.valueProcessor = (v: number) => v;
+    }
+    onCreateEffect() {
+        let bloom: _BloomEffect;
+        if (this.selectiveBloom == undefined) {
+            this.selectiveBloom = BloomEffect.useSelectiveBloom;
+        }
+        if (this.selectiveBloom) {
+            // https://github.com/pmndrs/postprocessing/blob/64d2829f014cfec97a46bf3c109f3abc55af0715/demo/src/demos/BloomDemo.js#L265
+            const selectiveBloom = bloom = new SelectiveBloomEffect(this.context.scene, this.context.mainCamera!, {
+                blendFunction: BlendFunction.ADD,
+                mipmapBlur: true,
+                luminanceThreshold: this.threshold.value,
+                luminanceSmoothing: this.scatter.value,
+                radius: 0.85, // default value
+                intensity: this.intensity.value,
+            });
+            selectiveBloom.inverted = true;
+        }
+        else {
+            bloom = new _BloomEffect({
+                blendFunction: BlendFunction.ADD,
+                mipmapBlur: true,
+                luminanceThreshold: this.threshold.value,
+                luminanceSmoothing: this.scatter.value,
+                radius: 0.85, // default value
+                intensity: this.intensity.value,
+            });
+        }
+        this.intensity.onValueChanged = newValue => {
+            bloom!.intensity = newValue;
+        };
+        this.threshold.onValueChanged = newValue => {
+            // for some reason the threshold needs to be gamma-corrected
+            bloom!.luminanceMaterial.threshold = Math.pow(newValue, 2.2);
+        };
+        this.scatter.onValueChanged = newValue => {
+            bloom!.luminancePass.enabled = true;
+            bloom!.luminanceMaterial.smoothing = newValue;
+            if (bloom["mipmapBlurPass"])
+                // heuristic so it looks similar to "scatter" in other engines
+                bloom!["mipmapBlurPass"].radius = MathUtils.lerp(0.1, 0.9, newValue);
+        };
+        return bloom;
+    }
+}
+registerCustomEffectType("Bloom", BloomEffect);