Babylon.js/src/PostProcess/RenderPipeline/Pipelines/babylon.ssao2RenderingPipeline.ts

module BABYLON {
    export class SSAO2RenderingPipeline extends PostProcessRenderPipeline {
        // Members

        /**
        * The PassPostProcess id in the pipeline that contains the original scene color
        * @type {string}
        */
        public SSAOOriginalSceneColorEffect: string = "SSAOOriginalSceneColorEffect";
        /**
        * The SSAO PostProcess id in the pipeline
        * @type {string}
        */
        public SSAORenderEffect: string = "SSAORenderEffect";
        /**
        * The horizontal blur PostProcess id in the pipeline
        * @type {string}
        */
        public SSAOBlurHRenderEffect: string = "SSAOBlurHRenderEffect";
        /**
        * The vertical blur PostProcess id in the pipeline
        * @type {string}
        */
        public SSAOBlurVRenderEffect: string = "SSAOBlurVRenderEffect";
        /**
        * The PostProcess id in the pipeline that combines the SSAO-Blur output with the original scene color (SSAOOriginalSceneColorEffect)
        * @type {string}
        */
        public SSAOCombineRenderEffect: string = "SSAOCombineRenderEffect";

        /**
        * The output strength of the SSAO post-process. Default value is 1.0.
        * @type {number}
        */
        @serialize()
        public totalStrength: number = 1.0;

        /**
        * Maximum depth value to still render AO. A smooth falloff makes the dimming more natural, so there will be no abrupt shading change.
        * @type {number}
        */
        @serialize()
        public maxZ: number = 100.0;

        /**
        * In order to save performances, SSAO radius is clamped on close geometry. This ratio changes by how much
        * @type {number}
        */
        @serialize()
        public minZAspect: number = 0.2;

        /**
        * Number of samples used for the SSAO calculations. Default value is 8
        * @type {number}
        */
        @serialize("samples")
        private _samples: number = 8;

        /**
        * Dynamically generated sphere sampler.
        * @type {number[]}
        */
        private _sampleSphere: number[];

        /**
        * Blur filter offsets
        * @type {number[]}
        */
        private _samplerOffsets: number[];

        public set samples(n: number) {
            this._ssaoPostProcess.updateEffect("#define SAMPLES " + n + "\n#define SSAO");
            this._samples = n;
            this._sampleSphere = this._generateHemisphere();

            this._firstUpdate = true;
        }

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

        /**
        * Are we using bilateral blur ?
        * @type {boolean}
        */
        @serialize("expensiveBlur")
        private _expensiveBlur: boolean = true;
        public set expensiveBlur(b: boolean) {
            this._blurHPostProcess.updateEffect("#define BILATERAL_BLUR\n#define BILATERAL_BLUR_H\n#define SAMPLES 16\n#define EXPENSIVE " + (b ? "1" : "0") + "\n",
                                                null, ["textureSampler", "depthSampler"]);
            this._blurVPostProcess.updateEffect("#define BILATERAL_BLUR\n#define SAMPLES 16\n#define EXPENSIVE " + (b ? "1" : "0") + "\n",
                                                null, ["textureSampler", "depthSampler"]);
            this._expensiveBlur = b;
            this._firstUpdate = true;
        }

        public get expensiveBlur(): boolean {
            return this._expensiveBlur;
        }

        /**
        * The radius around the analyzed pixel used by the SSAO post-process. Default value is 2.0
        * @type {number}
        */
        @serialize()
        public radius: number = 2.0;

        /**
        * The base color of the SSAO post-process
        * The final result is "base + ssao" between [0, 1]
        * @type {number}
        */
        @serialize()
        public base: number = 0.1;

        /**
        *  Support test.
        * @type {boolean}
        */
        public static get IsSupported(): boolean {
            var engine = Engine.LastCreatedEngine;
            return engine.getCaps().drawBuffersExtension;
        }

        private _scene: Scene;
        private _depthTexture: Texture;
        private _normalTexture: Texture;
        private _randomTexture: DynamicTexture;

        private _originalColorPostProcess: PassPostProcess;
        private _ssaoPostProcess: PostProcess;
        private _blurHPostProcess: PostProcess;
        private _blurVPostProcess: PostProcess;
        private _ssaoCombinePostProcess: PostProcess;

        private _firstUpdate: boolean = true;

        @serialize()
        private _ratio: any;

