Fixed #2345

dist/preview release/babylon.max.js

@@ -9464,9 +9464,6 @@ var BABYLON;
             // Create the framebuffer
             var framebuffer = gl.createFramebuffer();
             this.bindUnboundFramebuffer(framebuffer);
-            var colorRenderbuffer = gl.createRenderbuffer();
-            gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbuffer);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
             var width = size.width || size;
             var height = size.height || size;
             var textures = [];
@@ -33954,21 +33951,21 @@ var BABYLON;
          * Gets the minZ used for shadow according to both the scene and the light.
          *
          * Values are fixed on directional lights as it relies on an ortho projection hence the need to convert being
-         * -1 and 1 to 0 and 1 doing (depth + min) / (min + max) -> (depth + 0.5) / (0.5 + 5) -> (depth + 0.5) * 0.5.
+         * -1 and 1 to 0 and 1 doing (depth + min) / (min + max) -> (depth + 1) / (1 + 1) -> (depth * 0.5) + 0.5.
          * @param activeCamera
          */
         DirectionalLight.prototype.getDepthMinZ = function (activeCamera) {
-            return 0.5;
+            return 1;
         };
         /**
          * Gets the maxZ used for shadow according to both the scene and the light.
          *
          * Values are fixed on directional lights as it relies on an ortho projection hence the need to convert being
-         * -1 and 1 to 0 and 1 doing (depth + min) / (min + max) -> (depth + 0.5) / (0.5 + 5) -> (depth + 0.5) * 0.5.
+         * -1 and 1 to 0 and 1 doing (depth + min) / (min + max) -> (depth + 1) / (1 + 1) -> (depth * 0.5) + 0.5.
          * @param activeCamera
          */
         DirectionalLight.prototype.getDepthMaxZ = function (activeCamera) {
-            return 1.5;
+            return 1;
         };
         return DirectionalLight;
     }(BABYLON.ShadowLight));

dist/preview release/gui/babylon.gui.d.ts

@@ -485,6 +485,14 @@ declare module BABYLON.GUI {
         private _stretch;
         private _source;
         private _autoScale;
+        private _sourceLeft;
+        private _sourceTop;
+        private _sourceWidth;
+        private _sourceHeight;
+        sourceLeft: number;
+        sourceTop: number;
+        sourceWidth: number;
+        sourceHeight: number;
         autoScale: boolean;
         stretch: number;
         domImage: HTMLImageElement;

dist/preview release/gui/babylon.gui.js

@@ -2829,9 +2829,69 @@ var BABYLON;
                 _this._loaded = false;
                 _this._stretch = Image.STRETCH_FILL;
                 _this._autoScale = false;
+                _this._sourceLeft = 0;
+                _this._sourceTop = 0;
+                _this._sourceWidth = 0;
+                _this._sourceHeight = 0;
                 _this.source = url;
                 return _this;
             }
