XNA + HLSL 之小小心得

经过这么多天的实践，应该算是会写HLSL了，而且在XNA平台下，我也成功用起自己写的FX文件了。下面就来整理下这之中的一些心得体会：

首先来看看调用Shader部分的代码：

 

//这里我想不用我多说了吧，就是在给Shader的参数赋值，其中，world，view，projection是必须要的，这是坐标变换中必须的步骤。 carEffect.Parameters["View"].SetValue(view); carEffect.Parameters["Projection"].SetValue(projection); //这里稍稍有点不通了，我的这个例子的目标是将车身做成能够反射周围环境的效果 //然后下面的"myCubemap_Tex"和"my2DTexture_Tex"是FX文件中的参数，等会在说FX文件的时候在细说。而bodyTex是一个TextureCube类型的对象，用来存放车身的周围环境的纹理，而body就是一个普通的Texture2D对象，存放车身的纹理文件，至于车身周围的环境纹理也会在之后细说。 carEffect.Parameters["myCubemap_Tex"].SetValue(bodyTex); carEffect.Parameters["my2DTexture_Tex"].SetValue(body); //也许这里的世界矩阵的赋值，你会觉得怎么会这么麻烦，写成这么麻烦，是因为需要车子能够动起来，我的做法是在全局存放车辆的位置向量，和旋转度数，然后在Draw的时候根据这些参数建立矩阵，因为一个矩阵就需要16个float，而一个3维向量只需要3个float，而且这样写代码的可读性会好很多。其实比四元数还要少一个float呢，至于到底3种方法中哪一种更优化，我没有深入过，而且四元数对我来说在使用上还是有一定的困难，因为不了解实质，心里总是很虚，就像以前刚接触HLSL的那会，别说是自己写个FX文件了，连看懂它到底做了个什么效果都不知道。后来再深入了解了Shader与程序之前的关系后，才渐渐懂起来。。。扯远了。。。 carEffect.Parameters["World"].SetValue( Matrix.CreateRotationX(MathHelper.ToRadians(90.0f))//这里需要稍稍说明下，由于这个.x模型是从.fbx格式转换过来的，转过来后发现这个模型是侧着身躺着的，所以这里需要先旋转各90度。 * Matrix.CreateRotationY(MathHelper.ToRadians(bodyrotation)) // 水平旋转 * Matrix.CreateTranslation(carPos));// 平移 //然后就是遍历每一个ModelMesh foreach (ModelMesh mesh in bodyModel.Meshes) { //这里是因为我这个模型中有4个Mesh，分别是车身，车窗，地盘，车牌等，我这里是需要不同的部分进行不同渲染，所以需要根据mesh.Name来确定需要用的Technique if (mesh.Name == "Model__Mesh023")//车身部分 carEffect.CurrentTechnique = carEffect.Techniques["BodyShader"]; else if (mesh.Name == "Model__Mesh011")//车窗，前灯，后灯部分 carEffect.CurrentTechnique = carEffect.Techniques["WindowShader"]; else if (mesh.Name == "Model__Mesh035")//车的地盘 carEffect.CurrentTechnique = carEffect.Techniques["BottomShader"]; else//余下的车牌部分 carEffect.CurrentTechnique = carEffect.Techniques["OtherShader"]; //这里有个顺序的问题，一定要先设好technique，才能调用begin，否则在设置Techniques的时候会出现“无法预料的错误”。 carEffect.Begin(); foreach (ModelMeshPart part in mesh.MeshParts) {//这里也有个顺序问题，一定要根据每一个ModelMeshPart的每一个EffectPass这样画 foreach (EffectPass pass in carEffect.CurrentTechnique.Passes) { pass.Begin(); device.VertexDeclaration = part.VertexDeclaration;//顶点声明 device.Indices = mesh.IndexBuffer;//索引缓存 device.Vertices[0].SetSource(mesh.VertexBuffer, part.StreamOffset, part.VertexStride);//设置顶点 device.DrawIndexedPrimitives(PrimitiveType.TriangleList, part.BaseVertex, 0, part.NumVertices, part.StartIndex, part.PrimitiveCount);//画顶点，如果要用Shader的话，是不能用mesh.Draw函数来话的，这个函数不支持Shader。 pass.End(); } } carEffect.End(); }

 

OK，调用Shader的部分就暂时到这里，其实调用Shader的方法，这里应该差不多都点到了吧。。。。

接下来再来看看FX文件：
首先声明，FX文件不支持中文注释，以下我所加的中文注释完全是在写这篇文章的时候加上去的，如果需要用的，请记得把中文注释统统删掉，有能力的，可以改写成英文。

 

