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