Added parameter to lava material + serialize and parse

materialsLibrary/materials/lava/babylon.lavaMaterial.ts

@@ -28,7 +28,7 @@ module BABYLON {
         public POINTLIGHT0 = false;
         public POINTLIGHT1 = false;
         public POINTLIGHT2 = false;
-        public POINTLIGHT3 = false;        
+        public POINTLIGHT3 = false;
         public SHADOW0 = false;
         public SHADOW1 = false;
         public SHADOW2 = false;
@@ -47,8 +47,7 @@ module BABYLON {
         public UV2 = false;
         public VERTEXCOLOR = false;
         public VERTEXALPHA = false;
-        public BONES = false;
-        public BONES4 = false;
+        public NUM_BONE_INFLUENCERS = 0;
         public BonesPerMesh = 0;
         public INSTANCES = false;
 
@@ -63,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;
 
@@ -143,7 +145,7 @@ module BABYLON {
                         needUVs = true;
                         this._defines.DIFFUSE = true;
                     }
-                }                
+                }
             }
 
             // Effect
@@ -263,10 +265,10 @@ module BABYLON {
                         this._defines.VERTEXALPHA = true;
                     }
                 }
+
                 if (mesh.useBones && mesh.computeBonesUsingShaders) {
-                    this._defines.BONES = true;
+                    this._defines.NUM_BONE_INFLUENCERS = mesh.numBoneInfluencers;
                     this._defines.BonesPerMesh = (mesh.skeleton.bones.length + 1);
-                    this._defines.BONES4 = true;
                 }
 
                 // Instances
@@ -282,7 +284,7 @@ module BABYLON {
                 scene.resetCachedMaterial();
 
                 // Fallbacks
-                var fallbacks = new EffectFallbacks();             
+                var fallbacks = new EffectFallbacks();
                 if (this._defines.FOG) {
                     fallbacks.addFallback(1, "FOG");
                 }
@@ -308,9 +310,9 @@ module BABYLON {
                         fallbacks.addFallback(0, "SHADOWVSM" + lightIndex);
                     }
                 }
