Silverlight 5 轻松开启绚丽的网页3D世界

Silverlight 5已正式发布，新版本的最大亮点是通过引入轻量级的XNA游戏开发框架，从而可以在浏览器内轻松实现网页的3D应用。与此同时，微软正式发布了Silverlight Toolkit (December 2011) for Silverlight 5，这是一个超出开发者想象的工具包，你可以在这里下载，在这一版本中提供了大量对3D的支持工具，提供与3D项目相关的多种Visual Studio项目模板（如图1所示），包括：

lSilverlight3DApp：Silverlight 3D主程序（客户端）

lSilverlight3Dlib：Silverlight 3D主程序类库（客户端类库）

lSilverlightEffect：Silverlight 3D特效库（客户端库）

lSilverlight3DAppContent：Silverlight 3D主程序附带的素材库（客户端）

lSilverlight3DWeb：Silverlight 3D寄宿的Web应用程序（服务端）。

lSilverlight3DWebContent：直接发在服务器端的素材库，用于减少XAP包的大小。

 

 

图1 Toolkit中3D模板项目

使用Silverlight Toolkit可以非常容易地实现以前在Web中无法想象的3D特效，包括粒子效果（如图2）、光照效果、角色Skinning效果（如图3）。

 

图2 通过粒子效果形成烟雾特效

 

图3 角色Skinning效果

注：使用Silverlight Toolkit for Silverlight 5新建Silverlight3D项目前，需要在开发环境中安装XNA Game Studio 4否则无法打开素材项目。

 

伴随Silverlight 5正式版发布，已经有第三方3D引擎进行了框架更新，这其中包括非常优秀的Babylon 3D开源引擎，有兴趣的朋友可以通过一下地址获取基于Silverlight 5正式版的3D引擎源码，其中还包括一个顶点着色器、一个像素着色器、一个3D模型导入器和一个示例。对于主流的3D建模软件（包括MAYA、3D Studio Max、Modo、Blender）来说都可以导出.obj文件，这一类型文件可以无缝地集成到Babylon 3D开源引擎中，使得开发Silverlight 3D应用具有更好的兼容性（图4是源码包中的示例）。

 

图4 Babylon 3D示例

对于Silverlight 5而言，浏览器内的权限控制显得有点苛刻，如果我们需要在实际项目中开发浏览器内的3D应用，那么需要打开应用在浏览器内的权限，操作步骤如下：

1.在Silverlight项目属性中，勾选“允许在浏览器外运行应用程序“和”在浏览器内运行时需要提升的信任“（如图5所示），这时项目的Properties目录下将产生对应的OutOfBrowserSettings.xml和InBrowserSettings.xml两个文件，而后续步骤的设置将改变这两个文件的内容。

 

图5 提升Silverlight应用程序信任级别

2.点击“浏览器外设置”，勾选“使用GPU加速”与“在浏览器之外运行时需要提升的信任” （如图6所示），以保证使用GPU加速，如果此两项不选，则会出现RenderModeReason.GPUAccelerationDisabled的情况。

 

图6 开启GPU加速

3.现在我们需要将第一步生成的OutOfBrowserSettings.xml和InBrowserSettings.xml两个文件加入到生成的XAP文件内容中，具体做法是在项目中分别选择两个文件，在其属性中的“生成操作”选择为“内容”（如图7所示）。

 

图7 权限配置文件的生成操作选择

4.最后由于Silverlight 5正式版考虑到客户端环境的差异（包括有无显卡、显卡是否支持3D加速等多种情况），加入了对浏览器内3D内容的显示权限管理，因此，我们需要根据客户端实际情况提示使用者打开对本网站的3D显示权限。代码如下：

 

if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware){ switch (GraphicsDeviceManager.Current.RenderModeReason)
{ case RenderModeReason.GPUAccelerationDisabled: MessageBox.Show("3D加速被禁用，请启用显卡3D加速后刷新本页面！"); break; case RenderModeReason.SecurityBlocked: MessageBox.Show("请在右键的Silverlight菜单中打开“权限”，找到本站点域名后允许3D安全策略！"); break; case RenderModeReason.Not3DCapable: MessageBox.Show("没有找到显卡！"); break; case RenderModeReason.TemporarilyUnavailable: MessageBox.Show("暂时无法使用！"); break;
}}

 

浏览器的权限可通过Silverlight程序的右键菜单中选择“权限”选项卡，然后找到应用程序的宿主域名，并将其3D权限设置为“允许”（如图8所示）

 

图8 客户端3D权限设置

如果您想体验Silverlight 5绚丽的网页3D世界，笔者已经为你整理了更多精彩的示例，还等什么？现在就点击下面的网页来体验一下吧！

http://space.silverlightchina.net/xpeter/demo/3D.htm

Silverlight 5 Toolkit的3D示例程序源码，您可以在其安装目录下找到，默认目录如下：

C:\Program Files\Microsoft SDKs\Silverlight\v5.0\Toolkit\dec11\Source

解压缩该目录下的Sample source code.zip，可以在其中的Xna目录下找到示例源码。

本文笔者只是给大家介绍了Silverlight 5中3D Web应用中的凤毛麟角，对于Silverlight来说构建类似于XNA的大型3D应用基本已经具备条件

评论

2 楼 yoyo837 2015-03-03  

counters15 写道

目前只支持IE吗？

插件的东西是跨浏览器的！

1 楼 counters15 2012-06-01  

目前只支持IE吗？