float4x4 World : World;//这里设置的世界，观察，投影矩阵，就是在调用Shader的时候用SetValue的方法把程序里值传过来的 float4x4 View : View; float4x4 Projection : Projection; //顶点的输入格式 struct VS_INPUT { float3 Position : POSITION;//这个是顶点的坐标 float2 textureUV : TEXCOORD0;//顶点的纹理坐标 float3 normal : NORMAL;//顶点法向量 }; //输出顶点的格式 struct VS_OUTPUT { float4 Position : POSITION; float2 textureUV : TEXCOORD0; float3 normal : TEXCOORD1; float3 viewDir : TEXCOORD2;//观察方向 float3 lightDir : TEXCOORD3;//光照方向 float3 reflection : TEXCOORD4;//反射强度 }; //顶点渲染器的主函数，所有同一个模型的顶点都应该用这个函数 VS_OUTPUT Textured_Pass_0_Vertex_Shader_vs_main( VS_INPUT Input ) { VS_OUTPUT Output; float3 LightDir = {0.0f, -1.0f, 0.0f}; float3 cameraPos = {0.0f, 0.0f, 0.0f}; float4x4 wvp = mul(mul(World, View), Projection); Output.Position = mul(float4(Input.Position, 1.0f), wvp);//到这一步为止就完成了坐标变换了 Output.textureUV = Input.textureUV;//直接把传进来的顶点的纹理坐标输出 Output.lightDir = -normalize(LightDir);//标准化，并反向 Output.normal = normalize(mul(Input.normal, World)); Output.viewDir = normalize(cameraPos - Output.Position); float3 pos = mul(Input.Position, World); float3 normal = normalize(mul(Input.normal, World)); float3 incident = normalize(pos - cameraPos); Output.reflection = incident - 2.0f * normal * dot(incident, normal);//最终计算反射强度 return( Output ); } //这里就是之前说的那个参数，这个参数对应的是模型的纹理文件 texture my2DTexture_Tex; sampler2D ColorMapSampler = sampler_state//要把纹理贴到模型上就必须要用取样器 { Texture = (my2DTexture_Tex); MinFilter = Linear; MagFilter = Linear; MipFilter = Linear; AddressU = Mirror; AddressV = Mirror; }; texture myCubemap_Tex : ENVIROMENT; samplerCUBE CubeMapSampler = sampler_state { Texture = (myCubemap_Tex); MinFilter = Linear; MagFilter = Linear; MipFilter = Linear; AddressU = clamp; AddressV = clamp; }; struct PS_INPUT { float2 textureUV : TEXCOORD0; float3 reflection : TEXCOORD1; float3 normal : TEXCOORD2; float3 lightDir : TEXCOORD3; float3 viewDir : TEXCOORD4; }; //车身主体的像素着色器函数 float4 Textured_Pass_0_Pixel_Shader_ps_main( PS_INPUT Input ) : COLOR0 { float4 color; float4 Diffuse = {1.0f, 1.0f, 1.0f, 1.0f}; float4 colorMap = tex2D(ColorMapSampler, Input.textureUV);//计算纹理中的颜色 float4 cubeMap = texCUBE(CubeMapSampler, Input.reflection);//计算环境纹理中的颜色 //这里的2个函数分别是用来根据取样器来计算该像素的颜色的。 Diffuse.xyz = Diffuse.xyz * 0.15f * saturate(dot(Input.lightDir, Input.normal));//计算环境光，saturate函数是将括号中的值保持在0到1之间，有个很重要的一点，HLSL的计算都是在分量级上进行的，比如有一个float3 a，然后a++的意思就是a.x+1, a.y+1, a.z+1。 //计算镜面反射的强度 float3 Reflection = normalize(2.0f * colorMap * Input.normal - Input.lightDir); float Specular = pow(saturate(dot(Reflection, Input.viewDir)), 25.0f); //混合颜色，计算出最后该像素的颜色 color = cubeMap * 0.25f + colorMap * 0.6f + Diffuse + Specular; return color; } float4 WindowPSMain(PS_INPUT Input) : COLOR0 { float4 color; float4 cubeMap = texCUBE(CubeMapSampler, Input.reflection); //这里计算的颜色的意思是，环境颜色的50%加上透明度50% color = cubeMap * 0.5f; return color; } //这是最通用的像素着色器，只是根据纹理文件把纹理贴到模型上，不做其他的任何操作，也就是BasicEffect的效果 float4 OtherPSMain(PS_INPUT Input) : COLOR0 { float4 color; color = tex2D(ColorMapSampler, Input.textureUV); return color; } //这个是底盘的像素Shader，我是觉得内部太暗了，几乎没有一点光照，所以我就想加点光进去，但是好像没有达到我预期的效果，因为如果内部有光的话，车窗50%的透明度应该能够看到里面的一些东西的，但实际上没有。 float4 BottomPSMain(PS_INPUT Input) : COLOR0 { float4 color; float4 Diffuse = {1.0f, 1.0f, 1.0f, 1.0f}; Diffuse.xyz = Diffuse.xyz * 0.15f * saturate(dot(Input.lightDir, Input.normal)); color = tex2D(ColorMapSampler, Input.textureUV) * 0.6f + Diffuse; return color; } technique BodyShader { pass Pass_0 { VertexShader = compile vs_2_0 Textured_Pass_0_Vertex_Shader_vs_main(); PixelShader = compile ps_2_0 Textured_Pass_0_Pixel_Shader_ps_main(); } } technique WindowShader { pass Pass_0 { VertexShader = compile vs_2_0 Textured_Pass_0_Vertex_Shader_vs_main(); PixelShader = compile ps_2_0 WindowPSMain(); } } technique BottomShader { pass Pass_0 { VertexShader = compile vs_2_0 Textured_Pass_0_Vertex_Shader_vs_main(); PixelShader = compile ps_2_0 BottomPSMain(); } } technique OtherShader { pass Pass_0 { VertexShader = compile vs_2_0 Textured_Pass_0_Vertex_Shader_vs_main(); PixelShader = compile ps_2_0 OtherPSMain(); } }

 

