Merge pull request #2866 from sebavan/master

Grid Material Offset

materialsLibrary/src/grid/babylon.gridmaterial.ts

@@ -37,6 +37,12 @@ module BABYLON {
         public gridRatio = 1.0;
 
         /**
+         * Allows setting an offset for the grid lines.
+         */
+        @serializeAsColor3()
+        public gridOffset = Vector3.Zero();
+
+        /**
          * The frequency of thicker lines.
          */
         @serialize()
@@ -126,7 +132,7 @@ module BABYLON {
                 var join = defines.toString();
                 subMesh.setEffect(scene.getEngine().createEffect("grid",
                     attribs,
-                    ["projection", "worldView", "mainColor", "lineColor", "gridControl", "vFogInfos", "vFogColor", "world", "view"],
+                    ["projection", "worldView", "mainColor", "lineColor", "gridControl", "gridOffset", "vFogInfos", "vFogColor", "world", "view"],
                     [],
                     join,
                     null,
@@ -166,6 +172,8 @@ module BABYLON {
                 this._activeEffect.setColor3("mainColor", this.mainColor);
                 this._activeEffect.setColor3("lineColor", this.lineColor);
 
+                this._activeEffect.setVector3("gridOffset", this.gridOffset);
+
                 this._gridControl.x = this.gridRatio;
                 this._gridControl.y = Math.round(this.majorUnitFrequency);
                 this._gridControl.z = this.minorUnitVisibility;
@@ -194,7 +202,7 @@ module BABYLON {
 
         public getClassName(): string {
             return "GridMaterial";
-        }             
+        }
 
         public static Parse(source: any, scene: Scene, rootUrl: string): GridMaterial {
             return SerializationHelper.Parse(() => new GridMaterial(source.name, scene), source, scene, rootUrl);

materialsLibrary/src/grid/grid.fragment.fx

@@ -8,6 +8,7 @@ precision highp float;
 uniform vec3 mainColor;
 uniform vec3 lineColor;
 uniform vec4 gridControl;
+uniform vec3 gridOffset;
 
 // Varying
 #ifdef TRANSPARENT
@@ -70,7 +71,7 @@ void main(void) {
     
     // Scale position to the requested ratio.
     float gridRatio = gridControl.x;
-    vec3 gridPos = vPosition / gridRatio;
+    vec3 gridPos = (vPosition + gridOffset) / gridRatio;
     
     // Find the contribution of each coords.
     float x = contributionOnAxis(gridPos.x);

materialsLibrary/test/addgrid.js

@@ -42,6 +42,25 @@ window.prepareGrid = function() {
 	}, function() {
 		return grid.gridRatio;
 	});
+
+	registerRangeUI("grid", "OffsetX", 0, 2, function(value) {
+		grid.gridOffset.x = value;
+	}, function() {
+		return grid.gridOffset.x;
+	});
+    
+  registerRangeUI("grid", "OffsetY", 0, 2, function(value) {
+		grid.gridOffset.y = value;
+	}, function() {
+		return grid.gridOffset.y;
+	});
+    
+  registerRangeUI("grid", "OffsetZ", 0, 2, function(value) {
+		grid.gridOffset.z = value;
+	}, function() {
+		return grid.gridOffset.z;
+	});
+    
     
   registerRangeUI("grid", "MajorUnitFrequency", 1, 10, function(value) {
 		grid.majorUnitFrequency = value;