基于Krpano的VR場景展示系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

曹俊江，昔克，李劍

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

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

1 需求分析

1.1 開發(fā)人員需求分析

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

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

圖1 場景結(jié)構(gòu)分析圖

1.2 用戶需求分析

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

2 Krpano框架分析

2.1 Krpano運(yùn)行機(jī)制

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

2.2 Krpano語法結(jié)構(gòu)

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

3 系統(tǒng)功能設(shè)計(jì)

3.1 系統(tǒng)總體設(shè)計(jì)

系統(tǒng)拓?fù)浼軜?gòu)如圖2所示。

圖2 系統(tǒng)拓?fù)浼軜?gòu)圖

系統(tǒng)采用B/S架構(gòu)，使用Java編程語言進(jìn)行開發(fā)，整個(gè)系統(tǒng)包含執(zhí)行層和數(shù)據(jù)層。執(zhí)行層負(fù)責(zé)對底層文件進(jìn)行讀寫，包括場景生成和配置文件的修改等操作。數(shù)據(jù)層負(fù)責(zé)系統(tǒng)XML數(shù)據(jù)的交互和數(shù)據(jù)庫的存取。

3.2 系統(tǒng)功能設(shè)計(jì)

VR場景應(yīng)該具備以下主要功能：

1）場景管理功能。主要負(fù)責(zé)對場景進(jìn)行新增、刪除和編輯操作。系統(tǒng)根據(jù)相關(guān)操作生成、合并XML配置文件。

2）多線程處理功能。通過調(diào)用Krpano自帶的命令進(jìn)行XML文件的自動(dòng)化生成和合并操作。

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

4）可視化場景編輯功能。主要負(fù)責(zé)場景的可視化編輯，在后臺(tái)新增相應(yīng)的元素后或在編輯相關(guān)屬性后對場景進(jìn)行實(shí)時(shí)計(jì)算和顯示。

5）腳本在線編輯功能。主要負(fù)責(zé)對腳本進(jìn)行編輯和語法檢查，配合可視化場景編輯器可以實(shí)時(shí)對腳本功能進(jìn)行測試和調(diào)整。

4 功能實(shí)現(xiàn)

4.1 場景自動(dòng)生成

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

圖3 系統(tǒng)功能設(shè)計(jì)圖

4.2 場景配置文件解析

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

4.3 在線編輯器實(shí)現(xiàn)

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

圖4 場景信息流程圖

4.4 界面實(shí)現(xiàn)

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

圖5 場景可視化編輯視圖

5 結(jié)論

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