Babylon.js/src/PostProcess/imageProcessingPostProcess.ts

import { Nullable } from "types";
import { Observer } from "Tools/observable";
import { serialize } from "Tools/decorators";
import { Color4 } from "Math/math";
import { Camera } from "Cameras/camera";
import { BaseTexture } from "Materials/Textures/baseTexture";
import { Effect } from "Materials/effect";
import { ColorCurves } from "Materials/colorCurves";
import { ImageProcessingConfiguration, IImageProcessingConfigurationDefines } from "Materials/imageProcessingConfiguration";
import { PostProcess, PostProcessOptions } from "./postProcess";
import { Engine } from "Engine/engine";
import { Scene } from "scene";

    /**
     * ImageProcessingPostProcess
     * @see https://doc.babylonjs.com/how_to/how_to_use_postprocesses#imageprocessing
     */
    export class ImageProcessingPostProcess extends PostProcess {

        /**
         * Default configuration related to image processing available in the PBR Material.
         */
        protected _imageProcessingConfiguration: ImageProcessingConfiguration;

        /**
         * Gets the image processing configuration used either in this material.
         */
        public get imageProcessingConfiguration(): ImageProcessingConfiguration {
            return this._imageProcessingConfiguration;
        }

        /**
         * Sets the Default image processing configuration used either in the this material.
         *
         * If sets to null, the scene one is in use.
         */
        public set imageProcessingConfiguration(value: ImageProcessingConfiguration) {
            this._attachImageProcessingConfiguration(value);
        }

        /**
         * Keep track of the image processing observer to allow dispose and replace.
         */
        private _imageProcessingObserver: Nullable<Observer<ImageProcessingConfiguration>>;

        /**
         * Attaches a new image processing configuration to the PBR Material.
         * @param configuration
         */
        protected _attachImageProcessingConfiguration(configuration: Nullable<ImageProcessingConfiguration>, doNotBuild = false): void {
            if (configuration === this._imageProcessingConfiguration) {
                return;
            }

            // Detaches observer.
            if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
                this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
            }

            // Pick the scene configuration if needed.
            if (!configuration) {
                var scene = null;
                var engine = this.getEngine();
                var camera = this.getCamera();

                if (camera) {
                    scene = camera.getScene();
                }
                else if (engine && engine.scenes) {
                    var scenes = engine.scenes;
                    scene = scenes[scenes.length - 1];
                }
                else {
                    scene = Engine.LastCreatedScene;
                }

                this._imageProcessingConfiguration = (<Scene>scene).imageProcessingConfiguration;
            }
            else {
                this._imageProcessingConfiguration = configuration;
            }

            // Attaches observer.
            if (this._imageProcessingConfiguration) {
                this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(() => {
                    this._updateParameters();
                });
            }

            // Ensure the effect will be rebuilt.
            if (!doNotBuild) {
                this._updateParameters();
            }
        }

        /**
         * Gets Color curves setup used in the effect if colorCurvesEnabled is set to true .
         */
        public get colorCurves(): Nullable<ColorCurves> {
            return this.imageProcessingConfiguration.colorCurves;
        }
        /**
         * Sets Color curves setup used in the effect if colorCurvesEnabled is set to true .
         */
        public set colorCurves(value: Nullable<ColorCurves>) {
            this.imageProcessingConfiguration.colorCurves = value;
        }

        /**
         * Gets wether the color curves effect is enabled.
         */
        public get colorCurvesEnabled(): boolean {
            return this.imageProcessingConfiguration.colorCurvesEnabled;
        }
        /**
         * Sets wether the color curves effect is enabled.
         */
        public set colorCurvesEnabled(value: boolean) {
            this.imageProcessingConfiguration.colorCurvesEnabled = value;
        }

        /**
         * Gets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
         */
        public get colorGradingTexture(): Nullable<BaseTexture> {
            return this.imageProcessingConfiguration.colorGradingTexture;
        }
        /**
         * Sets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
         */
        public set colorGradingTexture(value: Nullable<BaseTexture>) {
            this.imageProcessingConfiguration.colorGradingTexture = value;
        }

        /**
         * Gets wether the color grading effect is enabled.
         */
        public get colorGradingEnabled(): boolean {
            return this.imageProcessingConfiguration.colorGradingEnabled;
        }
        /**
         * Gets wether the color grading effect is enabled.
         */
        public set colorGradingEnabled(value: boolean) {
            this.imageProcessingConfiguration.colorGradingEnabled = value;
        }

        /**
         * Gets exposure used in the effect.
         */
        public get exposure(): number {
            return this.imageProcessingConfiguration.exposure;
        }
        /**
         * Sets exposure used in the effect.
         */
        public set exposure(value: number) {
            this.imageProcessingConfiguration.exposure = value;
        }

        /**
         * Gets wether tonemapping is enabled or not.
         */
        public get toneMappingEnabled(): boolean {
            return this._imageProcessingConfiguration.toneMappingEnabled;
        }
        /**
         * Sets wether tonemapping is enabled or not
         */
        public set toneMappingEnabled(value: boolean) {
            this._imageProcessingConfiguration.toneMappingEnabled = value;
        }

        /**
         * Gets contrast used in the effect.
         */
        public get contrast(): number {
            return this.imageProcessingConfiguration.contrast;
        }
        /**
         * Sets contrast used in the effect.
         */
        public set contrast(value: number) {
            this.imageProcessingConfiguration.contrast = value;
        }

        /**
         * Gets Vignette stretch size.
         */
        public get vignetteStretch(): number {
            return this.imageProcessingConfiguration.vignetteStretch;
        }
        /**
         * Sets Vignette stretch size.
         */
        public set vignetteStretch(value: number) {
            this.imageProcessingConfiguration.vignetteStretch = value;
        }

        /**
         * Gets Vignette centre X Offset.
         */
        public get vignetteCentreX(): number {
            return this.imageProcessingConfiguration.vignetteCentreX;
        }
        /**
         * Sets Vignette centre X Offset.
         */
        public set vignetteCentreX(value: number) {
            this.imageProcessingConfiguration.vignetteCentreX = value;
        }

        /**
         * Gets Vignette centre Y Offset.
         */
        public get vignetteCentreY(): number {
            return this.imageProcessingConfiguration.vignetteCentreY;
        }
        /**
         * Sets Vignette centre Y Offset.
         */
        public set vignetteCentreY(value: number) {
            this.imageProcessingConfiguration.vignetteCentreY = value;
        }

        /**
         * Gets Vignette weight or intensity of the vignette effect.
         */
        public get vignetteWeight(): number {
            return this.imageProcessingConfiguration.vignetteWeight;
        }
        /**
         * Sets Vignette weight or intensity of the vignette effect.
         */
        public set vignetteWeight(value: number) {
            this.imageProcessingConfiguration.vignetteWeight = value;
        }

        /**
         * Gets Color of the vignette applied on the screen through the chosen blend mode (vignetteBlendMode)
         * if vignetteEnabled is set to true.
         */
        public get vignetteColor(): Color4 {
            return this.imageProcessingConfiguration.vignetteColor;
        }
        /**
         * Sets Color of the vignette applied on the screen through the chosen blend mode (vignetteBlendMode)
         * if vignetteEnabled is set to true.
         */
        public set vignetteColor(value: Color4) {
            this.imageProcessingConfiguration.vignetteColor = value;
        }

        /**
         * Gets Camera field of view used by the Vignette effect.
         */
        public get vignetteCameraFov(): number {
            return this.imageProcessingConfiguration.vignetteCameraFov;
        }
        /**
         * Sets Camera field of view used by the Vignette effect.
         */
        public set vignetteCameraFov(value: number) {
            this.imageProcessingConfiguration.vignetteCameraFov = value;
        }

        /**
         * Gets the vignette blend mode allowing different kind of effect.
         */
        public get vignetteBlendMode(): number {
            return this.imageProcessingConfiguration.vignetteBlendMode;
        }
        /**
         * Sets the vignette blend mode allowing different kind of effect.
         */
        public set vignetteBlendMode(value: number) {
            this.imageProcessingConfiguration.vignetteBlendMode = value;
        }

        /**
         * Gets wether the vignette effect is enabled.
         */
        public get vignetteEnabled(): boolean {
            return this.imageProcessingConfiguration.vignetteEnabled;
        }
        /**
         * Sets wether the vignette effect is enabled.
         */
        public set vignetteEnabled(value: boolean) {
            this.imageProcessingConfiguration.vignetteEnabled = value;
        }

        @serialize()
        private _fromLinearSpace = true;
        /**
         * Gets wether the input of the processing is in Gamma or Linear Space.
         */
        public get fromLinearSpace(): boolean {
            return this._fromLinearSpace;
        }
        /**
         * Sets wether the input of the processing is in Gamma or Linear Space.
         */
        public set fromLinearSpace(value: boolean) {
            if (this._fromLinearSpace === value) {
                return;
            }

            this._fromLinearSpace = value;
            this._updateParameters();
        }

        /**
         * Defines cache preventing GC.
         */
        private _defines: IImageProcessingConfigurationDefines & { FROMLINEARSPACE: boolean } = {
            IMAGEPROCESSING: false,
            VIGNETTE: false,
            VIGNETTEBLENDMODEMULTIPLY: false,
            VIGNETTEBLENDMODEOPAQUE: false,
            TONEMAPPING: false,
            TONEMAPPING_ACES: false,
            CONTRAST: false,
            COLORCURVES: false,
            COLORGRADING: false,
            COLORGRADING3D: false,
            FROMLINEARSPACE: false,
            SAMPLER3DGREENDEPTH: false,
            SAMPLER3DBGRMAP: false,
            IMAGEPROCESSINGPOSTPROCESS: false,
            EXPOSURE: false,
        };

        constructor(name: string, options: number | PostProcessOptions, camera: Nullable<Camera> = null, samplingMode?: number, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, imageProcessingConfiguration?: ImageProcessingConfiguration) {
            super(name, "imageProcessing", [], [], options, camera, samplingMode, engine, reusable,
                null, textureType, "postprocess", null, true);

            // Setup the configuration as forced by the constructor. This would then not force the
            // scene materials output in linear space and let untouched the default forward pass.
            if (imageProcessingConfiguration) {
                imageProcessingConfiguration.applyByPostProcess = true;
                this._attachImageProcessingConfiguration(imageProcessingConfiguration, true);
                // This will cause the shader to be compiled
                this.fromLinearSpace = false;
            }
            // Setup the default processing configuration to the scene.
            else {
                this._attachImageProcessingConfiguration(null, true);
                this.imageProcessingConfiguration.applyByPostProcess = true;
            }

            this.onApply = (effect: Effect) => {
                this.imageProcessingConfiguration.bind(effect, this.aspectRatio);
            };
        }
        /**
         *  "ImageProcessingPostProcess"
         * @returns "ImageProcessingPostProcess"
         */
        public getClassName(): string {
            return "ImageProcessingPostProcess";
        }

        protected _updateParameters(): void {
            this._defines.FROMLINEARSPACE = this._fromLinearSpace;
            this.imageProcessingConfiguration.prepareDefines(this._defines, true);
            var defines = "";
            for (const define in this._defines) {
                if ((<any>this._defines)[define]) {
                    defines += `#define ${define};\r\n`;
                }
            }

            var samplers = ["textureSampler"];
            var uniforms = ["scale"];

            if (ImageProcessingConfiguration) {
                ImageProcessingConfiguration.PrepareSamplers(samplers, this._defines);
                ImageProcessingConfiguration.PrepareUniforms(uniforms, this._defines);
            }

            this.updateEffect(defines, uniforms, samplers);
        }

        public dispose(camera?: Camera): void {
            super.dispose(camera);

            if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
                this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
            }

            if (this._imageProcessingConfiguration) {
                this.imageProcessingConfiguration.applyByPostProcess = false;
            }
        }
    }