Browse Source

Merge remote-tracking branch 'origin/master'

Conflicts:
	materialsLibrary/test/add/addfur.js
luaacro 9 years ago
parent
commit
216f45927c

File diff suppressed because it is too large
+ 55 - 5
materialsLibrary/dist/babylon.furMaterial.js


File diff suppressed because it is too large
+ 1 - 1
materialsLibrary/dist/babylon.furMaterial.min.js


+ 3 - 0
materialsLibrary/dist/dts/babylon.furMaterial.d.ts

@@ -11,6 +11,7 @@ declare module BABYLON {
         furSpacing: number;
         furSpacing: number;
         furGravity: Vector3;
         furGravity: Vector3;
         furSpeed: number;
         furSpeed: number;
+        furDensity: number;
         furTexture: DynamicTexture;
         furTexture: DynamicTexture;
         disableLighting: boolean;
         disableLighting: boolean;
         highLevelFur: boolean;
         highLevelFur: boolean;
@@ -21,6 +22,7 @@ declare module BABYLON {
         private _defines;
         private _defines;
         private _cachedDefines;
         private _cachedDefines;
         constructor(name: string, scene: Scene);
         constructor(name: string, scene: Scene);
+        furTime: number;
         needAlphaBlending(): boolean;
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BaseTexture;
         getAlphaTestTexture(): BaseTexture;
@@ -34,5 +36,6 @@ declare module BABYLON {
         serialize(): any;
         serialize(): any;
         static Parse(source: any, scene: Scene, rootUrl: string): FurMaterial;
         static Parse(source: any, scene: Scene, rootUrl: string): FurMaterial;
         static GenerateTexture(name: string, scene: Scene): DynamicTexture;
         static GenerateTexture(name: string, scene: Scene): DynamicTexture;
+        static FurifyMesh(sourceMesh: Mesh, quality: number): Mesh[];
     }
     }
 }
 }

+ 60 - 5
materialsLibrary/materials/fur/babylon.furMaterial.ts

@@ -69,14 +69,15 @@ module BABYLON {
         public furAngle: number = 0;
         public furAngle: number = 0;
         public furColor = new Color3(0.44,0.21,0.02);
         public furColor = new Color3(0.44,0.21,0.02);
         
         
-        public furOffset: number = 0.9;
+        public furOffset: number = 0.0;
         public furSpacing: number = 12;
         public furSpacing: number = 12;
         public furGravity = new Vector3(0, 0, 0);
         public furGravity = new Vector3(0, 0, 0);
         public furSpeed: number = 100;
         public furSpeed: number = 100;
+        public furDensity: number = 20;
         public furTexture: DynamicTexture;
         public furTexture: DynamicTexture;
         
         
         public disableLighting = false;
         public disableLighting = false;
-        public highLevelFur: boolean = false;
+        public highLevelFur: boolean = true;
 
 
         private _worldViewProjectionMatrix = Matrix.Zero();
         private _worldViewProjectionMatrix = Matrix.Zero();
         private _scaledDiffuse = new Color3(1.,1.,1.);
         private _scaledDiffuse = new Color3(1.,1.,1.);
@@ -92,6 +93,14 @@ module BABYLON {
 
 
             this._cachedDefines.BonesPerMesh = -1;
             this._cachedDefines.BonesPerMesh = -1;
         }
         }
