Fixing small issues

Babylon/Materials/textures/babylon.renderTargetTexture.ts

@@ -14,7 +14,7 @@
         public _waitingRenderList: string[];
         private _doNotChangeAspectratio: boolean;
 
-        constructor(name: string, size: number, scene: Scene, generateMipMaps?: boolean, doNotChangeAspectratio?: boolean) {
+        constructor(name: string, size: any, scene: Scene, generateMipMaps?: boolean, doNotChangeAspectratio?: boolean) {
             super(null, scene, !generateMipMaps);
 
             this.name = name;

Babylon/PostProcess/RenderPipeline/babylon.postProcessRenderPass.js

@@ -1,50 +1,49 @@
-"use strict";
-
-var BABYLON = BABYLON || {};
-
-(function () {
-	BABYLON.PostProcessRenderPass = function PostProcessRenderPass(scene, name, size, renderList, beforeRender, afterRender) {
-		this._name = name;
-		this._enabled = true;
-
-		this._renderList = renderList;
-
-		this._renderTexture = new BABYLON.RenderTargetTexture(name, size, scene);
-		this.setRenderList(renderList);
-
-		this._renderTexture.onBeforeRender = beforeRender;
-		this._renderTexture.onAfterRender = afterRender;
-
-		this._scene = scene;
-
-		this._refCount = 0;
-	};
-
-	BABYLON.PostProcessRenderPass.prototype.incRefCount = function () {
-	    if (this._refCount == 0) {
-	        this._scene.customRenderTargets.push(this._renderTexture);
-	    }
-
-	    this._refCount++;
-	};
-
-	BABYLON.PostProcessRenderPass.prototype.decRefCount = function () {
-	    this._refCount--;
-
-	    if (this._refCount <= 0) {
-	        this._scene.customRenderTargets.splice(this._scene.customRenderTargets.indexOf(this._renderTexture), 1);
-	    }
-	};
-
-	BABYLON.PostProcessRenderPass.prototype.setRenderList = function (renderList) {
-		this._renderTexture.renderList = renderList;
-	};
-
-	BABYLON.PostProcessRenderPass.prototype.getRenderTexture = function () {
-		return this._renderTexture;
-	};
-
-	BABYLON.PostProcessRenderPass.prototype._update = function () {
-		this.setRenderList(this._renderList);
-	};
-})();
+var BABYLON;
+(function (BABYLON) {
+    var PostProcessRenderPass = (function () {
+        function PostProcessRenderPass(scene, name, size, renderList, beforeRender, afterRender) {
+            this.name = name;
+            this._enabled = true;
+            this._refCount = 0;
+            this._renderTexture = new BABYLON.RenderTargetTexture(name, size, scene);
+            this.setRenderList(renderList);
+
+            this._renderTexture.onBeforeRender = beforeRender;
+            this._renderTexture.onAfterRender = afterRender;
+
+            this._scene = scene;
+        }
+        PostProcessRenderPass.prototype.incRefCount = function () {
+            if (this._refCount == 0) {
+                this._scene.customRenderTargets.push(this._renderTexture);
+            }
+
+            return ++this._refCount;
+        };
+
+        PostProcessRenderPass.prototype.decRefCount = function () {
+            this._refCount--;
+
+            if (this._refCount <= 0) {
+                this._scene.customRenderTargets.splice(this._scene.customRenderTargets.indexOf(this._renderTexture), 1);
+            }
+
+            return this._refCount;
+        };
+
+        PostProcessRenderPass.prototype.setRenderList = function (renderList) {
+            this._renderTexture.renderList = renderList;
+        };
+
+        PostProcessRenderPass.prototype.getRenderTexture = function () {
+            return this._renderTexture;
+        };
+
+        PostProcessRenderPass.prototype._update = function () {
+            this.setRenderList(this._renderList);
+        };
+        return PostProcessRenderPass;
+    })();
+    BABYLON.PostProcessRenderPass = PostProcessRenderPass;
+})(BABYLON || (BABYLON = {}));
+//# sourceMappingURL=babylon.postProcessRenderPass.js.map

Babylon/Rendering/babylon.renderingManager.js

@@ -58,7 +58,7 @@
         RenderingManager.prototype.render = function (customRenderFunction, activeMeshes, renderParticles, renderSprites) {
             var _this = this;
             for (var index = 0; index < BABYLON.RenderingManager.MAX_RENDERINGGROUPS; index++) {
-                this._depthBufferAlreadyCleaned = index == 0;
+                this._depthBufferAlreadyCleaned = false;
                 var renderingGroup = this._renderingGroups[index];
 
                 if (renderingGroup) {

Babylon/Rendering/babylon.renderingManager.ts

@@ -63,7 +63,7 @@
         public render(customRenderFunction: (opaqueSubMeshes: SmartArray, transparentSubMeshes: SmartArray, alphaTestSubMeshes: SmartArray, beforeTransparents: () => void) => void,
             activeMeshes: Mesh[], renderParticles: boolean, renderSprites: boolean): void {
             for (var index = 0; index < BABYLON.RenderingManager.MAX_RENDERINGGROUPS; index++) {
-                this._depthBufferAlreadyCleaned = index == 0;
+                this._depthBufferAlreadyCleaned = false;
                 var renderingGroup = this._renderingGroups[index];
 
                 if (renderingGroup) {

Babylon/Tools/babylon.tools.js

@@ -1,5 +1,8 @@
 var BABYLON;
 (function (BABYLON) {
+    // Screenshots
+    var screenshotCanvas;
+
     // FPS
     var fpsRange = 60;
     var previousFramesDuration = [];
@@ -312,6 +315,99 @@
                 fps = 1000.0 / (sum / (length - 1));
             }
         };
+
+        Tools.CreateScreenshot = function (engine, camera, size) {
+            var width;
+            var height;
+
+            //If a zoom value is specified
+            if (size.zoom) {
+                width = Math.round(engine.getRenderWidth() * size.zoom);
+                height = Math.round(width / engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            } else if (size.width && size.height) {
+                width = size.width;
+                height = size.height;
+            } else if (size.width && !size.height) {
+                width = size.width;
+                height = Math.round(width / engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            } else if (size.height && !size.width) {
+                height = size.height;
+                width = Math.round(height * engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            } else if (!isNaN(size)) {
+                height = size;
+                width = size;
+            } else {
+                console.error("Invalid 'size' parameter !");
+            }
+
+            var texture = new BABYLON.RenderTargetTexture("screenShot", size, engine.scenes[0]);
+            texture.renderList = engine.scenes[0].meshes;
+
+            texture.onAfterRender = function () {
+                // Read the contents of the framebuffer
+                var numberOfChannelsByLine = width * 4;
+                var halfHeight = height / 2;
+
+                //Reading datas from WebGL
+                var data = engine.readPixels(0, 0, width, height);
+
+                for (var i = 0; i < halfHeight; i++) {
+                    for (var j = 0; j < numberOfChannelsByLine; j++) {
+                        var currentCell = j + i * numberOfChannelsByLine;
+                        var targetLine = height - i - 1;
+                        var targetCell = j + targetLine * numberOfChannelsByLine;
+                        ;
+
+                        var temp = data[currentCell];
+                        data[currentCell] = data[targetCell];
+                        data[targetCell] = temp;
+                    }
+                }
+
+                // Create a 2D canvas to store the result
+                if (!screenshotCanvas) {
+                    screenshotCanvas = document.createElement('canvas');
+                }
+                screenshotCanvas.width = width;
+                screenshotCanvas.height = height;
+                var context = screenshotCanvas.getContext('2d');
+
+                // Copy the pixels to a 2D canvas
+                var imageData = context.createImageData(width, height);
+                imageData.data.set(data);
+                context.putImageData(imageData, 0, 0);
+
+                var base64Image = screenshotCanvas.toDataURL();
+
+                //Creating a link if the browser have the download attribute on the a tag, to automatically start download generated image.
+                if (("download" in document.createElement("a"))) {
+                    var a = window.document.createElement("a");
+                    a.href = base64Image;
+                    var date = new Date();
+                    var stringDate = date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate() + "-" + date.getHours() + ":" + date.getMinutes();
+                    a.setAttribute("download", "screenshot-" + stringDate);
+
+                    window.document.body.appendChild(a);
+
+                    a.addEventListener("click", function () {
+                        a.parentElement.removeChild(a);
+                    });
+                    a.click();
+                    //Or opening a new tab with the image if it is not possible to automatically start download.
+                } else {
+                    var newWindow = window.open("");
+                    var img = newWindow.document.createElement("img");
+                    img.src = base64Image;
+                    newWindow.document.body.appendChild(img);
+                }
+            };
+
+            texture.render();
+            texture.dispose();
+        };
         Tools.BaseUrl = "";
         return Tools;
     })();

Babylon/Tools/babylon.tools.ts

@@ -11,6 +11,9 @@
         height: number;
     }
 
+    // Screenshots
+    var screenshotCanvas: HTMLCanvasElement;
+
     // FPS
     var fpsRange = 60;
     var previousFramesDuration = [];
@@ -83,7 +86,7 @@
             };
         }
 
-        public static MakeArray(obj, allowsNullUndefined?: boolean): Array<any> {
+        public static MakeArray(obj, allowsNullUndefined: boolean): Array<any> {
             if (allowsNullUndefined !== true && (obj === undefined || obj == null))
                 return undefined;
 
@@ -333,5 +336,109 @@
                 fps = 1000.0 / (sum / (length - 1));
             }
         }
+
+        public static CreateScreenshot(engine: Engine, camera: Camera, size: any): void {
+            var width: number;
+            var height: number;
+
+            //If a zoom value is specified
+            if (size.zoom) {
+                width = Math.round(engine.getRenderWidth() * size.zoom);
+                height = Math.round(width / engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            }
+            else if (size.width && size.height) {
+                width = size.width;
+                height = size.height;
+            }
+            //If passing only width, computing height to keep display canvas ratio.
+            else if (size.width && !size.height) {
+                width = size.width;
+                height = Math.round(width / engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            }
+            //If passing only height, computing width to keep display canvas ratio.
+            else if (size.height && !size.width) {
+                height = size.height;
+                width = Math.round(height * engine.getAspectRatio(camera));
+                size = { width: width, height: height };
+            }
+            //Assuming here that "size" parameter is a number
+            else if (!isNaN(size)) {
+                height = size;
+                width = size;
+            }
+            else {
+                console.error("Invalid 'size' parameter !");
+            }
+
+            var texture = new RenderTargetTexture("screenShot", size, engine.scenes[0]);
+            texture.renderList = engine.scenes[0].meshes;
+
+            texture.onAfterRender = () => {
+                // Read the contents of the framebuffer
+                var numberOfChannelsByLine = width * 4;
+                var halfHeight = height / 2;
+
+                //Reading datas from WebGL
+                var data = engine.readPixels(0, 0, width, height);
+
+
+                //To flip image on Y axis.
+                for (var i = 0; i < halfHeight; i++) {
+                    for (var j = 0; j < numberOfChannelsByLine; j++) {
+                        var currentCell = j + i * numberOfChannelsByLine;
+                        var targetLine = height - i - 1;
+                        var targetCell = j + targetLine * numberOfChannelsByLine;;
+
+                        var temp = data[currentCell];
+                        data[currentCell] = data[targetCell];
+                        data[targetCell] = temp;
+                    }
+                }
+
+                // Create a 2D canvas to store the result
+                if (!screenshotCanvas) {
+                    screenshotCanvas = document.createElement('canvas');
+                }
+                screenshotCanvas.width = width;
+                screenshotCanvas.height = height;
+                var context = screenshotCanvas.getContext('2d');
+
+                // Copy the pixels to a 2D canvas
+                var imageData = context.createImageData(width, height);
+                imageData.data.set(data);
+                context.putImageData(imageData, 0, 0);
+
+                var base64Image = screenshotCanvas.toDataURL();
+
+                //Creating a link if the browser have the download attribute on the a tag, to automatically start download generated image.
+                if (("download" in document.createElement("a"))) {
+                    var a = window.document.createElement("a");
+                    a.href = base64Image;
+                    var date = new Date();
+                    var stringDate = date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate() + "-" + date.getHours() + ":" + date.getMinutes();
+                    a.setAttribute("download", "screenshot-" + stringDate);
+
+                    window.document.body.appendChild(a);
+
+                    a.addEventListener("click", () => {
+                        a.parentElement.removeChild(a);
+                    });
+                    a.click();
+
+                    //Or opening a new tab with the image if it is not possible to automatically start download.
+                } else {
+                    var newWindow = window.open("");
+                    var img = newWindow.document.createElement("img");
+                    img.src = base64Image;
+                    newWindow.document.body.appendChild(img);
+                }
+
+            };
+
+            texture.render();
+            texture.dispose();
+        }
     }
 } 

Babylon/babylon.engine.js

@@ -1121,6 +1121,12 @@
             }
         };
 
+        Engine.prototype.readPixels = function (x, y, width, height) {
+            var data = new Uint8Array(height * width * 4);
+            this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
+            return data;
+        };
+
         // Dispose
         Engine.prototype.dispose = function () {
             while (this.scenes.length) {

Babylon/babylon.engine.ts

@@ -134,7 +134,7 @@
         private _renderFunction: () => void;
 
         // Cache
-        private _loadedTexturesCache = new Array <WebGLTexture>();
+        private _loadedTexturesCache = new Array<WebGLTexture>();
         public _activeTexturesCache = new Array<Texture>();
         private _currentEffect: Effect;
         private _cullingState: boolean;
@@ -286,7 +286,7 @@
             return this._hardwareScalingLevel;
         }
 
-        public getLoadedTexturesCache():  WebGLTexture[] {
+        public getLoadedTexturesCache(): WebGLTexture[] {
             return this._loadedTexturesCache;
         }
 
@@ -1176,6 +1176,12 @@
             }
         }
 
+        public readPixels(x: number, y: number, width: number, height: number): Uint8Array {
+            var data = new Uint8Array(height * width * 4);
+            this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
+            return data;
+        }
+
         // Dispose
         public dispose(): void {
             // Release scenes