-             
-                if (this._defines.BONES4) {
-                    fallbacks.addFallback(0, "BONES4");
+
+                if (this._defines.NUM_BONE_INFLUENCERS > 0){
+                    fallbacks.addCPUSkinningFallback(0, mesh);
                 }
 
                 //Attributes
@@ -332,9 +334,13 @@ module BABYLON {
                     attribs.push(VertexBuffer.ColorKind);
                 }
 
-                if (this._defines.BONES) {
+                if (this._defines.NUM_BONE_INFLUENCERS > 0) {
                     attribs.push(VertexBuffer.MatricesIndicesKind);
                     attribs.push(VertexBuffer.MatricesWeightsKind);
+                    if (this._defines.NUM_BONE_INFLUENCERS > 4) {
+                        attribs.push(VertexBuffer.MatricesIndicesExtraKind);
+                        attribs.push(VertexBuffer.MatricesWeightsExtraKind);
+                    }
                 }
 
                 if (this._defines.INSTANCES) {
@@ -355,10 +361,11 @@ module BABYLON {
                         "vLightData2", "vLightDiffuse2", "vLightSpecular2", "vLightDirection2", "vLightGround2", "lightMatrix2",
                         "vLightData3", "vLightDiffuse3", "vLightSpecular3", "vLightDirection3", "vLightGround3", "lightMatrix3",
                         "vFogInfos", "vFogColor", "pointSize",
-                        "vDiffuseInfos", 
+                        "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"
@@ -423,7 +430,7 @@ module BABYLON {
                     this._effect.setFloat("pointSize", this.pointSize);
                 }
 
-                this._effect.setVector3("vEyePosition", scene._mirroredCameraPosition ? scene._mirroredCameraPosition : scene.activeCamera.position);                
+                this._effect.setVector3("vEyePosition", scene._mirroredCameraPosition ? scene._mirroredCameraPosition : scene.activeCamera.position);
             }
 
             this._effect.setColor4("vDiffuseColor", this._scaledDiffuse, this.alpha * mesh.visibility);
@@ -494,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);
@@ -543,6 +554,60 @@ module BABYLON {
 
             return newMaterial;
         }
+
+
+        public serialize(): any {
+            var serializationObject = super.serialize();
+            serializationObject.customType = "lava";
+            serializationObject.diffuse         = this.diffuseColor.asArray();
+            serializationObject.fogColor        = this.fogColor.asArray();
+            serializationObject.speed           = this.speed;
+            serializationObject.movingSpeed     = this.movingSpeed;
+            serializationObject.lowFrequencySpeed = this.lowFrequencySpeed;
+            serializationObject.fogDensity      = this.fogDensity;
+            serializationObject.checkReadyOnlyOnce = this.checkReadyOnlyOnce;
+
+            if (this.diffuseTexture) {
+                serializationObject.diffuseTexture = this.diffuseTexture.serialize();
+            }
+            if (this.noiseTexture) {
+                serializationObject.diffuseTexture = this.noiseTexture.serialize();
+            }
+
+            return serializationObject;
+        }
+
+        public static Parse(source: any, scene: Scene, rootUrl: string): LavaMaterial {
+            var material = new LavaMaterial(source.name, scene);
+
+            material.diffuseColor   = Color3.FromArray(source.diffuse);
+            material.speed          = source.speed;
+            material.fogColor       = Color3.FromArray(source.fogColor);
+            material.movingSpeed    = source.movingSpeed;
+            material.lowFrequencySpeed = source.lowFrequencySpeed;
+            material.fogDensity     =  source.lowFrequencySpeed;
+
+            material.alpha          = source.alpha;
+
+            material.id             = source.id;
+
+            Tags.AddTagsTo(material, source.tags);
+            material.backFaceCulling = source.backFaceCulling;
+            material.wireframe = source.wireframe;
+
+            if (source.diffuseTexture) {
+                material.diffuseTexture = Texture.ParseTexture(source.diffuseTexture, scene, rootUrl);
+            }
+
+            if (source.noiseTexture) {
+                material.noiseTexture = Texture.ParseTexture(source.noiseTexture, scene, rootUrl);
+            }
+
+            if (source.checkReadyOnlyOnce) {
+                material.checkReadyOnlyOnce = source.checkReadyOnlyOnce;
+            }
+
+            return material;
+        }
     }
 } 
-

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;
 
@@ -19,10 +19,6 @@ attribute vec2 uv2;
 #ifdef VERTEXCOLOR
 attribute vec4 color;
 #endif
-#ifdef BONES
-attribute vec4 matricesIndices;
-attribute vec4 matricesWeights;
-#endif
 
 // Uniforms
 
@@ -44,8 +40,15 @@ uniform mat4 diffuseMatrix;
 uniform vec2 vDiffuseInfos;
 #endif
 
-#ifdef BONES
-uniform mat4 mBones[BonesPerMesh];
+#if NUM_BONE_INFLUENCERS > 0
+	uniform mat4 mBones[BonesPerMesh];
+
+	attribute vec4 matricesIndices;
+	attribute vec4 matricesWeights;
+	#if NUM_BONE_INFLUENCERS > 4
+		attribute vec4 matricesIndicesExtra;
+		attribute vec4 matricesWeightsExtra;
+	#endif
 #endif
 
 #ifdef POINTSIZE
