Fixed specular for water material.

Fixed terrain material (mixmap)

materialsLibrary/materials/water/babylon.waterMaterial.ts

@@ -626,7 +626,7 @@ module BABYLON {
 				clipPlane = scene.clipPlane;
                 
                 var positiony = this._mesh ? this._mesh.position.y : 0.0;
-				scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony, 0), new Vector3(0, 1, 0));
+				scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony + 0.05, 0), new Vector3(0, 1, 0));
 			};
 			
 			this._refractionRTT.onAfterRender = () => {
@@ -648,7 +648,7 @@ module BABYLON {
 				clipPlane = scene.clipPlane;
                 
                 var positiony = this._mesh ? this._mesh.position.y : 0.0;
-				scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony, 0), new Vector3(0, -1, 0));
+				scene.clipPlane = Plane.FromPositionAndNormal(new Vector3(0, positiony - 0.05, 0), new Vector3(0, -1, 0));
 				
 				// Transform
 				Matrix.ReflectionToRef(scene.clipPlane, mirrorMatrix);

materialsLibrary/materials/water/readme.md

@@ -0,0 +1,50 @@
+# Water material
+
+## [Playground example](http://www.babylonjs-playground.com/#1SLLOJ#6)
+
+## Water material by demo
+
+- [Calm lake](http://www.babylonjs-playground.com/#1SLLOJ#15)
+- [Ocean, play with waves](http://www.babylonjs-playground.com/#1SLLOJ#17)
+- [Deep water, play with water color](http://www.babylonjs-playground.com/#1SLLOJ#18)
+- [Beach](http://www.babylonjs-playground.com/#1SLLOJ#19)
+
+## Using the water material
+
+The water material needs at least only a bump texture to render properly.
+Just create a new reference of the material and assign its bump texture:
+
+```
+var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene);
+
+var waterMaterial = new BABYLON.WaterMaterial("water_material", scene);
+waterMaterial.bumpTexture = new BABYLON.Texture("bump.png", scene); // Set the bump texture
+
+ground.material = waterMaterial;
+```
+
+To reflect and refract the world, you just have to add the wanted meshes to the render list:
+
+```
+waterMaterial.addToRenderList(skybox);
+waterMaterial.addToRenderList(mesh1);
+waterMaterial.addToRenderList(mesh2);
+// ... etc.
+```
+
+That's all.
+
+## Customize the water material
+
+You can customize special properties of the material:
+
+```
+waterMaterial.windForce = 45; // Represents the wind force applied on the water surface
+waterMaterial.waveHeight = 1.3; // Represents the height of the waves
+waterMaterial.bumpHeight = 0.3; // According to the bump map, represents the pertubation of reflection and refraction
+waterMaterial.windDirection = new BABYLON.Vector2(1.0, 1.0); // The wind direction on the water surface (on width and height)
+waterMaterial.waterColor = new BABYLON.Color3(0.1, 0.1, 0.6); // Represents the water color mixed with the reflected and refracted world
+waterMaterial.colorBlendFactor = 2.0; // Factor to determine how the water color is blended with the reflected and refracted world
+waterMaterial.waveLength = 0.1; // The lenght of waves. With smaller values, more waves are generated
+```
+

materialsLibrary/materials/water/water.fragment.fx

@@ -357,12 +357,14 @@ lightingInfo computeLighting(vec3 viewDirectionW, vec3 vNormal, vec4 lightData,
 
 	// Specular
 #ifdef SPECULARTERM
-	vec3 angleW = normalize(viewDirectionW - lightVectorW);
-	vec2 perturbation = bumpHeight * (bumpColor.rg - 0.5);
+	vec3 angleW = normalize(viewDirectionW + lightVectorW);
+	vec3 perturbation = bumpHeight * (bumpColor.rgb - 0.5);
+	vec3 halfvec = normalize(angleW + lightVectorW + vec3(perturbation.x, perturbation.y, perturbation.z));
 	
-	vec3 halfvec = normalize(angleW + lightVectorW + vec3(perturbation.x, perturbation.y, 0.0) * max(1., glossiness));
-	float temp = pow(dot(vNormal, halfvec), max(1., glossiness));
-	result.specular = specularColor * temp * attenuation;
+	float temp = max(0., dot(vNormal, halfvec));
+	temp = pow(temp, max(1., glossiness));
+	
+	result.specular = temp * specularColor * attenuation;
 #endif
 
 	return result;
@@ -390,11 +392,13 @@ lightingInfo computeSpotLighting(vec3 viewDirectionW, vec3 vNormal, vec4 lightDa
 
 		// Specular
 #ifdef SPECULARTERM		
-		vec3 angleW = normalize(viewDirectionW - lightVectorW);
-		vec2 perturbation = bumpHeight * (bumpColor.rg - 0.5);
+		vec3 angleW = normalize(viewDirectionW - lightDirection.xyz);
+		vec3 perturbation = bumpHeight * (bumpColor.rgb - 0.5);
+		vec3 halfvec = normalize(angleW + vec3(perturbation.x, perturbation.y, perturbation.z));
+		
+		float temp = max(0., dot(vNormal, halfvec));
+		temp = pow(temp, max(1., glossiness));
 		
-		vec3 halfvec = normalize(angleW + vec3(perturbation.x, perturbation.y, 0.0) * max(1., glossiness));
-		float temp = pow(dot(halfvec, vNormal), max(1., glossiness));
 		result.specular = specularColor * temp * spotAtten * attenuation;
 #endif
 		return result;
@@ -418,11 +422,13 @@ lightingInfo computeHemisphericLighting(vec3 viewDirectionW, vec3 vNormal, vec4
 	// Specular
 #ifdef SPECULARTERM
 	vec3 angleW = normalize(viewDirectionW + lightData.xyz);
-	vec2 perturbation = bumpHeight * (bumpColor.rg - 0.5);
+	vec3 perturbation = bumpHeight * (bumpColor.rgb - 0.5);
+	vec3 halfvec = normalize(angleW + vec3(perturbation.x, perturbation.y, perturbation.z));
+	
+	float temp = max(0.0, dot(vNormal, halfvec));
+	temp = pow(temp, max(1.0, glossiness));
 	
-	vec3 halfvec = normalize(angleW + vec3(perturbation.x, perturbation.y, 0.0) * max(1., glossiness));
-	float temp = pow(dot(halfvec, vNormal), max(1., glossiness));
-	result.specular = specularColor * temp;
+	result.specular = temp * specularColor;
 #endif
 
 	return result;

materialsLibrary/test/add/addwater.js

@@ -0,0 +1,72 @@
+window.prepareWater = function() {
+	var water = new BABYLON.WaterMaterial("water", scene);
+	water.backFaceCulling = false;
+	water.enableRenderTargets(false);
+	water.bumpTexture = new BABYLON.Texture("textures/waterbump.png", scene);
+	water.windForce = 45;
+	water.waveHeight = 1.3;
+	water.windDirection = new BABYLON.Vector2(1, 1);
+					
+	registerRangeUI("water", "windForce", 0, 100, function(value) {
+		water.windForce = value;
+	}, function() {
+		return water.windForce;
+	});
+	
+	registerRangeUI("water", "waveHeight", 0, 20, function(value) {
+		water.waveHeight = value;
+	}, function() {
+		return water.waveHeight;
+	});
+	
+	registerRangeUI("water", "bumpHeight", 0, 10, function(value) {
+		water.bumpHeight = value;
+	}, function() {
+		return water.bumpHeight;
+	});
+	
+	registerRangeUI("water", "colorBlendFactor", 0, 1, function(value) {
+		water.colorBlendFactor = value;
+	}, function() {
+		return water.colorBlendFactor;
+	});
+	
+	registerRangeUI("water", "waveLength", 0, 1, function(value) {
+		water.waveLength = value;
+	}, function() {
+		return water.waveLength;
+	});
+	
+	registerRangeUI("water", "waveSpeed", 0, 100, function(value) {
+		water.waveSpeed = value;
+	}, function() {
+		return water.waveSpeed;
+	});
+	
+	// Specular color
+	registerRangeUI("water", "specularColorR", 0, 1, function(value) {
+		water.specularColor.r = value;
+	}, function() {
+		return water.specularColor.r;
+	});
+	
+	registerRangeUI("water", "specularColorG", 0, 1, function(value) {
+		water.specularColor.g = value;
+	}, function() {
+		return water.specularColor.g;
+	});
+	
+	registerRangeUI("water", "specularColorB", 0, 1, function(value) {
+		water.specularColor.b = value;
+	}, function() {
+		return water.specularColor.b;
+	});
+	
+	registerRangeUI("water", "specularPower", 0, 512, function(value) {
+		water.specularPower = value;
+	}, function() {
+		return water.specularPower;
+	});
+		
+	return water;
+}

materialsLibrary/test/index.html

@@ -46,6 +46,8 @@
 
 	<script src="index.js"></script>
 	<script src="add/addpbr.js"></script>
+	<script src="add/addwater.js"></script>
+	
 	<script>
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
@@ -172,13 +174,7 @@
 
 				var normal = new BABYLON.NormalMaterial("normal", scene);
 				
-				var water = new BABYLON.WaterMaterial("water", scene);
-				water.backFaceCulling = false;
-				water.enableRenderTargets(false);
-				water.bumpTexture = new BABYLON.Texture("textures/waterbump.png", scene);
-				water.windForce = -45;
-				water.waveHeight = 1.3;
-				water.windDirection = new BABYLON.Vector2(1, 1);
+				var water = prepareWater();
 				water.addToRenderList(skybox);
 				water.addToRenderList(shadowCaster);
 				water.addToRenderList(shadowCaster2);