adding playground example

Playground/scripts/scripts.txt

@@ -22,6 +22,7 @@ proceduralTexture
 basic sounds
 sound on mesh
 ssao rendering pipeline
+ssao 2
 volumetric Light Scattering
 hdr Rendering Pipeline
 refraction and Reflection

Playground/scripts/ssao 2.js

@@ -0,0 +1,61 @@
+var createScene = function () {
+    // Create scene
+    var scene = new BABYLON.Scene(engine);
+    scene.clearColor = BABYLON.Color3.Black();
+
+    // Create camera
+    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(29, 13, 23), scene);
+    camera.setTarget(new BABYLON.Vector3(0, 0, 0));
+    camera.attachControl(canvas);
+
+    // Create some boxes and deactivate lighting (specular color and back faces)
+    var boxMaterial = new BABYLON.StandardMaterial("boxMaterail", scene);
+    boxMaterial.diffuseTexture = new BABYLON.Texture("textures/ground.jpg", scene);
+    boxMaterial.specularColor = BABYLON.Color3.Black();
+    boxMaterial.emissiveColor = BABYLON.Color3.White();
+
+    for (var i = 0; i < 10; i++) {
+        for (var j = 0; j < 10; j++) {
+            var box = BABYLON.Mesh.CreateBox("box" + i + " - " + j, 5, scene);
+            box.position = new BABYLON.Vector3(i * 5, 2.5, j * 5);
+            box.rotation = new BABYLON.Vector3(i, i * j, j);
+            box.material = boxMaterial;
+        }
+    }
+
+    // Create SSAO and configure all properties (for the example)
+    var ssaoRatio = {
+        ssaoRatio: 0.5, // Ratio of the SSAO post-process, in a lower resolution
+        blurRatio: 0.5// Ratio of the combine post-process (combines the SSAO and the scene)
+    };
+
+    var ssao = new BABYLON.SSAO2RenderingPipeline("ssao", scene, ssaoRatio);
+    ssao.radius = 3.5;
+    ssao.totalStrength = 1.3;
+    ssao.expensiveBlur = true;
+    ssao.samples = 16;
+    ssao.maxZ = 250;
+
+    // Attach camera to the SSAO render pipeline
+    scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+
+    // Manage SSAO
+    window.addEventListener("keydown", function (evt) {
+        // draw SSAO with scene when pressed "1"
+        if (evt.keyCode === 49) {
+            scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+            scene.postProcessRenderPipelineManager.enableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
+        }
+            // draw without SSAO when pressed "2"
+        else if (evt.keyCode === 50) {
+            scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline("ssao", camera);
+        }
+            // draw only SSAO when pressed "2"
+        else if (evt.keyCode === 51) {
+            scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline("ssao", camera);
+            scene.postProcessRenderPipelineManager.disableEffectInPipeline("ssao", ssao.SSAOCombineRenderEffect, camera);
+        }
+    });
+
+    return scene;
+}

dist/preview release/babylon.max.js

@@ -17138,8 +17138,8 @@ var BABYLON;
                 this._renderTargets.push(this._depthRenderer.getDepthMap());
             }
             // Geometry renderer