@@ -207,25 +210,41 @@ void main(void) {
 	finalWorld = world;
 #endif
 
-#ifdef BONES
-	mat4 m0 = mBones[int(matricesIndices.x)] * matricesWeights.x;
-	mat4 m1 = mBones[int(matricesIndices.y)] * matricesWeights.y;
-	mat4 m2 = mBones[int(matricesIndices.z)] * matricesWeights.z;
+#if NUM_BONE_INFLUENCERS > 0
+	mat4 influence;
+	influence = mBones[int(matricesIndices[0])] * matricesWeights[0];
 
-#ifdef BONES4
-	mat4 m3 = mBones[int(matricesIndices.w)] * matricesWeights.w;
-	finalWorld = finalWorld * (m0 + m1 + m2 + m3);
-#else
-	finalWorld = finalWorld * (m0 + m1 + m2);
-#endif 
+	#if NUM_BONE_INFLUENCERS > 1
+		influence += mBones[int(matricesIndices[1])] * matricesWeights[1];
+	#endif 
+	#if NUM_BONE_INFLUENCERS > 2
+		influence += mBones[int(matricesIndices[2])] * matricesWeights[2];
+	#endif	
+	#if NUM_BONE_INFLUENCERS > 3
+		influence += mBones[int(matricesIndices[3])] * matricesWeights[3];
+	#endif	
 
+	#if NUM_BONE_INFLUENCERS > 4
+		influence += mBones[int(matricesIndicesExtra[0])] * matricesWeightsExtra[0];
+	#endif
+	#if NUM_BONE_INFLUENCERS > 5
+		influence += mBones[int(matricesIndicesExtra[1])] * matricesWeightsExtra[1];
+	#endif	
+	#if NUM_BONE_INFLUENCERS > 6
+		influence += mBones[int(matricesIndicesExtra[2])] * matricesWeightsExtra[2];
+	#endif	
+	#if NUM_BONE_INFLUENCERS > 7
+		influence += mBones[int(matricesIndicesExtra[3])] * matricesWeightsExtra[3];
+	#endif	
+
+	finalWorld = finalWorld * influence;
 #endif
 
 
     // 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;
 
@@ -295,4 +314,4 @@ void main(void) {
 #ifdef POINTSIZE
 	gl_PointSize = pointSize;
 #endif
-}
+}

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 src="add/addwater.js"></script>
 	
 	<script>
@@ -159,20 +161,14 @@
 				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 lava = prepareLava();
 
 				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 normal = prepareNormal();
 				
 				var water = prepareWater();
 				water.addToRenderList(skybox);

materialsLibrary/test/index.js

@@ -15,6 +15,20 @@ 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,
+        type: "Color"
+    });
+};
+
 
 window.registerRangeUI = function(material, name, minValue, maxValue, onChange, onSet) {
 	if (!registeredUIs[material]) {
@@ -71,6 +85,12 @@ var setUi = function(ui) {
 			ui.onChange(value);
 		});
 	}
+    else if (ui.type == "Color") {
+        options[ui.name] = ui.onSet();
+        materialgui.addColor(options, ui.name).onChange(function (value) {
+            ui.onChange(value);
+        })
+    }
 	else if (ui.type == "Button") {
 		options[ui.name] = ui.onClick;
 		materialgui.add(options, ui.name);

src/Materials/babylon.material.js

@@ -245,6 +245,10 @@ var BABYLON;
             if (!parsedMaterial.customType) {
                 return BABYLON.StandardMaterial.Parse(parsedMaterial, scene, rootUrl);
             }
+            // parse Lava material
+            //else if (parsedMaterial.customType === "lava") {
+            //    return LavaMaterial.Parse(parsedMaterial, scene, rootUrl);
+            //}
             //TODO this is where custom materials are inspected and parsed.
             return null;
         };

src/Materials/babylon.material.ts

@@ -284,6 +284,10 @@
             if (!parsedMaterial.customType) {
                 return StandardMaterial.Parse(parsedMaterial, scene, rootUrl);
             }
+            // parse Lava material
+            //else if (parsedMaterial.customType === "lava") {
+            //    return LavaMaterial.Parse(parsedMaterial, scene, rootUrl);
+            //}
 
             //TODO this is where custom materials are inspected and parsed.
             return null;