Silverlight 5 3d游戏开发（1）绘制简单图形
Silverlight 5 beta 版本的公布, 其支持3d 效果到底如何。本系列文章将和大家一起学习研究。
Silverlight 5 目前处于Beta版本，如果是 Visual Studio 2010，需要先安装Visual Studio SP1，然后才能安装 Silverlight 5 开发工具包。由于Silverlight 5 在测试，可能得不到版本支持------即浏览一个Silverlight 5 网站，只能手动安装 Silverlight 开发版本来浏览。
地址：http://www.silverlight.net/getstarted/silverlight-5-beta/
在Silverlight 5 帮助文档里,给出了3d渲染的基本步骤：
1.开启GPU加速，即设置EnableGPUAcceleration 为 true
2.添加DrawSurface控件同时定义Draw事件
3.生成Draw事件处理函数
4.定义一个存储顶点数据的结构体。（包括VertexDeclartion）
5.为3D图形定义 顶点数据
6.定义VertexBuffer并使用SetData（T）来添加顶点数据
7.定义PixelShader和VertexShader对象
8.如果你的顶点着色器需要矩阵，定义world-view，Camera view, Projection space矩阵
9.在Draw事件里
a.调用Clear方法清空GraphicsDevice
b.使用SetVertexBuffer将VertexBuffer设置到图形设备上
c.使用SetVertexShader将VertexShader设置到图形设备上
使用SetVertexShaderConstantFloat4（T）传递一个矩阵参数到顶点着色器
d.使用SetPixelShadeer将PixelShader设置到图形设备上
e.调用DrawPrimitives
f.可以通过调用InvalidateSurface触发另一个绘图事件
10.在图形线程无效的表面上调用Invalidate；
Silverlight 5 依靠DrawingSurface 这个新控件来渲染3d 图形。并且增加了一些新类来支持3d。通过引进一个轻量级的XNA Graphics Framework 4.0提供对3D的支持。这个特性可以开发更丰富的游戏和用户体验。
以下是Silverlight 命名空间中 3d 相关的类。
| Namespace |
Notes |
| 包含类 Color 和 Rectangle 结构被Silverlight 3D 图形类使用. 注意：这2个结构和 System.Windows.Media.Color 以及 System.Windows.Shapes.Rectangle 类是不一样的。 |
|
| 包含了大多数 XNA 3D 图形类。 |
|
| Microsoft.Xna.Framework.Silverlight |
包含了Silverlight 特有的3d 类. |
| 包含了 DrawingSurface 和DrawEventArgs. |
|
| BitmapSource 类被BitmapSourceExtensions 扩展了一些 CopyTo 方法用来从位图图片中创建 Texture 。 |
Silverlight 只支持 Reach profile 模式，这个模式需要显卡支持Shader model2.0+以及DirectX 9+，关于该模式一些参数，可以查看下表(该表取至Xna)：
| Shader model (着色器 版本) |
2.0 |
| Max texture size (最大纹理) |
2048 |
| Max cubemap size (最大多面体) |
512 |
| Max volume texture size (最大体积纹理) |
不支持 |
| Non power of two textures (无二次幂限制的纹理) 解释：OpenGL仅支持分辨率为2mx2n的纹理 |
限制: 不能用于环绕 寻址模式, 纹理链, 或 DXT 压缩尺寸不是二次幂 |
| Non power of two cubemaps (无二次幂限制的多面体) |
不支持 |
| Non power of two volume textures (无二次幂限制的体积纹理) |
体积纹理不支持 |
| Max primitives per draw call (最大每秒调用绘制) |
65535 |
| Index buffer formats (缓冲索引格式) |
16 bit |
| Vertex element formats (顶点元素格式) |
Color, Byte4, Single, Vector2, Vector3, Vector4, Short2, Short4, NormalizedShort2, NormalizedShort4 |
| Texture formats (纹理格式) |
Color, Bgr565, Bgra5551, Bgra4444, NormalizedByte2, NormalizedByte4, Dxt1, Dxt3, Dxt5 |
| Vertex texture formats (顶点纹理格式) |
Vertex texturing is not supported |
| Render target formats (渲染目标格式) |
部分支持 (见下) |
| Multiple render targets (多次渲染目标) |
不支持 |
| Occlusion queries (遮挡测试) |
不支持 |
| Separate alpha blend |
不支持 |
| Blend.SourceAlphaSaturation |
只支持SourceBlend, 不支持 DestinationBlend |
| Max vertex streams |
16 |
| Max stream stride |
255 |
下面来开始一个简单的3d 例子：
首先创建一个Silverlight 工程项目。
第一步：将 <param name="EnableGPUAcceleration" value="true" /> 添加到网页的Silverlight 插件对象设置中来开启硬件加速。
第二步：在主控件的xaml 里添加 DrawingSurface，并定义了Draw事件处理函数DrawingSurface_Draw。
<
Grid
x:Name
="LayoutRoot"
Background
="Black"
>
<
DrawingSurface
Draw
="DrawingSurface_Draw"
Width
="500"
Height
="500"
/>
</
Grid
>
第三步: 在没有编写Draw事件处理函数DrawingSurface_Draw 的内容之前，在xmal里添加一个TextBlock来显示程序的fps情况
<
TextBlock
x:Name
="txt"
VerticalAlignment
="Top"
HorizontalAlignment
="Left"
Foreground
="White"
/>
private void DrawingSurface_Draw(object sender, DrawEventArgs e)
{
txt.Dispatcher.BeginInvoke(() =>
{
txt.Text = string.Format("刷新频率: {0}ms\t 总运行时间: {1}", e.DeltaTime.TotalMilliseconds, e.TotalTime);
});
}
运行后，刷新频率没有值因为Draw事件仅仅被命中一次，DrawEventArgs使用InvalidateSurface 方法来强制刷新DrawingSurface控件同时再次命中Draw事件。
修改成以下代码再运行：
private
void
DrawingSurface_Draw(
object
sender, DrawEventArgs e)
{
txt.Dispatcher.BeginInvoke(()
=>
{
txt.Text
=
string
.Format(
"
刷新频率: {0}ms\t 总运行时间: {1}
"
, e.DeltaTime.TotalMilliseconds, e.TotalTime);
});
e.InvalidateSurface();
}
我的机器上大概是 17ms ,也就是fps 在60 左右。
再添加一个TextBlock来显示程序的硬件加速情况，然后在MainPage 的构造函数里添加以下代码：
GraphicsDeviceManager deviceManager
=
GraphicsDeviceManager.Current;
txt1.Text
=
string
.Format(
"
渲染模式: {0}\t 渲染结果: {1}
"
, deviceManager.RenderMode, deviceManager.RenderModeReason);
RenderMode 只有2个参数，未定义模式和硬件模式。注意：Silverlight 3D 不支持软件渲染模式，这里的 Unavailable 不代表软件模式。
RenderModeReason 有好几个理由，分别是正常，GPU加速未开启，GPU加速可能在浏览器中禁用，硬件不支持3d，设备暂时不可用。
第四步：3d中一个图形绘制分为顶点渲染和像素渲染(也叫顶点着色和像素着色)，顶点渲染主要负责描绘图形，也就是建立模形。像素渲染主要负责把顶点绘出的图形填上填色。然后再加上纹理贴图单元贴上纹理。
绘制的第一步就是为显卡提供顶点数据。顶点数据存储在结构体里，可以自定义格式，但是必须遵循一定的规则。一个顶点数据的结构保存了顶点的数据（空间位置，颜色，贴图座标等等信息）和一个VertexDeclaration对象来告诉设备数据的大小和如何格式化数据。
下面来定义一个顶点数据结构，Silverlight 类库中没有提供 Vector3 等辅助类，需要去以下地址下载Microsoft.Xna.Framework.Math.dll
地址：http://code.msdn.microsoft.com/XNA-Math-Helper-DLL-d4d1f7d4
引用到项目里，构建顶点数据结构如下：
public
struct
VertexPositionColor
{
public
Vector3 Position;
public
Microsoft.Xna.Framework.Color Color;
public
VertexPositionColor(Vector3 position, Microsoft.Xna.Framework.Color color)
{
Position
=
position; Color
=
color;
}
public
static
readonly
VertexDeclaration VertexDeclaration
=
new
VertexDeclaration(
new
VertexElement(
0
, VertexElementFormat.Vector3, VertexElementUsage.Position,
0
),
new
VertexElement(
12
, VertexElementFormat.Color, VertexElementUsage.Color,
0
));
}
这个是一个帮助文档里示例的简单顶点数据结构，包括了一个位置，颜色，和VertexDeclaration对象。
第5步:绘制一个3角形,用前面的定义的顶点数据结构来构造,并填充到顶点数据缓冲VertexBuffer里。
private
VertexBuffer CreateTriangle()
{
VertexPositionColor[] vertices
=
new
VertexPositionColor[
3
];
Microsoft.Xna.Framework.Color color
=
new
Microsoft.Xna.Framework.Color(
255
,
255
,
255
,
255
);
vertices[
0
].Position
=
new
Vector3(
-
1
,
-
1
,
0
);
//
left
vertices[
1
].Position
=
new
Vector3(
0
,
1
,
0
);
//
top
vertices[
2
].Position
=
new
Vector3(
1
,
-
1
,
0
);
//
right
vertices[
0
].Color
=
color;
vertices[
1
].Color
=
color;
vertices[
2
].Color
=
color;
VertexBuffer vb
=
new
VertexBuffer(
GraphicsDeviceManager.Current.GraphicsDevice,
VertexPositionColor.VertexDeclaration,
vertices.Length,
BufferUsage.WriteOnly);
vb.SetData(
0
, vertices,
0
, vertices.Length,
0
);
return
vb;
}
Fxc.exe /T vs_2_0 /O3 /Zpr /Fo Triangle.vs Triangle.vs.hlsl
Fxc.exe /T ps_2_0 /O3 /Zpr /Fo Triangle.ps Triangle.ps.hlsl
这里，要了解的是着色程序是由图形设备执行，由于Shader指令集非常复杂，因此出现了hlsl这样的面向过程的Shader语言，来简化程序员的工作。 hlsl 编写完后需要被编译成显卡的GPU指令序列来让显卡进行顶点处理过程和像素处理过程。所以，编写hlsl时应该尽量简洁高效。
关于更详细的hlsl 请自行寻找相关资料，这里我直接使用了帮助文档里的hlsl.
为了更好的效率，我把创建3角形顶点数据和构建着色对象放在了DrawingSurface 的加载事件中。
private
void
DrawingSurface_Loaded(
object
sender, RoutedEventArgs e)
{
GraphicsDevice resourceDevice
=
GraphicsDeviceManager.Current.GraphicsDevice;
vertexBuffer
=
CreateTriangle();
Stream shaderStream
=
Application.GetResourceStream(
new
Uri(
@"
Silverlight3DGame1;component/Triangle.vs
"
, UriKind.Relative)).Stream;
vertexShader
=
VertexShader.FromStream(resourceDevice, shaderStream);
shaderStream
=
Application.GetResourceStream(
new
Uri(
@"
Silverlight3DGame1;component/Triangle.ps
"
, UriKind.Relative)).Stream;
pixelShader
=
PixelShader.FromStream(resourceDevice, shaderStream);
}
第7步：设置相机和投影矩阵。（以后继续学习）
private
void
SetMatrix()
{
Vector3 cameraPosition
=
new
Vector3(
0
,
0
,
5.0f
);
//
相机坐标
Vector3 cameraTarget
=
Vector3.Zero;
//
相机朝向 (朝向世界坐标原点)
//
相机的视口
view
=
Microsoft.Xna.Framework.Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);
projection
=
Microsoft.Xna.Framework.Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4,
1.667f
,
1.0f
,
10.0f
);
}
private
void
Draw(GraphicsDevice graphicsDevice)
{
graphicsDevice.Clear(ClearOptions.Target
|
ClearOptions.DepthBuffer, Microsoft.Xna.Framework.Color.Transparent,
1.0f
,
0
);
graphicsDevice.SetVertexBuffer(vertexBuffer);
graphicsDevice.SetVertexShader(vertexShader);
Microsoft.Xna.Framework.Matrix viewProjection
=
view
*
projection;
graphicsDevice.SetVertexShaderConstantFloat4(
0
,
ref
viewProjection);
graphicsDevice.SetPixelShader(pixelShader);
graphicsDevice.DrawPrimitives(PrimitiveType.TriangleList,
0
,
2
);
}
最后，即可在屏幕上画出一个白色三角形。在代码里还有一个绘制矩形的函数，大家可以更换一下，查看下效果，并自己尝试绘制其它图形。