        /**
         * @constructor
         * @param {string} name - The rendering pipeline name
         * @param {BABYLON.Scene} scene - The scene linked to this pipeline
         * @param {any} ratio - The size of the postprocesses. Can be a number shared between passes or an object for more precision: { ssaoRatio: 0.5, blurRatio: 1.0 }
         * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
         */
        constructor(name: string, scene: Scene, ratio: any, cameras?: Camera[]) {
            super(scene.getEngine(), name);

            this._scene = scene;

            if (!this.isSupported) {
                Tools.Error("SSAO 2 needs WebGL 2 support.");
                return;
            }

            var ssaoRatio = ratio.ssaoRatio || ratio;
            var blurRatio = ratio.blurRatio || ratio;
            this._ratio = {
                ssaoRatio: ssaoRatio,
                blurRatio: blurRatio
            };

            // Set up assets
            this._createRandomTexture();
            this._depthTexture = scene.enableGeometryBufferRenderer().getGBuffer().textures[0]; 
            this._normalTexture = scene.enableGeometryBufferRenderer().getGBuffer().textures[1];

            this._originalColorPostProcess = new PassPostProcess("SSAOOriginalSceneColor", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
            this._createSSAOPostProcess(1.0);
            this._createBlurPostProcess(ssaoRatio, blurRatio);
            this._createSSAOCombinePostProcess(blurRatio);

            // Set up pipeline
            this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOOriginalSceneColorEffect, () => { return this._originalColorPostProcess; }, true));
            this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAORenderEffect, () => { return this._ssaoPostProcess; }, true));
            this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurHRenderEffect, () => { return this._blurHPostProcess; }, true));
            this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurVRenderEffect, () => { return this._blurVPostProcess; }, true));
            this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOCombineRenderEffect, () => { return this._ssaoCombinePostProcess; }, true));

            // Finish
            scene.postProcessRenderPipelineManager.addPipeline(this);
            if (cameras)
                scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);

        }

        // Public Methods

        /**
         * Removes the internal pipeline assets and detatches the pipeline from the scene cameras
         */
        public dispose(disableGeometryBufferRenderer: boolean = false): void {
            for (var i = 0; i < this._scene.cameras.length; i++) {
                var camera = this._scene.cameras[i];

                this._originalColorPostProcess.dispose(camera);
                this._ssaoPostProcess.dispose(camera);
                this._blurHPostProcess.dispose(camera);
                this._blurVPostProcess.dispose(camera);
                this._ssaoCombinePostProcess.dispose(camera);
            }

            this._randomTexture.dispose();

            if (disableGeometryBufferRenderer)
                this._scene.disableGeometryBufferRenderer();

            this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);

            super.dispose();
        }

        // Private Methods
        private _createBlurPostProcess(ssaoRatio: number, blurRatio: number): void {
            var samples = 16;
            this._samplerOffsets = [];
            var expensive = this.expensiveBlur;

            for (var i = -8; i < 8; i++) {
                this._samplerOffsets.push(i * 2 + 0.5);
            }

            this._blurHPostProcess = new PostProcess("BlurH", "ssao2", ["outSize", "samplerOffsets", "near", "far", "radius"], ["depthSampler"], ssaoRatio, null, Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, "#define BILATERAL_BLUR\n#define BILATERAL_BLUR_H\n#define SAMPLES 16\n#define EXPENSIVE " + (expensive ? "1" : "0") + "\n");
            this._blurHPostProcess.onApply = (effect: Effect) => {
                effect.setFloat("outSize", this._ssaoCombinePostProcess.width);
                effect.setFloat("near", this._scene.activeCamera.minZ);
                effect.setFloat("far", this._scene.activeCamera.maxZ);
                effect.setFloat("radius", this.radius);
                effect.setTexture("depthSampler", this._depthTexture);

                if (this._firstUpdate) {
                    effect.setArray("samplerOffsets", this._samplerOffsets);
                }
            };

            this._blurVPostProcess = new PostProcess("BlurV", "ssao2", ["outSize", "samplerOffsets", "near", "far", "radius"], ["depthSampler"], blurRatio, null, Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, "#define BILATERAL_BLUR\n#define BILATERAL_BLUR_V\n#define SAMPLES 16\n#define EXPENSIVE " + (expensive ? "1" : "0") + "\n");
            this._blurVPostProcess.onApply = (effect: Effect) => {
                effect.setFloat("outSize", this._ssaoCombinePostProcess.height);
                effect.setFloat("near", this._scene.activeCamera.minZ);
                effect.setFloat("far", this._scene.activeCamera.maxZ);
                effect.setFloat("radius", this.radius);
                effect.setTexture("depthSampler", this._depthTexture);

                if (this._firstUpdate) {
                    effect.setArray("samplerOffsets", this._samplerOffsets);
                    this._firstUpdate = false;
                }
            };
        }
        
        public _rebuild() {
            this._firstUpdate = true;

            super._rebuild();
        }

        private _generateHemisphere(): number[] {
            var numSamples = this.samples;
            var result = [];
            var vector, scale;

            var rand = (min, max) => {
                return Math.random() * (max - min) + min;
            }

            var lerp = (start, end, percent) => {
                return (start + percent*(end - start));
            }

            var i = 0;
            var normal = new BABYLON.Vector3(0, 0, 1);
            while (i < numSamples) {
               vector = new BABYLON.Vector3(
                   rand(-1.0, 1.0),
                   rand(-1.0, 1.0),
                   rand(0.30, 1.0));
               vector.normalize();
               scale = i / numSamples;
               scale = lerp(0.1, 1.0, scale*scale);
               vector.scaleInPlace(scale);


               result.push(vector.x, vector.y, vector.z);
               i++;
            }

            return result;
        }

        private _createSSAOPostProcess(ratio: number): void {
            var numSamples = this.samples;

            this._sampleSphere = this._generateHemisphere();

            this._ssaoPostProcess = new PostProcess("ssao2", "ssao2",
                                                    [
                                                        "sampleSphere", "samplesFactor", "randTextureTiles", "totalStrength", "radius",
                                                        "base", "range", "projection", "near", "far", "texelSize",
                                                        "xViewport", "yViewport", "maxZ", "minZAspect"
                                                    ],
                                                    ["randomSampler", "normalSampler"],
                                                    ratio, null, Texture.BILINEAR_SAMPLINGMODE,
                                                    this._scene.getEngine(), false,
                                                    "#define SAMPLES " + numSamples + "\n#define SSAO");

            this._ssaoPostProcess.onApply = (effect: Effect) => {
                if (this._firstUpdate) {
                    effect.setArray3("sampleSphere", this._sampleSphere);
                    effect.setFloat("randTextureTiles", 4.0);
                }

                effect.setFloat("samplesFactor", 1 / this.samples);
                effect.setFloat("totalStrength", this.totalStrength);
                effect.setFloat2("texelSize", 1 / this._ssaoPostProcess.width, 1 / this._ssaoPostProcess.height);
                effect.setFloat("radius", this.radius);
                effect.setFloat("maxZ", this.maxZ);
                effect.setFloat("minZAspect", this.minZAspect);
                effect.setFloat("base", this.base);
                effect.setFloat("near", this._scene.activeCamera.minZ);
                effect.setFloat("far", this._scene.activeCamera.maxZ);
                effect.setFloat("xViewport", Math.tan(this._scene.activeCamera.fov / 2) * this._scene.getEngine().getAspectRatio(this._scene.activeCamera, true));
                effect.setFloat("yViewport", Math.tan(this._scene.activeCamera.fov / 2) );
                effect.setMatrix("projection", this._scene.getProjectionMatrix());

                effect.setTexture("textureSampler", this._depthTexture);
                effect.setTexture("normalSampler", this._normalTexture);
                effect.setTexture("randomSampler", this._randomTexture);
            };
        }

        private _createSSAOCombinePostProcess(ratio: number): void {
            this._ssaoCombinePostProcess = new PostProcess("ssaoCombine", "ssaoCombine", [], ["originalColor"],
                                                           ratio, null, Texture.BILINEAR_SAMPLINGMODE,
                                                           this._scene.getEngine(), false);

            this._ssaoCombinePostProcess.onApply = (effect: Effect) => {
                effect.setTextureFromPostProcess("originalColor", this._originalColorPostProcess);
            };
        }

        private _createRandomTexture(): void {
            var size = 512;

            this._randomTexture = new DynamicTexture("SSAORandomTexture", size, this._scene, false, Texture.TRILINEAR_SAMPLINGMODE);
            this._randomTexture.wrapU = Texture.WRAP_ADDRESSMODE;
            this._randomTexture.wrapV = Texture.WRAP_ADDRESSMODE;

            var context = this._randomTexture.getContext();

            var rand = (min, max) => {
                return Math.random() * (max - min) + min;
            }

            var randVector = Vector3.Zero();

            for (var x = 0; x < size; x++) {
                for (var y = 0; y < size; y++) {
                    randVector.x = rand(0.0, 1.0);
                    randVector.y = rand(0.0, 1.0);
                    randVector.z = 0.0;

                    randVector.normalize();

                    randVector.scaleInPlace(255);
                    randVector.x = Math.floor(randVector.x);
                    randVector.y = Math.floor(randVector.y);

                    context.fillStyle = 'rgb(' + randVector.x + ', ' + randVector.y + ', ' + randVector.z + ')';
                    context.fillRect(x, y, 1, 1);
                }
            }

            this._randomTexture.update(false);
        }
    }
}