浏览代码

Water:

- Added support of point lights shadow mapping to water material
- Fixed water material on mobiles
- Create playground example

Fire:
- Added readme
- Create playground example
luaacro 9 年之前
父节点
当前提交
355b8a454e

文件差异内容过多而无法显示
+ 15 - 8
materialsLibrary/dist/babylon.waterMaterial.js


+ 30 - 0
materialsLibrary/materials/fire/readme.md

@@ -0,0 +1,30 @@
+# Fire material
+
+## [Playground example](http://www.babylonjs-playground.com/#21IIM9)
+
+## Using the fire material
+
+The fire material works with 3 textures:
+- The diffuse texture (fire texture)
+- The distortion texture (to create perturbations on diffuse texture)
+- The opacity texture (black and white)
+
+**Note:** *The fire material doesn't work with lighting. So, shadow maps are also disabled.*
+
+```
+var fireMaterial = new BABYLON.FireMaterial("fireMaterial", scene);
+fireMaterial.diffuseTexture = new BABYLON.Texture("diffuse.png", scene);
+fireMaterial.distortionTexture = new BABYLON.Texture("distortion.png", scene);
+fireMaterial.opacityTexture = new BABYLON.Texture("opacity.png", scene);
+
+var plane = BABYLON.Mesh.CreatePlane("fireplane", 1.0, scene);
+plane.material = fire;
+```
+
+The speed of fire flames can be customized like:
+
+```
+fireMaterial.speed = 5.0; // Default is 1.0
+```
+
+

+ 13 - 8
materialsLibrary/materials/water/babylon.waterMaterial.ts

