Gradient shader updated. New parameter : smoothness

materialsLibrary/dist/dts/babylon.gradientMaterial.d.ts

@@ -2,8 +2,11 @@
 declare module BABYLON {
     class GradientMaterial extends Material {
         topColor: Color3;
+        topColorAlpha: number;
         bottomColor: Color3;
+        bottomColorAlpha: number;
         offset: number;
+        smoothness: number;
         disableLighting: boolean;
         private _worldViewProjectionMatrix;
         private _scaledDiffuse;

materialsLibrary/materials/gradient/babylon.gradientMaterial.ts

@@ -62,12 +62,15 @@ module BABYLON {
 
         // The gradient top color, red by default
         public topColor = new Color3(1, 0, 0);
+        public topColorAlpha = 1.0;
 
         // The gradient top color, blue by default
         public bottomColor = new Color3(0, 0, 1);
+        public bottomColorAlpha = 1.0;
 
         // Gradient offset
         public offset = 0;
+        public smoothness = 1.0;
 
         public disableLighting = false;
 
@@ -85,11 +88,11 @@ module BABYLON {
         }
 
         public needAlphaBlending(): boolean {
-            return (this.alpha < 1.0);
+            return (this.alpha < 1.0 || this.topColorAlpha < 1.0 || this.bottomColorAlpha < 1.0);
         }
 
         public needAlphaTesting(): boolean {
-            return false;
+            return true;
         }
 
         public getAlphaTestTexture(): BaseTexture {
@@ -132,7 +135,7 @@ module BABYLON {
 
             var engine = scene.getEngine();
             var needNormals = false;
-            var needUVs = true;
+            var needUVs = false;
 
             this._defines.reset();
 
@@ -350,7 +353,7 @@ module BABYLON {
                         "vDiffuseInfos", 
                         "mBones",
                         "vClipPlane", "diffuseMatrix",
-                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues", "topColor", "bottomColor", "offset"
+                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3", "depthValues", "topColor", "bottomColor", "offset", "smoothness"
                     ],
                     ["diffuseSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3"
@@ -474,9 +477,10 @@ module BABYLON {
                 this._effect.setColor3("vFogColor", scene.fogColor);
             }
 
-            this._effect.setColor3("topColor", this.topColor);
-            this._effect.setColor3("bottomColor", this.bottomColor);
+            this._effect.setColor4("topColor", this.topColor, this.topColorAlpha);
+            this._effect.setColor4("bottomColor", this.bottomColor, this.bottomColorAlpha);
             this._effect.setFloat("offset", this.offset);
+            this._effect.setFloat("smoothness", this.smoothness);
 
             super.bind(world, mesh);
         }

materialsLibrary/materials/gradient/gradient.fragment.fx

@@ -2,12 +2,13 @@
 
 // Constants
 uniform vec3 vEyePosition;
+uniform vec4 vDiffuseColor;
 
 // Gradient variables
-uniform vec3 topColor;
-uniform vec3 bottomColor;
+uniform vec4 topColor;
+uniform vec4 bottomColor;
 uniform float offset;
-varying vec2 vUV;
+uniform float smoothness;
 
 // Input
 varying vec3 vPositionW;
@@ -379,12 +380,16 @@ void main(void) {
 
 	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
 
+    float h = normalize(vPositionW).y + offset;
+    float mysmoothness = clamp(smoothness, 0.01, max(smoothness, 10.));
+
+    vec4 baseColor = mix(bottomColor, topColor, max(pow(max(h, 0.0), mysmoothness), 0.0));
+
 	// Base color
-	vec4  baseColor = vec4(mix(topColor, bottomColor, vUV.y +offset), 1.0);
-	vec3 diffuseColor = vec3(1,1,1);
+	vec3 diffuseColor = vDiffuseColor.rgb;
 
 	// Alpha
-	float alpha = 1.0;
+	float alpha = baseColor.a;
 
 
 #ifdef ALPHATEST

materialsLibrary/materials/gradient/gradient.vertex.fx

@@ -1,7 +1,5 @@
 precision highp float;
 
-// Gradient variables
-varying vec2 vUV;
 
 // Attributes
 attribute vec3 position;
@@ -122,8 +120,6 @@ void main(void) {
 	// Texture coordinates
 #ifndef UV1
 	vec2 uv = vec2(0., 0.);
-#else
-	vUV = uv;
 #endif
 #ifndef UV2
 	vec2 uv2 = vec2(0., 0.);

materialsLibrary/test/add/addgradient.js

@@ -8,6 +8,13 @@ window.prepareGradient = function() {
         return grad.topColor.toHexString();
     });
 
+    // topColorAlpha
+    registerRangeUI("gradient", "topColorAlpha", 0, 1, function(value) {
+        grad.topColorAlpha = value;
+    }, function() {
+        return grad.topColorAlpha;
+    });
+
     // Bottom color
     registerColorPicker("gradient", "bottomColor", "#0000ff", function(value) {
         grad.bottomColor = BABYLON.Color3.FromHexString(value);
@@ -15,6 +22,13 @@ window.prepareGradient = function() {
         return grad.bottomColor.toHexString();
     });
 
+    // topColorAlpha
+    registerRangeUI("gradient", "bottomColorAlpha", 0, 1, function(value) {
+        grad.bottomColorAlpha = value;
+    }, function() {
+        return grad.bottomColorAlpha;
+    });
+
     // offset
     registerRangeUI("gradient", "offset", -1, 1, function(value) {
         grad.offset = value;
@@ -22,5 +36,12 @@ window.prepareGradient = function() {
         return grad.offset;
     });
 
+    // smoothness
+    registerRangeUI("gradient", "smoothness", 0, 5, function(value) {
+        grad.smoothness = value;
+    }, function() {
+        return grad.smoothness;
+    });
+
     return grad;
 };