Merge

.vscode/settings.json

@@ -11,7 +11,7 @@
         "**/node_modules": true,
         "**/temp": true,
         "**/.temp": true,
-        "**/.d.ts": true,
+        "**/*.d.ts": true,
         "**/*.js.map": true,
         "**/*.js.fx": true,
         "**/*.js": { 

dist/preview release/babylon.max.js

@@ -5273,7 +5273,18 @@ var BABYLON;
             screenshotCanvas.width = width;
             screenshotCanvas.height = height;
             var renderContext = screenshotCanvas.getContext("2d");
-            renderContext.drawImage(engine.getRenderingCanvas(), 0, 0, width, height);
+            var ratio = engine.getRenderWidth() / engine.getRenderHeight();
+            var newWidth = width;
+            var newHeight = newWidth / ratio;
+            if (newHeight > height) {
+                newHeight = height;
+                newWidth = newHeight * ratio;
+            }
+            var offsetX = Math.max(0, width - newWidth) / 2;
+            var offsetY = Math.max(0, height - newHeight) / 2;
+            renderContext.fillStyle = camera.getScene().clearColor.toHexString();
+            renderContext.fillRect(0, 0, width, height);
+            renderContext.drawImage(engine.getRenderingCanvas(), offsetX, offsetY, newWidth, newHeight);
             Tools.EncodeScreenshotCanvasData(successCallback, mimeType);
         };
         Tools.CreateScreenshotUsingRenderTarget = function (engine, camera, size, successCallback, mimeType) {
@@ -7275,8 +7286,8 @@ var BABYLON;
          * @param {number} [requiredHeight] - the height required for rendering. If not provided the rendering canvas' height is used.
          */
         Engine.prototype.setViewport = function (viewport, requiredWidth, requiredHeight) {
-            var width = requiredWidth || (navigator.isCocoonJS ? window.innerWidth : this._renderingCanvas.width);
-            var height = requiredHeight || (navigator.isCocoonJS ? window.innerHeight : this._renderingCanvas.height);
+            var width = requiredWidth || (navigator.isCocoonJS ? window.innerWidth : this.getRenderWidth());
+            var height = requiredHeight || (navigator.isCocoonJS ? window.innerHeight : this.getRenderHeight());
             var x = viewport.x || 0;
             var y = viewport.y || 0;
             this._cachedViewport = viewport;
@@ -24257,12 +24268,16 @@ var BABYLON;
         };
         RenderTargetTexture.prototype.render = function (useCameraPostProcess, dumpForDebug) {
             var scene = this.getScene();
+            var engine = scene.getEngine();
             if (this.useCameraPostProcesses !== undefined) {
                 useCameraPostProcess = this.useCameraPostProcesses;
             }
             if (this.activeCamera && this.activeCamera !== scene.activeCamera) {
                 scene.setTransformMatrix(this.activeCamera.getViewMatrix(), this.activeCamera.getProjectionMatrix(true));
             }
+            else {
+                scene.setTransformMatrix(scene.activeCamera.getViewMatrix(), scene.activeCamera.getProjectionMatrix(true));
+            }
             if (this._waitingRenderList) {
                 this.renderList = [];
                 for (var index = 0; index < this._waitingRenderList.length; index++) {
@@ -24323,6 +24338,7 @@ var BABYLON;
             if (this.activeCamera && this.activeCamera !== scene.activeCamera) {
                 scene.setTransformMatrix(scene.activeCamera.getViewMatrix(), scene.activeCamera.getProjectionMatrix(true));
             }
+            engine.setViewport(scene.activeCamera.viewport);
             scene.resetCachedMaterial();
         };
         RenderTargetTexture.prototype.renderToTarget = function (faceIndex, currentRenderList, currentRenderListLength, useCameraPostProcess, dumpForDebug) {
@@ -24337,6 +24353,12 @@ var BABYLON;
                     engine.bindFramebuffer(this._texture);
                 }
             }
+            if (this.activeCamera) {
+                engine.setViewport(this.activeCamera.viewport);
+            }
+            else {
+                engine.setViewport(scene.activeCamera.viewport);
+            }
             this.onBeforeRenderObservable.notifyObservers(faceIndex);
             // Clear
             if (this.onClearObservable.hasObservers()) {

src/Materials/Textures/babylon.renderTargetTexture.ts

@@ -207,6 +207,7 @@
 
         public render(useCameraPostProcess?: boolean, dumpForDebug?: boolean) {
             var scene = this.getScene();
+            var engine = scene.getEngine();
 
             if (this.useCameraPostProcesses !== undefined) {
                 useCameraPostProcess = this.useCameraPostProcesses;
@@ -214,6 +215,8 @@
 
             if (this.activeCamera && this.activeCamera !== scene.activeCamera) {
                 scene.setTransformMatrix(this.activeCamera.getViewMatrix(), this.activeCamera.getProjectionMatrix(true));
+            } else {
+                scene.setTransformMatrix(scene.activeCamera.getViewMatrix(), scene.activeCamera.getProjectionMatrix(true));               
             }
 
             if (this._waitingRenderList) {
@@ -289,6 +292,7 @@
             if (this.activeCamera && this.activeCamera !== scene.activeCamera) {
                 scene.setTransformMatrix(scene.activeCamera.getViewMatrix(), scene.activeCamera.getProjectionMatrix(true));
             }
+            engine.setViewport(scene.activeCamera.viewport);
 
             scene.resetCachedMaterial();
         }
@@ -305,6 +309,13 @@
                     engine.bindFramebuffer(this._texture);
                 }
             }
+            
+            if (this.activeCamera) {
+                engine.setViewport(this.activeCamera.viewport);
+            }
+            else {
+                engine.setViewport(scene.activeCamera.viewport);
+            }
 
             this.onBeforeRenderObservable.notifyObservers(faceIndex);
 

src/Tools/babylon.tools.ts

@@ -709,12 +709,26 @@
             if (!screenshotCanvas) {
                 screenshotCanvas = document.createElement('canvas');
             }
+            
             screenshotCanvas.width = width;
             screenshotCanvas.height = height;
 
             var renderContext = screenshotCanvas.getContext("2d");
 
-            renderContext.drawImage(engine.getRenderingCanvas(), 0, 0, width, height);
+            var ratio = engine.getRenderWidth() / engine.getRenderHeight();
+            var newWidth = width;
+            var newHeight = newWidth / ratio;
+            if (newHeight > height) {
+                newHeight = height;
+                newWidth = newHeight * ratio;
+            }
+
+            var offsetX = Math.max(0, width - newWidth) / 2;
+            var offsetY = Math.max(0, height - newHeight) / 2;
+
+            renderContext.fillStyle = camera.getScene().clearColor.toHexString();
+            renderContext.fillRect(0, 0, width, height);
+            renderContext.drawImage(engine.getRenderingCanvas(), offsetX, offsetY, newWidth, newHeight);
 
             Tools.EncodeScreenshotCanvasData(successCallback, mimeType);
         }