-            if (this._geometryRenderer) {
-                this._renderTargets.push(this._geometryRenderer.getGBuffer());
+            if (this._geometryBufferRenderer) {
+                this._renderTargets.push(this._geometryBufferRenderer.getGBuffer());
             }
             // RenderPipeline
             if (this._postProcessRenderPipelineManager) {
@@ -17314,20 +17314,23 @@ var BABYLON;
             this._depthRenderer.dispose();
             this._depthRenderer = null;
         };
-        Scene.prototype.enableGeometryRenderer = function (ratio) {
+        Scene.prototype.enableGeometryBufferRenderer = function (ratio) {
             if (ratio === void 0) { ratio = 1; }
-            if (this._geometryRenderer) {
-                return this._geometryRenderer;
+            if (this._geometryBufferRenderer) {
+                return this._geometryBufferRenderer;
             }
-            this._geometryRenderer = new GeometryRenderer(this, ratio);
-            return this._geometryRenderer;
+            this._geometryBufferRenderer = new BABYLON.GeometryBufferRenderer(this, ratio);
+            if (!this._geometryBufferRenderer.isSupported) {
+                this._geometryBufferRenderer = null;
+            }
+            return this._geometryBufferRenderer;
         };
-        Scene.prototype.disableGeometryRenderer = function () {
-            if (!this._geometryRenderer) {
+        Scene.prototype.disableGeometryBufferRenderer = function () {
+            if (!this._geometryBufferRenderer) {
                 return;
             }
-            this._geometryRenderer.dispose();
-            this._geometryRenderer = null;
+            this._geometryBufferRenderer.dispose();
+            this._geometryBufferRenderer = null;
         };
         Scene.prototype.freezeMaterials = function () {
             for (var i = 0; i < this.materials.length; i++) {
@@ -41761,6 +41764,7 @@ var BABYLON;
 
 var BABYLON;
 (function (BABYLON) {
+    ;
     var MultiRenderTarget = (function (_super) {
         __extends(MultiRenderTarget, _super);
         function MultiRenderTarget(name, size, count, scene, options) {
@@ -41770,6 +41774,10 @@ var BABYLON;
             var generateDepthTexture = options.generateDepthTexture ? options.generateDepthTexture : false;
             var doNotChangeAspectRatio = options.doNotChangeAspectRatio === undefined ? true : options.doNotChangeAspectRatio;
             _this = _super.call(this, name, size, scene, generateMipMaps, doNotChangeAspectRatio) || this;
+            if (!_this.isSupported) {
+                _this.dispose();
+                return;
+            }
             var types = [];
             var samplingModes = [];
             for (var i = 0; i < count; i++) {
@@ -41860,6 +41868,9 @@ var BABYLON;
             _super.prototype.dispose.call(this);
         };
         MultiRenderTarget.prototype.releaseInternalTextures = function () {
+            if (!this._webGLTextures) {
+                return;
+            }
             for (var i = this._webGLTextures.length - 1; i >= 0; i--) {
                 if (this._webGLTextures[i] !== undefined) {
                     this.getScene().getEngine().releaseInternalTexture(this._webGLTextures[i]);
@@ -47964,9 +47975,13 @@ var BABYLON;
             * The final result is "base + ssao" between [0, 1]
             * @type {number}
             */
-            _this.base = 0.5;
+            _this.base = 0.1;
             _this._firstUpdate = true;
             _this._scene = scene;
+            if (!_this.isSupported) {
+                BABYLON.Tools.Error("SSAO 2 needs WebGL 2 support.");
+                return _this;
+            }
             var ssaoRatio = ratio.ssaoRatio || ratio;
             var blurRatio = ratio.blurRatio || ratio;
             _this._ratio = {
@@ -47975,8 +47990,8 @@ var BABYLON;
             };
             // Set up assets
             _this._createRandomTexture();
-            _this._depthTexture = scene.enableGeometryRenderer().getGBuffer().depthTexture;
-            _this._normalTexture = scene.enableGeometryRenderer().getGBuffer().textures[1];
+            _this._depthTexture = scene.enableGeometryBufferRenderer().getGBuffer().depthTexture;
+            _this._normalTexture = scene.enableGeometryBufferRenderer().getGBuffer().textures[1];
             _this._originalColorPostProcess = new BABYLON.PassPostProcess("SSAOOriginalSceneColor", 1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
             _this._createSSAOPostProcess(1.0);
             _this._createBlurPostProcess(ssaoRatio, blurRatio);
@@ -48036,12 +48051,24 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(SSAO2RenderingPipeline.prototype, "isSupported", {
+            /**
+            *  Support test.
+            * @type {boolean}
+            */
+            get: function () {
+                var engine = this._scene.getEngine();
+                return engine.webGLVersion > 1;
+            },
+            enumerable: true,
+            configurable: true
+        });
         // Public Methods
         /**
          * Removes the internal pipeline assets and detatches the pipeline from the scene cameras
          */
-        SSAO2RenderingPipeline.prototype.dispose = function (disableGeometryRenderer) {
-            if (disableGeometryRenderer === void 0) { disableGeometryRenderer = false; }
+        SSAO2RenderingPipeline.prototype.dispose = function (disableGeometryBufferRenderer) {
+            if (disableGeometryBufferRenderer === void 0) { disableGeometryBufferRenderer = false; }
             for (var i = 0; i < this._scene.cameras.length; i++) {
                 var camera = this._scene.cameras[i];
                 this._originalColorPostProcess.dispose(camera);
@@ -48051,8 +48078,8 @@ var BABYLON;
                 this._ssaoCombinePostProcess.dispose(camera);
             }
             this._randomTexture.dispose();
-            if (disableGeometryRenderer)
-                this._scene.disableGeometryRenderer();
+            if (disableGeometryBufferRenderer)
+                this._scene.disableGeometryBufferRenderer();
             this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
             _super.prototype.dispose.call(this);
         };
@@ -49391,6 +49418,9 @@ var BABYLON;
             var engine = scene.getEngine();
             // Render target
             this._multiRenderTarget = new BABYLON.MultiRenderTarget("gBuffer", { width: engine.getRenderWidth() * ratio, height: engine.getRenderHeight() * ratio }, 2, this._scene, { generateMipMaps: false, generateDepthTexture: true });
+            if (!this.isSupported) {
+                return null;
+            }
             this._multiRenderTarget.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
             this._multiRenderTarget.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
             this._multiRenderTarget.refreshRate = 1;
@@ -49443,12 +49473,17 @@ var BABYLON;
                     renderSubMesh(alphaTestSubMeshes.data[index]);
                 }
             };
-            this._multiRenderTarget.renderList = scene.getActiveMeshes().data;
         }
+        Object.defineProperty(GeometryBufferRenderer.prototype, "renderList", {
+            set: function (meshes) {
+                this._multiRenderTarget.renderList = meshes;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(GeometryBufferRenderer.prototype, "isSupported", {
             get: function () {
-                var engine = this._scene.getEngine();
-                return (engine.webGLVersion > 1) || engine.getCaps().drawBuffersExtension;
+                return this._multiRenderTarget.isSupported;
             },
             enumerable: true,
             configurable: true

src/PostProcess/babylon.postProcess.ts

@@ -131,11 +131,11 @@
             this.updateEffect(defines);
         }
         
-        public updateEffect(defines?: string) {
+        public updateEffect(defines?: string, uniforms?: string[], samplers?: string[]) {
             this._effect = this._engine.createEffect({ vertex: this._vertexUrl, fragment: this._fragmentUrl },
                 ["position"],
-                this._parameters,
-                this._samplers, defines !== undefined ? defines : "");
+                uniforms || this._parameters,
+                samplers || this._samplers, defines !== undefined ? defines : "");
         }
 
         public isReusable(): boolean {

src/PostProcess/babylon.ssao2RenderingPipeline.ts

@@ -56,21 +56,24 @@
         @serialize("samples")
         private _samples: number = 8;
 
-        public set samples(n: number) {
-            this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
+        /**
+        * Dynamically generated sphere sampler.
+        * @type {number[]}
+        */
+        private _sampleSphere: number[];
 
-            this._samples = n;
-            for (var i = 0; i < this._scene.cameras.length; i++) {
-                var camera = this._scene.cameras[i];
-                this._ssaoPostProcess.dispose(camera);
-            }
+        /**
+        * Blur filter offsets
+        * @type {number[]}
+        */
+        private _samplerOffsets: number[];
 
-            this._createSSAOPostProcess(this._ratio.ssaoRatio);
-            this.addEffect(new PostProcessRenderEffect(this._scene.getEngine(), this.SSAOBlurHRenderEffect, () => { return this._blurHPostProcess; }, true));
-            this.addEffect(new PostProcessRenderEffect(this._scene.getEngine(), this.SSAOBlurVRenderEffect, () => { return this._blurVPostProcess; }, true));
+        public set samples(n: number) {
+            this._ssaoPostProcess.updateEffect("#define SAMPLES " + n + "\n#define SSAO");
+            this._samples = n;
+            this._sampleSphere = this._generateHemisphere();
 
-            if (this._cameras)
-                this._scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(this._name, this._cameras);
+            this._firstUpdate = true;
         }
 
         public get samples(): number {
@@ -84,21 +87,12 @@
         @serialize("expensiveBlur")
         private _expensiveBlur: boolean = true;
         public set expensiveBlur(b: boolean) {
-            this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
-
+            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;
-            for (var i = 0; i < this._scene.cameras.length; i++) {
-                var camera = this._scene.cameras[i];
-                this._blurHPostProcess.dispose(camera);
-                this._blurVPostProcess.dispose(camera);
-            }
-
-            this._createBlurPostProcess(this._ratio.ssaoRatio, this._ratio.blurRatio);
-            this.addEffect(new PostProcessRenderEffect(this._scene.getEngine(), this.SSAORenderEffect, () => { return this._ssaoPostProcess; }, true));
-            this.addEffect(new PostProcessRenderEffect(this._scene.getEngine(), this.SSAORenderEffect, () => { return this._ssaoPostProcess; }, true));
-
-            if (this._cameras)
-                this._scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(this._name, this._cameras);
+            this._firstUpdate = true;
         }
 
         public get expensiveBlur(): boolean {
@@ -118,7 +112,7 @@
         * @type {number}
         */
         @serialize()
-        public base: number = 0.5;
+        public base: number = 0.1;
 
         /**
         *  Support test.
@@ -190,6 +184,7 @@
             scene.postProcessRenderPipelineManager.addPipeline(this);
             if (cameras)
                 scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
+
         }
 
         // Public Methods
@@ -221,11 +216,11 @@
         // Private Methods
         private _createBlurPostProcess(ssaoRatio: number, blurRatio: number): void {
             var samples = 16;
-            var samplerOffsets = [];
+            this._samplerOffsets = [];
             var expensive = this.expensiveBlur;
 
             for (var i = -8; i < 8; i++) {
-                samplerOffsets.push(i * 2);
+                this._samplerOffsets.push(i * 2);
             }
 
             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");
@@ -237,11 +232,11 @@
                 effect.setTexture("depthSampler", this._depthTexture);
 
                 if (this._firstUpdate) {
-                    effect.setArray("samplerOffsets", samplerOffsets);
+                    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 SAMPLES 16\n#define EXPENSIVE " + (expensive ? "1" : "0") + "\n");
+            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);
@@ -250,7 +245,7 @@
                 effect.setTexture("depthSampler", this._depthTexture);
 
                 if (this._firstUpdate) {
-                    effect.setArray("samplerOffsets", samplerOffsets);
+                    effect.setArray("samplerOffsets", this._samplerOffsets);
                     this._firstUpdate = false;
                 }
             };
@@ -295,8 +290,7 @@
         private _createSSAOPostProcess(ratio: number): void {
             var numSamples = this.samples;
 
-            var sampleSphere = this._generateHemisphere();
-            var samplesFactor = 1.0 / numSamples;
+            this._sampleSphere = this._generateHemisphere();
 
             this._ssaoPostProcess = new PostProcess("ssao2", "ssao2",
                                                     [
@@ -311,11 +305,11 @@
 
             this._ssaoPostProcess.onApply = (effect: Effect) => {
                 if (this._firstUpdate) {
-                    effect.setArray3("sampleSphere", sampleSphere);
-                    effect.setFloat("samplesFactor", samplesFactor);
+                    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);