最后再来说说环境纹理的绘制：
一般环境纹理可以将环境渲染到一个盒子上，也就是一个6面体

 

int targetIndex = 0;//0-6表示哪个面 RenderTargetCube renderTargetCube;//这里需要建个渲染目标，由于环境纹理需要根据车的不同位置实时绘制，所以需要将这个纹理保存在内存中，可以直接设置渲染目标，直接在内存中绘制。 public void RanderTexture() { Vector3 randerTargetPos = mycars.CarPosition, randerTargetUp; Matrix randerTargetProjection;//这里由于渲染目标更改了，所以它的观察和投影矩阵都需要重新建立，如果你也是想要做这种环境纹理，那也需要这样做，如果你只是想绘制一个当前屏幕的镜像，那就不用重新建立这些矩阵了。 Matrix randerTargetView; //6个面的向量 Vector3[] lookAts = { new Vector3(1.0f, 0.0f, 0.0f), new Vector3(-1.0f, 0.0f, 0.0f), new Vector3(0.0f, 1.0f, 0.0f), new Vector3(0.0f, -1.0f, 0.0f), new Vector3(0.0f, 0.0f, 1.0f), new Vector3(0.0f, 0.0f, -1.0f)}; //改变渲染目标 // RenderTarget temp = Graphics.GraphicsDevice.GetRenderTarget(0);//如果你原来的渲染目标不是屏幕的话，那就需要保存渲染目标，然后需要在绘制完后从新设回来，从RenderTarget对象到RenderTarget2D对象，可以用temp as RenderTarget2D这样的写法来写（下面有这样的代码） defaultBuffer = Graphics.GraphicsDevice.DepthStencilBuffer;//这里需要保存原来的深度模板缓存 //这里的customBuffer是自己新建的一个深度缓存模板，它的定义为customBuffer = new DepthStencilBuffer(Graphics.GraphicsDevice, renderTargetCube.Width, renderTargetCube.Height, DepthFormat.Depth24Stencil8, MultiSampleType.None, 0); Graphics.GraphicsDevice.DepthStencilBuffer = customBuffer; //改变渲染目标 Graphics.GraphicsDevice.SetRenderTarget(0, renderTargetCube, (CubeMapFace)targetIndex); Graphics.GraphicsDevice.Clear(Color.White);//清空 //计算view 和projection矩阵 if (targetIndex == 2)//摄像机头朝上 randerTargetUp = lookAts[5]; else if (targetIndex == 3)//朝下 randerTargetUp = lookAts[4]; else//朝前朝后和左右两边，摄像机的Up向量都是相同的 randerTargetUp = lookAts[2]; randerTargetView = Matrix.CreateLookAt(randerTargetPos, lookAts[targetIndex] + randerTargetPos, randerTargetUp); randerTargetProjection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver2, 1.0f, MinWay, MaxWay); //在目标上绘制 mybox.Draw(randerTargetView, randerTargetProjection); ++targetIndex;//这里之所以不用for循环一次性绘制出6个面是考虑到效率的问题，由于1秒钟总共需要调用Draw函数60次，所以如果用for循环的话，那光是绘制环境贴图1秒钟就要绘制6*60 = 360次。。。那是多少消耗速度的方法。。。当然直接抛弃，改用6次调用Draw函数的，分别绘制每个面，那样肉眼一般是无法分辨出来的，而且效率又大大提升，何乐而不为呢 if (targetIndex > 5) targetIndex = 0; //绘制完后就需要设会原来的保持的参数值了 Graphics.GraphicsDevice.DepthStencilBuffer = defaultBuffer; // Graphics.GraphicsDevice.SetRenderTarget(0, temp as RenderTarget2D); Graphics.GraphicsDevice.SetRenderTarget(0, null);//如果是屏幕的话，直接这样写就完事了 }

 

最后，由于本人能力有限，文章中不免有很多错误或者不清楚的地方，敬请原谅，希望能够得到各位高人的帮助，斧正这些错误，谢谢！