Add opacity texture to gridMaterial

dist/preview release/materialsLibrary/babylon.gridMaterial.d.ts

@@ -37,6 +37,8 @@ declare module BABYLON {
          * Determine RBG output is premultiplied by alpha value.
          */
         preMultiplyAlpha: boolean;
+        private _opacityTexture;
+        opacityTexture: BaseTexture;
         private _gridControl;
         private _renderId;
         /**

dist/preview release/materialsLibrary/babylonjs.materials.d.ts

@@ -541,6 +541,8 @@ declare module BABYLON {
          * Determine RBG output is premultiplied by alpha value.
          */
         preMultiplyAlpha: boolean;
+        private _opacityTexture;
+        opacityTexture: BaseTexture;
         private _gridControl;
         private _renderId;
         /**

dist/preview release/materialsLibrary/babylonjs.materials.module.d.ts

@@ -546,6 +546,8 @@ declare module BABYLON {
          * Determine RBG output is premultiplied by alpha value.
          */
         preMultiplyAlpha: boolean;
+        private _opacityTexture;
+        opacityTexture: BaseTexture;
         private _gridControl;
         private _renderId;
         /**

dist/preview release/what's new.md

@@ -51,6 +51,7 @@
 - Align `BoundingBox` and `BoundingSphere` API and behavior for clarity and simplicity. As a consequence, the `BoundingBox`'s method `setWorldMatrix` has been removed and the underlying world matrix cannot be modified but by calling `reConstruct` or `update`. ([barroij](https://github.com/barroij))
 - Make sure that `Material.markAsDirty` and all the `markXXXDirty` methods early out when `scene.blockMaterialDirtyMechanism` is true. ([barroij](https://github.com/barroij))
 - Add updateUpVectorFromRotation to target camera to allow the up vector to be computed from rotation ([TrevorDev](https://github.com/TrevorDev))
+- Added opacity texture support to `GridMaterial` ([Deltakosh](https://github.com/deltakosh))
 
 ### glTF Loader
 

materialsLibrary/src/grid/babylon.gridmaterial.ts

@@ -2,9 +2,12 @@
 
 module BABYLON {
     class GridMaterialDefines extends MaterialDefines {
+        public OPACITY = false;
         public TRANSPARENT = false;
         public FOG = false;
         public PREMULTIPLYALPHA = false;
+        public UV1 = false;
+        public UV2 = false;
 
         constructor() {
             super();
@@ -66,6 +69,11 @@ module BABYLON {
         @serialize()
         public preMultiplyAlpha = false;
 
+        @serializeAsTexture("opacityTexture")
+        private _opacityTexture: BaseTexture;
+        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
+        public opacityTexture: BaseTexture;
+
         private _gridControl: Vector4 = new Vector4(this.gridRatio, this.majorUnitFrequency, this.minorUnitVisibility, this.opacity);
 
         private _renderId: number;
@@ -83,7 +91,7 @@ module BABYLON {
          * Returns wehter or not the grid requires alpha blending.
          */
         public needAlphaBlending(): boolean {
-            return this.opacity < 1.0;
+            return this.opacity < 1.0 || this._opacityTexture && this._opacityTexture.isReady();
         }
 
         public needAlphaBlendingForMesh(mesh: AbstractMesh): boolean {
@@ -120,6 +128,21 @@ module BABYLON {
                 defines.markAsUnprocessed();
             }
 
+            // Textures
+            if (defines._areTexturesDirty) {
+                defines._needUVs = false;
+                if (scene.texturesEnabled) {
+                    if (this._opacityTexture && StandardMaterial.OpacityTextureEnabled) {
+                        if (!this._opacityTexture.isReady()) {
+                            return false;
+                        } else {
+                            defines._needUVs = true;
+                            defines.OPACITY = true;
+                        }
+                    }
+                }
+            }
+
             MaterialHelper.PrepareDefinesForMisc(mesh, scene, false, false, this.fogEnabled, false, defines);
 
             // Get correct effect
@@ -127,15 +150,27 @@ module BABYLON {
                 defines.markAsProcessed();
                 scene.resetCachedMaterial();
 
-                // Attributes
+                // Attribs
+                MaterialHelper.PrepareDefinesForAttributes(mesh, defines, false, false);
+
+                //Attributes
                 var attribs = [VertexBuffer.PositionKind, VertexBuffer.NormalKind];
 
+                if (defines.UV1) {
+                    attribs.push(VertexBuffer.UVKind);
+                }
+
+                if (defines.UV2) {
+                    attribs.push(VertexBuffer.UV2Kind);
+                }
+
                 // Defines
                 var join = defines.toString();
                 subMesh.setEffect(scene.getEngine().createEffect("grid",
                     attribs,
-                    ["projection", "worldView", "mainColor", "lineColor", "gridControl", "gridOffset", "vFogInfos", "vFogColor", "world", "view"],
-                    [],
+                    ["projection", "worldView", "mainColor", "lineColor", "gridControl", "gridOffset", "vFogInfos", "vFogColor", "world", "view",
+                        "opacityMatrix", "vOpacityInfos"],
+                    ["opacitySampler"],
                     join,
                     undefined,
                     this.onCompiled,
@@ -184,6 +219,13 @@ module BABYLON {
                 this._gridControl.z = this.minorUnitVisibility;
                 this._gridControl.w = this.opacity;
                 this._activeEffect.setVector4("gridControl", this._gridControl);
+
+                if (this._opacityTexture && StandardMaterial.OpacityTextureEnabled) {
+                    this._activeEffect.setTexture("opacitySampler", this._opacityTexture);
+
+                    this._activeEffect.setFloat2("vOpacityInfos", this._opacityTexture.coordinatesIndex, this._opacityTexture.level);
+                    this._activeEffect.setMatrix("opacityMatrix", this._opacityTexture.getTextureMatrix());
+                }
             }
             // Fog
             MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);

materialsLibrary/src/grid/grid.fragment.fx

@@ -19,6 +19,13 @@ varying vec3 vNormal;
 
 #include<fogFragmentDeclaration>
 
+// Samplers
+#ifdef OPACITY
+varying vec2 vOpacityUV;
+uniform sampler2D opacitySampler;
+uniform vec2 vOpacityInfos;
+#endif
+
 float getVisibility(float position) {
     // Major grid line every Frequency defined in material.
     float majorGridFrequency = gridControl.y;
@@ -94,19 +101,25 @@ void main(void) {
     #include<fogFragment>
 #endif
 
+    float opacity = 1.0;
 #ifdef TRANSPARENT
     float distanceToFragment = length(vCameraSpacePosition.xyz);
     float cameraPassThrough = clamp(distanceToFragment - 0.25, 0.0, 1.0);
 
-    float opacity = clamp(grid, 0.08, cameraPassThrough * gridControl.w * grid);
+    opacity = clamp(grid, 0.08, cameraPassThrough * gridControl.w * grid);
+#endif    
+
+#ifdef OPACITY
+	opacity *= texture2D(opacitySampler, vOpacityUV).a;
+#endif    
 
+    // Apply the color.
     gl_FragColor = vec4(color.rgb, opacity);
 
+#ifdef TRANSPARENT
     #ifdef PREMULTIPLYALPHA
         gl_FragColor.rgb *= opacity;
     #endif
-#else
-    // Apply the color.
-    gl_FragColor = vec4(color.rgb, 1.0);
+#else    
 #endif
 }

materialsLibrary/src/grid/grid.vertex.fx

@@ -3,6 +3,12 @@
 // Attributes
 attribute vec3 position;
 attribute vec3 normal;
+#ifdef UV1
+attribute vec2 uv;
+#endif
+#ifdef UV2
+attribute vec2 uv2;
+#endif
 
 // Uniforms
 uniform mat4 projection;
@@ -19,6 +25,12 @@ varying vec3 vNormal;
 
 #include<fogVertexDeclaration>
 
+#ifdef OPACITY
+varying vec2 vOpacityUV;
+uniform mat4 opacityMatrix;
+uniform vec2 vOpacityInfos;
+#endif
+
 void main(void) {
 
     #ifdef FOG
@@ -34,6 +46,23 @@ void main(void) {
         vCameraSpacePosition = cameraSpacePosition;
     #endif
 
+#ifdef OPACITY
+#ifndef UV1
+	vec2 uv = vec2(0., 0.);
+#endif
+#ifndef UV2
+	vec2 uv2 = vec2(0., 0.);
+#endif
+	if (vOpacityInfos.x == 0.)
+	{
+		vOpacityUV = vec2(opacityMatrix * vec4(uv, 1.0, 0.0));
+	}
+	else
+	{
+		vOpacityUV = vec2(opacityMatrix * vec4(uv2, 1.0, 0.0));
+	}
+#endif    
+
     vPosition = position;
     vNormal = normal;
 }

materialsLibrary/test/addgrid.js

@@ -1,43 +1,44 @@
 window.prepareGrid = function() {
 	var grid = new BABYLON.GridMaterial("grid", scene);
+	grid.opacityTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);
 
 	registerRangeUI("grid", "LineColorR", 0, 1, function(value) {
 		grid.lineColor.r = value;
 	}, function() {
 		return grid.lineColor.r;
 	});
-    
+
 	registerRangeUI("grid", "LineColorG", 0, 1, function(value) {
 		grid.lineColor.g = value;
 	}, function() {
 		return grid.lineColor.g;
 	});
-    
-  registerRangeUI("grid", "LineColorB", 0, 1, function(value) {
+
+	registerRangeUI("grid", "LineColorB", 0, 1, function(value) {
 		grid.lineColor.b = value;
 	}, function() {
 		return grid.lineColor.b;
 	});
-    
-  registerRangeUI("grid", "MainColorR", 0, 1, function(value) {
+
+	registerRangeUI("grid", "MainColorR", 0, 1, function(value) {
 		grid.mainColor.r = value;
 	}, function() {
 		return grid.mainColor.r;
 	});
-    
-  registerRangeUI("grid", "MainColorG", 0, 1, function(value) {
+
+	registerRangeUI("grid", "MainColorG", 0, 1, function(value) {
 		grid.mainColor.g = value;
 	}, function() {
 		return grid.mainColor.g;
 	});
-    
-  registerRangeUI("grid", "MainColorB", 0, 1, function(value) {
+
+	registerRangeUI("grid", "MainColorB", 0, 1, function(value) {
 		grid.mainColor.b = value;
 	}, function() {
 		return grid.mainColor.b;
 	});
-    
-  registerRangeUI("grid", "GridRatio", 0, 10, function(value) {
+
+	registerRangeUI("grid", "GridRatio", 0, 10, function(value) {
 		grid.gridRatio = value;
 	}, function() {
 		return grid.gridRatio;
@@ -48,43 +49,37 @@ window.prepareGrid = function() {
 	}, function() {
 		return grid.gridOffset.x;
 	});
-    
-  registerRangeUI("grid", "OffsetY", 0, 2, function(value) {
+
+	registerRangeUI("grid", "OffsetY", 0, 2, function(value) {
 		grid.gridOffset.y = value;
 	}, function() {
 		return grid.gridOffset.y;
 	});
-    
-  registerRangeUI("grid", "OffsetZ", 0, 2, function(value) {
+
+	registerRangeUI("grid", "OffsetZ", 0, 2, function(value) {
 		grid.gridOffset.z = value;
 	}, function() {
 		return grid.gridOffset.z;
 	});
-    
-    
-  registerRangeUI("grid", "MajorUnitFrequency", 1, 10, function(value) {
+
+
+	registerRangeUI("grid", "MajorUnitFrequency", 1, 10, function(value) {
 		grid.majorUnitFrequency = value;
 	}, function() {
 		return grid.majorUnitFrequency;
 	});
-    
-  registerRangeUI("grid", "MinorUnitVisibility", 0, 1, function(value) {
+
+	registerRangeUI("grid", "MinorUnitVisibility", 0, 1, function(value) {
 		grid.minorUnitVisibility = value;
 	}, function() {
 		return grid.minorUnitVisibility;
 	});
-    
-  registerRangeUI("grid", "Opacity", 0, 1, function(value) {
+
+	registerRangeUI("grid", "Opacity", 0, 1, function(value) {
 		grid.opacity = value;
 	}, function() {
 		return grid.opacity;
 	});
 
-	registerRangeUI("grid", "PlainGrid", 0, 1, function(value) {
-		grid.usePlainGrid = value;
-	}, function() {
-		return grid.usePlainGrid;
-	});
-
 	return grid;
 }