FIxing mix material up to 8 diffuse textures

materialsLibrary/index.html

@@ -53,6 +53,7 @@
 	<script src="test/addpbrspecularglossiness.js"></script>
 	<script src="test/addCell.js"></script>
 	<script src="test/addbackground.js"></script>
+	<script src="test/addMix.js"></script>
 	
 	<script>
 	var backgroundSkybox = null;
@@ -215,13 +216,15 @@
 				var shadowOnly = new BABYLON.ShadowOnlyMaterial();
 
 				var cell = prepareCell();
+
+				var mix = prepareMix();
 				
 				// Default to std
 				var currentMaterial = std;
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'pbrmetallicroughness', 'pbrspecularglossiness', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly', 'cell', 'background']).onFinishChange(function () {
+				gui.add(options, 'material', ['standard', 'simple', 'water', 'fire', 'lava', 'normal', 'terrain', 'pbr', 'pbrmetallicroughness', 'pbrspecularglossiness', 'fur', 'triPlanar', 'gradient', 'sky', 'grid', 'shadowOnly', 'cell', 'background', 'mix']).onFinishChange(function () {
 					water.enableRenderTargets(false);
 					skybox.material = skyboxMaterial;
 					currentMesh.isVisible = true;
@@ -287,6 +290,9 @@
 							currentMaterial = back;
 							backgroundSkybox.setEnabled(true);
 							break;
+						case "mix":
+							currentMaterial = mix;
+							break;
 						default:
 							currentMaterial = std;
 							break;

materialsLibrary/src/mix/babylon.mixMaterial.ts

@@ -1,10 +1,8 @@
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON {
-
     class MixMaterialDefines extends MaterialDefines {
         public DIFFUSE = false;
-        public BUMP = false;
         public CLIPPLANE = false;
         public ALPHATEST = false;
         public DEPTHPREPASS = false;
@@ -32,12 +30,12 @@ module BABYLON {
          * Mix textures
          */
 
-        @serializeAsTexture("mixTexture")
-        private _mixTexture: BaseTexture;
+        @serializeAsTexture("mixTexture1")
+        private _mixTexture1: BaseTexture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public mixTexture: BaseTexture;
+        public mixTexture1: BaseTexture;
 
-        @serializeAsTexture("mixTexture")
+        @serializeAsTexture("mixTexture2")
         private _mixTexture2: BaseTexture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
         public mixTexture2: BaseTexture;
@@ -66,29 +64,25 @@ module BABYLON {
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
         public diffuseTexture4: Texture;
 
-        /**
-         * Bump textures
-         */
-
-        @serializeAsTexture("bumpTexture1")
-        private _bumpTexture1: Texture;
+        @serializeAsTexture("diffuseTexture1")
+        private _diffuseTexture5: Texture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public bumpTexture1: Texture;
+        public diffuseTexture5: Texture;
 
-        @serializeAsTexture("bumpTexture2")
-        private _bumpTexture2: Texture;
+        @serializeAsTexture("diffuseTexture2")
+        private _diffuseTexture6: Texture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public bumpTexture2: Texture;
+        public diffuseTexture6: Texture;
 
-        @serializeAsTexture("bumpTexture3")
-        private _bumpTexture3: Texture;
+        @serializeAsTexture("diffuseTexture3")
+        private _diffuseTexture7: Texture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public bumpTexture3: Texture;
+        public diffuseTexture7: Texture;
 
-        @serializeAsTexture("bumpTexture4")
-        private _bumpTexture4: Texture;
+        @serializeAsTexture("diffuseTexture4")
+        private _diffuseTexture8: Texture;
         @expandToProperty("_markAllSubMeshesAsTexturesDirty")
-        public bumpTexture4: Texture;
+        public diffuseTexture8: Texture;
 
         /**
          * Uniforms
@@ -157,8 +151,8 @@ module BABYLON {
             // Textures
             if (scene.texturesEnabled) {
                 if (StandardMaterial.DiffuseTextureEnabled) {
-                    if (this.mixTexture) {
-                        if (!this.mixTexture.isReady()) {
+                    if (this._mixTexture1) {
+                        if (!this._mixTexture1.isReady()) {
                             return false;
                         } else {
                             defines._needUVs = true;
@@ -172,10 +166,6 @@ module BABYLON {
                             defines.MIXMAP2 = true;
                         }
                     }
-                    if ((this.bumpTexture1 || this.bumpTexture2 || this.bumpTexture3 || this.bumpTexture4) && StandardMaterial.BumpTextureEnabled) {
-                        defines._needNormals = true;
-                        defines.BUMP = true;
-                    }
                 }
             }
 
@@ -231,19 +221,21 @@ module BABYLON {
                 MaterialHelper.PrepareAttributesForInstances(attribs, defines);
 
                 // Legacy browser patch
-                var shaderName = "terrain";
+                var shaderName = "mix";
                 var join = defines.toString();
-                var uniforms = ["world", "view", "viewProjection", "vEyePosition", "vLightsType", "vDiffuseColor", "vSpecularColor",
+                var uniforms = [
+                    "world", "view", "viewProjection", "vEyePosition", "vLightsType", "vDiffuseColor", "vSpecularColor",
                     "vFogInfos", "vFogColor", "pointSize",
                     "vTextureInfos",
                     "mBones",
                     "vClipPlane", "textureMatrix",
-                    "diffuse1Infos", "diffuse2Infos", "diffuse3Infos", "diffuse4Infos"
+                    "diffuse1Infos", "diffuse2Infos", "diffuse3Infos", "diffuse4Infos",
+                    "diffuse5Infos", "diffuse6Infos", "diffuse7Infos", "diffuse8Infos"
                 ];
                 var samplers = [
                     "mixMap1Sampler", "mixMap2Sampler",
                     "diffuse1Sampler", "diffuse2Sampler", "diffuse3Sampler", "diffuse4Sampler",
-                    "bump1Sampler", "bump2Sampler", "bump3Sampler"
+                    "diffuse5Sampler", "diffuse6Sampler", "diffuse7Sampler", "diffuse8Sampler"
                 ];
 
                 var uniformBuffers = new Array<string>()
@@ -302,10 +294,10 @@ module BABYLON {
 
             if (this._mustRebind(scene, effect)) {
                 // Textures        
-                if (this.mixTexture) {
-                    this._activeEffect.setTexture("mixMap1Sampler", this._mixTexture);
-                    this._activeEffect.setFloat2("vTextureInfos", this._mixTexture.coordinatesIndex, this._mixTexture.level);
-                    this._activeEffect.setMatrix("textureMatrix", this._mixTexture.getTextureMatrix());
+                if (this._mixTexture1) {
+                    this._activeEffect.setTexture("mixMap1Sampler", this._mixTexture1);
+                    this._activeEffect.setFloat2("vTextureInfos", this._mixTexture1.coordinatesIndex, this._mixTexture1.level);
+                    this._activeEffect.setMatrix("textureMatrix", this._mixTexture1.getTextureMatrix());
 
                     if (StandardMaterial.DiffuseTextureEnabled) {
                         if (this._diffuseTexture1) {
@@ -325,27 +317,31 @@ module BABYLON {
                             this._activeEffect.setFloat2("diffuse4Infos", this._diffuseTexture4.uScale, this._diffuseTexture4.vScale);
                         }
                     }
+                }
 
-                    if (StandardMaterial.BumpTextureEnabled && scene.getEngine().getCaps().standardDerivatives) {
-                        if (this._bumpTexture1) {
-                            this._activeEffect.setTexture("bump1Sampler", this._bumpTexture1);
+                if (this.mixTexture2) {
+                    this._activeEffect.setTexture("mixMap2Sampler", this._mixTexture2);
+
+                    if (StandardMaterial.DiffuseTextureEnabled) {
+                        if (this._diffuseTexture5) {
+                            this._activeEffect.setTexture("diffuse5Sampler", this._diffuseTexture5);
+                            this._activeEffect.setFloat2("diffuse5Infos", this._diffuseTexture5.uScale, this._diffuseTexture5.vScale);
                         }
-                        if (this._bumpTexture2) {
-                            this._activeEffect.setTexture("bump2Sampler", this._bumpTexture2);
+                        if (this._diffuseTexture6) {
+                            this._activeEffect.setTexture("diffuse6Sampler", this._diffuseTexture6);
+                            this._activeEffect.setFloat2("diffuse66nfos", this._diffuseTexture6.uScale, this._diffuseTexture6.vScale);
                         }
-                        if (this._bumpTexture3) {
-                            this._activeEffect.setTexture("bump3Sampler", this._bumpTexture3);
+                        if (this._diffuseTexture7) {
+                            this._activeEffect.setTexture("diffuse7Sampler", this._diffuseTexture7);
+                            this._activeEffect.setFloat2("diffuse7Infos", this._diffuseTexture7.uScale, this._diffuseTexture7.vScale);
                         }
-                        if (this.bumpTexture4) {
-                            this._activeEffect.setTexture("bump4Sampler", this._bumpTexture4);
+                        if (this._diffuseTexture8) {
+                            this._activeEffect.setTexture("diffuse8Sampler", this._diffuseTexture8);
+                            this._activeEffect.setFloat2("diffuse8Infos", this._diffuseTexture8.uScale, this._diffuseTexture8.vScale);
                         }
                     }
                 }
 
-                if (this.mixTexture2) {
-                    this._activeEffect.setTexture("mixMap2Sampler", this._mixTexture2);
-                }
-
                 // Clip plane
                 MaterialHelper.BindClipPlane(this._activeEffect, scene);
 
@@ -381,8 +377,8 @@ module BABYLON {
         public getAnimatables(): IAnimatable[] {
             var results = [];
 
-            if (this.mixTexture && this.mixTexture.animations && this.mixTexture.animations.length > 0) {
-                results.push(this.mixTexture);
+            if (this._mixTexture1 && this._mixTexture1.animations && this._mixTexture1.animations.length > 0) {
+                results.push(this._mixTexture1);
             }
 
             return results;
@@ -391,8 +387,8 @@ module BABYLON {
         public getActiveTextures(): BaseTexture[] {
             var activeTextures = super.getActiveTextures();
 
-            if (this._mixTexture) {
-                activeTextures.push(this._mixTexture);
+            if (this._mixTexture1) {
+                activeTextures.push(this._mixTexture1);
             }
 
             if (this._diffuseTexture1) {
@@ -407,16 +403,8 @@ module BABYLON {
                 activeTextures.push(this._diffuseTexture3);
             }
 
-            if (this._bumpTexture1) {
-                activeTextures.push(this._bumpTexture1);
-            }
-
-            if (this._bumpTexture2) {
-                activeTextures.push(this._bumpTexture2);
-            }
-
-            if (this._bumpTexture3) {
-                activeTextures.push(this._bumpTexture3);
+            if (this._diffuseTexture4) {
+                activeTextures.push(this._diffuseTexture4);
             }
 
             return activeTextures;
@@ -427,7 +415,7 @@ module BABYLON {
                 return true;
             }
 
-            if (this._mixTexture === texture) {
+            if (this._mixTexture1 === texture) {
                 return true;
             }
 
@@ -443,15 +431,7 @@ module BABYLON {
                 return true;
             }
 
-            if (this._bumpTexture1 === texture) {
-                return true;
-            }
-
-            if (this._bumpTexture2 === texture) {
-                return true;
-            }
-
-            if (this._bumpTexture3 === texture) {
+            if (this._diffuseTexture4 === texture) {
                 return true;
             }
 
@@ -459,8 +439,8 @@ module BABYLON {
         }
 
         public dispose(forceDisposeEffect?: boolean): void {
-            if (this.mixTexture) {
-                this.mixTexture.dispose();
+            if (this._mixTexture1) {
+                this._mixTexture1.dispose();
             }
 
             super.dispose(forceDisposeEffect);

materialsLibrary/src/mix/mix.fragment.fx

@@ -40,19 +40,17 @@ uniform sampler2D diffuse2Sampler;
 uniform sampler2D diffuse3Sampler;
 uniform sampler2D diffuse4Sampler;
 
-#ifdef MIXMAP2
-uniform sampler2D diffuse5Sampler;
-uniform sampler2D diffuse6Sampler;
-uniform sampler2D diffuse7Sampler;
-uniform sampler2D diffuse8Sampler;
-#endif
-
 uniform vec2 diffuse1Infos;
 uniform vec2 diffuse2Infos;
 uniform vec2 diffuse3Infos;
 uniform vec2 diffuse4Infos;
 
 #ifdef MIXMAP2
+uniform sampler2D diffuse5Sampler;
+uniform sampler2D diffuse6Sampler;
+uniform sampler2D diffuse7Sampler;
+uniform sampler2D diffuse8Sampler;
+
 uniform vec2 diffuse5Infos;
 uniform vec2 diffuse6Infos;
 uniform vec2 diffuse7Infos;
@@ -61,20 +59,6 @@ uniform vec2 diffuse8Infos;
 
 #endif
 
-#ifdef BUMP
-uniform sampler2D bump1Sampler;
-uniform sampler2D bump2Sampler;
-uniform sampler2D bump3Sampler;
-uniform sampler2D bump4Sampler;
-
-#ifdef MIXMAP2
-uniform sampler2D bump5Sampler;
-uniform sampler2D bump6Sampler;
-uniform sampler2D bump7Sampler;
-uniform sampler2D bump8Sampler;
-#endif
-#endif
-
 // Shadows
 #include<lightsFragmentFunctions>
 #include<shadowsFragmentFunctions>
@@ -83,49 +67,6 @@ uniform sampler2D bump8Sampler;
 // Fog
 #include<fogFragmentDeclaration>
 
-// Bump
-#ifdef BUMP
-#extension GL_OES_standard_derivatives : enable
-// Thanks to http://www.thetenthplanet.de/archives/1180
-mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv)
-{
-	// get edge vectors of the pixel triangle
-	vec3 dp1 = dFdx(p);
-	vec3 dp2 = dFdy(p);
-	vec2 duv1 = dFdx(uv);
-	vec2 duv2 = dFdy(uv);
-
-	// solve the linear system
-	vec3 dp2perp = cross(dp2, normal);
-	vec3 dp1perp = cross(normal, dp1);
-	vec3 tangent = dp2perp * duv1.x + dp1perp * duv2.x;
-	vec3 binormal = dp2perp * duv1.y + dp1perp * duv2.y;
-
-	// construct a scale-invariant frame 
-	float invmax = inversesqrt(max(dot(tangent, tangent), dot(binormal, binormal)));
-	return mat3(tangent * invmax, binormal * invmax, normal);
-}
-
-vec3 perturbNormal(vec3 viewDir, vec4 mixColor)
-{	
-	vec3 bump1Color = texture2D(bump1Sampler, vTextureUV * diffuse1Infos).xyz;
-	vec3 bump2Color = texture2D(bump2Sampler, vTextureUV * diffuse2Infos).xyz;
-	vec3 bump3Color = texture2D(bump3Sampler, vTextureUV * diffuse3Infos).xyz;
-	vec3 bump4Color = texture2D(bump4Sampler, vTextureUV * diffuse4Infos).xyz;
-	
-	bump1Color.rgb *= mixColor.r;
-   	bump2Color.rgb = mix(bump1Color.rgb, bump2Color.rgb, mixColor.g);
-   	bump3Color.rgb = mix(bump2Color.rgb, bump3Color.rgb, mixColor.b);
-	
-	vec3 map = mix(bump3Color.rgb, bump4Color.rgb, mixColor.a);
-
-	map = map * 255. / 127. - 128. / 127.;
-	mat3 TBN = cotangent_frame(vNormalW * vTextureInfos.y, -viewDir, vTextureUV);
-	return normalize(TBN * map);
-}
-#endif
-
-
 void main(void) {
 	// Clip plane
 #ifdef CLIPPLANE
@@ -136,7 +77,7 @@ void main(void) {
 	vec3 viewDirectionW = normalize(vEyePosition - vPositionW);
 
 	// Base color
-	vec4 mixColor1 = vec4(1., 1., 1., 1.);
+	vec4 finalMixColor = vec4(1., 1., 1., 1.);
 	vec3 diffuseColor = vDiffuseColor.rgb;
 
 #ifdef MIXMAP2
@@ -153,7 +94,7 @@ void main(void) {
 	// Alpha
 	float alpha = vDiffuseColor.a;
 	
-	// Bump
+	// Normal
 #ifdef NORMAL
 	vec3 normalW = normalize(vNormalW);
 #else
@@ -161,37 +102,43 @@ void main(void) {
 #endif
 
 #ifdef DIFFUSE
-	mixColor1 = texture2D(mixMap1Sampler, vTextureUV);
-
-#if defined(BUMP) && defined(DIFFUSE)
-	normalW = perturbNormal(viewDirectionW, mixColor1);
-#endif
+	vec4 mixColor = texture2D(mixMap1Sampler, vTextureUV);
 
 #include<depthPrePass>
 
-	mixColor1.rgb *= vTextureInfos.y;
+	mixColor.rgb *= vTextureInfos.y;
 	
 	vec4 diffuse1Color = texture2D(diffuse1Sampler, vTextureUV * diffuse1Infos);
 	vec4 diffuse2Color = texture2D(diffuse2Sampler, vTextureUV * diffuse2Infos);
 	vec4 diffuse3Color = texture2D(diffuse3Sampler, vTextureUV * diffuse3Infos);
 	vec4 diffuse4Color = texture2D(diffuse4Sampler, vTextureUV * diffuse4Infos);
 	
-	diffuse1Color.rgb *= mixColor1.r;
-   	diffuse2Color.rgb = mix(diffuse1Color.rgb, diffuse2Color.rgb, mixColor1.g);
-   	diffuse3Color.rgb = mix(diffuse2Color.rgb, diffuse3Color.rgb, mixColor1.b);
-	mixColor1.rgb = mix(diffuse3Color.rgb, diffuse4Color.rgb, 1.0 - mixColor1.a);
+	diffuse1Color.rgb *= mixColor.r;
+   	diffuse2Color.rgb = mix(diffuse1Color.rgb, diffuse2Color.rgb, mixColor.g);
+   	diffuse3Color.rgb = mix(diffuse2Color.rgb, diffuse3Color.rgb, mixColor.b);
+	finalMixColor.rgb = mix(diffuse3Color.rgb, diffuse4Color.rgb, 1.0 - mixColor.a);
 
 #ifdef MIXMAP2
+	mixColor = texture2D(mixMap2Sampler, vTextureUV);
+	mixColor.rgb *= vTextureInfos.y;
+
 	vec4 diffuse5Color = texture2D(diffuse5Sampler, vTextureUV * diffuse5Infos);
 	vec4 diffuse6Color = texture2D(diffuse6Sampler, vTextureUV * diffuse6Infos);
 	vec4 diffuse7Color = texture2D(diffuse7Sampler, vTextureUV * diffuse7Infos);
 	vec4 diffuse8Color = texture2D(diffuse8Sampler, vTextureUV * diffuse8Infos);
+
+	diffuse5Color.rgb *= mixColor.r;
+   	diffuse6Color.rgb = mix(diffuse5Color.rgb, diffuse6Color.rgb, mixColor.g);
+   	diffuse7Color.rgb = mix(diffuse6Color.rgb, diffuse7Color.rgb, mixColor.b);
+	mixColor.rgb = mix(diffuse7Color.rgb, diffuse8Color.rgb, 1.0 - mixColor.a);
+
+	finalMixColor.rgb = mix(finalMixColor.rgb, mixColor.rgb, 1.0);
 #endif
 	
 #endif
 
 #ifdef VERTEXCOLOR
-	mixColor1.rgb *= vColor.rgb;
+	finalMixColor.rgb *= vColor.rgb;
 #endif
 
 	// Lighting
@@ -214,7 +161,7 @@ void main(void) {
 	vec3 finalSpecular = vec3(0.0);
 #endif
 
-    vec3 finalDiffuse = clamp(diffuseBase * diffuseColor * mixColor1.rgb, 0.0, 1.0);
+    vec3 finalDiffuse = clamp(diffuseBase * diffuseColor * finalMixColor.rgb, 0.0, 1.0);
 
 	// Composition
 	vec4 color = vec4(finalDiffuse + finalSpecular, alpha);

materialsLibrary/test/addMix.js

@@ -1,21 +1,29 @@
-window.prepareTerrain = function() {
-    var terrain = new BABYLON.TerrainMaterial("terrain", scene);
-    terrain.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
-    terrain.specularPower = 64;
-    terrain.mixTexture = new BABYLON.Texture("/playground/textures/mixMap.png", scene);
-    terrain.diffuseTexture1 = new BABYLON.Texture("/playground/textures/floor.png", scene);
-    terrain.diffuseTexture2 = new BABYLON.Texture("/playground/textures/rock.png", scene);
-    terrain.diffuseTexture3 = new BABYLON.Texture("/playground/textures/grass.png", scene);
-    terrain.diffuseTexture4 = new BABYLON.Texture("/playground/textures/floor.png", scene);
+window.prepareMix = function() {
+    var mix = new BABYLON.MixMaterial("mix", scene);
+    mix.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
+    mix.specularPower = 64;
+    mix.mixTexture1 = new BABYLON.Texture("/playground/textures/mixMap.png", scene);
+    mix.mixTexture2 = new BABYLON.Texture("/playground/textures/mixMap_2.png", scene);
+
+    mix.diffuseTexture1 = new BABYLON.Texture("/playground/textures/floor.png", scene);
+    mix.diffuseTexture2 = new BABYLON.Texture("/playground/textures/rock.png", scene);
+    mix.diffuseTexture3 = new BABYLON.Texture("/playground/textures/grass.png", scene);
+    mix.diffuseTexture4 = new BABYLON.Texture("/playground/textures/floor.png", scene);
+
+    mix.diffuseTexture1.uScale = mix.diffuseTexture1.vScale = 10;
+    mix.diffuseTexture2.uScale = mix.diffuseTexture2.vScale = 10;
+    mix.diffuseTexture3.uScale = mix.diffuseTexture3.vScale = 10;
+    mix.diffuseTexture4.uScale = mix.diffuseTexture4.vScale = 10;
+
+    mix.diffuseTexture5 = new BABYLON.Texture("/playground/textures/leopard_fur.jpg", scene);
+    mix.diffuseTexture6 = new BABYLON.Texture("/playground/textures/wood.jpg", scene);
+    mix.diffuseTexture7 = new BABYLON.Texture("/playground/textures/sand.jpg", scene);
+    mix.diffuseTexture8 = new BABYLON.Texture("/playground/textures/crate.png", scene);
+
+    mix.diffuseTexture5.uScale = mix.diffuseTexture5.vScale = 10;
+    mix.diffuseTexture6.uScale = mix.diffuseTexture6.vScale = 10;
+    mix.diffuseTexture7.uScale = mix.diffuseTexture7.vScale = 10;
+    mix.diffuseTexture8.uScale = mix.diffuseTexture8.vScale = 10;
     
-    terrain.bumpTexture1 = new BABYLON.Texture("/playground/textures/floor_bump.PNG", scene);
-    terrain.bumpTexture2 = new BABYLON.Texture("/playground/textures/rockn.png", scene);
-    terrain.bumpTexture3 = new BABYLON.Texture("/playground/textures/grassn.png", scene);
-    terrain.bumpTexture4 = new BABYLON.Texture("/playground/textures/floor_bump.PNG", scene);
-    
-    terrain.diffuseTexture1.uScale = terrain.diffuseTexture1.vScale = 10;
-    terrain.diffuseTexture2.uScale = terrain.diffuseTexture2.vScale = 10;
-    terrain.diffuseTexture3.uScale = terrain.diffuseTexture3.vScale = 10;
-    
-    return terrain;
+    return mix;
 };