+            Object.defineProperty(Image.prototype, "sourceLeft", {
+                get: function () {
+                    return this._sourceLeft;
+                },
+                set: function (value) {
+                    if (this._sourceLeft === value) {
+                        return;
+                    }
+                    this._sourceLeft = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image.prototype, "sourceTop", {
+                get: function () {
+                    return this._sourceTop;
+                },
+                set: function (value) {
+                    if (this._sourceTop === value) {
+                        return;
+                    }
+                    this._sourceTop = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image.prototype, "sourceWidth", {
+                get: function () {
+                    return this._sourceWidth;
+                },
+                set: function (value) {
+                    if (this._sourceWidth === value) {
+                        return;
+                    }
+                    this._sourceWidth = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Image.prototype, "sourceHeight", {
+                get: function () {
+                    return this._sourceHeight;
+                },
+                set: function (value) {
+                    if (this._sourceHeight === value) {
+                        return;
+                    }
+                    this._sourceHeight = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Image.prototype, "autoScale", {
                 get: function () {
                     return this._autoScale;
@@ -2903,6 +2963,7 @@ var BABYLON;
                     this._domImage.onload = function () {
                         _this._onImageLoaded();
                     };
+                    this._domImage.crossOrigin = "anonymous";
                     this._domImage.src = value;
                 },
                 enumerable: true,
@@ -2920,26 +2981,30 @@ var BABYLON;
             };
             Image.prototype._draw = function (parentMeasure, context) {
                 context.save();
+                var x = this._sourceLeft;
+                var y = this._sourceTop;
+                var width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
+                var height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
                 this._applyStates(context);
                 if (this._processMeasures(parentMeasure, context)) {
                     if (this._loaded) {
                         switch (this._stretch) {
                             case Image.STRETCH_NONE:
-                                context.drawImage(this._domImage, this._currentMeasure.left, this._currentMeasure.top);
+                                context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                                 break;
                             case Image.STRETCH_FILL:
-                                context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+                                context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                                 break;
                             case Image.STRETCH_UNIFORM:
-                                var hRatio = this._currentMeasure.width / this._imageWidth;
-                                var vRatio = this._currentMeasure.height / this._imageHeight;
+                                var hRatio = this._currentMeasure.width / width;
+                                var vRatio = this._currentMeasure.height / height;
                                 var ratio = Math.min(hRatio, vRatio);
-                                var centerX = (this._currentMeasure.width - this._imageWidth * ratio) / 2;
-                                var centerY = (this._currentMeasure.height - this._imageHeight * ratio) / 2;
-                                context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, this._imageWidth * ratio, this._imageHeight * ratio);
+                                var centerX = (this._currentMeasure.width - width * ratio) / 2;
+                                var centerY = (this._currentMeasure.height - height * ratio) / 2;
+                                context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
                                 break;
                             case Image.STRETCH_EXTEND:
-                                context.drawImage(this._domImage, this._currentMeasure.left, this._currentMeasure.top);
+                                context.drawImage(this._domImage, x, y, width, height, this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                                 if (this._autoScale) {
                                     this.synchronizeSizeWithContent();
                                 }

gui/src/controls/image.ts

@@ -12,6 +12,67 @@ module BABYLON.GUI {
         private _source: string;
         private _autoScale = false;
 
+        private _sourceLeft = 0;
+        private _sourceTop = 0;
+        private _sourceWidth= 0;
+        private _sourceHeight = 0;
+
+        public get sourceLeft(): number {
+            return this._sourceLeft;
+        }
+
+        public set sourceLeft(value: number) {
+            if (this._sourceLeft === value) {
+                return;
+            }
+
+            this._sourceLeft = value;
+
+            this._markAsDirty();
+        }   
+
+        public get sourceTop(): number {
+            return this._sourceTop;
+        }
+
+        public set sourceTop(value: number) {
+            if (this._sourceTop === value) {
+                return;
+            }
+
+            this._sourceTop = value;
+
+            this._markAsDirty();
+        }    
+
+        public get sourceWidth(): number {
+            return this._sourceWidth;
+        }
+
+        public set sourceWidth(value: number) {
+            if (this._sourceWidth === value) {
+                return;
+            }
+
+            this._sourceWidth = value;
+
+            this._markAsDirty();
+        }  
+
+        public get sourceHeight(): number {
+            return this._sourceHeight;
+        }
+
+        public set sourceHeight(value: number) {
+            if (this._sourceHeight === value) {
+                return;
+            }
+
+            this._sourceHeight = value;
+
+            this._markAsDirty();
+        }          
+
         public get autoScale(): boolean {
             return this._autoScale;
         }
@@ -84,7 +145,7 @@ module BABYLON.GUI {
             this._domImage.onload = () => {
                 this._onImageLoaded();
             }
-            
+            this._domImage.crossOrigin = "anonymous";
             this._domImage.src = value;
         }
 
@@ -108,31 +169,38 @@ module BABYLON.GUI {
         }
 
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {
-            context.save();
+            context.save();          
+            let x = this._sourceLeft;
+            let y = this._sourceTop;
+
+            let width = this._sourceWidth ? this._sourceWidth : this._imageWidth;
+            let height = this._sourceHeight ? this._sourceHeight : this._imageHeight;
 
             this._applyStates(context);
             if (this._processMeasures(parentMeasure, context)) {
                 if (this._loaded) {
                     switch (this._stretch) {
                         case Image.STRETCH_NONE:
-                            context.drawImage(this._domImage, this._currentMeasure.left, this._currentMeasure.top);
+                            context.drawImage(this._domImage, x, y, width, height,
+                                              this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                             break;
                         case Image.STRETCH_FILL:
-                            context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight, 
+                            context.drawImage(this._domImage, x, y, width, height, 
                                                             this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                             break;
                         case Image.STRETCH_UNIFORM:
-                            var hRatio = this._currentMeasure.width  / this._imageWidth;
-                            var vRatio =  this._currentMeasure.height / this._imageHeight;
+                            var hRatio = this._currentMeasure.width  / width;
+                            var vRatio =  this._currentMeasure.height / height;
                             var ratio = Math.min(hRatio, vRatio);
-                            var centerX = (this._currentMeasure.width - this._imageWidth * ratio) / 2;
-                            var centerY = (this._currentMeasure.height - this._imageHeight * ratio) / 2; 
+                            var centerX = (this._currentMeasure.width - width * ratio) / 2;
+                            var centerY = (this._currentMeasure.height - height * ratio) / 2; 
 
-                            context.drawImage(this._domImage, 0, 0, this._imageWidth, this._imageHeight,
-                                                            this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, this._imageWidth * ratio, this._imageHeight * ratio);
+                            context.drawImage(this._domImage, x, y, width, height,
+                                                            this._currentMeasure.left + centerX, this._currentMeasure.top + centerY, width * ratio, height * ratio);
                             break;
                         case Image.STRETCH_EXTEND:
-                            context.drawImage(this._domImage, this._currentMeasure.left, this._currentMeasure.top);
+                            context.drawImage(this._domImage, x, y, width, height,
+                                              this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
                             if (this._autoScale) {
                                 this.synchronizeSizeWithContent();
                             }