Merge pull request #2754 from BabylonJS/master

nightly

Tools/Gulp/config.json

@@ -593,10 +593,11 @@
                 "geometry.fragment"
             ],
             "shaderIncludes": [
+                "mrtFragmentDeclaration",
                 "bones300Declaration",
                 "instances300Declaration",
                 "instancesVertex",
-                "bonesVertex"
+                "bonesVertex"               
             ]
         },
         "postProcesses" : 

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

@@ -636,7 +636,7 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
-    class KeyOptions {
+    class KeyPropertySet {
         width?: string;
         height?: string;
         paddingLeft?: string;
@@ -657,8 +657,8 @@ declare module BABYLON.GUI {
         defaultButtonColor: string;
         defaultButtonBackground: string;
         protected _getTypeName(): string;
-        private _createKey(key, options?);
-        addKeysRow(keys: Array<string>, options?: Array<KeyOptions>): void;
+        private _createKey(key, propertySet?);
+        addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void;
         private _connectedInputText;
         private _onFocusObserver;
         private _onBlurObserver;

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

@@ -4106,12 +4106,12 @@ var BABYLON;
 (function (BABYLON) {
     var GUI;
     (function (GUI) {
-        var KeyOptions = (function () {
-            function KeyOptions() {
+        var KeyPropertySet = (function () {
+            function KeyPropertySet() {
             }
-            return KeyOptions;
+            return KeyPropertySet;
         }());
-        GUI.KeyOptions = KeyOptions;
+        GUI.KeyPropertySet = KeyPropertySet;
         var VirtualKeyboard = (function (_super) {
             __extends(VirtualKeyboard, _super);
             function VirtualKeyboard() {
@@ -4130,17 +4130,17 @@ var BABYLON;
             VirtualKeyboard.prototype._getTypeName = function () {
                 return "VirtualKeyboard";
             };
-            VirtualKeyboard.prototype._createKey = function (key, options) {
+            VirtualKeyboard.prototype._createKey = function (key, propertySet) {
                 var _this = this;
                 var button = GUI.Button.CreateSimpleButton(key, key);
-                button.width = options && options.width ? options.width : this.defaultButtonWidth;
-                button.height = options && options.height ? options.height : this.defaultButtonHeight;
-                button.color = options && options.color ? options.color : this.defaultButtonColor;
-                button.background = options && options.background ? options.background : this.defaultButtonBackground;
-                button.paddingLeft = options && options.paddingLeft ? options.paddingLeft : this.defaultButtonPaddingLeft;
-                button.paddingRight = options && options.paddingRight ? options.paddingRight : this.defaultButtonPaddingRight;
-                button.paddingTop = options && options.paddingTop ? options.paddingTop : this.defaultButtonPaddingTop;
-                button.paddingBottom = options && options.paddingBottom ? options.paddingBottom : this.defaultButtonPaddingBottom;
+                button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
+                button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
+                button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
+                button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
+                button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
+                button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
+                button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
+                button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
                 button.thickness = 0;
                 button.isFocusInvisible = true;
                 button.onPointerUpObservable.add(function () {
@@ -4148,15 +4148,16 @@ var BABYLON;
                 });
                 return button;
             };
-            VirtualKeyboard.prototype.addKeysRow = function (keys, options) {
+            VirtualKeyboard.prototype.addKeysRow = function (keys, propertySets) {
                 var panel = new GUI.StackPanel();
                 panel.isVertical = false;
+                panel.isFocusInvisible = true;
                 for (var i = 0; i < keys.length; i++) {
-                    var keyOptions = null;
-                    if (options && options.length === keys.length) {
-                        keyOptions = options[i];
+                    var properties = null;
+                    if (propertySets && propertySets.length === keys.length) {
+                        properties = propertySets[i];
                     }
-                    panel.addControl(this._createKey(keys[i], keyOptions));
+                    panel.addControl(this._createKey(keys[i], properties));
                 }
                 this.addControl(panel);
             };

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

@@ -636,7 +636,7 @@ declare module BABYLON.GUI {
 
 /// <reference path="../../../dist/preview release/babylon.d.ts" />
 declare module BABYLON.GUI {
-    class KeyOptions {
+    class KeyPropertySet {
         width?: string;
         height?: string;
         paddingLeft?: string;
@@ -657,8 +657,8 @@ declare module BABYLON.GUI {
         defaultButtonColor: string;
         defaultButtonBackground: string;
         protected _getTypeName(): string;
-        private _createKey(key, options?);
-        addKeysRow(keys: Array<string>, options?: Array<KeyOptions>): void;
+        private _createKey(key, propertySet?);
+        addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void;
         private _connectedInputText;
         private _onFocusObserver;
         private _onBlurObserver;

dist/preview release/what's new.md

@@ -11,6 +11,7 @@
  - Framing ([deltakosh](https://github.com/deltakosh))
  - Bouncing ([deltakosh](https://github.com/deltakosh))
 - New InputText for Babylon.GUI. [Doc here](http://doc.babylonjs.com/overviews/gui#inputtext) ([deltakosh](https://github.com/deltakosh))
+- New VirtualKeyboard for Babylon.GUI. [Doc here](http://doc.babylonjs.com/overviews/gui#virtualkeyboard) ([deltakosh](https://github.com/deltakosh) / [adam](https://github.com/abow))
 - Added support for depth pre-pass rendering. [Doc here](http://doc.babylonjs.com/tutorials/transparency_and_how_meshes_are_rendered#depth-pre-pass-meshes) ([deltakosh](https://github.com/deltakosh))
 
 ## Updates

gui/src/controls/virtualKeyboard.ts

@@ -2,7 +2,7 @@
 
 module BABYLON.GUI {
 
-    export class KeyOptions {
+    export class KeyPropertySet {
         width?: string;
         height?: string;
         paddingLeft?: string;
@@ -31,18 +31,18 @@ module BABYLON.GUI {
             return "VirtualKeyboard";
         }
 
-        private _createKey(key: string, options?: KeyOptions) {
+        private _createKey(key: string, propertySet?: KeyPropertySet) {
             var button = Button.CreateSimpleButton(key, key);
             
            
-            button.width = options && options.width ? options.width : this.defaultButtonWidth;
-            button.height = options && options.height ? options.height : this.defaultButtonHeight;
-            button.color = options && options.color ? options.color : this.defaultButtonColor;
-            button.background = options && options.background ? options.background : this.defaultButtonBackground;
-            button.paddingLeft = options && options.paddingLeft ? options.paddingLeft : this.defaultButtonPaddingLeft;
-            button.paddingRight = options && options.paddingRight ? options.paddingRight : this.defaultButtonPaddingRight;
-            button.paddingTop = options && options.paddingTop ? options.paddingTop : this.defaultButtonPaddingTop;
-            button.paddingBottom = options && options.paddingBottom ? options.paddingBottom : this.defaultButtonPaddingBottom;
+            button.width = propertySet && propertySet.width ? propertySet.width : this.defaultButtonWidth;
+            button.height = propertySet && propertySet.height ? propertySet.height : this.defaultButtonHeight;
+            button.color = propertySet && propertySet.color ? propertySet.color : this.defaultButtonColor;
+            button.background = propertySet && propertySet.background ? propertySet.background : this.defaultButtonBackground;
+            button.paddingLeft = propertySet && propertySet.paddingLeft ? propertySet.paddingLeft : this.defaultButtonPaddingLeft;
+            button.paddingRight = propertySet && propertySet.paddingRight ? propertySet.paddingRight : this.defaultButtonPaddingRight;
+            button.paddingTop = propertySet && propertySet.paddingTop ? propertySet.paddingTop : this.defaultButtonPaddingTop;
+            button.paddingBottom = propertySet && propertySet.paddingBottom ? propertySet.paddingBottom : this.defaultButtonPaddingBottom;
         
             button.thickness = 0;
             button.isFocusInvisible = true;
@@ -54,18 +54,19 @@ module BABYLON.GUI {
             return button;
         }
 
-        public addKeysRow(keys: Array<string>, options?: Array<KeyOptions>): void {
+        public addKeysRow(keys: Array<string>, propertySets?: Array<KeyPropertySet>): void {
             let panel = new StackPanel();
             panel.isVertical = false;
+            panel.isFocusInvisible = true;
         
             for(var i = 0; i < keys.length; i++) {
-                let keyOptions = null;
+                let properties = null;
 
-                if (options && options.length === keys.length) {
-                    keyOptions = options[i];
+                if (propertySets && propertySets.length === keys.length) {
+                    properties = propertySets[i];
                 }
 
-                panel.addControl(this._createKey(keys[i], keyOptions));
+                panel.addControl(this._createKey(keys[i], properties));
             }
         
             this.addControl(panel);

localDev/index.html

@@ -3,8 +3,9 @@
 <head>
 	<title>Local Development</title>
 	
-    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>
-    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+	<script src="https://preview.babylonjs.com/cannon.js"></script>
+	<script src="https://preview.babylonjs.com/Oimo.js"></script>
 	<script src="../assets/refs/dat.gui.min.js"></script>
 	<script src="../tools/DevLoader/BabylonLoader.js"></script>
 	<script src="src/webgl-debug.js"></script>
@@ -39,7 +40,7 @@
 </head>
 <body>
 	<div id="fps">0</div>
-	<canvas id="renderCanvas"></canvas>
+	<canvas id="renderCanvas" touch-action="none"></canvas>
 	
 	<script>
 		var canvas = document.getElementById("renderCanvas");

src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts

@@ -19,6 +19,9 @@ module BABYLON {
         @serialize()
         public panningSensibility: number = 50.0;
 
+        @serialize()
+        public multiTouchPanning: boolean = true;
+
         private _isPanClick: boolean = false;
         public pinchInwards = true;
 
@@ -35,7 +38,9 @@ module BABYLON {
             var engine = this.camera.getEngine();
             var cacheSoloPointer: { x: number, y: number, pointerId: number, type: any }; // cache pointer object for better perf on camera rotation
             var pointA: { x: number, y: number, pointerId: number, type: any }, pointB: { x: number, y: number, pointerId: number, type: any };
+            var previousPinchSquaredDistance = 0;
             var previousPinchDistance = 0;
+            var previousMultiTouchPanPosition: { x: number, y: number, isPaning: boolean } = { x: 0, y:0, isPaning: false };
 
             this._pointerInput = (p, s) => {
                 var evt = <PointerEvent>p.event;
@@ -78,7 +83,9 @@ module BABYLON {
                     }
 
                     cacheSoloPointer = null;
+                    previousPinchSquaredDistance = 0;
                     previousPinchDistance = 0;
+                    previousMultiTouchPanPosition.isPaning = false;
 
                     //would be better to use pointers.remove(evt.pointerId) for multitouch gestures, 
                     //but emptying completly pointers collection is required to fix a bug on iPhone : 
@@ -97,8 +104,7 @@ module BABYLON {
                     // One button down
                     if (pointA && pointB === undefined) {
                         if (this.panningSensibility !== 0 &&
-                            ((evt.ctrlKey && this.camera._useCtrlForPanning) ||
-                                (!this.camera._useCtrlForPanning && this._isPanClick))) {
+                            ((evt.ctrlKey && this.camera._useCtrlForPanning) || this._isPanClick)) {
                             this.camera.inertialPanningX += -(evt.clientX - cacheSoloPointer.x) / this.panningSensibility;
                             this.camera.inertialPanningY += (evt.clientY - cacheSoloPointer.y) / this.panningSensibility;
                         } else {
@@ -112,7 +118,7 @@ module BABYLON {
                         cacheSoloPointer.y = evt.clientY;
                     }
 
-                    // Two buttons down: pinch
+                    // Two buttons down: pinch/pan
                     else if (pointA && pointB) {
                         //if (noPreventDefault) { evt.preventDefault(); } //if pinch gesture, could be useful to force preventDefault to avoid html page scroll/zoom in some mobile browsers
                         var ed = (pointA.pointerId === evt.pointerId) ? pointA : pointB;
@@ -122,19 +128,42 @@ module BABYLON {
                         var distX = pointA.x - pointB.x;
                         var distY = pointA.y - pointB.y;
                         var pinchSquaredDistance = (distX * distX) + (distY * distY);
-                        if (previousPinchDistance === 0) {
-                            previousPinchDistance = pinchSquaredDistance;
+                        var pinchDistance = Math.sqrt(pinchSquaredDistance);
+                        if (previousPinchSquaredDistance === 0) {
+                            previousPinchSquaredDistance = pinchSquaredDistance;
+                            previousPinchDistance = pinchDistance;
                             return;
                         }
 
-                        if (pinchSquaredDistance !== previousPinchDistance) {
+                        if (Math.abs(pinchDistance - previousPinchDistance) > this.camera.pinchToPanMaxDistance) {
                             this.camera
-                                .inertialRadiusOffset += (pinchSquaredDistance - previousPinchDistance) /
+                                .inertialRadiusOffset += (pinchSquaredDistance - previousPinchSquaredDistance) /
                                 (this.pinchPrecision *
                                     ((this.angularSensibilityX + this.angularSensibilityY) / 2) *
                                     direction);
-                            previousPinchDistance = pinchSquaredDistance;
+                            previousMultiTouchPanPosition.isPaning = false;
+                        }
+                        else {
+                            if (cacheSoloPointer.pointerId === ed.pointerId && this.panningSensibility !== 0 && this.multiTouchPanning) {
+                                if (!previousMultiTouchPanPosition.isPaning) {
+                                    previousMultiTouchPanPosition.isPaning = true;
+                                    previousMultiTouchPanPosition.x = ed.x;
+                                    previousMultiTouchPanPosition.y = ed.y;
+                                    return;
+                                }
+
+                                this.camera.inertialPanningX += -(ed.x - previousMultiTouchPanPosition.x) / this.panningSensibility;
+                                this.camera.inertialPanningY += (ed.y - previousMultiTouchPanPosition.y) / this.panningSensibility;
+                            }
                         }
+
+                        if (cacheSoloPointer.pointerId === evt.pointerId) {
+                            previousMultiTouchPanPosition.x = ed.x;
+                            previousMultiTouchPanPosition.y = ed.y;
+                        }
+
+                        previousPinchSquaredDistance = pinchSquaredDistance;
+                        previousPinchDistance = pinchDistance;
                     }
                 }
             }
@@ -152,7 +181,9 @@ module BABYLON {
             this._onLostFocus = () => {
                 //this._keys = [];
                 pointA = pointB = undefined;
+                previousPinchSquaredDistance = 0;
                 previousPinchDistance = 0;
+                previousMultiTouchPanPosition.isPaning = false;
                 cacheSoloPointer = null;
             };
 

src/Cameras/babylon.arcRotateCamera.ts

@@ -57,6 +57,15 @@ module BABYLON {
         public inertialPanningY: number = 0;
 
         @serialize()
+        public pinchToPanMaxDistance: number = 2;
+
+        @serialize()
+        public panningDistanceLimit: number = null;
+
+        @serializeAsVector3()
+        public panningOriginTarget: Vector3 = Vector3.Zero();
+
+        @serialize()
         public panningInertia = 0.9;
 
         //-- begin properties for backward compatibility for inputs
@@ -467,7 +476,16 @@ module BABYLON {
                 }
 
                 if (!this._targetHost) {
-                    this._target.addInPlace(this._transformedDirection);
+                    if (this.panningDistanceLimit) {
+                        this._transformedDirection.addInPlace(this._target);
+                        var distanceSquared = Vector3.DistanceSquared(this._transformedDirection, this.panningOriginTarget);
+                        if (distanceSquared <= (this.panningDistanceLimit * this.panningDistanceLimit)) {
+                            this._target.copyFrom(this._transformedDirection);
+                        }
+                    }
+                    else {
+                        this._target.addInPlace(this._transformedDirection);
+                    }
                 }
 
                 this.inertialPanningX *= this.panningInertia;

src/Materials/Textures/babylon.mirrorTexture.ts

@@ -61,6 +61,8 @@ module BABYLON {
         constructor(name: string, size: any, scene: Scene, generateMipMaps?: boolean, type: number = Engine.TEXTURETYPE_UNSIGNED_INT, samplingMode = Texture.BILINEAR_SAMPLINGMODE, generateDepthBuffer = true) {
             super(name, size, scene, generateMipMaps, true, type, false, samplingMode, generateDepthBuffer);
 
+            this.ignoreCameraViewport = true;
+
             this.onBeforeRenderObservable.add(() => {
                 Matrix.ReflectionToRef(this.mirrorPlane, this._mirrorMatrix);
                 this._savedViewMatrix = scene.getViewMatrix();

src/Materials/babylon.standardMaterial.ts

@@ -429,6 +429,25 @@ module BABYLON {
             this._imageProcessingConfiguration.colorGradingTexture = value;
         }
 
+        /**
+         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT). 
+         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
+         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image; 
+         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
+         */
+        public get cameraColorCurves(): ColorCurves {
+            return this._imageProcessingConfiguration.colorCurves;
+        }
+        /**
+         * The color grading curves provide additional color adjustmnent that is applied after any color grading transform (3D LUT). 
+         * They allow basic adjustment of saturation and small exposure adjustments, along with color filter tinting to provide white balance adjustment or more stylistic effects.
+         * These are similar to controls found in many professional imaging or colorist software. The global controls are applied to the entire image. For advanced tuning, extra controls are provided to adjust the shadow, midtone and highlight areas of the image; 
+         * corresponding to low luminance, medium luminance, and high luminance areas respectively.
+         */
+        public set cameraColorCurves(value: ColorCurves) {
+            this._imageProcessingConfiguration.colorCurves = value;
+        }        
+
         public customShaderNameResolve: (shaderName: string, uniforms: string[], uniformBuffers: string[], samplers: string[], defines: StandardMaterialDefines) => string;
 
         protected _renderTargets = new SmartArray<RenderTargetTexture>(16);

src/PostProcess/RenderPipeline/Pipelines/babylon.defaultRenderingPipeline.ts

@@ -223,8 +223,10 @@
                 this.imageProcessing = new BABYLON.ImageProcessingPostProcess("imageProcessing",  1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);
                 if (this._hdr) {
                     this.addEffect(new PostProcessRenderEffect(engine, this.ImageProcessingPostProcessId, () => { return this.imageProcessing; }, true));
+                } else {
+                    this._scene.imageProcessingConfiguration.applyByPostProcess = false;
                 }
-            }
+            } 
 
 			if (this.fxaaEnabled) {
                 this.fxaa = new FxaaPostProcess("fxaa", 1.0, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, this._defaultPipelineTextureType);

src/PostProcess/babylon.postProcess.ts

@@ -20,6 +20,7 @@
         public scaleMode = Engine.SCALEMODE_FLOOR;
         public alwaysForcePOT = false;
         public samples = 1;
+        public adaptScaleToCurrentViewport = false;
 
         private _camera: Camera;
         private _scene: Scene;
@@ -221,9 +222,18 @@
                 var requiredWidth = ((sourceTexture ? sourceTexture.width : this._engine.getRenderingCanvas().width) * <number>this._options) | 0;
                 var requiredHeight = ((sourceTexture ? sourceTexture.height : this._engine.getRenderingCanvas().height) * <number>this._options) | 0;
 
-                var desiredWidth = (<PostProcessOptions>this._options).width || requiredWidth;
+                var desiredWidth = ((<PostProcessOptions>this._options).width || requiredWidth);
                 var desiredHeight = (<PostProcessOptions>this._options).height || requiredHeight;
 
+                if (this.adaptScaleToCurrentViewport) {
+                    let currentViewport = engine.currentViewport;
+
+                    if (currentViewport) {
+                        desiredWidth *= currentViewport.width;
+                        desiredHeight *= currentViewport.height;
+                    }
+                }
+
                 if (this.renderTargetSamplingMode === Texture.TRILINEAR_SAMPLINGMODE || this.alwaysForcePOT) {
                     if (!(<PostProcessOptions>this._options).width) {
                         desiredWidth = engine.needPOTTextures ? Tools.GetExponentOfTwo(desiredWidth, maxSize, this.scaleMode) : desiredWidth;

src/PostProcess/babylon.vrDistortionCorrectionPostProcess.ts

@@ -10,7 +10,6 @@
         private _scaleFactor: Vector2;
         private _lensCenter: Vector2;
 
-        //ANY
         constructor(name: string, camera: Camera, isRightEye: boolean, vrMetrics: VRCameraMetrics) {
             super(name, "vrDistortionCorrection", [
                 'LensCenter',
@@ -23,6 +22,7 @@
             this._distortionFactors = vrMetrics.distortionK;
             this._postProcessScaleFactor = vrMetrics.postProcessScaleFactor;
             this._lensCenterOffset = vrMetrics.lensCenterOffset;
+            this.adaptScaleToCurrentViewport = true;
 
             this.onSizeChangedObservable.add(() => {
                 this.aspectRatio = this.width * .5 / this.height;

src/babylon.engine.ts

@@ -711,6 +711,10 @@
             return this._textureFormatInUse;
         }
 
+        public get currentViewport(): Viewport {
+            return this._cachedViewport;
+        }
+
         // Empty texture
         public get emptyTexture(): InternalTexture {
             if (!this._emptyTexture) {