Babylon.js/src/PostProcess/RenderPipeline/Pipelines/defaultRenderingPipeline.ts

import { Nullable } from "types";
import { IAnimatable, Observer, serialize, SerializationHelper } from "Tools";
import { Camera } from "Cameras";
import { ImageProcessingConfiguration, Texture } from "Materials";
import { PostProcess, PostProcessRenderPipeline, Scene, SharpenPostProcess, PostProcessRenderEffect, BloomEffect, DepthOfFieldEffect, FxaaPostProcess, ImageProcessingPostProcess, ChromaticAberrationPostProcess, GrainPostProcess, DepthOfFieldEffectBlurLevel } from "PostProcess";
import { Engine } from "Engine";
import { IDisposable } from "scene";
import { GlowLayer } from "Layer";
    
    /**
	 * The default rendering pipeline can be added to a scene to apply common post processing effects such as anti-aliasing or depth of field.
     * See https://doc.babylonjs.com/how_to/using_default_rendering_pipeline
     */
    export class DefaultRenderingPipeline extends PostProcessRenderPipeline implements IDisposable, IAnimatable {
        private _scene: Scene;
        private _camerasToBeAttached: Array<Camera> = [];
        /**
		 * ID of the sharpen post process,
		 */
        private readonly SharpenPostProcessId: string = "SharpenPostProcessEffect";
        /**
         * @ignore
		 * ID of the image processing post process;
		 */
        readonly ImageProcessingPostProcessId: string = "ImageProcessingPostProcessEffect";
        /**
         * @ignore
		 * ID of the Fast Approximate Anti-Aliasing post process;
		 */
        readonly FxaaPostProcessId: string = "FxaaPostProcessEffect";
        /**
		 * ID of the chromatic aberration post process,
		 */
        private readonly ChromaticAberrationPostProcessId: string = "ChromaticAberrationPostProcessEffect";
        /**
		 * ID of the grain post process
		 */
        private readonly GrainPostProcessId: string = "GrainPostProcessEffect";

        // Post-processes
        /**
		 * Sharpen post process which will apply a sharpen convolution to enhance edges
		 */
        public sharpen: SharpenPostProcess;
        private _sharpenEffect: PostProcessRenderEffect;
        private bloom: BloomEffect;
        /**
         * Depth of field effect, applies a blur based on how far away objects are from the focus distance.
         */
        public depthOfField: DepthOfFieldEffect;
        /**
         * The Fast Approximate Anti-Aliasing post process which attemps to remove aliasing from an image.
         */
        public fxaa: FxaaPostProcess;
        /**
         * Image post processing pass used to perform operations such as tone mapping or color grading.
         */
        public imageProcessing: ImageProcessingPostProcess;
        /**
		 * Chromatic aberration post process which will shift rgb colors in the image
		 */
        public chromaticAberration: ChromaticAberrationPostProcess;
        private _chromaticAberrationEffect: PostProcessRenderEffect;
        /**
		 * Grain post process which add noise to the image
		 */
        public grain: GrainPostProcess;
        private _grainEffect: PostProcessRenderEffect;
        /**
		 * Glow post process which adds a glow to emmisive areas of the image
		 */
        private _glowLayer: Nullable<GlowLayer> = null;

        /**
         * Animations which can be used to tweak settings over a period of time
         */
        public animations: Animation[] = [];

        private _imageProcessingConfigurationObserver: Nullable<Observer<ImageProcessingConfiguration>> = null;
        // Values
        private _sharpenEnabled: boolean = false;
        private _bloomEnabled: boolean = false;
        private _depthOfFieldEnabled: boolean = false;
        private _depthOfFieldBlurLevel = DepthOfFieldEffectBlurLevel.Low;
        private _fxaaEnabled: boolean = false;
        private _imageProcessingEnabled: boolean = true;
        private _defaultPipelineTextureType: number;
        private _bloomScale: number = 0.5;
        private _chromaticAberrationEnabled: boolean = false;
        private _grainEnabled: boolean = false;

        private _buildAllowed = true;

        /**
         * Enable or disable the sharpen process from the pipeline
         */
        public set sharpenEnabled(enabled: boolean) {
            if (this._sharpenEnabled === enabled) {
                return;
            }
            this._sharpenEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get sharpenEnabled(): boolean {
            return this._sharpenEnabled;
        }

        private _resizeObserver: Nullable<Observer<Engine>> = null;
        private _hardwareScaleLevel = 1.0;
        private _bloomKernel: number = 64;
        /**
		 * Specifies the size of the bloom blur kernel, relative to the final output size
		 */
        @serialize()
        public get bloomKernel(): number {
            return this._bloomKernel;
        }
        public set bloomKernel(value: number) {
            this._bloomKernel = value;
            this.bloom.kernel = value / this._hardwareScaleLevel;
        }

        /**
		 * Specifies the weight of the bloom in the final rendering
		 */
        @serialize()
        private _bloomWeight: number = 0.15;
        /**
		 * Specifies the luma threshold for the area that will be blurred by the bloom
		 */
        @serialize()
        private _bloomThreshold: number = 0.9;

        @serialize()
        private _hdr: boolean;

        /**
         * The strength of the bloom.
         */
        public set bloomWeight(value: number) {
            if (this._bloomWeight === value) {
                return;
            }
            this.bloom.weight = value;

            this._bloomWeight = value;
        }

        @serialize()
        public get bloomWeight(): number {
            return this._bloomWeight;
        }

        /**
         * The strength of the bloom.
         */
        public set bloomThreshold(value: number) {
            if (this._bloomThreshold === value) {
                return;
            }
            this.bloom.threshold = value;
            this._bloomThreshold = value;
        }

        @serialize()
        public get bloomThreshold(): number {
            return this._bloomThreshold;
        }

        /**
         * The scale of the bloom, lower value will provide better performance.
         */
        public set bloomScale(value: number) {
            if (this._bloomScale === value) {
                return;
            }
            this._bloomScale = value;

            // recreate bloom and dispose old as this setting is not dynamic
            this._rebuildBloom();

            this._buildPipeline();
        }

        @serialize()
        public get bloomScale(): number {
            return this._bloomScale;
        }

        /**
         * Enable or disable the bloom from the pipeline
         */
        public set bloomEnabled(enabled: boolean) {
            if (this._bloomEnabled === enabled) {
                return;
            }
            this._bloomEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get bloomEnabled(): boolean {
            return this._bloomEnabled;
        }

        private _rebuildBloom() {
            // recreate bloom and dispose old as this setting is not dynamic
            var oldBloom = this.bloom;
            this.bloom = new BloomEffect(this._scene, this.bloomScale, this._bloomWeight, this.bloomKernel, this._defaultPipelineTextureType, false);
            this.bloom.threshold = oldBloom.threshold;
            for (var i = 0; i < this._cameras.length; i++) {
                oldBloom.disposeEffects(this._cameras[i]);
            }
        }

        /**
         * If the depth of field is enabled.
         */
        @serialize()
        public get depthOfFieldEnabled(): boolean {
            return this._depthOfFieldEnabled;
        }

        public set depthOfFieldEnabled(enabled: boolean) {
            if (this._depthOfFieldEnabled === enabled) {
                return;
            }
            this._depthOfFieldEnabled = enabled;

            this._buildPipeline();
        }

        /**
         * Blur level of the depth of field effect. (Higher blur will effect performance)
         */
        @serialize()
        public get depthOfFieldBlurLevel(): DepthOfFieldEffectBlurLevel {
            return this._depthOfFieldBlurLevel;
        }

        public set depthOfFieldBlurLevel(value: DepthOfFieldEffectBlurLevel) {
            if (this._depthOfFieldBlurLevel === value) {
                return;
            }
            this._depthOfFieldBlurLevel = value;

            // recreate dof and dispose old as this setting is not dynamic
            var oldDof = this.depthOfField;

            this.depthOfField = new DepthOfFieldEffect(this._scene, null, this._depthOfFieldBlurLevel, this._defaultPipelineTextureType, false);
            this.depthOfField.focalLength = oldDof.focalLength;
            this.depthOfField.focusDistance = oldDof.focusDistance;
            this.depthOfField.fStop = oldDof.fStop;
            this.depthOfField.lensSize = oldDof.lensSize;

            for (var i = 0; i < this._cameras.length; i++) {
                oldDof.disposeEffects(this._cameras[i]);
            }

            this._buildPipeline();
        }

        /**
         * If the anti aliasing is enabled.
         */
        public set fxaaEnabled(enabled: boolean) {
            if (this._fxaaEnabled === enabled) {
                return;
            }
            this._fxaaEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get fxaaEnabled(): boolean {
            return this._fxaaEnabled;
        }

        private _samples = 1;
        /**
         * MSAA sample count, setting this to 4 will provide 4x anti aliasing. (default: 1)
         */
        public set samples(sampleCount: number) {
            if (this._samples === sampleCount) {
                return;
            }
            this._samples = sampleCount;

            this._buildPipeline();
        }

        @serialize()
        public get samples(): number {
            return this._samples;
        }

        /**
         * If image processing is enabled.
         */
        public set imageProcessingEnabled(enabled: boolean) {
            if (this._imageProcessingEnabled === enabled) {
                return;
            }
            this._imageProcessingEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get imageProcessingEnabled(): boolean {
            return this._imageProcessingEnabled;
        }

        /**
         * If glow layer is enabled. (Adds a glow effect to emmissive materials)
         */
        public set glowLayerEnabled(enabled: boolean) {
            if (enabled && !this._glowLayer) {
                this._glowLayer = new GlowLayer("", this._scene);
            }else if (!enabled && this._glowLayer) {
                this._glowLayer.dispose();
                this._glowLayer = null;
            }
        }

        @serialize()
        public get glowLayerEnabled(): boolean {
            return this._glowLayer == null;
        }

        /**
         * Enable or disable the chromaticAberration process from the pipeline
         */
        public set chromaticAberrationEnabled(enabled: boolean) {
            if (this._chromaticAberrationEnabled === enabled) {
                return;
            }
            this._chromaticAberrationEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get chromaticAberrationEnabled(): boolean {
            return this._chromaticAberrationEnabled;
        }
        /**
         * Enable or disable the grain process from the pipeline
         */
        public set grainEnabled(enabled: boolean) {
            if (this._grainEnabled === enabled) {
                return;
            }
            this._grainEnabled = enabled;

            this._buildPipeline();
        }

        @serialize()
        public get grainEnabled(): boolean {
            return this._grainEnabled;
        }

        /**
         * @constructor
         * @param name - The rendering pipeline name (default: "")
         * @param hdr - If high dynamic range textures should be used (default: true)
         * @param scene - The scene linked to this pipeline (default: the last created scene)
         * @param cameras - The array of cameras that the rendering pipeline will be attached to (default: scene.cameras)
         * @param automaticBuild - if false, you will have to manually call prepare() to update the pipeline (default: true)
         */
        constructor(name: string = "", hdr: boolean = true, scene: Scene = Engine.LastCreatedScene!, cameras?: Camera[], automaticBuild = true) {
            super(scene.getEngine(), name);
            this._cameras = cameras ||  scene.cameras;
            this._cameras = this._cameras.slice();
            this._camerasToBeAttached = this._cameras.slice();

            this._buildAllowed = automaticBuild;

            // Initialize
            this._scene = scene;
            var caps = this._scene.getEngine().getCaps();
            this._hdr = hdr && (caps.textureHalfFloatRender || caps.textureFloatRender);

            // Misc
            if (this._hdr) {
                if (caps.textureHalfFloatRender) {
                    this._defaultPipelineTextureType = Engine.TEXTURETYPE_HALF_FLOAT;
                }
                else if (caps.textureFloatRender) {
                    this._defaultPipelineTextureType = Engine.TEXTURETYPE_FLOAT;
                }
            } else {
                this._defaultPipelineTextureType = Engine.TEXTURETYPE_UNSIGNED_INT;
            }

            // Attach
            scene.postProcessRenderPipelineManager.addPipeline(this);

            var engine = this._scene.getEngine();
            // Create post processes before hand so they can be modified before enabled.
            // Block compilation flag is set to true to avoid compilation prior to use, these will be updated on first use in build pipeline.
            this.sharpen = new SharpenPostProcess("sharpen", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType, true);
            this._sharpenEffect = new PostProcessRenderEffect(engine, this.SharpenPostProcessId, () => { return this.sharpen; }, true);

            this.depthOfField = new DepthOfFieldEffect(this._scene, null, this._depthOfFieldBlurLevel, this._defaultPipelineTextureType, true);

            this.bloom = new BloomEffect(this._scene, this._bloomScale, this._bloomWeight, this.bloomKernel, this._defaultPipelineTextureType, true);

            this.chromaticAberration = new ChromaticAberrationPostProcess("ChromaticAberration", engine.getRenderWidth(), engine.getRenderHeight(), 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType, true);
            this._chromaticAberrationEffect = new PostProcessRenderEffect(engine, this.ChromaticAberrationPostProcessId, () => { return this.chromaticAberration; }, true);

            this.grain = new GrainPostProcess("Grain", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType, true);
            this._grainEffect = new PostProcessRenderEffect(engine, this.GrainPostProcessId, () => { return this.grain; }, true);

            this._resizeObserver = engine.onResizeObservable.add(() => {
                this._hardwareScaleLevel = engine.getHardwareScalingLevel();
                this.bloomKernel = this.bloomKernel;
            });

            this._imageProcessingConfigurationObserver = this._scene.imageProcessingConfiguration.onUpdateParameters.add(() => {
                this.bloom._downscale._exposure = this._scene.imageProcessingConfiguration.exposure;
            });

            this._buildPipeline();
        }

        /**
         * Force the compilation of the entire pipeline.
         */
        public prepare(): void {
            let previousState = this._buildAllowed;
            this._buildAllowed = true;
            this._buildPipeline();
            this._buildAllowed = previousState;
        }

        private _hasCleared = false;
        private _prevPostProcess: Nullable<PostProcess> = null;
        private _prevPrevPostProcess: Nullable<PostProcess> = null;

        private _setAutoClearAndTextureSharing(postProcess: PostProcess, skipTextureSharing = false) {
            if (this._hasCleared) {
                postProcess.autoClear = false;
            }else {
                postProcess.autoClear = true;
                this._scene.autoClear = false;
                this._hasCleared = true;
            }

            if (!skipTextureSharing) {
                if (this._prevPrevPostProcess) {
                    postProcess.shareOutputWith(this._prevPrevPostProcess);
                }else {
                    postProcess.useOwnOutput();
                }

                if (this._prevPostProcess) {
                    this._prevPrevPostProcess = this._prevPostProcess;
                }
                this._prevPostProcess = postProcess;
            }
        }

        private _depthOfFieldSceneObserver: Nullable<Observer<Scene>> = null;

        private _buildPipeline() {
            if (!this._buildAllowed) {
                return;
            }
            this._scene.autoClear = true;

            var engine = this._scene.getEngine();

            this._disposePostProcesses();
            if (this._cameras !== null) {
                this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._cameras);
                // get back cameras to be used to reattach pipeline
                this._cameras = this._camerasToBeAttached.slice();
            }
            this._reset();
            this._prevPostProcess = null;
            this._prevPrevPostProcess = null;
            this._hasCleared = false;

            if (this.depthOfFieldEnabled) {
                // Multi camera suport
                if (this._cameras.length > 1) {
                    for (let camera of this._cameras) {
                        const depthRenderer = this._scene.enableDepthRenderer(camera);
                        depthRenderer.useOnlyInActiveCamera = true;
                    }

                    this._depthOfFieldSceneObserver = this._scene.onAfterRenderTargetsRenderObservable.add((scene) => {
                        if (this._cameras.indexOf(scene.activeCamera!) > -1) {
                            this.depthOfField.depthTexture = scene.enableDepthRenderer(scene.activeCamera).getDepthMap();
                        }
                    });
                }
                else {
                    this._scene.onAfterRenderTargetsRenderObservable.remove(this._depthOfFieldSceneObserver);
                    const depthRenderer = this._scene.enableDepthRenderer(this._cameras[0]);
                    this.depthOfField.depthTexture = depthRenderer.getDepthMap();
                }

                if (!this.depthOfField._isReady()) {
                    this.depthOfField._updateEffects();
                }
                this.addEffect(this.depthOfField);
                this._setAutoClearAndTextureSharing(this.depthOfField._effects[0], true);
            }
            else {
                this._scene.onAfterRenderTargetsRenderObservable.remove(this._depthOfFieldSceneObserver);
            }

            if (this.bloomEnabled) {
                if (!this.bloom._isReady()) {
                    this.bloom._updateEffects();
                }
                this.addEffect(this.bloom);
                this._setAutoClearAndTextureSharing(this.bloom._effects[0], true);
            }

            if (this._imageProcessingEnabled) {
                this.imageProcessing = new ImageProcessingPostProcess("imageProcessing", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
                if (this._hdr) {
                    this.addEffect(new PostProcessRenderEffect(engine, this.ImageProcessingPostProcessId, () => { return this.imageProcessing; }, true));
                    this._setAutoClearAndTextureSharing(this.imageProcessing);
                } else {
                    this._scene.imageProcessingConfiguration.applyByPostProcess = false;
                }
            }

            if (this.sharpenEnabled) {
                if (!this.sharpen.isReady()) {
                    this.sharpen.updateEffect();
                }
                this.addEffect(this._sharpenEffect);
                this._setAutoClearAndTextureSharing(this.sharpen);
            }

            if (this.grainEnabled) {
                if (!this.grain.isReady()) {
                    this.grain.updateEffect();
                }
                this.addEffect(this._grainEffect);
                this._setAutoClearAndTextureSharing(this.grain);
            }

            if (this.chromaticAberrationEnabled) {
                if (!this.chromaticAberration.isReady()) {
                    this.chromaticAberration.updateEffect();
                }
                this.addEffect(this._chromaticAberrationEffect);
                this._setAutoClearAndTextureSharing(this.chromaticAberration);
            }

            if (this.fxaaEnabled) {
                this.fxaa = new FxaaPostProcess("fxaa", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
                this.addEffect(new PostProcessRenderEffect(engine, this.FxaaPostProcessId, () => { return this.fxaa; }, true));
                this._setAutoClearAndTextureSharing(this.fxaa, true);
            }

            if (this._cameras !== null) {
                this._scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(this._name, this._cameras);
            }

            if (!this._enableMSAAOnFirstPostProcess(this.samples) && this.samples > 1) {
                Tools.Warn("MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0");
            }
        }

        private _disposePostProcesses(disposeNonRecreated = false): void {
            for (var i = 0; i < this._cameras.length; i++) {
                var camera = this._cameras[i];

                if (this.imageProcessing) {
                    this.imageProcessing.dispose(camera);
                }

                if (this.fxaa) {
                    this.fxaa.dispose(camera);
                }

                // These are created in the constructor and should not be disposed on every pipeline change
                if (disposeNonRecreated) {
                    if (this.sharpen) {
                        this.sharpen.dispose(camera);
                    }

                    if (this.depthOfField) {
                        this._scene.onAfterRenderTargetsRenderObservable.remove(this._depthOfFieldSceneObserver);
                        this.depthOfField.disposeEffects(camera);
                    }

                    if (this.bloom) {
                        this.bloom.disposeEffects(camera);
                    }

                    if (this.chromaticAberration) {
                        this.chromaticAberration.dispose(camera);
                    }

                    if (this.grain) {
                        this.grain.dispose(camera);
                    }
                    if (this._glowLayer) {
                        this._glowLayer.dispose();
                    }
                }
            }

            (<any>this.imageProcessing) = null;
            (<any>this.fxaa) = null;

            if (disposeNonRecreated) {
                (<any>this.sharpen) = null;
                (<any>this._sharpenEffect) = null;
                (<any>this.depthOfField) = null;
                (<any>this.bloom) = null;
                (<any>this.chromaticAberration) = null;
                (<any>this._chromaticAberrationEffect) = null;
                (<any>this.grain) = null;
                (<any>this._grainEffect) = null;
                this._glowLayer = null;
            }
        }

        /**
         * Adds a camera to the pipeline
         * @param camera the camera to be added
         */
        public addCamera(camera: Camera): void {
            this._camerasToBeAttached.push(camera);
            this._buildPipeline();
        }

        /**
         * Removes a camera from the pipeline
         * @param camera the camera to remove
         */
        public removeCamera(camera: Camera): void {
            var index = this._camerasToBeAttached.indexOf(camera);
            this._camerasToBeAttached.splice(index, 1);
            this._buildPipeline();
        }

        /**
         * Dispose of the pipeline and stop all post processes
         */
        public dispose(): void {
            this._disposePostProcesses(true);
            this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._cameras);
            this._scene.autoClear = true;
            if (this._resizeObserver) {
                this._scene.getEngine().onResizeObservable.remove(this._resizeObserver);
                this._resizeObserver = null;
            }
            this._scene.imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingConfigurationObserver);
            super.dispose();
        }

        /**
         * Serialize the rendering pipeline (Used when exporting)
         * @returns the serialized object
         */
        public serialize(): any {
            var serializationObject = SerializationHelper.Serialize(this);
            serializationObject.customType = "DefaultRenderingPipeline";

            return serializationObject;
        }

        /**
         * Parse the serialized pipeline
         * @param source Source pipeline.
         * @param scene The scene to load the pipeline to.
         * @param rootUrl The URL of the serialized pipeline.
         * @returns An instantiated pipeline from the serialized object.
         */
        public static Parse(source: any, scene: Scene, rootUrl: string): DefaultRenderingPipeline {
            return SerializationHelper.Parse(() => new DefaultRenderingPipeline(source._name, source._name._hdr, scene), source, scene, rootUrl);
        }
    }