基于Krpano的VR場景展示系統設計與實現

曹俊江，昔克，李劍

（新疆電子研究所股份有限公司，新疆 烏魯木齊 830013）

5G技術的高速發展和應用，推動了VR行業的發展。近年來，市面上推出了很多優秀的VR應用，但是昂貴的開發成本和設備成本阻礙著這些優秀的應用進入千家萬戶，在這個過程中，WebVR技術就應運而生。WebVR是一種基于WebGL的三維展示技術[1]，WebVR將VR體驗搬進了用戶瀏覽器，通過JavaScript和WebGL的有機結合就可以借助系統顯卡在瀏覽器里流暢地展示3D場景和模型。而WebVR提供了專門訪問VR硬件的接口，讓開發者能構建更加舒適的VR體驗[8]，并且可以兼容智能手機、PC、Oculus Rift和 HTC Vive等設備。Krpano作為主流的三維全景和WebVR開發框架，可以方便地將采集到的圖像進行拼接、整合，生成無縫的三維虛擬空間[2]。Krpano自帶的各種插件也可以方便地將各種圖文、音頻、視頻、模型等資源加載到虛擬場景中，通過編寫腳本實現各種場景下的交互。該技術目前已經廣泛應用于虛擬博物館、虛擬景區、數字城市等項目中[5]。由于Krpano是基于XML的數據結構，因此復雜場景的開發往往需要更多的冗余步驟和繁雜節點疊加操作，使得場景的開發缺乏可視化的開發環境[9]。該系統的設計使開發人員構建場景更加直觀，同時大大降低了用戶對場景業務的維護成本。

1 需求分析

1.1 開發人員需求分析

常規的Krpano場景開發，需要使用該框架下自帶的Bat批處理程序進行處理[6]，通過輸入不同的參數用以生成不同功能的場景文件。不同場景的生成過程中往往會生成多個場景的配置文件，其中50%以上的文件高度冗余，需要開發人員在對比分析后進行合并。在前端場景界面的設計過程中，也需要根據多個場景對節點進行配置、裁剪、合并，步驟繁瑣，極易出錯。

為了解決上述問題，首先需要了解Krpano的場景生成過程，對場景生成命令進行抽象化處理[11]，通過Java語言封裝成類庫加以執行。其次對于各個場景下的冗余文件進行分析，通過程序處理完成自動化裁剪和場景合并。

圖1 場景結構分析圖

1.2 用戶需求分析

傳統的Web VR應用在交付給用戶后，如果發生業務變更或系統問題，只能交給開發人員進行維護或者重新開發，直接提高了用戶的維護成本，最終使產品難以落地。為了降低用戶的維護成本，這就需要對各個場景下的圖文、音頻、視頻、模型、腳本等資源進行建庫處理[4]。通過系統后臺界面完成資源的添加、更新和刪除操作。

2 Krpano框架分析

2.1 Krpano運行機制

Krpano引擎同時支持Html5和Flash兩種顯示方式[3]，為了更好地支持移動設備，該系統采用了Html5顯示方式。Krpano在場景配置上使用了XML文檔結構，只需要改變XML文檔結構就可以對場景進行腳本控制。同Json一樣，XML也是一種通用的解析標準[13]，因此外部應用程序可以很方便地對場景進行操作，可以動態地對場景進行擴展和控制。在腳本交互上，Krpano的action同時支持ActionScript3和Javascript兩種腳本語言[12]，分別對應Flash和Html5顯示方式。Krpano.html是場景的入口頁面，通過讀取Krpano.xml配置文件完成場景的加載和切換。每個場景都有對應的XML配置文件，完成對場景各個元素的加載和交互控制。

2.2 Krpano語法結構

Krpano通過對XML配置文件的解析，完成對場景、圖片、音頻、VR插件等元素的加載和控制。每個配置文件的根節點＜krpano>下包含了多種元素標簽來實現不同的功能。相同的元素標簽用name屬性加以區分。＜include>元素可以引入不同的XML配置文件，相當于把配置文件里的內容全部復制到當前配置文件下。＜view>元素控制場景的視野，如起始視角、視角限制與縮放等。＜image>元素控制場景的全景圖設置，包括全景圖類型，漸進分辨率切片顯示等，由框架自動生成。＜control>元素設置鼠標、鍵盤以及觸摸設備對場景瀏覽的控制方式。＜plugin>元素作為插件元素，可以支持在場景空間中加載透明視頻、3D音頻、地圖、模型、粒子特效、VR特效等多種功能擴展。＜hotspot>元素主要負責各個場景的熱點切換。＜events>元素可調用各類型事件，例如全景載入的不同階段以及鼠標觸發的不同行為等。＜action>元素可自定義動態代碼，用以完成各個元素的交互。