+        
+        public get furTime() {
+            return this._furTime;
+        }
+        
+        public set furTime(furTime: number) {
+            this._furTime = furTime;
+        }
 
 
         public needAlphaBlending(): boolean {
         public needAlphaBlending(): boolean {
             return (this.alpha < 1.0);
             return (this.alpha < 1.0);
@@ -383,7 +392,7 @@ module BABYLON {
                         "mBones",
                         "mBones",
                         "vClipPlane", "diffuseMatrix",
                         "vClipPlane", "diffuseMatrix",
                         "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3",
                         "shadowsInfo0", "shadowsInfo1", "shadowsInfo2", "shadowsInfo3",
-                        "furLength", "furAngle", "furColor", "furOffset", "furGravity", "furTime", "furSpacing"
+                        "furLength", "furAngle", "furColor", "furOffset", "furGravity", "furTime", "furSpacing", "furDensity"
                     ],
                     ],
                     ["diffuseSampler",
                     ["diffuseSampler",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3",
                         "shadowSampler0", "shadowSampler1", "shadowSampler2", "shadowSampler3",
@@ -520,6 +529,7 @@ module BABYLON {
                 this._effect.setVector3("furGravity", this.furGravity);
                 this._effect.setVector3("furGravity", this.furGravity);
                 this._effect.setFloat("furOffset", this.furOffset);
                 this._effect.setFloat("furOffset", this.furOffset);
                 this._effect.setFloat("furSpacing", this.furSpacing);
                 this._effect.setFloat("furSpacing", this.furSpacing);
+                this._effect.setFloat("furDensity", this.furDensity);
                 
                 
                 this._furTime += this.getScene().getEngine().getDeltaTime() / this.furSpeed;
                 this._furTime += this.getScene().getEngine().getDeltaTime() / this.furSpeed;
                 this._effect.setFloat("furTime", this._furTime);
                 this._effect.setFloat("furTime", this._furTime);
@@ -577,10 +587,16 @@ module BABYLON {
             serializationObject.customType      = "BABYLON.FurMaterial";
             serializationObject.customType      = "BABYLON.FurMaterial";
             serializationObject.diffuseColor    = this.diffuseColor.asArray();
             serializationObject.diffuseColor    = this.diffuseColor.asArray();
             serializationObject.disableLighting = this.disableLighting;
             serializationObject.disableLighting = this.disableLighting;
+            
             serializationObject.furLength = this.furLength;
             serializationObject.furLength = this.furLength;
             serializationObject.furAngle = this.furAngle;
             serializationObject.furAngle = this.furAngle;
             serializationObject.furColor = this.furColor.asArray();
             serializationObject.furColor = this.furColor.asArray();
             
             
+            serializationObject.furGravity = this.furGravity.asArray();
+            serializationObject.furSpacing = this.furSpacing;
+            serializationObject.furSpeed = this.furSpeed;
+            serializationObject.furDensity = this.furDensity;
+            
             if (this.diffuseTexture) {
             if (this.diffuseTexture) {
                 serializationObject.diffuseTexture = this.diffuseTexture.serialize();
                 serializationObject.diffuseTexture = this.diffuseTexture.serialize();
             }
             }
@@ -599,11 +615,15 @@ module BABYLON {
             material.furLength          = source.furLength;
             material.furLength          = source.furLength;
             material.furAngle           = source.furAngle;
             material.furAngle           = source.furAngle;
             material.furColor           = Color3.FromArray(source.furColor);
             material.furColor           = Color3.FromArray(source.furColor);
+            material.furGravity         = Vector3.FromArray(source.furGravity);
+            material.furSpacing         = source.furSpacing;
+            material.furSpeed           = source.furSpeed;
+            material.furDensity         = source.furDensity;
             material.disableLighting    = source.disableLighting;
             material.disableLighting    = source.disableLighting;
 
 
-            material.alpha          = source.alpha;
+            material.alpha              = source.alpha;
 
 
-            material.id             = source.id;
+            material.id                 = source.id;
 
 
             Tags.AddTagsTo(material, source.tags);
             Tags.AddTagsTo(material, source.tags);
             material.backFaceCulling = source.backFaceCulling;
             material.backFaceCulling = source.backFaceCulling;
@@ -640,6 +660,41 @@ module BABYLON {
             
             
             return texture;
             return texture;
         }
         }
+        
+        // Creates and returns an array of meshes used as shells for the Fur Material
+        // that can be disposed later in your code
+        // The quality is in interval [0, 100]
+        public static FurifyMesh(sourceMesh: Mesh, quality: number): Mesh[] {
+            var meshes = [sourceMesh];
+            var mat: FurMaterial = <FurMaterial>sourceMesh.material;
+            
+            if (!(mat instanceof FurMaterial)) {
+                throw "The material of the source mesh must be a Fur Material";
+            }
+            
+            for (var i = 1; i < quality; i++) {
+                var offsetFur = new BABYLON.FurMaterial(mat.name + i, sourceMesh.getScene());
+                offsetFur.furLength = mat.furLength;
+                offsetFur.furAngle = mat.furAngle;
+                offsetFur.furGravity = mat.furGravity;
+                offsetFur.furSpacing = mat.furSpacing;
+                offsetFur.furSpeed = mat.furSpeed;
+                offsetFur.furColor = mat.furColor;
+                offsetFur.diffuseTexture = mat.diffuseTexture;
+                offsetFur.furOffset = i / quality;
+                offsetFur.furTexture = mat.furTexture;
+                offsetFur.highLevelFur = mat.highLevelFur;
+                offsetFur.furTime = mat.furTime;
+                offsetFur.furDensity = mat.furDensity;
+                
+                var offsetMesh = sourceMesh.clone(sourceMesh.name + i);
+                offsetMesh.material = offsetFur;
+                offsetMesh.skeleton = sourceMesh.skeleton;
+                meshes.push(offsetMesh);
+            }
+            
+            return meshes;
+        }
     }
     }
 } 
 } 
 
 

+ 3 - 10
materialsLibrary/materials/fur/fur.fragment.fx

@@ -392,11 +392,8 @@ void main(void) {
 	float alpha = vDiffuseColor.a;
 	float alpha = vDiffuseColor.a;
 
 
 #ifdef DIFFUSE
 #ifdef DIFFUSE
-	#ifdef HIGHLEVEL
-	baseColor = vec4(0.0, 0.0, 0.0, 0.0);
-	#else
-	baseColor = texture2D(diffuseSampler, vDiffuseUV);
-	#endif
+	baseColor *= texture2D(diffuseSampler, vDiffuseUV);
+    
 #ifdef ALPHATEST
 #ifdef ALPHATEST
 	if (baseColor.a < 0.4)
 	if (baseColor.a < 0.4)
 		discard;
 		discard;
@@ -420,15 +417,11 @@ void main(void) {
 	// Fur
 	// Fur
 	vec4 furTextureColor = texture2D(furTexture, vec2(vFurUV.x, vFurUV.y));
 	vec4 furTextureColor = texture2D(furTexture, vec2(vFurUV.x, vFurUV.y));
 	
 	
-	#ifdef DIFFUSE
-	baseColor = texture2D(diffuseSampler, vec2(vFurUV.x * 0.2, vFurUV.y * 0.2)) * 2.0;
-	#endif
-	
 	if (furTextureColor.a <= 0.0 || furTextureColor.g < furOffset) {
 	if (furTextureColor.a <= 0.0 || furTextureColor.g < furOffset) {
 		discard;
 		discard;
 	}
 	}
 	
 	
-	baseColor = vec4(furColor.xyz * baseColor.xyz, 1.1 - furOffset);
+	baseColor = vec4(baseColor.xyz, 1.0 - furOffset);
 	#endif
 	#endif
 
 
 	// Lighting
 	// Lighting

+ 11 - 6
materialsLibrary/materials/fur/fur.vertex.fx

@@ -27,6 +27,7 @@ uniform float furOffset;
 uniform vec3 furGravity;
 uniform vec3 furGravity;
 uniform float furTime;
 uniform float furTime;
 uniform float furSpacing;
 uniform float furSpacing;
+uniform float furDensity;
 #endif
 #endif
 #ifdef HEIGHTMAP
 #ifdef HEIGHTMAP
 uniform sampler2D heightTexture;
 uniform sampler2D heightTexture;
@@ -146,7 +147,7 @@ float r = Rand(position);
 	tangent1 = normalize(tangent1);
 	tangent1 = normalize(tangent1);
 	
 	
     vec3 newPosition = position + normal * vfur_length*cos(furAngle) + tangent1 * vfur_length * sin(furAngle);
     vec3 newPosition = position + normal * vfur_length*cos(furAngle) + tangent1 * vfur_length * sin(furAngle);
-	
+    
 	#ifdef HIGHLEVEL
 	#ifdef HIGHLEVEL
 	// Compute fur data passed to the pixel shader
 	// Compute fur data passed to the pixel shader
 	vec3 forceDirection = vec3(0.0, 0.0, 0.0);
 	vec3 forceDirection = vec3(0.0, 0.0, 0.0);
@@ -167,7 +168,7 @@ float r = Rand(position);
 	
 	
 	#ifdef NORMAL
 	#ifdef NORMAL
 	#ifdef HIGHLEVEL
 	#ifdef HIGHLEVEL
-	vNormalW = normalize(normal * aNormal);
+	vNormalW = normalize(vec3(finalWorld * vec4(normal, 0.0)) * aNormal);
 	#else
 	#else
 	vNormalW = normalize(vec3(finalWorld * vec4(normal, 0.0)));
 	vNormalW = normalize(vec3(finalWorld * vec4(normal, 0.0)));
 	#endif
 	#endif
@@ -187,10 +188,6 @@ float r = Rand(position);
 	vec2 uv2 = vec2(0., 0.);
 	vec2 uv2 = vec2(0., 0.);
 #endif
 #endif
 
 
-	#ifdef HIGHLEVEL
-	vFurUV = uv * 20.0;
-	#endif
-
 #ifdef DIFFUSE
 #ifdef DIFFUSE
 	if (vDiffuseInfos.x == 0.)
 	if (vDiffuseInfos.x == 0.)
 	{
 	{
@@ -200,6 +197,14 @@ float r = Rand(position);
 	{
 	{
 		vDiffuseUV = vec2(diffuseMatrix * vec4(uv2, 1.0, 0.0));
 		vDiffuseUV = vec2(diffuseMatrix * vec4(uv2, 1.0, 0.0));
 	}
 	}
+    
+    #ifdef HIGHLEVEL
+	vFurUV = vDiffuseUV * furDensity;
+	#endif
+#else
+    #ifdef HIGHLEVEL
+	vFurUV = uv * furDensity;
+	#endif
 #endif
 #endif
 
 
 	// Clip plane
 	// Clip plane

+ 26 - 22
materialsLibrary/materials/fur/readme.md

@@ -53,49 +53,53 @@ furMaterial.diffuseTexture = new BABYLON.Texture("leopard_fur.jpg", scene); // S
 Fur materials have always been subjects of a lot of theories and conferences with multiple implementations thanks to multiple technologies.
 Fur materials have always been subjects of a lot of theories and conferences with multiple implementations thanks to multiple technologies.
 Here, with WebGL, we decided to choose one of these implementations, not hard to use and pretty smart (with performances) with simple models
 Here, with WebGL, we decided to choose one of these implementations, not hard to use and pretty smart (with performances) with simple models
 
 
-First, activate the high level:
+First, activate the high level (activated by default):
 ```
 ```
 furMaterial.highLevelFur = true;
 furMaterial.highLevelFur = true;
 ```
 ```
 
 
-That's all. Now, the most difficult part should be to configure the shells and create the fur effect.
-Indeed, you'll have to draw several times the same mesh with an offset (computed in the effect) to create the illusion of fur:
+That's all. Now, the most difficult part should be to configure the shells and the fur texture to create the fur effect.
+Indeed, you'll have to draw several times the same mesh with an offset (computed in the effect) to create the illusion of fur.
+Hopefully, there is a function that creates and returns the shells:
 
 
 ```
 ```
-furMaterial.furOffset = 0;
+// Generate a fur texture (internally used), working like a noise texture, that will be shared between all the shells
+var furTexture = BABYLON.FurMaterial.GenerateTexture("furTexture", scene);
+
+furMaterial.furTexture = furTexture;
 myMesh.material = furMaterial;
 myMesh.material = furMaterial;
 
 
-var shells = 30; // Works as the quality
+var quality = 30; // Average quality
 
 
-// Generate a fur texture (internally used), working like a noise texture, that will be shared between all the shells
-var furTexture = BABYLON.FurMaterial.GenerateTexture("furTexture", scene);
+// Create shells
+var shells = BABYLON.FurMaterial.FurifyMesh(myMesh, quality);
+```
 
 
-for (var i = 1; i < shells; i++) {
-	var offsetFur = new BABYLON.FurMaterial("fur" + i, scene);
-	offsetFur.diffuseTexture = myDiffuseTexture;
-	
-	offsetFur.furOffset = i / shells; // Create the offset
-	offsetFur.furTexture = furTexture; // Assign the fur texture (previously generated)
-	offsetFur.highLevelFur = fur.highLevelFur; // Set as high level
-	
-	var offsetMesh = myMesh.clone(mesh.name + i); // Clone the mesh. For more performances, you can use LOD system of cloned meshes
-	offsetMesh.material = offsetFur; // Assign the material with appropriate offset
-	offsetMesh.skeleton = mesh.skeleton; // If the mesh is animated, keep the skeleton reference
+It is now working!
+The function "BABYLON.FurMaterial.FurifyMesh" returns an array of "BABYLON.Mesh" that you can dispose later.
+The first element is the mesh you used as the source mesh (myMesh here):
+```
+for (var i=0; i < shells.length; i++) {
+    shells[i].material.dispose();
+    shells[i].dispose();
 }
 }
 ```
 ```
 
 
-It is now working! You can customize the high level fur rendering thanks to some properties:
+You can customize the high level fur rendering thanks to some properties:
+```
+allFurMaterials.furSpacing = 2; // Computes the space between shells. In others words, works as the fur height
+```
+
 ```
 ```
-allFurMaterials.furSpacing = 2; // Computes the space between shells. In others words, works as the fur density 
+allFurMaterials.furDensity = 20; // Computes the fur density. More the density is high, more you'll have to zoom on the model
 ```
 ```
 
 
 ```
 ```
-allFurMaterials.furSpeed = 1; // Divides the animation of fur in time according to the gravity
+allFurMaterials.furSpeed = 100; // Divides the animation of fur in time according to the gravity
 ```
 ```
 
 
 ```
 ```
 // Compute the gravity followed by the fur
 // Compute the gravity followed by the fur
-// In range [-1, 1] for X, Y and Z
 allFurMaterials.furGravity = new BABYLON.Vector3(0, -1, 0);
 allFurMaterials.furGravity = new BABYLON.Vector3(0, -1, 0);
 ```
 ```
 
 

+ 3 - 2
materialsLibrary/test/index.html

@@ -242,7 +242,7 @@
 							break;
 							break;
 						case "fur":
 						case "fur":
 							currentMaterial = fur.material;
 							currentMaterial = fur.material;
-							fur.configureFur(currentMesh, true);
+							fur.configureFur(currentMesh);
 							break;
 							break;
 						case "triPlanar":
 						case "triPlanar":
 							currentMaterial = triPlanar;
 							currentMaterial = triPlanar;
@@ -293,8 +293,9 @@
 					water.mesh = currentMesh;
 					water.mesh = currentMesh;
 					
 					
 					if (currentMaterial === fur.material) {
 					if (currentMaterial === fur.material) {
+                        // Furify the mesh
 						fur.resetFur();
 						fur.resetFur();
-						fur.configureFur(currentMesh, currentMaterial === fur.material);
+						fur.configureFur(currentMesh);
 					}
 					}
 				});
 				});