Nightly

Playground/index.html

@@ -52,7 +52,7 @@
         <!-- Extensions -->
         <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
         <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js" async></script>
-        <script src="https://www.babylontoolkit.com/playground/scripts/babylon.navmesh.js" async></script>
+        <script src="https://www.babylontoolkit.com/playground/scripts/babylon.navmesh.js"></script>
         <script src="https://www.babylontoolkit.com/playground/scripts/babylon.manager.js"></script>
                                
         <link href="css/index.css" rel="stylesheet" />

dist/preview release/babylon.max.js

@@ -19115,10 +19115,10 @@ var BABYLON;
          * Returns the TransformNode.
          */
         TransformNode.prototype.setParent = function (node) {
-            if (node === null && this.parent === null) {
+            if (!node && !this.parent) {
                 return this;
             }
-            if (node === null) {
+            if (!node) {
                 var rotation = BABYLON.Tmp.Quaternion[0];
                 var position = BABYLON.Tmp.Vector3[0];
                 var scale = BABYLON.Tmp.Vector3[1];
@@ -51379,8 +51379,13 @@ var BABYLON;
                 this._stopped = true;
                 return false;
             }
-            var returnValue = true;
             var keys = this._animation.getKeys();
+            // Return immediately if there is only one key frame.
+            if (keys.length === 1) {
+                this.setValue(keys[0].value, weight);
+                return !loop;
+            }
+            var returnValue = true;
             // Adding a start key at frame 0 if missing
             if (keys[0].frame !== 0) {
                 var newKey = { frame: 0, value: keys[0].value };

dist/preview release/babylon.no-module.max.js

@@ -19082,10 +19082,10 @@ var BABYLON;
          * Returns the TransformNode.
          */
         TransformNode.prototype.setParent = function (node) {
-            if (node === null && this.parent === null) {
+            if (!node && !this.parent) {
                 return this;
             }
-            if (node === null) {
+            if (!node) {
                 var rotation = BABYLON.Tmp.Quaternion[0];
                 var position = BABYLON.Tmp.Vector3[0];
                 var scale = BABYLON.Tmp.Vector3[1];
@@ -51346,8 +51346,13 @@ var BABYLON;
                 this._stopped = true;
                 return false;
             }
-            var returnValue = true;
             var keys = this._animation.getKeys();
+            // Return immediately if there is only one key frame.
+            if (keys.length === 1) {
+                this.setValue(keys[0].value, weight);
+                return !loop;
+            }
+            var returnValue = true;
             // Adding a start key at frame 0 if missing
             if (keys[0].frame !== 0) {
                 var newKey = { frame: 0, value: keys[0].value };

dist/preview release/es6.js

@@ -19082,10 +19082,10 @@ var BABYLON;
          * Returns the TransformNode.
          */
         TransformNode.prototype.setParent = function (node) {
-            if (node === null && this.parent === null) {
+            if (!node && !this.parent) {
                 return this;
             }
-            if (node === null) {
+            if (!node) {
                 var rotation = BABYLON.Tmp.Quaternion[0];
                 var position = BABYLON.Tmp.Vector3[0];
                 var scale = BABYLON.Tmp.Vector3[1];
@@ -51346,8 +51346,13 @@ var BABYLON;
                 this._stopped = true;
                 return false;
             }
-            var returnValue = true;
             var keys = this._animation.getKeys();
+            // Return immediately if there is only one key frame.
+            if (keys.length === 1) {
+                this.setValue(keys[0].value, weight);
+                return !loop;
+            }
+            var returnValue = true;
             // Adding a start key at frame 0 if missing
             if (keys[0].frame !== 0) {
                 var newKey = { frame: 0, value: keys[0].value };

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

@@ -1195,6 +1195,7 @@ declare module BABYLON.GUI {
         private _minimum;
         private _maximum;
         private _value;
+        private _isVertical;
         private _background;
         private _borderColor;
         private _barOffset;
@@ -1220,6 +1221,8 @@ declare module BABYLON.GUI {
         maximum: number;
         /** Gets or sets current value */
         value: number;
+        /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
+        isVertical: boolean;
         /** Gets or sets a boolean indicating if the thumb should be round or square */
         isThumbCircle: boolean;
         /** Gets or sets a value indicating if the thumb can go over main bar extends */
@@ -1230,6 +1233,7 @@ declare module BABYLON.GUI {
          */
         constructor(name?: string | undefined);
         protected _getTypeName(): string;
+        protected _getThumbThickness(type: string, backgroundLength: number): number;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
         private _updateValueFromPointer(x, y);

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

@@ -3738,10 +3738,11 @@ var BABYLON;
             function Slider(name) {
                 var _this = _super.call(this, name) || this;
                 _this.name = name;
-                _this._thumbWidth = new GUI.ValueAndUnit(30, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
+                _this._thumbWidth = new GUI.ValueAndUnit(20, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
                 _this._minimum = 0;
                 _this._maximum = 100;
                 _this._value = 50;
+                _this._isVertical = false;
                 _this._background = "black";
                 _this._borderColor = "white";
                 _this._barOffset = new GUI.ValueAndUnit(5, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
@@ -3881,6 +3882,21 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Slider.prototype, "isVertical", {
+                /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
+                get: function () {
+                    return this._isVertical;
+                },
+                set: function (value) {
+                    if (this._isVertical === value) {
+                        return;
+                    }
+                    this._isVertical = value;
+                    this._markAsDirty();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Slider.prototype, "isThumbCircle", {
                 /** Gets or sets a boolean indicating if the thumb should be round or square */
                 get: function () {
@@ -3914,24 +3930,80 @@ var BABYLON;
             Slider.prototype._getTypeName = function () {
                 return "Slider";
             };
+            Slider.prototype._getThumbThickness = function (type, backgroundLength) {
+                var thumbThickness = 0;
+                switch (type) {
+                    case "circle":
+                        if (this._thumbWidth.isPixel) {
+                            thumbThickness = Math.max(this._thumbWidth.getValue(this._host), backgroundLength);
+                        }
+                        else {
+                            thumbThickness = backgroundLength * this._thumbWidth.getValue(this._host);
+                        }
+                        break;
+                    case "rectangle":
+                        if (this._thumbWidth.isPixel) {
+                            thumbThickness = Math.min(this._thumbWidth.getValue(this._host), backgroundLength);
+                        }
+                        else {
+                            thumbThickness = backgroundLength * this._thumbWidth.getValue(this._host);
+                        }
+                }
+                return thumbThickness;
+            };
             Slider.prototype._draw = function (parentMeasure, context) {
                 context.save();
                 this._applyStates(context);
                 if (this._processMeasures(parentMeasure, context)) {
                     // Main bar
-                    var effectiveThumbWidth;
-                    var effectiveBarOffset;
-                    if (this._thumbWidth.isPixel) {
-                        effectiveThumbWidth = Math.min(this._thumbWidth.getValue(this._host), this._currentMeasure.width);
+                    var effectiveBarOffset = 0;
+                    var type = this.isThumbCircle ? "circle" : "rectangle";
+                    var left = this._currentMeasure.left;
+                    var top = this._currentMeasure.top;
+                    var width = this._currentMeasure.width;
+                    var height = this._currentMeasure.height;
+                    var backgroundBoxLength = Math.max(this._currentMeasure.width, this._currentMeasure.height);
+                    var backgroundBoxThickness = Math.min(this._currentMeasure.width, this._currentMeasure.height);
+                    var effectiveThumbThickness = this._getThumbThickness(type, backgroundBoxThickness);
+                    backgroundBoxLength -= effectiveThumbThickness;
+                    var radius = 0;
+                    //throw error when height is less than width for vertical slider
+                    if ((this._isVertical && this._currentMeasure.height < this._currentMeasure.width)) {
+                        console.error("Height should be greater than width");
+                        return;
+                    }
+                    if (this._barOffset.isPixel) {
+                        effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), backgroundBoxThickness);
                     }
                     else {
-                        effectiveThumbWidth = this._currentMeasure.width * this._thumbWidth.getValue(this._host);
+                        effectiveBarOffset = backgroundBoxThickness * this._barOffset.getValue(this._host);
                     }
-                    if (this._barOffset.isPixel) {
-                        effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._currentMeasure.height);
+                    backgroundBoxThickness -= (effectiveBarOffset * 2);
+                    if (this._isVertical) {
+                        left += effectiveBarOffset;
+                        if (!this.isThumbClamped) {
+                            top += (effectiveThumbThickness / 2);
+                        }
+                        height = backgroundBoxLength;
+                        width = backgroundBoxThickness;
                     }
                     else {
-                        effectiveBarOffset = this._currentMeasure.height * this._barOffset.getValue(this._host);
+                        top += effectiveBarOffset;
+                        if (!this.isThumbClamped) {
+                            left += (effectiveThumbThickness / 2);
+                        }
+                        height = backgroundBoxThickness;
+                        width = backgroundBoxLength;
+                    }
+                    if (this.isThumbClamped && this.isThumbCircle) {
+                        if (this._isVertical)
+                            top += (effectiveThumbThickness / 2);
+                        else
+                            left += (effectiveThumbThickness / 2);
+                        radius = backgroundBoxThickness / 2;
+                    }
+                    else {
+                        radius = (effectiveThumbThickness - effectiveBarOffset) / 2;
                     }
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                         context.shadowColor = this.shadowColor;
@@ -3939,15 +4011,39 @@ var BABYLON;
                         context.shadowOffsetX = this.shadowOffsetX;
                         context.shadowOffsetY = this.shadowOffsetY;
                     }
-                    var left = this._currentMeasure.left;
-                    var width = this._currentMeasure.width - effectiveThumbWidth;
-                    var thumbPosition = ((this._value - this._minimum) / (this._maximum - this._minimum)) * width;
+                    var thumbPosition = (this._isVertical) ? ((this._maximum - this._value) / (this._maximum - this._minimum)) * backgroundBoxLength : ((this._value - this._minimum) / (this._maximum - this._minimum)) * backgroundBoxLength;
                     context.fillStyle = this._background;
-                    if (this.isThumbClamped) {
-                        context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width + effectiveThumbWidth, this._currentMeasure.height - effectiveBarOffset * 2);
+                    if (this._isVertical) {
+                        if (this.isThumbClamped) {
+                            if (this.isThumbCircle) {
+                                context.beginPath();
+                                context.arc(left + backgroundBoxThickness / 2, top, radius, Math.PI, 2 * Math.PI);
+                                context.fill();
+                                context.fillRect(left, top, width, height);
+                            }
+                            else {
+                                context.fillRect(left, top, width, height + effectiveThumbThickness);
+                            }
+                        }
+                        else {
+                            context.fillRect(left, top, width, height);
+                        }
                     }
                     else {
-                        context.fillRect(left + (effectiveThumbWidth / 2), this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
+                        if (this.isThumbClamped) {
+                            if (this.isThumbCircle) {
+                                context.beginPath();
+                                context.arc(left + backgroundBoxLength, top + (backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
+                                context.fill();
+                                context.fillRect(left, top, width, height);
+                            }
+                            else {
+                                context.fillRect(left, top, width + effectiveThumbThickness, height);
+                            }
+                        }
+                        else {
+                            context.fillRect(left, top, width, height);
+                        }
                     }
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                         context.shadowBlur = 0;
@@ -3955,11 +4051,37 @@ var BABYLON;
                         context.shadowOffsetY = 0;
                     }
                     context.fillStyle = this.color;
-                    if (this.isThumbClamped) {
-                        context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, thumbPosition, this._currentMeasure.height - effectiveBarOffset * 2);
+                    if (this._isVertical) {
+                        if (this.isThumbClamped) {
+                            if (this.isThumbCircle) {
+                                context.beginPath();
+                                context.arc(left + backgroundBoxThickness / 2, top + backgroundBoxLength, radius, 0, 2 * Math.PI);
+                                context.fill();
+                                context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
+                            }
+                            else {
+                                context.fillRect(left, top + thumbPosition, width, this._currentMeasure.height - thumbPosition);
+                            }
+                        }
+                        else {
+                            context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
+                        }
                     }
                     else {
-                        context.fillRect(left + (effectiveThumbWidth / 2), this._currentMeasure.top + effectiveBarOffset, thumbPosition, this._currentMeasure.height - effectiveBarOffset * 2);
+                        if (this.isThumbClamped) {
+                            if (this.isThumbCircle) {
+                                context.beginPath();
+                                context.arc(left, top + backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
+                                context.fill();
+                                context.fillRect(left, top, thumbPosition, height);
+                            }
+                            else {
+                                context.fillRect(left, top, thumbPosition, height);
+                            }
+                        }
+                        else {
+                            context.fillRect(left, top, thumbPosition, height);
+                        }
                     }
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                         context.shadowColor = this.shadowColor;
@@ -3969,7 +4091,12 @@ var BABYLON;
                     }
                     if (this._isThumbCircle) {
                         context.beginPath();
-                        context.arc(left + thumbPosition + (effectiveThumbWidth / 2), this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
+                        if (this._isVertical) {
+                            context.arc(left + backgroundBoxThickness / 2, top + thumbPosition, radius, 0, 2 * Math.PI);
+                        }
+                        else {
+                            context.arc(left + thumbPosition, top + (backgroundBoxThickness / 2), radius, 0, 2 * Math.PI);
+                        }
                         context.fill();
                         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                             context.shadowBlur = 0;
@@ -3980,14 +4107,24 @@ var BABYLON;
                         context.stroke();
                     }
                     else {
-                        context.fillRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                        if (this._isVertical) {
+                            context.fillRect(left - effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, effectiveThumbThickness);
+                        }
+                        else {
+                            context.fillRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, effectiveThumbThickness, this._currentMeasure.height);
+                        }
                         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                             context.shadowBlur = 0;
                             context.shadowOffsetX = 0;
                             context.shadowOffsetY = 0;
                         }
                         context.strokeStyle = this._borderColor;
-                        context.strokeRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                        if (this._isVertical) {
+                            context.strokeRect(left - effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, effectiveThumbThickness);
+                        }
+                        else {
+                            context.strokeRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, effectiveThumbThickness, this._currentMeasure.height);
+                        }
                     }
                 }
                 context.restore();
@@ -3996,8 +4133,14 @@ var BABYLON;
                 if (this.rotation != 0) {
                     this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
                     x = this._transformedPosition.x;
+                    y = this._transformedPosition.y;
+                }
+                if (this._isVertical) {
+                    this.value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
+                }
+                else {
+                    this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
                 }
-                this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
             };
             Slider.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
                 if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {

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

@@ -1200,6 +1200,7 @@ declare module BABYLON.GUI {
         private _minimum;
         private _maximum;
         private _value;
+        private _isVertical;
         private _background;
         private _borderColor;
         private _barOffset;
@@ -1225,6 +1226,8 @@ declare module BABYLON.GUI {
         maximum: number;
         /** Gets or sets current value */
         value: number;
+        /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
+        isVertical: boolean;
         /** Gets or sets a boolean indicating if the thumb should be round or square */
         isThumbCircle: boolean;
         /** Gets or sets a value indicating if the thumb can go over main bar extends */
@@ -1235,6 +1238,7 @@ declare module BABYLON.GUI {
          */
         constructor(name?: string | undefined);
         protected _getTypeName(): string;
+        protected _getThumbThickness(type: string, backgroundLength: number): number;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private _pointerIsDown;
         private _updateValueFromPointer(x, y);

dist/preview release/viewer/babylon.viewer.max.js

@@ -19203,10 +19203,10 @@ var BABYLON;
          * Returns the TransformNode.
          */
         TransformNode.prototype.setParent = function (node) {
-            if (node === null && this.parent === null) {
+            if (!node && !this.parent) {
                 return this;
             }
-            if (node === null) {
+            if (!node) {
                 var rotation = BABYLON.Tmp.Quaternion[0];
                 var position = BABYLON.Tmp.Vector3[0];
                 var scale = BABYLON.Tmp.Vector3[1];
@@ -51467,8 +51467,13 @@ var BABYLON;
                 this._stopped = true;
                 return false;
             }
-            var returnValue = true;
             var keys = this._animation.getKeys();
+            // Return immediately if there is only one key frame.
+            if (keys.length === 1) {
+                this.setValue(keys[0].value, weight);
+                return !loop;
+            }
+            var returnValue = true;
             // Adding a start key at frame 0 if missing
             if (keys[0].frame !== 0) {
                 var newKey = { frame: 0, value: keys[0].value };

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 - Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
-- New `serialize` and `Parse` functions to serialize and parse all procedural textures from the Procedural Textures Library ([julien-moreau](https://github.com/julien-moreau))
+- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, rotation, scale, and bounding box ([TrevorDev](https://github.com/TrevorDev))
 - Particle system improvements ([Deltakosh](https://github.com/deltakosh))
   - Improved CPU particles rendering performance (up to x2 on low end devices)
   - Added support for `isBillboardBased`. [Doc](http://doc.babylonjs.com/babylon101/particles#alignment)
@@ -37,8 +37,8 @@
 - Get a root mesh from an asset container, load a mesh from a file with a single string url ([TrevorDev](https://github.com/TrevorDev))
 - UtilityLayer class to render another scene as a layer on top of an existing scene ([TrevorDev](https://github.com/TrevorDev))
 - AnimationGroup has now onAnimationGroupEnd observable ([RaananW](https://github.com/RaananW))
-- PointerDragBehavior, SixDofDragBehavior and MultiPointerScaleBehavior to enable smooth drag and drop/scaling with mouse or 6dof controller on a mesh ([TrevorDev](https://github.com/TrevorDev))
-- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, rotation, scale, and bounding box ([TrevorDev](https://github.com/TrevorDev))
+- New behaviors: PointerDragBehavior, SixDofDragBehavior and MultiPointerScaleBehavior to enable smooth drag and drop/scaling with mouse or 6dof controller on a mesh ([TrevorDev](https://github.com/TrevorDev))
+- New `serialize` and `Parse` functions to serialize and parse all procedural textures from the Procedural Textures Library ([julien-moreau](https://github.com/julien-moreau))
 - Added a new `mesh.ignoreNonUniformScaling` to turn off non uniform scaling compensation ([Deltakosh](https://github.com/deltakosh))
 - AssetsManager tasks will only run when their state is INIT. It is now possible to remove a task from the assets manager ([RaananW](https://github.com/RaananW))
 - Added sprite isVisible field ([TrevorDev](https://github.com/TrevorDev))
@@ -53,6 +53,7 @@
 - Added ```onUserActionRequestedObservable``` to workaround and detect autoplay video policy restriction on VideoTexture ([sebavan](http://www.github.com/sebavan))
 - `Sound` now accepts `MediaStream` as source to enable easier WebAudio and WebRTC integrations ([menduz](https://github.com/menduz))
 - Vector x, y and z constructor parameters are now optional and default to 0 ([TrevorDev](https://github.com/TrevorDev))
+- New vertical mode for sliders in 2D GUI. [Demo](https://www.babylonjs-playground.com/#U9AC0N#53) ([Saket Saurabh](https://github.com/ssaket))
 
 ### glTF Loader