2D layers now have a scale and offset properties

dist/preview release/what's new.md

@@ -22,6 +22,7 @@
       - Expanded AnimationRanges for Nodes (Mesh, Lights, & Cameras) ([Palmer-JC](https://github.com/Palmer-JC))
       - Support for added to Blender Exporter ([Palmer-JC](https://github.com/Palmer-JC))
   - **Updates**
+    - 2D layers now have a scale and offset properties ([deltakosh](https://github.com/deltakosh))
     - TouchCamera can now fallback to regular mouse/keyboard controls ([deltakosh](https://github.com/deltakosh))
     - Added ability to skip current prepared Action to next active Action (chained by Action.then(Action)) ([vouskprod](http://www.github.com/vousk)) 
     - Added new event triggers `ActionManager.OnLongPressTrigger` and `ActionManager.OnPickDownTrigger` ([vouskprod](http://www.github.com/vousk)) 

src/Cameras/babylon.camera.js

@@ -586,8 +586,8 @@ var BABYLON;
                 camera = new BABYLON.VRDeviceOrientationFreeCamera(parsedCamera.name, position, scene);
             }
             else {
-                // Free Camera is the default value
-                camera = new BABYLON.FreeCamera(parsedCamera.name, position, scene);
+                // Touch Camera is the default value
+                camera = new BABYLON.TouchCamera(parsedCamera.name, position, scene);
             }
             // apply 3d rig, when found
             if (parsedCamera.cameraRigMode) {

src/Cameras/babylon.camera.ts

@@ -663,8 +663,8 @@
                 camera = new VRDeviceOrientationFreeCamera(parsedCamera.name, position, scene);
 
             } else {
-                // Free Camera is the default value
-                camera = new FreeCamera(parsedCamera.name, position, scene);
+                // Touch Camera is the default value
+                camera = new TouchCamera(parsedCamera.name, position, scene);
             }
 
             // apply 3d rig, when found

src/Layer/babylon.layer.js

@@ -3,6 +3,8 @@ var BABYLON;
     var Layer = (function () {
         function Layer(name, imgUrl, scene, isBackground, color) {
             this.name = name;
+            this.scale = new BABYLON.Vector2(1, 1);
+            this.offset = new BABYLON.Vector2(0, 0);
             this.alphaBlendingMode = BABYLON.Engine.ALPHA_COMBINE;
             this._vertexDeclaration = [2];
             this._vertexStrideSize = 2 * 4;
@@ -28,7 +30,7 @@ var BABYLON;
             indices.push(3);
             this._indexBuffer = scene.getEngine().createIndexBuffer(indices);
             // Effects
-            this._effect = this._scene.getEngine().createEffect("layer", ["position"], ["textureMatrix", "color"], ["textureSampler"], "");
+            this._effect = this._scene.getEngine().createEffect("layer", ["position"], ["textureMatrix", "color", "scale", "offset"], ["textureSampler"], "");
         }
         Layer.prototype.render = function () {
             // Check
@@ -43,6 +45,9 @@ var BABYLON;
             this._effect.setMatrix("textureMatrix", this.texture.getTextureMatrix());
             // Color
             this._effect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
+            // Scale / offset
+            this._effect.setVector2("offset", this.offset);
+            this._effect.setVector2("scale", this.scale);
             // VBOs
             engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, this._effect);
             // Draw order

src/Layer/babylon.layer.ts

@@ -3,6 +3,8 @@
         public texture: Texture;
         public isBackground: boolean;
         public color: Color4;
+        public scale = new Vector2(1, 1);
+        public offset = new Vector2(0, 0);
         public onDispose: () => void;
         public alphaBlendingMode = Engine.ALPHA_COMBINE;
 
@@ -45,7 +47,7 @@
             // Effects
             this._effect = this._scene.getEngine().createEffect("layer",
                 ["position"],
-                ["textureMatrix", "color"],
+                ["textureMatrix", "color", "scale", "offset"],
                 ["textureSampler"], "");
         }
 
@@ -67,6 +69,10 @@
             // Color
             this._effect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
 
+            // Scale / offset
+            this._effect.setVector2("offset", this.offset);
+            this._effect.setVector2("scale", this.scale);
+
             // VBOs
             engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, this._effect);
 

src/Shaders/layer.vertex.fx

@@ -4,6 +4,8 @@
 attribute vec2 position;
 
 // Uniforms
+uniform vec2 scale;
+uniform vec2 offset;
 uniform mat4 textureMatrix;
 
 // Output
@@ -12,7 +14,7 @@ varying vec2 vUV;
 const vec2 madd = vec2(0.5, 0.5);
 
 void main(void) {	
-
-	vUV = vec2(textureMatrix * vec4(position * madd + madd, 1.0, 0.0));
-	gl_Position = vec4(position, 0.0, 1.0);
+	vec2 shiftedPosition = position * scale + offset;
+	vUV = vec2(textureMatrix * vec4(shiftedPosition * madd + madd, 1.0, 0.0));
+	gl_Position = vec4(shiftedPosition, 0.0, 1.0);
 }