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

  • 常规讨论

  • 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.png


     

    图1 Toolkit中3D模板项目

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

    2.png

     

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

    3.png

     

    图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.png

     

    图4 Babylon 3D示例

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

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

    未命名.jpg

     

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

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

    未命名2.jpg

     

    图6 开启GPU加速

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

    未命名3.jpg

     

    图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所示)

    未命名0.jpg

     

    图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应用基本已经具备条件。


    《Silverlight寻光之旅:企业级RIA项目全流程实践》已经出版,欲购从速~ 企业Silverlight开发QQ群:108987894
    • 已更改类型 xpeter 2012年1月9日 13:59
    2012年1月9日 13:59

全部回复