Merge pull request #2932 from BabylonJS/master

Nightly

dist/preview release/babylon.max.js

@@ -13290,7 +13290,7 @@ var BABYLON;
          */
         AbstractMesh.prototype.setPivotMatrix = function (matrix, postMultiplyPivotMatrix) {
             if (postMultiplyPivotMatrix === void 0) { postMultiplyPivotMatrix = false; }
-            this._pivotMatrix = matrix;
+            this._pivotMatrix = matrix.clone();
             this._cache.pivotMatrixUpdated = true;
             this._postMultiplyPivotMatrix = postMultiplyPivotMatrix;
             if (this._postMultiplyPivotMatrix) {
@@ -35576,6 +35576,11 @@ var BABYLON;
     var ArcRotateCameraMouseWheelInput = (function () {
         function ArcRotateCameraMouseWheelInput() {
             this.wheelPrecision = 3.0;
+            /**
+             * wheelPrecisionPercentage will be used instead of whellPrecision if different from 0.
+             * It defines the percentage of current camera.radius to use as delta when wheel is used.
+             */
+            this.wheelPrecisionPercentage = 0;
         }
         ArcRotateCameraMouseWheelInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
@@ -35586,7 +35591,7 @@ var BABYLON;
                 var event = p.event;
                 var delta = 0;
                 if (event.wheelDelta) {
-                    delta = event.wheelDelta / (_this.wheelPrecision * 40);
+                    delta = _this.wheelPrecisionPercentage ? (event.wheelDelta * 0.01) * _this.camera.radius * _this.wheelPrecisionPercentage : event.wheelDelta / (_this.wheelPrecision * 40);
                 }
                 else if (event.detail) {
                     delta = -event.detail / _this.wheelPrecision;
@@ -35617,6 +35622,9 @@ var BABYLON;
         __decorate([
             BABYLON.serialize()
         ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecision", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecisionPercentage", void 0);
         return ArcRotateCameraMouseWheelInput;
     }());
     BABYLON.ArcRotateCameraMouseWheelInput = ArcRotateCameraMouseWheelInput;
@@ -36154,6 +36162,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ArcRotateCamera.prototype, "wheelPrecisionPercentage", {
+            get: function () {
+                var mousewheel = this.inputs.attached["mousewheel"];
+                if (mousewheel)
+                    return mousewheel.wheelPrecisionPercentage;
+            },
+            set: function (value) {
+                var mousewheel = this.inputs.attached["mousewheel"];
+                if (mousewheel)
+                    mousewheel.wheelPrecisionPercentage = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(ArcRotateCamera.prototype, "bouncingBehavior", {
             get: function () {
                 return this._bouncingBehavior;
@@ -49176,7 +49198,13 @@ var BABYLON;
                 }
             }
             else {
-                BABYLON.Tools.ReadFile(sceneFilename, dataCallback, onProgress, useArrayBuffer);
+                if (BABYLON.FilesInput.FilesToLoad[sceneFilename]) {
+                    BABYLON.Tools.ReadFile(BABYLON.FilesInput.FilesToLoad[sceneFilename], dataCallback, onProgress, useArrayBuffer);
+                }
+                else {
+                    onError("Unable to find file named " + sceneFilename);
+                    return;
+                }
             }
         };
         // Public functions

dist/preview release/customConfigurations/minimalGLTFViewer/babylon.max.js

@@ -13290,7 +13290,7 @@ var BABYLON;
          */
         AbstractMesh.prototype.setPivotMatrix = function (matrix, postMultiplyPivotMatrix) {
             if (postMultiplyPivotMatrix === void 0) { postMultiplyPivotMatrix = false; }
-            this._pivotMatrix = matrix;
+            this._pivotMatrix = matrix.clone();
             this._cache.pivotMatrixUpdated = true;
             this._postMultiplyPivotMatrix = postMultiplyPivotMatrix;
             if (this._postMultiplyPivotMatrix) {
@@ -35576,6 +35576,11 @@ var BABYLON;
     var ArcRotateCameraMouseWheelInput = (function () {
         function ArcRotateCameraMouseWheelInput() {
             this.wheelPrecision = 3.0;
+            /**
+             * wheelPrecisionPercentage will be used instead of whellPrecision if different from 0.
+             * It defines the percentage of current camera.radius to use as delta when wheel is used.
+             */
+            this.wheelPrecisionPercentage = 0;
         }
         ArcRotateCameraMouseWheelInput.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
@@ -35586,7 +35591,7 @@ var BABYLON;
                 var event = p.event;
                 var delta = 0;
                 if (event.wheelDelta) {
-                    delta = event.wheelDelta / (_this.wheelPrecision * 40);
+                    delta = _this.wheelPrecisionPercentage ? (event.wheelDelta * 0.01) * _this.camera.radius * _this.wheelPrecisionPercentage : event.wheelDelta / (_this.wheelPrecision * 40);
                 }
                 else if (event.detail) {
                     delta = -event.detail / _this.wheelPrecision;
@@ -35617,6 +35622,9 @@ var BABYLON;
         __decorate([
             BABYLON.serialize()
         ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecision", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], ArcRotateCameraMouseWheelInput.prototype, "wheelPrecisionPercentage", void 0);
         return ArcRotateCameraMouseWheelInput;
     }());
     BABYLON.ArcRotateCameraMouseWheelInput = ArcRotateCameraMouseWheelInput;
@@ -36154,6 +36162,20 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(ArcRotateCamera.prototype, "wheelPrecisionPercentage", {
+            get: function () {
+                var mousewheel = this.inputs.attached["mousewheel"];
+                if (mousewheel)
+                    return mousewheel.wheelPrecisionPercentage;
+            },
+            set: function (value) {
+                var mousewheel = this.inputs.attached["mousewheel"];
+                if (mousewheel)
+                    mousewheel.wheelPrecisionPercentage = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(ArcRotateCamera.prototype, "bouncingBehavior", {
             get: function () {
                 return this._bouncingBehavior;
@@ -49176,7 +49198,13 @@ var BABYLON;
                 }
             }
             else {
-                BABYLON.Tools.ReadFile(sceneFilename, dataCallback, onProgress, useArrayBuffer);
+                if (BABYLON.FilesInput.FilesToLoad[sceneFilename]) {
+                    BABYLON.Tools.ReadFile(BABYLON.FilesInput.FilesToLoad[sceneFilename], dataCallback, onProgress, useArrayBuffer);
+                }
+                else {
+                    onError("Unable to find file named " + sceneFilename);
+                    return;
+                }
             }
         };
         // Public functions

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

@@ -149,7 +149,7 @@ declare module BABYLON.GUI {
         protected _horizontalAlignment: number;
         protected _verticalAlignment: number;
         private _isDirty;
-        private _cachedParentMeasure;
+        protected _cachedParentMeasure: Measure;
         private _paddingLeft;
         private _paddingRight;
         private _paddingTop;
@@ -433,7 +433,9 @@ declare module BABYLON.GUI {
         borderColor: string;
         background: string;
         barOffset: string | number;
+        readonly barOffsetInPixels: number;
         thumbWidth: string | number;
+        readonly thumbWidthInPixels: number;
         minimum: number;
         maximum: number;
         value: number;
@@ -638,7 +640,9 @@ declare module BABYLON.GUI {
         onFocusObservable: Observable<InputText>;
         onBlurObservable: Observable<InputText>;
         maxWidth: string | number;
+        readonly maxWidthInPixels: number;
         margin: string;
+        readonly marginInPixels: number;
         autoStretchWidth: boolean;
         thickness: number;
         focusedBackground: string;

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

@@ -2522,6 +2522,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Slider.prototype, "barOffsetInPixels", {
+                get: function () {
+                    return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Slider.prototype, "thumbWidth", {
                 get: function () {
                     return this._thumbWidth.toString(this._host);
@@ -2537,6 +2544,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Slider.prototype, "thumbWidthInPixels", {
+                get: function () {
+                    return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Slider.prototype, "minimum", {
                 get: function () {
                     return this._minimum;
@@ -3831,6 +3845,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(InputText.prototype, "maxWidthInPixels", {
+                get: function () {
+                    return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(InputText.prototype, "margin", {
                 get: function () {
                     return this._margin.toString(this._host);
@@ -3846,6 +3867,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(InputText.prototype, "marginInPixels", {
+                get: function () {
+                    return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(InputText.prototype, "autoStretchWidth", {
                 get: function () {
                     return this._autoStretchWidth;

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

@@ -154,7 +154,7 @@ declare module BABYLON.GUI {
         protected _horizontalAlignment: number;
         protected _verticalAlignment: number;
         private _isDirty;
-        private _cachedParentMeasure;
+        protected _cachedParentMeasure: Measure;
         private _paddingLeft;
         private _paddingRight;
         private _paddingTop;
@@ -438,7 +438,9 @@ declare module BABYLON.GUI {
         borderColor: string;
         background: string;
         barOffset: string | number;
+        readonly barOffsetInPixels: number;
         thumbWidth: string | number;
+        readonly thumbWidthInPixels: number;
         minimum: number;
         maximum: number;
         value: number;
@@ -643,7 +645,9 @@ declare module BABYLON.GUI {
         onFocusObservable: Observable<InputText>;
         onBlurObservable: Observable<InputText>;
         maxWidth: string | number;
+        readonly maxWidthInPixels: number;
         margin: string;
+        readonly marginInPixels: number;
         autoStretchWidth: boolean;
         thickness: number;
         focusedBackground: string;

dist/preview release/inspector/babylon.inspector.css

@@ -17,7 +17,10 @@
  * - a refresh tool - refresh the whole panel
  * - a popup tool - Open the inspector in a new panel
  * ...
- */ }
+ */
+  /*
+* 1. Set to 0 height and width, and remove border for a slider without a thumb
+*/ }
   .insp-wrapper .gutter {
     background-color: #2c2c2c; }
     .insp-wrapper .gutter.gutter-vertical:not(.blocked) {
@@ -430,79 +433,55 @@
       color: #b3b3b3;
       padding: 3px 0 3px 10px;
       margin: 6px 0 6px 0; }
-  .insp-wrapper [type='range'] {
+  .insp-wrapper input[type="range"] {
+    margin: auto;
     -webkit-appearance: none;
-    margin: 7px 0;
-    width: 50%; }
-    .insp-wrapper [type='range']:focus {
-      outline: 0; }
-      .insp-wrapper [type='range']:focus::-webkit-slider-runnable-track {
-        background: #54b3f3; }
-      .insp-wrapper [type='range']:focus::-ms-fill-lower {
-        background: #3ca9f1; }
-      .insp-wrapper [type='range']:focus::-ms-fill-upper {
-        background: #54b3f3; }
-    .insp-wrapper [type='range']::-webkit-slider-runnable-track {
-      cursor: pointer;
-      height: 5px;
-      transition: all .2s ease;
-      width: 50%;
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #3ca9f1;
-      border: 1px solid #5db0d7;
-      border-radius: 5px; }
-    .insp-wrapper [type='range']::-webkit-slider-thumb {
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #5db0d7;
-      border: 1px solid #5db0d7;
-      border-radius: 0px;
-      cursor: pointer;
-      height: 14px;
-      width: 7px;
-      -webkit-appearance: none;
-      margin-top: -5.5px; }
-    .insp-wrapper [type='range']::-moz-range-track {
-      cursor: pointer;
-      height: 5px;
-      transition: all .2s ease;
-      width: 50%;
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #3ca9f1;
-      border: 1px solid #5db0d7;
-      border-radius: 5px; }
-    .insp-wrapper [type='range']::-moz-range-thumb {
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #5db0d7;
-      border: 1px solid #5db0d7;
-      border-radius: 0px;
-      cursor: pointer;
-      height: 14px;
-      width: 7px; }
-    .insp-wrapper [type='range']::-ms-track {
-      cursor: pointer;
-      height: 5px;
-      transition: all .2s ease;
-      width: 50%;
-      background: transparent;
-      border-color: transparent;
-      border-width: 7px 0;
-      color: transparent; }
-    .insp-wrapper [type='range']::-ms-fill-lower {
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #249fef;
-      border: 1px solid #5db0d7;
-      border-radius: 10px; }
-    .insp-wrapper [type='range']::-ms-fill-upper {
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #3ca9f1;
-      border: 1px solid #5db0d7;
-      border-radius: 10px; }
-    .insp-wrapper [type='range']::-ms-thumb {
-      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(13, 13, 13, 0.2);
-      background: #5db0d7;
-      border: 1px solid #5db0d7;
-      border-radius: 0px;
-      cursor: pointer;
-      height: 14px;
-      width: 7px;
-      margin-top: 0; }
+    position: relative;
+    overflow: hidden;
+    height: 15px;
+    width: 50%;
+    cursor: pointer;
+    border-radius: 0;
+    /* iOS */ }
+  .insp-wrapper ::-webkit-slider-runnable-track {
+    background: #ddd; }
+  .insp-wrapper ::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 20px;
+    /* 1 */
+    height: 15px;
+    /* 1 */
+    background: #fff;
+    box-shadow: -100vw 0 0 100vw dodgerblue;
+    border: 0px solid #999;
+    /* 1 */ }
+  .insp-wrapper ::-moz-range-track {
+    height: 15px;
+    background: #ddd; }
+  .insp-wrapper ::-moz-range-thumb {
+    background: #fff;
+    height: 15px;
+    width: 20px;
+    border: 0px solid #999;
+    border-radius: 0 !important;
+    box-shadow: -100vw 0 0 100vw dodgerblue;
+    box-sizing: border-box; }
+  .insp-wrapper ::-ms-fill-lower {
+    background: dodgerblue; }
+  .insp-wrapper ::-ms-thumb {
+    background: #fff;
+    border: 0px solid #999;
+    height: 15px;
+    width: 20px;
+    box-sizing: border-box; }
+  .insp-wrapper ::-ms-ticks-after {
+    display: none; }
+  .insp-wrapper ::-ms-ticks-before {
+    display: none; }
+  .insp-wrapper ::-ms-track {
+    background: #ddd;
+    color: transparent;
+    height: 15px;
+    border: none; }
+  .insp-wrapper ::-ms-tooltip {
+    display: none; }

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

@@ -174,11 +174,28 @@ declare module INSPECTOR {
                     max: number;
                     step: number;
                 };
+                beta: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+                fov: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
             };
         };
         'FreeCamera': {
             type: typeof BABYLON.FreeCamera;
             properties: string[];
+            slider: {
+                fov: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
         };
         'Scene': {
             type: typeof BABYLON.Scene;
@@ -188,6 +205,13 @@ declare module INSPECTOR {
             type: typeof BABYLON.Mesh;
             properties: string[];
             format: (m: BABYLON.Mesh) => string;
+            slider: {
+                visibility: {
+                    min: number;
+                    max: number;
+                    step: number;
+                };
+            };
         };
         'StandardMaterial': {
             type: typeof BABYLON.StandardMaterial;
@@ -606,6 +630,8 @@ declare module INSPECTOR {
         private _onMouseDownHandler;
         private _onMouseDragHandler;
         private _onMouseUpHandler;
+        private _sliderfill;
+        private _slidertrack;
         private _textValue;
         /** Save previous Y mouse position */
         private _prevY;

dist/preview release/inspector/babylon.inspector.js

@@ -466,7 +466,9 @@ var INSPECTOR;
                 'checkCollisions'
             ],
             slider: {
-                alpha: { min: 0, max: 1, step: 0.01 }
+                alpha: { min: 0, max: 2 * Math.PI, step: 0.01 },
+                beta: { min: -Math.PI, max: Math.PI, step: 0.01 },
+                fov: { min: 0, max: 180, step: 1 }
             }
         },
         'FreeCamera': {
@@ -497,7 +499,10 @@ var INSPECTOR;
                 'orthoTop',
                 'orthoLeft',
                 'orthoRight'
-            ]
+            ],
+            slider: {
+                fov: { min: 0, max: 180, step: 1 }
+            }
         },
         'Scene': {
             type: BABYLON.Scene,
@@ -559,7 +564,10 @@ var INSPECTOR;
                 'checkCollisions',
                 'hasLODLevels'
             ],
-            format: function (m) { return m.name; }
+            format: function (m) { return m.name; },
+            slider: {
+                visibility: { min: 0, max: 1, step: 0.1 }
+            }
         },
         'StandardMaterial': {
             type: BABYLON.StandardMaterial,
@@ -2094,13 +2102,14 @@ var INSPECTOR;
                     INSPECTOR.Scheduler.getInstance().pause = false;
                 });
                 this._textValue = INSPECTOR.Helpers.CreateDiv('value-text', this._valueDiv);
-                this._textValue.innerText = this.value;
+                this._textValue.innerText = INSPECTOR.Helpers.Trunc(this.value).toString();
                 this._textValue.style.paddingLeft = '10px';
                 this._textValue.style.display = 'inline-block';
             }
         };
         PropertyLine.prototype._rangeHandler = function () {
             INSPECTOR.Scheduler.getInstance().pause = true;
+            //this._input.style.backgroundSize = ((parseFloat(this._input.value) - parseFloat(this._input.min)) * 100 / ( parseFloat(this._input.max) - parseFloat(this._input.min))) + '% 100%'
             this._textValue.innerText = this._input.value;
             this.validateInput(this._input.value, false);
         };

gui/src/controls/control.ts

@@ -20,7 +20,7 @@ module BABYLON.GUI {
         protected _horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
         protected _verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
         private _isDirty = true;
-        private _cachedParentMeasure = Measure.Empty();
+        protected _cachedParentMeasure = Measure.Empty();
         private _paddingLeft = new ValueAndUnit(0);
         private _paddingRight = new ValueAndUnit(0);
         private _paddingTop = new ValueAndUnit(0);

gui/src/controls/inputText.ts

@@ -27,6 +27,10 @@ module BABYLON.GUI {
             return this._maxWidth.toString(this._host);
         }
 
+        public get maxWidthInPixels(): number  {
+            return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }             
+
         public set maxWidth(value: string | number ) {
             if (this._maxWidth.toString(this._host) === value) {
                 return;
@@ -41,6 +45,10 @@ module BABYLON.GUI {
             return this._margin.toString(this._host);
         }
 
+        public get marginInPixels(): number  {
+            return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }            
+
         public set margin(value: string) {
             if (this._margin.toString(this._host) === value) {
                 return;

gui/src/controls/slider.ts

@@ -42,6 +42,10 @@ module BABYLON.GUI {
             return this._barOffset.toString(this._host);
         }
 
+        public get barOffsetInPixels(): number  {
+            return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }            
+
         public set barOffset(value: string | number ) {
             if (this._barOffset.toString(this._host) === value) {
                 return;
@@ -56,6 +60,10 @@ module BABYLON.GUI {
             return this._thumbWidth.toString(this._host);
         }
 
+        public get thumbWidthInPixels(): number  {
+            return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }          
+
         public set thumbWidth(value: string | number ) {
             if (this._thumbWidth.toString(this._host) === value) {
                 return;

inspector/sass/_slider.scss

@@ -1,118 +1,74 @@
-$track-color: #3ca9f1 !default;
-$thumb-color: $color-bot !default;
+$thumb-height: 15px;
 
-$thumb-radius: 0px !default;
-$thumb-height: 14px !default;
-$thumb-width: 7px !default;
-$thumb-shadow-size: 1px !default;
-$thumb-shadow-blur: 1px !default;
-$thumb-shadow-color: rgba(0, 0, 0, .2) !default;
-$thumb-border-width: 1px !default;
-$thumb-border-color: $color-bot !default;
-
-$track-width: 50% !default;
-$track-height: 5px !default;
-$track-shadow-size: 1px !default;
-$track-shadow-blur: 1px !default;
-$track-shadow-color: rgba(0, 0, 0, .2) !default;
-$track-border-width: 1px !default;
-$track-border-color: $color-bot !default;
-
-$track-radius: 5px !default;
-$contrast: 5% !default;
-
-@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
-  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
-}
-
-@mixin track {
+input[type="range"] { 
+  margin: auto;
+  -webkit-appearance: none;
+  position: relative;
+  overflow: hidden;
+  height: $thumb-height;
+  width: 50%;
   cursor: pointer;
-  height: $track-height;
-  transition: all .2s ease;
-  width: $track-width;
+  border-radius: 0; /* iOS */
 }
 
-@mixin thumb {
-  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
-  background: $thumb-color;
-  border: $thumb-border-width solid $thumb-border-color;
-  border-radius: $thumb-radius;
-  cursor: pointer;
-  height: $thumb-height;
-  width: $thumb-width;
+::-webkit-slider-runnable-track {
+  background: #ddd;
 }
 
-[type='range'] {
+/*
+* 1. Set to 0 height and width, and remove border for a slider without a thumb
+*/
+::-webkit-slider-thumb {
   -webkit-appearance: none;
-  margin: $thumb-height / 2 0;
-  width: $track-width;
-
-  &:focus {
-    outline: 0;
-
-    &::-webkit-slider-runnable-track {
-      background: lighten($track-color, $contrast);
-    }
-
-    &::-ms-fill-lower {
-      background: $track-color;
-    }
-
-    &::-ms-fill-upper {
-      background: lighten($track-color, $contrast);
-    }
-  }
+  width: 20px; /* 1 */
+  height: $thumb-height; /* 1 */
+  background: #fff;
+  box-shadow: -100vw 0 0 100vw dodgerblue;
+  border: 0px solid #999; /* 1 */
+}
 
-  &::-webkit-slider-runnable-track {
-    @include track;
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius;
-  }
+::-moz-range-track {
+  height: $thumb-height;
+  background: #ddd;
+}
 
-  &::-webkit-slider-thumb {
-    @include thumb;
-    -webkit-appearance: none;
-    margin-top: ((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2);
-  }
+::-moz-range-thumb {
+  background: #fff;
+  height: $thumb-height;
+  width: 20px;
+  border: 0px solid #999;
+  border-radius: 0 !important;
+  box-shadow: -100vw 0 0 100vw dodgerblue;
+  box-sizing: border-box;
+}
 
-  &::-moz-range-track {
-    @include track;
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius;
-  }
+::-ms-fill-lower { 
+  background: dodgerblue;
+}
 
-  &::-moz-range-thumb {
-    @include thumb;
-  }
+::-ms-thumb { 
+  background: #fff;
+  border: 0px solid #999;
+  height: $thumb-height;
+  width: 20px;
+  box-sizing: border-box;
+}
 
-  &::-ms-track {
-    @include track;
-    background: transparent;
-    border-color: transparent;
-    border-width: ($thumb-height / 2) 0;
-    color: transparent;
-  }
+::-ms-ticks-after { 
+  display: none; 
+}
 
-  &::-ms-fill-lower {
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: darken($track-color, $contrast);
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius * 2;
-  }
+::-ms-ticks-before { 
+  display: none; 
+}
 
-  &::-ms-fill-upper {
-    @include shadow($track-shadow-size, $track-shadow-blur, $track-shadow-color);
-    background: $track-color;
-    border: $track-border-width solid $track-border-color;
-    border-radius: $track-radius * 2;
-  }
+::-ms-track { 
+  background: #ddd;
+  color: transparent;
+  height: $thumb-height;
+  border: none;
+}
 
-  &::-ms-thumb {
-    @include thumb;
-    margin-top: 0;
-  }
+::-ms-tooltip { 
+  display: none;
 }

inspector/src/details/PropertyLine.ts

@@ -88,6 +88,9 @@ module INSPECTOR {
         private _onMouseDragHandler: EventListener;
         private _onMouseUpHandler: EventListener;
 
+        private _sliderfill: HTMLElement;
+        private _slidertrack: HTMLElement;
+
         private _textValue: HTMLElement;
         /** Save previous Y mouse position */
         private _prevY: number;
@@ -495,7 +498,7 @@ module INSPECTOR {
                 })
 
                 this._textValue = Helpers.CreateDiv('value-text', this._valueDiv);
-                this._textValue.innerText = this.value;
+                this._textValue.innerText = Helpers.Trunc(this.value).toString();
                 this._textValue.style.paddingLeft = '10px';
                 this._textValue.style.display = 'inline-block';
             }
@@ -503,6 +506,7 @@ module INSPECTOR {
 
         private _rangeHandler() {
             Scheduler.getInstance().pause = true;
+            //this._input.style.backgroundSize = ((parseFloat(this._input.value) - parseFloat(this._input.min)) * 100 / ( parseFloat(this._input.max) - parseFloat(this._input.min))) + '% 100%'
             this._textValue.innerText = this._input.value;
             this.validateInput(this._input.value, false);
         }

inspector/src/properties.ts

@@ -134,7 +134,9 @@ module INSPECTOR {
                 'checkCollisions'
             ],
             slider: {
-                alpha: {min: 0, max: 1, step: 0.01}
+                alpha: {min: 0, max: 2*Math.PI, step: 0.01},
+                beta: {min: -Math.PI, max: Math.PI, step: 0.01},
+                fov: {min: 0, max: 180, step: 1}
             }
         },
         'FreeCamera': {
@@ -165,7 +167,10 @@ module INSPECTOR {
                 'orthoTop',
                 'orthoLeft',
                 'orthoRight'
-            ]
+            ],
+            slider: {
+                fov: {min: 0, max: 180, step: 1}
+            }
         },
         'Scene': {
             type: BABYLON.Scene,
@@ -227,7 +232,10 @@ module INSPECTOR {
                 'checkCollisions',
                 'hasLODLevels'
             ],
-            format: (m: BABYLON.Mesh): string => { return m.name; }
+            format: (m: BABYLON.Mesh): string => { return m.name; },
+            slider: {
+                visibility: {min: 0, max: 1, step: 0.1}
+            }
         },
         'StandardMaterial': {
             type: BABYLON.StandardMaterial,

sandbox/index.css

@@ -54,7 +54,7 @@ a {
 #renderCanvas {
     position: absolute;
     width: 100%;
-    height: 93.3%;
+    height: 100%;
     top: 0;
     margin-bottom: 70px;
     touch-action: none;

sandbox/index.js

@@ -79,20 +79,22 @@ if (BABYLON.Engine.isSupported()) {
         if (!currentScene.activeCamera || currentScene.lights.length === 0) {
             currentScene.createDefaultCameraOrLight(true);
             // Enable camera's behaviors
-            currentScene.activeCamera.useBouncingBehavior = true;
             currentScene.activeCamera.useFramingBehavior = true;
 
             var framingBehavior = currentScene.activeCamera.getBehaviorByName("Framing");
             framingBehavior.framingTime = 0;
             framingBehavior.elevationReturnTime = -1;
 
-            var bouncingBehavior = currentScene.activeCamera.getBehaviorByName("Bouncing");
-            bouncingBehavior.autoTransitionRange = true;
-
             if (currentScene.meshes.length) {
                 var worldExtends = currentScene.getWorldExtends();
+                currentScene.activeCamera.lowerRadiusLimit = null;
                 framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
             }
+
+            currentScene.activeCamera.pinchPrecision = 200 / currentScene.activeCamera.radius;
+            currentScene.activeCamera.upperRadiusLimit = 5 * currentScene.activeCamera.radius;
+
+            currentScene.activeCamera.wheelPrecisionPercentage = 0.01;
         }
 
         currentScene.activeCamera.attachControl(canvas); 

src/Cameras/Inputs/babylon.arcRotateCameraMouseWheelInput.ts

@@ -8,14 +8,22 @@ module BABYLON {
         @serialize()
         public wheelPrecision = 3.0;
 
+        /**
+         * wheelPrecisionPercentage will be used instead of whellPrecision if different from 0. 
+         * It defines the percentage of current camera.radius to use as delta when wheel is used.
+         */
+        @serialize()
+        public wheelPrecisionPercentage = 0;
+
         public attachControl(element: HTMLElement, noPreventDefault?: boolean) {
             this._wheel = (p, s) => {
                 //sanity check - this should be a PointerWheel event.
                 if (p.type !== PointerEventTypes.POINTERWHEEL) return;
                 var event = <MouseWheelEvent>p.event;
                 var delta = 0;
+
                 if (event.wheelDelta) {
-                    delta = event.wheelDelta / (this.wheelPrecision * 40);
+                    delta = this.wheelPrecisionPercentage ? (event.wheelDelta * 0.01) * this.camera.radius * this.wheelPrecisionPercentage : event.wheelDelta / (this.wheelPrecision * 40);
                 } else if (event.detail) {
                     delta = -event.detail / this.wheelPrecision;
                 }

src/Cameras/babylon.arcRotateCamera.ts

@@ -69,118 +69,130 @@ module BABYLON {
         public panningInertia = 0.9;
 
         //-- begin properties for backward compatibility for inputs
-        public get angularSensibilityX() {
+        public get angularSensibilityX(): number {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers)
                 return pointers.angularSensibilityX;
         }
 
-        public set angularSensibilityX(value) {
+        public set angularSensibilityX(value: number) {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers) {
                 pointers.angularSensibilityX = value;
             }
         }
 
-        public get angularSensibilityY() {
+        public get angularSensibilityY(): number {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers)
                 return pointers.angularSensibilityY;
         }
 
-        public set angularSensibilityY(value) {
+        public set angularSensibilityY(value: number) {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers) {
                 pointers.angularSensibilityY = value;
             }
         }
 
-        public get pinchPrecision() {
+        public get pinchPrecision(): number {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers)
                 return pointers.pinchPrecision;
         }
 
-        public set pinchPrecision(value) {
+        public set pinchPrecision(value: number) {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers) {
                 pointers.pinchPrecision = value;
             }
         }
 
-        public get panningSensibility() {
+        public get panningSensibility(): number {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers)
                 return pointers.panningSensibility;
         }
 
-        public set panningSensibility(value) {
+        public set panningSensibility(value: number) {
             var pointers = <ArcRotateCameraPointersInput>this.inputs.attached["pointers"];
             if (pointers) {
                 pointers.panningSensibility = value;
             }
         }
 
-        public get keysUp() {
+        public get keysUp(): number[] {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 return keyboard.keysUp;
         }
 
-        public set keysUp(value) {
+        public set keysUp(value: number[]) {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 keyboard.keysUp = value;
         }
 
-        public get keysDown() {
+        public get keysDown(): number[] {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 return keyboard.keysDown;
         }
 
-        public set keysDown(value) {
+        public set keysDown(value: number[]) {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 keyboard.keysDown = value;
         }
 
-        public get keysLeft() {
+        public get keysLeft(): number[] {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 return keyboard.keysLeft;
         }
 
-        public set keysLeft(value) {
+        public set keysLeft(value: number[]) {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 keyboard.keysLeft = value;
         }
 
-        public get keysRight() {
+        public get keysRight(): number[] {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 return keyboard.keysRight;
         }
 
-        public set keysRight(value) {
+        public set keysRight(value: number[]) {
             var keyboard = <ArcRotateCameraKeyboardMoveInput>this.inputs.attached["keyboard"];
             if (keyboard)
                 keyboard.keysRight = value;
         }
 
-        public get wheelPrecision() {
+        public get wheelPrecision(): number {
             var mousewheel = <ArcRotateCameraMouseWheelInput>this.inputs.attached["mousewheel"];
             if (mousewheel)
                 return mousewheel.wheelPrecision;
         }
 
-        public set wheelPrecision(value) {
+        public set wheelPrecision(value: number) {
             var mousewheel = <ArcRotateCameraMouseWheelInput>this.inputs.attached["mousewheel"];
             if (mousewheel)
                 mousewheel.wheelPrecision = value;
         }
 
+        public get wheelPrecisionPercentage(): number {
+            var mousewheel = <ArcRotateCameraMouseWheelInput>this.inputs.attached["mousewheel"];
+            if (mousewheel)
+                return mousewheel.wheelPrecisionPercentage;
+        }
+
+        public set wheelPrecisionPercentage(value: number) {
+            var mousewheel = <ArcRotateCameraMouseWheelInput>this.inputs.attached["mousewheel"];
+            if (mousewheel)
+                mousewheel.wheelPrecisionPercentage = value;
+        }        
+
         //-- end properties for backward compatibility for inputs
 
         @serialize()

src/Loading/babylon.sceneLoader.ts

@@ -185,7 +185,12 @@
             }
             // Loading file from disk via input file or drag'n'drop
             else {
-                Tools.ReadFile(sceneFilename, dataCallback, onProgress, useArrayBuffer);
+                if (FilesInput.FilesToLoad[sceneFilename]) {
+                    Tools.ReadFile(FilesInput.FilesToLoad[sceneFilename], dataCallback, onProgress, useArrayBuffer);
+                } else {
+                    onError("Unable to find file named " + sceneFilename);
+                    return;
+                }
             }
         }
 

src/Mesh/babylon.abstractMesh.ts

@@ -1090,7 +1090,7 @@
          * Returns the AbstractMesh.
          */
         public setPivotMatrix(matrix: Matrix, postMultiplyPivotMatrix = false): AbstractMesh {
-            this._pivotMatrix = matrix;
+            this._pivotMatrix = matrix.clone();
             this._cache.pivotMatrixUpdated = true;
             this._postMultiplyPivotMatrix = postMultiplyPivotMatrix;
 

src/Tools/babylon.tools.ts

@@ -563,7 +563,7 @@
             head.appendChild(script);
         }
 
-        public static ReadFileAsDataURL(fileToLoad, callback, progressCallback): void {
+        public static ReadFileAsDataURL(fileToLoad: Blob, callback, progressCallback): void {
             var reader = new FileReader();
             reader.onload = e => {
                 //target doesn't have result from ts 1.3
@@ -573,7 +573,7 @@
             reader.readAsDataURL(fileToLoad);
         }
 
-        public static ReadFile(fileToLoad, callback, progressCallBack, useArrayBuffer?: boolean): void {
+        public static ReadFile(fileToLoad: File, callback, progressCallBack, useArrayBuffer?: boolean): void {
             var reader = new FileReader();
             reader.onerror = e => {
                 Tools.Log("Error while reading file: " + fileToLoad.name);