32.海面OceanSceneNode类
OceanSceneNode类的代码主要参考自5.15 在3D世界添加水面,代码如下,关键步骤请见代码注释:
namespace StunEngine.SceneNodes { ////// 海面 /// public class OceanSceneNode : Renderable3DSceneNode { #region 构造函数和成员变量 ////// 海面使用的材质 /// private OceanMaterial material; ////// 海面宽度,默认为128 /// int oceanWidth = 128; ////// 海面长度,默认为128 /// int oceanHeight = 128; ////// 凹凸贴图强度,此值越大,海面的凹凸感越强 /// float bumpStrength = 0.5f; ////// 波速 /// Vector4 waveSpeeds = new Vector4(1, 2, 0.5f, 1.5f); ////// 振幅 /// Vector4 waveHeights = new Vector4(0.3f, 0.4f, 0.2f, 0.3f); //Vector4 waveHeights = new Vector4(2.3f, 0.0f, 0.0f, 0.0f); ////// 波长 /// Vector4 waveLengths = new Vector4(10, 5, 15, 7); ////// 第1个波的方向 /// Vector2 waveDir0 = new Vector2(1, 0); ////// 第2个波的方向 /// Vector2 waveDir1 = new Vector2(1, 0.5f); ////// 第3个波的方向 /// Vector2 waveDir2 = new Vector2(1, 0.7f); ////// 第4个波的方向 /// Vector2 waveDir3 = new Vector2(1, -0.5f); ////// 创建一个默认海面,使用引擎内置的水面凹凸贴图和天空盒纹理 /// public OceanSceneNode(StunXnaGE engine, Scene setScene) : this(engine, setScene, "Textures/waterBump", "Textures/SkyCubeMap") { } ////// 创建一个海面 /// /// 引擎 /// 所属场景 /// 水面凹凸贴图 /// 天空盒纹理 public OceanSceneNode(StunXnaGE engine, Scene setScene, string setBumpTexture, string setSkyboxTextureName) : base(engine, setScene) { //创建材质并设置材质属性的默认值 this.material = new OceanMaterial(engine, engine.Content.Load("Effects\\ocean")); this.material.Texture1Name = setBumpTexture; this.material.CubeTextureName = setSkyboxTextureName; this.material.Texture1UVTile = new Vector2(4.0f, 4.0f); //实现IMaterial接口 Imaterial = (IMaterial)material; //初始化effect参数 material.EffectInstance.Parameters["gBumpStrength"].SetValue(bumpStrength); material.EffectInstance.Parameters["gWaveSpeeds"].SetValue(waveSpeeds); material.EffectInstance.Parameters["gWaveHeights"].SetValue(waveHeights); material.EffectInstance.Parameters["gWaveLengths"].SetValue(waveLengths); material.EffectInstance.Parameters["gWaveDir0"].SetValue(waveDir0); material.EffectInstance.Parameters["gWaveDir1"].SetValue(waveDir1); material.EffectInstance.Parameters["gWaveDir2"].SetValue(waveDir2); material.EffectInstance.Parameters["gWaveDir3"].SetValue(waveDir3); //不对海面进行剔除操作 this.DisableCulling = true; this.DisableUpdateCulling = true; } #endregion #region 属性 /// /// 获取海面使用的材质 /// public OceanMaterial Material { get { return material; } } ////// 获取或设置凹凸贴图强度,此值越大,海面的凹凸感越强 /// public float BumpStrength { get { return bumpStrength; } set { bumpStrength = value; material.EffectInstance.Parameters["gBumpStrength"].SetValue(bumpStrength); } } ////// 获取或设置波速 /// public Vector4 WaveSpeeds { get { return waveSpeeds; } set { waveSpeeds = value; material.EffectInstance.Parameters["gWaveSpeeds"].SetValue(waveSpeeds); } } ////// 获取或设置振幅 /// public Vector4 WaveHeights { get { return waveHeights; } set { waveHeights = value; material.EffectInstance.Parameters["gWaveHeights"].SetValue(waveHeights); } } ////// 获取或设置波长 /// public Vector4 WaveLengths { get { return waveLengths; } set { waveLengths = value; material.EffectInstance.Parameters["gWaveLengths"].SetValue(waveLengths); } } ////// 获取或设置第1个波的方向 /// public Vector2 WaveDir0 { get { return waveDir0; } set { waveDir0 = value; material.EffectInstance.Parameters["gWaveDir0"].SetValue(waveDir0); } } ////// 获取或设置第2个波的方向 /// public Vector2 WaveDir1 { get { return waveDir1; } set { waveDir1 = value; material.EffectInstance.Parameters["gWaveDir1"].SetValue(waveDir1); } } ////// 获取或设置第3个波的方向 /// public Vector2 WaveDir2 { get { return waveDir2; } set { waveDir2 = value; material.EffectInstance.Parameters["gWaveDir2"].SetValue(waveDir2); } } ////// 获取或设置第4个波的方向 /// public Vector2 WaveDir3 { get { return waveDir3; } set { waveDir3 = value; material.EffectInstance.Parameters["gWaveDir3"].SetValue(waveDir3); } } #endregion public override void Initialize() { this.UpdateOrder = SceneNodeOrdering.Terrain.GetValue(); base.Initialize(); this.mesh = MeshBuilder.CreateOcean(engine.GraphicsDevice, oceanWidth, oceanHeight); } #region 单元测试 #if DEBUG ////// 测试OceanSceneNode类 /// public static void TestOceanSceneNode() { OceanSceneNode ocean = null; SkyBoxSceneNode skybox = null; TestGame.Start("测试OceanSceneNode类", delegate { //添加一个天空盒 skybox = new SkyBoxSceneNode(TestGame.engine, TestGame.scene, "Textures/SkyCubeMap"); TestGame.scene.AddNode(skybox); //添加一个海面 ocean = new OceanSceneNode(TestGame.engine, TestGame.scene); TestGame.scene.AddNode(ocean); //将海面中心放置在坐标原点 Vector3 position = new Vector3(-64, 0, 64); ocean.Pose.SetPosition(ref position); //不显示光标 TestGame.scene.IsShowMouse = false; TestGame.scene.floor.Visible = false; }, delegate { // 按数字1键切换海面的缩放 if (Input.KeyboardKeyJustPressed(Keys.D1)) { Vector3 scale = Vector3.One; Vector3 position = new Vector3(-64f, 0f, 64f); if (ocean.Pose.Scale == scale) { scale = new Vector3(2.0f, 1.0f, 2.0f); ocean.Pose.SetScale(ref scale); position = new Vector3(-128f, 0f, 128f); ocean.Pose.SetPosition(ref position); } else { scale = Vector3.One; ocean.Pose.SetScale(ref scale); ocean.Pose.SetPosition(ref position); } } // 按数字2键切换凹凸纹理的平铺次数 if (Input.KeyboardKeyJustPressed(Keys.D2)) { if (ocean.Material .Texture1UVTile == new Vector2 (4.0f,4.0f)) { ocean.Material.Texture1UVTile = new Vector2(1.0f, 1.0f); } else { ocean.Material.Texture1UVTile = new Vector2(4.0f, 4.0f); } } // 按数字3键切换凹凸纹理的强度 if (Input.KeyboardKeyJustPressed(Keys.D3)) { if (ocean .BumpStrength == 0.5f) { ocean .BumpStrength=1.0f; } else { ocean .BumpStrength = 0.5f; } } }); } #endif #endregion } }
创建海面顶点数据的操作由MeshBuilder类中的静态方法CreateOcean完成,代码如下:
////// 创建海面的顶点缓冲和索引缓冲 /// public static Mesh CreateOcean(GraphicsDevice g,int oceanWidth,int oceanHeight) { // 创建顶点 VertexPositionTexture[] oceanVertices = new VertexPositionTexture[oceanWidth * oceanHeight]; int i = 0; for (int z = 0; z < oceanHeight; z++) { for (int x = 0; x < oceanWidth; x++) { Vector3 position = new Vector3(x, 0, -z); Vector2 texCoord = new Vector2((float)x / oceanWidth, (float)z / oceanHeight); oceanVertices[i++] = new VertexPositionTexture(position, texCoord); } } // 创建索引 int[] oceanIndices = new int[(oceanWidth) * 2 * (oceanHeight - 1)]; i = 0; int y = 0; while (y < oceanHeight - 1) { for (int x = 0; x < oceanWidth; x++) { oceanIndices[i++] = x + y * oceanWidth; oceanIndices[i++] = x + (y + 1) * oceanWidth; } y++; if (y < oceanHeight - 1) { for (int x = oceanWidth - 1; x >= 0; x--) { oceanIndices[i++] = x + (y + 1) * oceanWidth; oceanIndices[i++] = x + y * oceanWidth; } } y++; } VertexBuffer oceanVertexBuffer = new VertexBuffer(g, VertexPositionTexture.SizeInBytes * oceanVertices.Length, BufferUsage.WriteOnly); oceanVertexBuffer.SetData(oceanVertices); IndexBuffer oceanIndexBuffer = new IndexBuffer(g, typeof(int), oceanIndices.Length, BufferUsage.WriteOnly); oceanIndexBuffer.SetData(oceanIndices); VertexDeclaration oceanVertexDeclaration = new VertexDeclaration(g, VertexPositionTexture.VertexElements); return new Mesh(PrimitiveType.TriangleStrip, oceanVertexBuffer, oceanVertexDeclaration, oceanIndexBuffer, oceanWidth * oceanHeight, oceanWidth * 2 * (oceanHeight - 1) - 2); }
其实这个方法与27.简单地形SimpleTerrainSceneNode类是相同的,都是使用TriangleStrip形式的图元。
有点难的地方在于effect文件,代码如下:
shared uniform extern float4x4 gProjection : PROJECTION; //共享的投影矩阵 shared uniform extern float gTime; //共享的时间变量 uniform extern float3 gCameraPos; // 相机位置 uniform extern float4x4 gView : VIEW; // 视矩阵 uniform extern float4x4 gWorld : WORLD; // 世界矩阵 uniform extern float4 gWaveSpeeds; // 波速 uniform extern float4 gWaveHeights; // 振幅 uniform extern float4 gWaveLengths; // 波长 uniform extern float2 gWaveDir0; // 第1个波的方向 uniform extern float2 gWaveDir1; // 第2个波的方向 uniform extern float2 gWaveDir2; // 第3个波的方向 uniform extern float2 gWaveDir3; // 第4个波的方向 uniform extern float gBumpStrength; uniform extern texture gTexture1; // 海面的凹凸纹理 uniform extern float2 gTexture1UVTile; // 凹凸纹理的平铺次数 // 凹凸纹理采样器 sampler2D textureSampler = sampler_state { Texture =; magfilter = LINEAR; minfilter = LINEAR; mipfilter = LINEAR; AddressU = mirror; AddressV = mirror; }; // 被海面反射的立方贴图 uniform extern texture gCubeTexture; // 立方贴图采样器 sampler CubeTextureSampler = sampler_state { texture = ; magfilter = LINEAR; minfilter = LINEAR; mipfilter=LINEAR; AddressU = mirror; AddressV = mirror; }; struct VS_OUTPUT { float4 Position : POSITION; float2 TexCoord : TEXCOORD0; float3 WorldPosition: TEXCOORD1; float3x3 TTW : TEXCOORD2; }; VS_OUTPUT OWVertexShader(float4 inPos: POSITION0, float2 inTexCoord: TEXCOORD0) { VS_OUTPUT Output = (VS_OUTPUT)0; // 将顶点的X,Z位置与传播方向点乘,对于垂直于波的传播方向上一直线上的所有顶点来说,这个点乘值是相同的。 // 如果参数相同,那么正弦函数也相同,所以它们的高度也是相同的。 float4 dotProducts; dotProducts.x = dot(gWaveDir0, inPos.xz); dotProducts.y = dot(gWaveDir1, inPos.xz); dotProducts.z = dot(gWaveDir2, inPos.xz); dotProducts.w = dot(gWaveDir3, inPos.xz); // shader可以同时将四个正弦函数求和,这需要对顶点的XZ坐标和波的方向进行四次点乘。 // 在使用这些点乘作为正弦函数的参数之前,需要将它们除以xWaveLengths变量,这样可以调整波长。 // 要使水波移动,需要在参数中添加当前时间。 // 将xWaveSpeeds 变量乘以当前时间,可以定义每列波的波速,让某些波可以比其他波运动得更快或是更慢。 float4 arguments = gTime*gWaveSpeeds-dotProducts/gWaveLengths; float4 heights = gWaveHeights*sin(arguments); float4 final3DPos = inPos; final3DPos.y += heights.x; final3DPos.y += heights.y; final3DPos.y += heights.z; final3DPos.y += heights.w; float4x4 preViewProjection = mul(gView, gProjection); float4x4 preWorldViewProjection = mul(gWorld, preViewProjection); Output.Position = mul(final3DPos, preWorldViewProjection); float4 final3DPosW = mul(final3DPos, gWorld); Output.WorldPosition = final3DPosW; // 对波形函数求导 float4 derivatives = gWaveHeights*cos(arguments)/gWaveLengths; float2 deviations = 0; deviations += derivatives.x*gWaveDir0; deviations += derivatives.y*gWaveDir1; deviations += derivatives.z*gWaveDir2; deviations += derivatives.w*gWaveDir3; // 根据前面得出的导数计算法线、副法线和切线 float3 Normal = float3(-deviations.x, 1, -deviations.y); float3 Binormal = float3(1, deviations.x, 0); float3 Tangent = float3(0, deviations.y, 1); // 创建切线矩阵 float3x3 tangentToObject; tangentToObject[0] = normalize(Binormal); tangentToObject[1] = normalize(Tangent); tangentToObject[2] = normalize(Normal); float3x3 tangentToWorld = mul(tangentToObject,gWorld); Output.TTW = tangentToWorld; Output.TexCoord = inTexCoord+gTime/50.0f*float2(-1,0); return Output; } float4 OWPixelShader(VS_OUTPUT Input) : COLOR0 { // 通过多次滚动凹凸贴图,每次使用一个不同的缩放,不同的滚动速度,并交换X和Y纹理坐标,可以避免看到凹凸贴图块 float3 bumpColor1 = tex2D(textureSampler, gTexture1UVTile*Input.TexCoord)-0.5f; float3 bumpColor2 = tex2D(textureSampler, gTexture1UVTile*1.8*Input.TexCoord.yx)-0.5f; float3 bumpColor3 = tex2D(textureSampler, gTexture1UVTile*3.1*Input.TexCoord)-0.5f; float3 normalT = bumpColor1 + bumpColor2 + bumpColor3; // 通过gBumpStrength调整凹凸贴图强度 normalT.rg *= gBumpStrength; normalT = normalize(normalT); float3 normalW = mul(normalT, Input.TTW); // 采样天空盒颜色 float3 eyeVector = normalize(Input.WorldPosition - gCameraPos); float3 reflection = reflect(eyeVector, normalW); float4 reflectiveColor = texCUBE(CubeTextureSampler, reflection); // 计算菲尼尔系数,并把它的范围设置为0.5至1之间 float fresnelTerm = dot(-eyeVector, normalW); fresnelTerm = fresnelTerm/2.0f+0.5f; // 添加镜面高光反射颜色 float sunlight = reflectiveColor.r; sunlight += reflectiveColor.g; sunlight += reflectiveColor.b; sunlight /= 3.0f; float specular = pow(sunlight,30); // 水面颜色设置为暗蓝色 float4 waterColor = float4(0,0.15,0.4,1); // 输出最终的水面颜色 return waterColor*fresnelTerm + reflectiveColor*(1-fresnelTerm) + specular; } technique OceanWater { pass Pass0 { VertexShader = compile vs_3_0 OWVertexShader(); PixelShader = compile ps_3_0 OWPixelShader(); } }
具体解释请参见5.15 在3D世界添加水面,我认为最难的是第一步:即通过叠加4个正弦波生成复杂的海面,并求出波浪的切线、法线和副法线。参考了大学物理教材和《GPU精粹1》,现总结如下:
物理上一维波的函数为:
式中A为振幅,v为波速,λ为波长,φ0为初相位,t为时间,x为离开振源的距离。为简化起见,可以将φ0设为0,并使用sin函数,即使用以下形式:
对于二维空间中的波,此函数应修正为:
注意:XNA中水平面为XZ平面。其中D为波的传播方向,D•(x,z)为传播方向与点坐标的点乘。有了物理知识,现在可以看一下shader的顶点着色器代码了。首先是dotProducts.x = dot(gWaveDir0, inPos.xz),计算的就是D•(x,z),然后float4 arguments = gTime*gWaveSpeeds-dotProducts/gWaveLengths,即 ,对比可知gWaveSpeeds实际上是 。然后由数学知识可知副法线是点坐标在x方向上的偏导,切线为z方向的偏导,法线为在副法线和切线的叉乘,所以有:
float4 derivatives = gWaveHeights*cos(arguments)/gWaveLengths; float3 Normal = float3(-deviations.x, 1, -deviations.y); float3 Binormal = float3(1, deviations.x, 0); float3 Tangent = float3(0, deviations.y, 1);
具体数学式子请参见《GPU 精粹1》的第一章:用物理模型进行高效的水模拟(http://http.developer.nvidia.com/GPUGems/gpugems_ch01.html)。 Effect的其余代码我觉得不难,就不再赘述了。单元测试截图如下:
感觉上还不够漂亮,海面有点像塑料,而且波太圆润,要加以改进还是可以参考《GPU 精粹1》的第一章:用物理模型进行高效的水模拟(http://http.developer.nvidia.com/GPUGems/gpugems_ch01.html)。
文件下载(已下载 1097 次)发布时间:2010/5/7 上午9:46:10 阅读次数:6493