Silverlight 5 轻松开启绚丽的网页3D世界2—使用Toolkit开发3D Web应用
前文已经提到通过Silverlight Toolkit (December 2011) for Silverlight 5,可以开发出基于XNA的3D Web应用。但很多开发人员还是遇到了很多问题,现在我就一步步带大家看如何进行基于Silverlight Toolkit 3D App的开发。
1.搭建Silverlight 5 开发环境,确保你的VS是2010 SP1以上版本,如果是中文版,可以参照此文进行Silverlight 5 Tools 的安装。
2.安装Silverlight Toolkit (December 2011) for Silverlight 5,你可以在这里下载。
3.如果你的VS是中文版,在新建Silverlight项目时,是看不见以下三个项目模板。
原因是Silverlight Toolkit将项目模板安装到了英文语言目录下,这时需要我们自己将项目模板从英文语言目录拷贝到中文语言目录下,然后重建VS环境,具体做法如下:
1)进入VS安装目录(默认路径为:C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE),进入\ProjectTemplates\CSharp\Silverlight目录,然后找到英文语言目录1033,在这个目录下有Silverlight Unit Test Project.zip、Silverlight3dApp.zip、Silverlight3dLib.zip三个项目模板文件。
2)拷贝以上三个文件到中文语言目录2052。
3)通过CMD命令行,进入VS安装目录(默认路径为:cd C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE)
4)执行devenv /setup
5)执行devenv /installvstemplates
6)现在打开VS2010就可以新建上图中的三种项目。
4.现在3D应用的开发环境已经基本具备,我们可以新建第一个Silverlight 3D Application了,选择新建项目Silverlight 3D Application,命名为Hello3D。
5.预置的项目模板将包含以下四个子项目包:
nSilverlight3DApp:Silverlight 3D主程序(客户端)
nSilverlight3DAppContent:Silverlight 3D主程序附带的素材库(客户端)
nSilverlight3DWeb:Silverlight 3D寄宿的Web应用程序(服务端)。
nSilverlight3DWebContent:直接发在服务器端的素材库,用于减少XAP包的大小。
6.现在如果我们直接进行按下F5进行系统调试,会出现以下提示:
但实际情况并不是页面上对于Silverlight设置允许GPU加速有问题,而是Silverlight3dApp项目的信任设置有问题,需要我们针对Web 3D应用进行可信设置,具体步骤在前文中已经提出,但这里再次重申一下:
1)在Silverlight3dApp项目属性中,勾选“允许在浏览器外运行应用程序“和”在浏览器内运行时需要提升的信任“(如下图所示),这时项目的Properties目录下将产生对应的OutOfBrowserSettings.xml和InBrowserSettings.xml两个文件,而后续步骤的设置将改变这两个文件的内容。
2)点击“浏览器外设置”,勾选“使用GPU加速”与“在浏览器之外运行时需要提升的信任” (如下图所示),以保证使用GPU加速,如果此两项不选,则会出现RenderModeReason.GPUAccelerationDisabled的情况。
3)现在我们需要将第一步生成的OutOfBrowserSettings.xml和InBrowserSettings.xml两个文件加入到生成的XAP文件内容中,具体做法是在项目中分别选择两个文件,在其属性中的“生成操作”选择为“内容”(如下图所示)。
4)最后由于Silverlight 5正式版考虑到客户端环境的差异(包括有无显卡、显卡是否支持3D加速等多种情况),加入了对浏览器内3D内容的显示权限管理,因此,我们需要根据客户端实际情况提示使用者打开对本网站的3D显示权限。代码如下(注:最好是添加在3D展现的InitializeComponent();后面):
if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware) { string message; switch (GraphicsDeviceManager.Current.RenderModeReason) { case RenderModeReason.GPUAccelerationDisabled: message = "显示异常描述:3D加速被禁用!\n\n解决方法:请联系站长启用本页面的显卡3D加速参数。"; break; case RenderModeReason.SecurityBlocked: message = "显示异常描述:Silverlight默认安全选项阻止了该站点的3D显示!\n\n解决方法:" + "\n1.在本页面点击鼠标右键;" + "\n2.选择“Silverlight”;" + "\n3.在弹出的“Microsoft Silverlight 配置”对话框中选择“权限”选项卡;" + "\n4.找到本站点域名后允许3D安全策略;" + "\n5.点击“确认”按钮;" + "\n6.刷新本页面"; break; case RenderModeReason.Not3DCapable: message = "显示异常描述:没有找到3D显卡!\n\n解决方法:请更换显卡或安装合适的驱动程序。"; break; case RenderModeReason.TemporarilyUnavailable: message = "显示异常描述:您的显卡暂时无法使用!\n\n解决方法:请重启浏览器后刷新本页面。"; break; default: message = "显示异常描述:未知错误!"; break; } MessageBox.Show(message, "3D显示异常", MessageBoxButton.OK); }} |
7.现在将Silverlight3dWeb设置为启动项目,将Silverlight3dAppTestPage.html设置为起始页。现在我们再次按下F5进行调试时,将出现旋转的3D立方体(如下图所示)。
为了加深大家对Silverlight 3D应用的理解,我将Tookit示例中的问题已经修复,并将源码提供给大家,其余3D源码将在后期的系列文章中给出,敬请关注。
Tookit XNA 3D 优化示例演示地址:http://space.silverlightchina.net/xpeter/demo/3D.htm
Tookit XNA 3D所有示例优化源码下载地址:http://space.silverlightchina.net/xpeter/demo/code/Toolkit.rar