Lava material updated: new parameters.

Tests updated with new GUI panel.

materialsLibrary/materials/lava/babylon.lavaMaterial.ts

@@ -62,6 +62,9 @@ module BABYLON {
         public noiseTexture: BaseTexture;
         public fogColor: Color3;
         public speed : number = 1;
+        public movingSpeed : number = 1;
+        public lowFrequencySpeed : number = 1;
+        public fogDensity : number = 0.15;
 
         private _lastTime : number = 0;
 
@@ -361,7 +364,8 @@ module BABYLON {
                         "vDiffuseInfos", 
                         "mBones",
                         "vClipPlane", "diffuseMatrix",
-                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3","time", "speed", "fogColor"
+                        "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3","time", "speed","movingSpeed",
+                        "fogColor","fogDensity", "lowFrequencySpeed"
                     ],
                     ["diffuseSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3", "noiseTexture"
@@ -497,6 +501,10 @@ module BABYLON {
                 this.fogColor = Color3.Black();
             }
             this._effect.setColor3("fogColor", this.fogColor);
+            this._effect.setFloat("fogDensity", this.fogDensity);
+
+            this._effect.setFloat("lowFrequencySpeed", this.lowFrequencySpeed);
+            this._effect.setFloat("movingSpeed", this.movingSpeed);
 
 
             super.bind(world, mesh);

materialsLibrary/materials/lava/lava.fragment.fx

@@ -10,8 +10,10 @@ varying vec3 vPositionW;
 // MAGMAAAA
 uniform float time;
 uniform float speed;
+uniform float movingSpeed;
 uniform vec3 fogColor;
 uniform sampler2D noiseTexture;
+uniform float fogDensity;
 
 // Varying
 varying float noise;
@@ -402,17 +404,16 @@ void main(void) {
 
 	T1.x += noiseTex.x * 2.0;
 	T1.y += noiseTex.y * 2.0;
-	T2.x -= noiseTex.y * 0.2;
-	T2.y += noiseTex.z * 0.2;
+	T2.x -= noiseTex.y * 0.2 + time*0.001*movingSpeed;
+	T2.y += noiseTex.z * 0.2 + time*0.002*movingSpeed;
 
 	float p = texture2D( noiseTexture, T1 * 3.0 ).a;
 
 	vec4 lavaColor = texture2D( diffuseSampler, T2 * 4.0);
-	vec4 temp = lavaColor * ( vec4( p, p, p, p ) * 2.0 ) + ( lavaColor * lavaColor - 0.1 );
+	vec4 temp = lavaColor * ( vec4( p, p, p, p ) * 2. ) + ( lavaColor * lavaColor - 0.1 );
 
 	baseColor = temp;
 
-	float fogDensity = 0.15;
 	float depth = gl_FragCoord.z * 4.0;
 	const float LOG2 = 1.442695;
     float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );

materialsLibrary/materials/lava/lava.vertex.fx

@@ -1,7 +1,7 @@
 precision highp float;
 // Inputs
 uniform float time;
-uniform float speed;
+uniform float lowFrequencySpeed;
 // Varying
 varying float noise;
 
@@ -244,7 +244,7 @@ void main(void) {
     // get a turbulent 3d noise using the normal, normal to high freq
     noise = 10.0 *  -.10 * turbulence( .5 * normal + time*1.15 );
     // get a 3d noise using the position, low frequency
-    float b = 5.0 * pnoise( 0.05 * position +vec3(time*1.025), vec3( 100.0 ) );
+    float b = lowFrequencySpeed * 5.0 * pnoise( 0.05 * position +vec3(time*1.025), vec3( 100.0 ) );
     // compose both noises
     float displacement = - 1.5 * noise + b;
 

materialsLibrary/test/add/addlava.js

@@ -0,0 +1,46 @@
+window.prepareLava = function() {
+    var lava = new BABYLON.LavaMaterial("lava", scene);
+    lava.diffuseTexture = new BABYLON.Texture("textures/lava/lavatile.jpg", scene);
+    lava.diffuseTexture.uScale = 0.5;
+    lava.diffuseTexture.vScale = 0.5;
+    lava.noiseTexture = new BABYLON.Texture("textures/lava/cloud.png", scene);
+    lava.fogColor = BABYLON.Color3.Black();
+    lava.speed = 2.5;
+
+    // Fog color
+    registerColorPicker("lava", "fogColor", "#ff0000", function(value) {
+        lava.fogColor = BABYLON.Color3.FromHexString(value);
+    }, function() {
+        return lava.fogColor.toHexString();
+    });
+
+    // fog density
+    registerRangeUI("lava", "fogDensity", 0, 1, function(value) {
+        lava.fogDensity = value;
+    }, function() {
+        return lava.fogDensity;
+    });
+
+    // Speed
+    registerRangeUI("lava", "speed", 0, 10, function(value) {
+        lava.speed = value;
+    }, function() {
+        return lava.speed;
+    });
+
+    // low frequency speed
+    registerRangeUI("lava", "lowFrequencySpeed", 0, 10, function(value) {
+        lava.lowFrequencySpeed = value;
+    }, function() {
+        return lava.lowFrequencySpeed;
+    });
+
+    // moving speed
+    registerRangeUI("lava", "movingSpeed", 0, 100, function(value) {
+        lava.movingSpeed = value;
+    }, function() {
+        return lava.movingSpeed;
+    });
+
+    return lava;
+};

materialsLibrary/test/add/addnormal.js

@@ -0,0 +1,5 @@
+window.prepareNormal = function() {
+    var normal = new BABYLON.NormalMaterial("normal", scene);
+
+    return normal;
+};

materialsLibrary/test/index.html

@@ -45,7 +45,9 @@
 	<canvas id="renderCanvas"></canvas>
 
 	<script src="index.js"></script>
-	<script src="add/addpbr.js"></script>
+    <script src="add/addpbr.js"></script>
+    <script src="add/addlava.js"></script>
+    <script src="add/addnormal.js"></script>
 	<script>
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
@@ -156,22 +158,12 @@
 				std.diffuseTexture.uScale = 5;
 				std.diffuseTexture.vScale = 5;
 
-                // Lava
-                var lava = new BABYLON.LavaMaterial("lava", scene);
-                lava.diffuseTexture = new BABYLON.Texture("textures/lava/lavatile.jpg", scene);
-                lava.diffuseTexture.uScale = 0.5;
-                lava.diffuseTexture.vScale = 0.5;
-				lava.noiseTexture = new BABYLON.Texture("textures/lava/cloud.png", scene);
-				lava.fogColor = BABYLON.Color3.Black();
-				lava.speed = 2.5;
 
 				var simple = new BABYLON.SimpleMaterial("simple", scene);
 				simple.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
 				simple.diffuseTexture.uScale = 5;
 				simple.diffuseTexture.vScale = 5;
 
-				var normal = new BABYLON.NormalMaterial("normal", scene);
-				
 				var water = new BABYLON.WaterMaterial("water", scene);
 				water.backFaceCulling = false;
 				water.enableRenderTargets(false);
@@ -204,8 +196,13 @@
 				terrain.diffuseTexture1.uScale = terrain.diffuseTexture1.vScale = 10;
 				terrain.diffuseTexture2.uScale = terrain.diffuseTexture2.vScale = 10;
 				terrain.diffuseTexture3.uScale = terrain.diffuseTexture3.vScale = 10;
-				
-				var pbr = preparePBR();
+
+                // PBR
+				var pbr         = preparePBR();
+                // Normal
+                var normal      = prepareNormal();
+                // Lava
+                var lava        = prepareLava();
 								
 				// Default to std
 				var currentMaterial = std;

materialsLibrary/test/index.js

@@ -15,6 +15,19 @@ var options = {
 var registeredUIs = {};
 var materialgui;
 
+window.registerColorPicker = function(material, name, color, onChange, onSet) {
+    if (!registeredUIs[material]) {
+        registeredUIs[material] = [];
+    }
+
+    registeredUIs[material].push({
+        name: name,
+        color: "#ff0000",
+        onChange: onChange,
+        onSet: onSet
+    });
+};
+
 
 window.registerRangeUI = function(material, name, minValue, maxValue, onChange, onSet) {
 	if (!registeredUIs[material]) {
@@ -32,10 +45,16 @@ window.registerRangeUI = function(material, name, minValue, maxValue, onChange,
 
 var setUi = function(ui) {
 	options[ui.name] = ui.onSet();
-	
-	materialgui.add(options, ui.name, ui.minValue, ui.maxValue).onChange(function(value) {
-		ui.onChange(value);
-	});
+
+    if (ui.color) {
+        materialgui.addColor(options, ui.name).onChange(function(value) {
+            ui.onChange(value);
+        });
+    } else {
+        materialgui.add(options, ui.name, ui.minValue, ui.maxValue).onChange(function(value) {
+            ui.onChange(value);
+        });
+    }
 }
 
 window.enableMaterial = function(material) {