3 系統功能設計

3.1 系統總體設計

系統拓撲架構如圖2所示。

圖2 系統拓撲架構圖

系統采用B/S架構，使用Java編程語言進行開發，整個系統包含執行層和數據層。執行層負責對底層文件進行讀寫，包括場景生成和配置文件的修改等操作。數據層負責系統XML數據的交互和數據庫的存取。

3.2 系統功能設計

VR場景應該具備以下主要功能：

1）場景管理功能。主要負責對場景進行新增、刪除和編輯操作。系統根據相關操作生成、合并XML配置文件。

2）多線程處理功能。通過調用Krpano自帶的命令進行XML文件的自動化生成和合并操作。

3）元素管理功能。負責對場景下的各種元素進行新增、刪除和編輯操作，如3D文字、轉場鏈接、透明視頻、模型、插件等。

4）可視化場景編輯功能。主要負責場景的可視化編輯，在后臺新增相應的元素后或在編輯相關屬性后對場景進行實時計算和顯示。

5）腳本在線編輯功能。主要負責對腳本進行編輯和語法檢查，配合可視化場景編輯器可以實時對腳本功能進行測試和調整。

4 功能實現

4.1 場景自動生成

Krpano框架自帶的Bat批處理文件支持場景的生成[7]，但是繁多的命令和參數對于開發人員和用戶來說操作極為不便并且非常難以擴展。通過對命令和參數的封裝和處理，可以在系統后臺中完成場景的自動化生成操作。關鍵代碼如下：

圖3 系統功能設計圖

4.2 場景配置文件解析

Krpano的場景配置文件基于XML結構，目前對于XML結構的解析方式有兩種：Dom（document object model）和 Sax（simple api for xml）。Dom 解析方式是將XML文檔預先加載到內存，對文檔的查找和編輯操作比較方便。Sax解析方式是基于事件驅動[10]，無需完全加載XML文檔，效率較高，但是難以實現文檔的排序和編輯操作。系統采用Java下主流的解析工具Dom4j，它同時具備Dom/Sax兩種解析方式[14]，可以根據業務需要靈活選擇。關鍵代碼如下：

4.3 在線編輯器實現

Krpano場景的建立和交互都是基于XML配置文件進行配置的。傳統的開發方式是基于文本編輯器對XML節點進行添加和移動[15]，對于開發人員和維護人員來說不僅要對Krpano的語法非常清楚，而且開發效率也不高，極易出錯。Javascript是一種解釋語言，用于對Web頁面中元素的操作，而JQuery是對Javascript的封裝，使頁面Dom元素的操作更加高效、便捷。JQuery也可以方便地對XML文件進行解析和操作[16]，實現代碼如下：

圖4 場景信息流程圖

4.4 界面實現

系統后臺采用主流的Bootstrap響應式框架。該框架包含多種常見界面組件，包括導航菜單、表單、進度條、提示框、媒體對象、縮略圖、代碼編輯器等。Bootstrap支持積木式開發，可以方便地對各種組件自由組合，僅需要將使用到的插件（如縮略圖）的js文件和css文件引用，就可以使用JQuery方便地調用該組件的各種功能。加載場景縮略圖關鍵代碼如下：

圖5 場景可視化編輯視圖

5 結論

通過對系統的測試使用和后續優化，本系統已經實現了對場景的上傳、生成、元素編輯和交互腳本的編輯等功能，既滿足了開發人員可視化、便捷化發布需求，也滿足了維護人員對場景元素的自定義編輯。在用戶體驗上，支持了基于紅藍眼鏡、谷歌紙盒、HTC Vive等設備的VR體驗。在交互體驗上，基于Krpano原生和第三方插件實現了全景視頻漫游、3D展館漫游、虛擬導游講解、VR積分游戲等功能。目前本系統已經在旅游集散中心、景區、展館等領域落地使用，既大大降低了開發成本，也為客戶提高了服務效率，具有較強的應用價值和推廣價值。