@@ -23,10 +23,14 @@ module BABYLON {
         public HEMILIGHT1 = false;
         public HEMILIGHT2 = false;
         public HEMILIGHT3 = false;
-        public POINTDIRLIGHT0 = false;
-        public POINTDIRLIGHT1 = false;
-        public POINTDIRLIGHT2 = false;
-        public POINTDIRLIGHT3 = false;
+        public DIRLIGHT0 = false;
+        public DIRLIGHT1 = false;
+        public DIRLIGHT2 = false;
+        public DIRLIGHT3 = false;
+        public POINTLIGHT0 = false;
+        public POINTLIGHT1 = false;
+        public POINTLIGHT2 = false;
+        public POINTLIGHT3 = false;        
         public SHADOW0 = false;
         public SHADOW1 = false;
         public SHADOW2 = false;
@@ -127,7 +131,7 @@ module BABYLON {
             return this._refractionRTT;
         }
         
-        public get reflectioNTexture(): RenderTargetTexture {
+        public get reflectionTexture(): RenderTargetTexture {
             return this._reflectionRTT;
         }
 		
@@ -276,8 +280,10 @@ module BABYLON {
                         type = "SPOTLIGHT" + lightIndex;
                     } else if (light instanceof HemisphericLight) {
                         type = "HEMILIGHT" + lightIndex;
+                    } else if (light instanceof PointLight) {
+                        type = "POINTLIGHT" + lightIndex;
                     } else {
-                        type = "POINTDIRLIGHT" + lightIndex;
+                        type = "DIRLIGHT" + lightIndex;
                     }
 
                     this._defines[type] = true;
@@ -586,9 +592,8 @@ module BABYLON {
 			var clipPlane = null;
 			var savedViewMatrix;
 			var mirrorMatrix = Matrix.Zero();
-			
+            
 			this._refractionRTT.onBeforeRender = () => {
-                
                 if (this._mesh) {
                     isVisible = this._mesh.isVisible;
                     this._mesh.isVisible = false;

+ 2 - 0
materialsLibrary/materials/water/readme.md

@@ -1,5 +1,7 @@
 # Water material
 
+## [Playground example](http://www.babylonjs-playground.com/#1SLLOJ#4)
+
 ## Using the water material
 
 The water material needs at least only a bump texture to render properly.

+ 110 - 15
materialsLibrary/materials/water/water.fragment.fx

@@ -20,8 +20,12 @@ varying vec4 vColor;
 uniform vec4 vLightData0;
 uniform vec4 vLightDiffuse0;
 #ifdef SHADOW0
+#if defined(SPOTLIGHT0) || defined(DIRLIGHT0)
 varying vec4 vPositionFromLight0;
 uniform sampler2D shadowSampler0;
+#else
+uniform samplerCube shadowSampler0;
+#endif
 uniform vec3 shadowsInfo0;
 #endif
 #ifdef SPOTLIGHT0
@@ -36,8 +40,12 @@ uniform vec3 vLightGround0;
 uniform vec4 vLightData1;
 uniform vec4 vLightDiffuse1;
 #ifdef SHADOW1
+#if defined(SPOTLIGHT1) || defined(DIRLIGHT1)
 varying vec4 vPositionFromLight1;
 uniform sampler2D shadowSampler1;
+#else
+uniform samplerCube shadowSampler1;
+#endif
 uniform vec3 shadowsInfo1;
 #endif
 #ifdef SPOTLIGHT1
@@ -52,8 +60,12 @@ uniform vec3 vLightGround1;
 uniform vec4 vLightData2;
 uniform vec4 vLightDiffuse2;
 #ifdef SHADOW2
+#if defined(SPOTLIGHT2) || defined(DIRLIGHT2)
 varying vec4 vPositionFromLight2;
 uniform sampler2D shadowSampler2;
+#else
+uniform samplerCube shadowSampler2;
+#endif
 uniform vec3 shadowsInfo2;
 #endif
 #ifdef SPOTLIGHT2
@@ -68,8 +80,12 @@ uniform vec3 vLightGround2;
 uniform vec4 vLightData3;
 uniform vec4 vLightDiffuse3;
 #ifdef SHADOW3
+#if defined(SPOTLIGHT3) || defined(DIRLIGHT3)
 varying vec4 vPositionFromLight3;
 uniform sampler2D shadowSampler3;
+#else
+uniform samplerCube shadowSampler3;
+#endif
 uniform vec3 shadowsInfo3;
 #endif
 #ifdef SPOTLIGHT3
@@ -98,11 +114,12 @@ uniform vec3 cameraPosition;
 uniform vec4 waterColor;
 uniform float colorBlendFactor;
 
+uniform float bumpHeight;
+
 // Water varyings
 varying vec3 vRefractionMapTexCoord;
 varying vec3 vReflectionMapTexCoord;
 varying vec3 vPosition;
-varying float vWaveHeight;
 
 // Shadows
 #ifdef SHADOWS
@@ -113,11 +130,55 @@ float unpack(vec4 color)
 	return dot(color, bit_shift);
 }
 
-float unpackHalf(vec2 color)
+#if defined(POINTLIGHT0) || defined(POINTLIGHT1) || defined(POINTLIGHT2) || defined(POINTLIGHT3)
+float computeShadowCube(vec3 lightPosition, samplerCube shadowSampler, float darkness, float bias)
 {
-	return color.x + (color.y / 255.0);
+	vec3 directionToLight = vPositionW - lightPosition;
+	float depth = length(directionToLight);
+
+	depth = clamp(depth, 0., 1.);
+
+	directionToLight.y = 1.0 - directionToLight.y;
+
+	float shadow = unpack(textureCube(shadowSampler, directionToLight)) + bias;
+
+	if (depth > shadow)
+	{
+		return darkness;
+	}
+	return 1.0;
+}
+
+float computeShadowWithPCFCube(vec3 lightPosition, samplerCube shadowSampler, float bias, float darkness)
+{
+	vec3 directionToLight = vPositionW - lightPosition;
+	float depth = length(directionToLight);
+
+	depth = clamp(depth, 0., 1.);
+
+	directionToLight.y = 1.0 - directionToLight.y;
+
+	float visibility = 1.;
+
+	vec3 poissonDisk[4];
+	poissonDisk[0] = vec3(-0.094201624, 0.04, -0.039906216);
+	poissonDisk[1] = vec3(0.094558609, -0.04, -0.076890725);
+	poissonDisk[2] = vec3(-0.094184101, 0.01, -0.092938870);
+	poissonDisk[3] = vec3(0.034495938, -0.01, 0.029387760);
+
+	// Poisson Sampling
+	float biasedDepth = depth - bias;
+
+	if (unpack(textureCube(shadowSampler, directionToLight + poissonDisk[0])) < biasedDepth) visibility -= 0.25;
+	if (unpack(textureCube(shadowSampler, directionToLight + poissonDisk[1])) < biasedDepth) visibility -= 0.25;
+	if (unpack(textureCube(shadowSampler, directionToLight + poissonDisk[2])) < biasedDepth) visibility -= 0.25;
+	if (unpack(textureCube(shadowSampler, directionToLight + poissonDisk[3])) < biasedDepth) visibility -= 0.25;
+
+	return  min(1.0, visibility + darkness);
 }
+#endif
 
+#if defined(SPOTLIGHT0) || defined(SPOTLIGHT1) || defined(SPOTLIGHT2) || defined(SPOTLIGHT3) ||  defined(DIRLIGHT0) || defined(DIRLIGHT1) || defined(DIRLIGHT2) || defined(DIRLIGHT3)
 float computeShadow(vec4 vPositionFromLight, sampler2D shadowSampler, float darkness, float bias)
 {
 	vec3 depth = vPositionFromLight.xyz / vPositionFromLight.w;
@@ -169,6 +230,11 @@ float computeShadowWithPCF(vec4 vPositionFromLight, sampler2D shadowSampler, flo
 }
 
 // Thanks to http://devmaster.net/
+float unpackHalf(vec2 color)
+{
+	return color.x + (color.y / 255.0);
+}
+
 float linstep(float low, float high, float v) {
 	return clamp((v - low) / (high - low), 0.0, 1.0);
 }
@@ -200,6 +266,7 @@ float computeShadowWithVSM(vec4 vPositionFromLight, sampler2D shadowSampler, flo
 	return min(1.0, 1.0 - ChebychevInequality(moments, depth.z, bias) + darkness);
 }
 #endif
+#endif
 
 #ifdef CLIPPLANE
 varying float fClipDistance;
@@ -343,7 +410,7 @@ void main(void) {
 
 #ifdef REFLECTION
 	// Water
-	vec2 perturbation = vWaveHeight * (baseColor.rg - 0.5);
+	vec2 perturbation = bumpHeight * (baseColor.rg - 0.5);
 	
 	vec2 projectedRefractionTexCoords = clamp(vRefractionMapTexCoord.xy / vRefractionMapTexCoord.z + perturbation, 0.0, 1.0);
 	vec4 refractiveColor = texture2D(refractionSampler, projectedRefractionTexCoords);
@@ -368,7 +435,7 @@ void main(void) {
 	vec3 normalW = vec3(1.0, 1.0, 1.0);
 #endif
 
-	// Lighting
+		// Lighting
 	vec3 diffuseBase = vec3(0., 0., 0.);
 	float shadow = 1.;
 
@@ -379,7 +446,7 @@ void main(void) {
 #ifdef HEMILIGHT0
 	lightingInfo info = computeHemisphericLighting(viewDirectionW, normalW, vLightData0, vLightDiffuse0.rgb, vLightGround0);
 #endif
-#ifdef POINTDIRLIGHT0
+#if defined(POINTLIGHT0) || defined(DIRLIGHT0)
 	lightingInfo info = computeLighting(viewDirectionW, normalW, vLightData0, vLightDiffuse0.rgb, vLightDiffuse0.a);
 #endif
 #ifdef SHADOW0
@@ -387,9 +454,17 @@ void main(void) {
 	shadow = computeShadowWithVSM(vPositionFromLight0, shadowSampler0, shadowsInfo0.z, shadowsInfo0.x);
 #else
 #ifdef SHADOWPCF0
+	#if defined(POINTLIGHT0)
+	shadow = computeShadowWithPCFCube(vLightData0.xyz, shadowSampler0, shadowsInfo0.z, shadowsInfo0.x);
+	#else
 	shadow = computeShadowWithPCF(vPositionFromLight0, shadowSampler0, shadowsInfo0.y, shadowsInfo0.z, shadowsInfo0.x);
+	#endif
 #else
+	#if defined(POINTLIGHT0)
+	shadow = computeShadowCube(vLightData0.xyz, shadowSampler0, shadowsInfo0.x, shadowsInfo0.z);
+	#else
 	shadow = computeShadow(vPositionFromLight0, shadowSampler0, shadowsInfo0.x, shadowsInfo0.z);
+	#endif
 #endif
 #endif
 #else
@@ -399,14 +474,13 @@ void main(void) {
 #endif
 
 #ifdef LIGHT1
-
 #ifdef SPOTLIGHT1
 	info = computeSpotLighting(viewDirectionW, normalW, vLightData1, vLightDirection1, vLightDiffuse1.rgb, vLightDiffuse1.a);
 #endif
 #ifdef HEMILIGHT1
-	info = computeHemisphericLighting(viewDirectionW, normalW, vLightData1, vLightDiffuse1.rgb, vLightGround1);
+	info = computeHemisphericLighting(viewDirectionW, normalW, vLightData1, vLightDiffuse1.rgb, vLightGround1.a);
 #endif
-#ifdef POINTDIRLIGHT1
+#if defined(POINTLIGHT1) || defined(DIRLIGHT1)
 	info = computeLighting(viewDirectionW, normalW, vLightData1, vLightDiffuse1.rgb, vLightDiffuse1.a);
 #endif
 #ifdef SHADOW1
@@ -414,16 +488,23 @@ void main(void) {
 	shadow = computeShadowWithVSM(vPositionFromLight1, shadowSampler1, shadowsInfo1.z, shadowsInfo1.x);
 #else
 #ifdef SHADOWPCF1
+#if defined(POINTLIGHT1)
+	shadow = computeShadowWithPCFCube(vLightData1.xyz, shadowSampler1, shadowsInfo1.z, shadowsInfo1.x);
+#else
 	shadow = computeShadowWithPCF(vPositionFromLight1, shadowSampler1, shadowsInfo1.y, shadowsInfo1.z, shadowsInfo1.x);
+#endif
 #else
+	#if defined(POINTLIGHT1)
+	shadow = computeShadowCube(vLightData1.xyz, shadowSampler1, shadowsInfo1.x, shadowsInfo1.z);
+	#else
 	shadow = computeShadow(vPositionFromLight1, shadowSampler1, shadowsInfo1.x, shadowsInfo1.z);
+	#endif
 #endif
 #endif
 #else
 	shadow = 1.;
 #endif
 	diffuseBase += info.diffuse * shadow;
-
 #endif
 
 #ifdef LIGHT2
@@ -433,7 +514,7 @@ void main(void) {
 #ifdef HEMILIGHT2
 	info = computeHemisphericLighting(viewDirectionW, normalW, vLightData2, vLightDiffuse2.rgb, vLightGround2);
 #endif
-#ifdef POINTDIRLIGHT2
+#if defined(POINTLIGHT2) || defined(DIRLIGHT2)
 	info = computeLighting(viewDirectionW, normalW, vLightData2, vLightDiffuse2.rgb, vLightDiffuse2.a);
 #endif
 #ifdef SHADOW2
@@ -441,37 +522,51 @@ void main(void) {
 	shadow = computeShadowWithVSM(vPositionFromLight2, shadowSampler2, shadowsInfo2.z, shadowsInfo2.x);
 #else
 #ifdef SHADOWPCF2
+#if defined(POINTLIGHT2)
+	shadow = computeShadowWithPCFCube(vLightData2.xyz, shadowSampler2, shadowsInfo2.z, shadowsInfo2.x);
+#else
 	shadow = computeShadowWithPCF(vPositionFromLight2, shadowSampler2, shadowsInfo2.y, shadowsInfo2.z, shadowsInfo2.x);
+#endif
 #else
+	#if defined(POINTLIGHT2)
+	shadow = computeShadowCube(vLightData2.xyz, shadowSampler2, shadowsInfo2.x, shadowsInfo2.z);
+	#else
 	shadow = computeShadow(vPositionFromLight2, shadowSampler2, shadowsInfo2.x, shadowsInfo2.z);
+	#endif
 #endif	
 #endif	
 #else
 	shadow = 1.;
 #endif
 	diffuseBase += info.diffuse * shadow;
-
 #endif
 
 #ifdef LIGHT3
-
 #ifdef SPOTLIGHT3
 	info = computeSpotLighting(viewDirectionW, normalW, vLightData3, vLightDirection3, vLightDiffuse3.rgb, vLightDiffuse3.a);
 #endif
 #ifdef HEMILIGHT3
 	info = computeHemisphericLighting(viewDirectionW, normalW, vLightData3, vLightDiffuse3.rgb, vLightGround3);
 #endif
-#ifdef POINTDIRLIGHT3
+#if defined(POINTLIGHT3) || defined(DIRLIGHT3)
 	info = computeLighting(viewDirectionW, normalW, vLightData3, vLightDiffuse3.rgb, vLightDiffuse3.a);
 #endif
 #ifdef SHADOW3
 #ifdef SHADOWVSM3
-	shadow = computeShadowWithVSM(vPositionFromLight3, shadowSampler3, shadowsInfo3.z, shadowsInfo3.x);
+		shadow = computeShadowWithVSM(vPositionFromLight3, shadowSampler3, shadowsInfo3.z, shadowsInfo3.x);
 #else
 #ifdef SHADOWPCF3
+#if defined(POINTLIGHT3)
+	shadow = computeShadowWithPCFCube(vLightData3.xyz, shadowSampler3, shadowsInfo3.z, shadowsInfo3.x);
+#else
 	shadow = computeShadowWithPCF(vPositionFromLight3, shadowSampler3, shadowsInfo3.y, shadowsInfo3.z, shadowsInfo3.x);
+#endif
 #else
+	#if defined(POINTLIGHT3)
+	shadow = computeShadowCube(vLightData3.xyz, shadowSampler3, shadowsInfo3.x, shadowsInfo3.z);
+	#else
 	shadow = computeShadow(vPositionFromLight3, shadowSampler3, shadowsInfo3.x, shadowsInfo3.z);
+	#endif
 #endif	
 #endif	
 #else

+ 14 - 14
materialsLibrary/materials/water/water.vertex.fx

@@ -67,19 +67,19 @@ varying float fFogDistance;
 #endif
 
 #ifdef SHADOWS
-#ifdef LIGHT0
+#if defined(SPOTLIGHT0) || defined(DIRLIGHT0)
 uniform mat4 lightMatrix0;
 varying vec4 vPositionFromLight0;
 #endif
-#ifdef LIGHT1
+#if defined(SPOTLIGHT1) || defined(DIRLIGHT1)
 uniform mat4 lightMatrix1;
 varying vec4 vPositionFromLight1;
 #endif
-#ifdef LIGHT2
+#if defined(SPOTLIGHT2) || defined(DIRLIGHT2)
 uniform mat4 lightMatrix2;
 varying vec4 vPositionFromLight2;
 #endif
-#ifdef LIGHT3
+#if defined(SPOTLIGHT3) || defined(DIRLIGHT3)
 uniform mat4 lightMatrix3;
 varying vec4 vPositionFromLight3;
 #endif
@@ -91,14 +91,12 @@ uniform vec2 windDirection;
 uniform float waveLength;
 uniform float time;
 uniform float windForce;
-uniform float bumpHeight;
 uniform float waveHeight;
 
 // Water varyings
 varying vec3 vPosition;
 varying vec3 vRefractionMapTexCoord;
 varying vec3 vReflectionMapTexCoord;
-varying float vWaveHeight;
 
 void main(void) {
 	mat4 finalWorld;
@@ -161,16 +159,16 @@ void main(void) {
 
 	// Shadows
 #ifdef SHADOWS
-#ifdef LIGHT0
+#if defined(SPOTLIGHT0) || defined(DIRLIGHT0)
 	vPositionFromLight0 = lightMatrix0 * worldPos;
 #endif
-#ifdef LIGHT1
+#if defined(SPOTLIGHT1) || defined(DIRLIGHT1)
 	vPositionFromLight1 = lightMatrix1 * worldPos;
 #endif
-#ifdef LIGHT2
+#if defined(SPOTLIGHT2) || defined(DIRLIGHT2)
 	vPositionFromLight2 = lightMatrix2 * worldPos;
 #endif
-#ifdef LIGHT3
+#if defined(SPOTLIGHT3) || defined(DIRLIGHT3)
 	vPositionFromLight3 = lightMatrix3 * worldPos;
 #endif
 #endif
@@ -186,14 +184,15 @@ void main(void) {
 #endif
 
 	vec3 p = position;
-	p.y += (sin(((p.x / 0.05) + time * 100.0)) * waveHeight * 5.0) + (cos(((p.z / 0.05) + time * 100.0)) * waveHeight * 5.0);
+	float newY = (sin(((p.x / 0.05) + time * 100.0)) * waveHeight * 5.0) + (cos(((p.z / 0.05) + time * 100.0)) * waveHeight * 5.0);
+	p.y += abs(newY);
 	
 	gl_Position = viewProjection * finalWorld * vec4(p, 1.0);
 
-	worldPos = viewProjection * finalWorld * vec4(position, 1.0);
-
+#ifdef REFLECTION
+	worldPos = viewProjection * finalWorld * vec4(p, 1.0);
+	
 	// Water
-	vWaveHeight = bumpHeight;
 	vPosition = position;
 	
 	vRefractionMapTexCoord.x = 0.5 * (worldPos.w + worldPos.x);
@@ -204,4 +203,5 @@ void main(void) {
 	vReflectionMapTexCoord.x = 0.5 * (worldPos.w + worldPos.x);
 	vReflectionMapTexCoord.y = 0.5 * (worldPos.w + worldPos.y);
 	vReflectionMapTexCoord.z = worldPos.w;
+#endif
 }

+ 1 - 0
materialsLibrary/test/index.html

@@ -164,6 +164,7 @@
 				water.addToRenderList(skybox);
 				water.addToRenderList(shadowCaster);
 				water.addToRenderList(shadowCaster2);
+				water.addToRenderList(shadowCaster3);
 				
 				var fire = new BABYLON.FireMaterial("fire", scene);
 				fire.diffuseTexture = new BABYLON.Texture("textures/fire/diffuse.png", scene);