基于Web技術的沉浸式虛擬現(xiàn)實框架研究

單盛

(安徽電子信息職業(yè)技術學院 軟件工程學院，安徽 蚌埠 233000)

沉浸式虛擬現(xiàn)實(Virtual Reality，VR)技術能讓用戶與虛擬環(huán)境進行沉浸式交互[1-2]。沉浸感是諸如沉浸式分析等虛擬現(xiàn)實應用的核心元素，其中沉浸式分析是以視覺可視化技術和數(shù)據(jù)科學為基礎的新興研究課題，常用于分析推理和決策制定等領域[3-6]。本文結合VR的設計范式，提出了基于Web技術的沉浸式虛擬現(xiàn)實框架(即WIVR)，促使缺乏編程經驗的用戶也可以通過Web創(chuàng)建交互式、沉浸式的數(shù)據(jù)可視化環(huán)境。

1 可視化工作流程

如圖1所示，WIVR可供具有不同專業(yè)知識和能力的用戶使用，目前支持JSON和CSV 格式的數(shù)據(jù)可視化。用戶可以根據(jù)自己的專業(yè)知識遵循不同的開發(fā)路徑來生成沉浸式的虛擬現(xiàn)實環(huán)境。例如，具有一定編程能力的用戶可以使用構建器生成WIVR可視化配置文件，然后在WebVR應用程序代碼中使用該文件。而具有WebVR開發(fā)經驗的用戶可以利用 WIVR提供的API來開發(fā)新的可視化和交互程序。

圖1 沉浸式可視化工作流程

WIVR構建器是一種Web 應用程序，主要面向非程序員。構建器與 WIVR的NodeJS模塊打包在一起，能夠生成可視化的演示。構建器允許用戶通過瀏覽器方便地進行原型設計和測試沉浸式體驗環(huán)境，以促進高級用戶進行快速原型制作和迭代開發(fā)。這種可視化原型的快速構建和即時反饋使WIVR具有易用性。WIVR構建器使設計人員能夠構建可視化配置，進行自定義迭代并立即查看結果。生成的可視化即可以通過構建器中的3D交互式場景進行查看，也可以通過VR頭戴設備進行沉浸式查看。構建器的圖形用戶界面允許用戶上傳自己的數(shù)據(jù)集或從一組示例中進行選擇，然后通過一組下拉菜單配置這些示例，允許用戶設置各種參數(shù)(包括標記的類型和形狀以及通道編碼)。以這種方式呈現(xiàn)參數(shù)的優(yōu)點是不需要用戶擁有編程知識，降低使用的門檻和提高易用性。在構建器中，用戶還可以瀏覽相關模板的示例圖庫，并加載、編輯和實時預覽，這樣有助于初學者的學習和開發(fā)的效率。

WIVR 構建器還可以有效地縮短有編程經驗用戶的學習過程，尤其是那些沒有WebVR開發(fā)經驗的程序員。由于此類用戶之前可能使用過JSON，因此他們可能更傾向于直接編輯配置文件，而不是使用構建器的GUI。對于剛開始編寫WebVR程序的開發(fā)人員來說，使用 WIVR 的最簡單方法是創(chuàng)建一個新的React項目，而WIVR也可以集成到現(xiàn)有基于A-Frame框架的非React項目中。如圖 1 所示，程序員可以自己編寫配置文件，也可以通過構建器生成配置文件，然后將其導出并集成到獨立應用程序中。由于構建器負責為WIVR解析和生成可視化配置文件，因此使用API開發(fā)的新功能在構建器中都將不可用。因此，構建器無法滿足使用WIVR API的高級項目的需求。對于擁有WebVR和A-Frame編程經驗的用戶，構建器對于學習語法和構建WIVR應用程序的原型仍然很有用。

2 WIVR框架

WIVR使用React庫實現(xiàn)用戶接口，使用A-Frame實現(xiàn)WebVR。A-Frame是一個實體組件框架，為Three.js提供聲明性、可擴展和可組合結構。Three.js 是一個開源 Javascript庫，支持在Web瀏覽器中對3D場景進行編程[7]。WIVR通過A-Frame為所有主流頭戴顯示器及其手持控制器提供支持。WIVR將數(shù)據(jù)集和可視化配置文件轉換為沉浸式可視化的過程可概述如下：首先 WIVR解析可視化配置文件，然后使用完整的配置將數(shù)據(jù)映射到圖形標記及其視覺編碼通道。完成所有映射后，將值傳遞給可視化渲染器。配置解釋和數(shù)據(jù)映射是實時進行的，因此對數(shù)據(jù)集或可視化配置的任何更改都能得到WIVR應用程序的實時響應。

2.1 框架概述

將WIVR實現(xiàn)為NodeJS的一個模塊，同時提供了用于擴展功能的API。在WIVR 的應用程序中，高級Document Object Model(DOM)架構的結構和實現(xiàn)取決于用戶，并且不需要使用React編寫整個應用程序。WIVR可以集成到現(xiàn)有基于A-Frame框架的應用程序，圖2顯示了一個WIVR示例應用程序的組件圖。

圖2 示例組件圖

圖2的最上層的節(jié)點是一個React組件，其中包含A-Frame場景組件和其它A-Frame組件。WIVR組件必須放置在A-Frame場景元素中，其輸入是一個可視化配置文件。WIVR將生成一個或多個視圖組件，每個組件包含一個可視化及其相應的交互。它們還響應用戶交互，然后觸發(fā)可視化所需的任何更新。視圖通過可視化配置文件鏈接在一起，在鏈接在一起的任何一組視圖上進行的交互將會更新該組中的其它視圖。

2.2 可視化配置

WIVR當前支持JSON和CSV格式的表格數(shù)據(jù)，目前支持的可視化類型包括笛卡爾圖。WIVR采用用戶接口控件(交互)，結合JSON格式的配置文件來將數(shù)據(jù)集轉換為2D和3D可視化。可視化配置的語法基于Vega-Lite[8]，允許用戶通過設置為每種可視化類型量身定制的參數(shù)、屬性和約束來創(chuàng)建不同的可視化?？梢暬渲梦募蓴?shù)據(jù)集、要使用的圖形標記類型和一組映射到單個數(shù)據(jù)點的視覺編碼通道組成。可視化配置文件示例如圖3所示。圖3是用于對三維條形圖進行可視化的JSON可視化配置代碼，該配置代碼被導入應用程序并傳遞給圖2中的WIVR組件，以生成用React編寫的WIVR應用程序。

圖3 可視化配置文件示例

2.3 WIVR應用程序接口

雖然WIVR已經提供了靈活的配置方式來滿足不同應用程序的需求，但是用戶可能希望框架可以提供定制來滿足用戶的高級需求。例如，用戶可能希望改變可視化的視覺風格，以將其融入現(xiàn)有應用程序的主題。WIVR提供了通過可視化配置更改視覺屬性。但是，為了添加自定義標記、編碼通道和交互用戶接口控件，用戶需要利用WIVR的API。開發(fā)人員使用API可以將輸入和UI控件映射到數(shù)據(jù)轉換，然后在可視化中反映出來。原始形狀、模型、動畫和任何基于物理的UI控件(如按鈕、滑塊等)都可以使用A-Frame創(chuàng)建，然后通過API和可視化配置集成到可視化中。利用WIVR的API，用戶可以輸出每個可視化的當前狀態(tài)，包括所有當前可見數(shù)據(jù)的信息。

2.4 交互機制

對于基于Web的沉浸式應用，提供適當交互機制是至關重要的。WIVR利用A-Frame 框架來實現(xiàn)交互機制。在非VR模式下(例如在手機上瀏覽Web)，用戶仍然能夠與每個用戶接口控件進行交互。開發(fā)人員可以使用WIVR的API來創(chuàng)建自定義用戶接口控件。

WIVR 支持選擇、過濾和實時顯示詳細信息等交互類型，這些交互類型可以通過可視化配置文件有選擇地啟用或禁用。WIVR 支持基于注視和控制器選擇的過濾任務和實時細節(jié)顯示。

2.5 自適應渲染

在保持足夠幀率的同時渲染大量數(shù)據(jù)點是構建VR最具挑戰(zhàn)性的方面之一。對于常見的 60Hz顯示器，Web瀏覽器的響應時間通常為16.6毫秒。對于使用頭戴顯示設備的VR場景，響應時間一般為11毫秒。桌面顯示器通常只需要以單聲道渲染場景，而VR設備需要立體圖像。如果超出響應時間，瀏覽器將無法渲染新幀，這會導致幀的丟失，降低VR的體驗。

我們的目標是找到所有潛在可見對象的細節(jié)級別和渲染算法的組合，以在目標時間內產生最佳的圖像。定義了一個對象元組(O,L,R)，其中O是對象的實例，L是渲染的細節(jié)級別，R是指渲染的算法。令C(O,L,R)為呈現(xiàn)對象元組所需的估計時間，B(O,L,R)為渲染對象元組對模型感知的估計貢獻。令S為每幀渲染的對象元組集。渲染問題的優(yōu)化模型如下所示：

maxΣSB(O,L,R)

s.t.C(O,L,R)≤Ttarget

(1)

將渲染過程分為兩個階段，分別是原語處理和像素處理。將原語處理階段所花費的時間建模為對象元組中多邊形和頂點數(shù)量的線性組合，其系數(shù)取決于所使用的渲染算法和機器。同樣，假設像素處理階段所花費的時間與對象覆蓋的像素數(shù)成正比。因此，渲染對象元組所需的時間模型是：

C(O,L,R)=max{C1×p(O,L)+C2×v(O,L),C3×x(O)}

(2)

其中，C1、C2和C3分別是與特定渲染算法和機器相關的常數(shù)系數(shù)，p(O,L)是指對象O在細節(jié)級別L的多邊形數(shù)量，v(O,L)是指對象O在細節(jié)級別L的頂點數(shù)量，x(O)是指對象O的像素數(shù)量。B(O,L,R)是對渲染對象的模型感知貢獻的估計，它可以預測由于渲染對象元組而傳達給用戶的信息量和準確性。由于準確地模擬人類的感知和理解是極其困難的，因此開發(fā)了一種基于直觀原理的簡單啟發(fā)式方法。假設渲染圖像與理想圖像的誤差會隨著用于渲染對象元組的樣本數(shù)量增多而減少，定義如下所示準確度：

(3)

其中，E是指基本誤差(通常取值為0.5)，S(L,R)是指光線追蹤的像素數(shù)量，m是指插值方法的指數(shù)參數(shù)。結合準確度，重新定義了B(O,L,R)，如下所示：

B(O,L,R)=Z(O)×A(O,L,R)×I(O)×F(O)×N(O)×H(O,L,R)

(4)

其中，Z(O)是指對象O的大小，I(O)是指對象O的重要性，F(xiàn)(O)是指對象O的位置，N(O)是指對象O的移動速度，H(O,L,R)是指對象O的渲染的細節(jié)級別減少量。如式(1)所示的優(yōu)化問題是一個NP-complete問題。對此，針對這個問題設計了一個貪婪近似算法，該算法選擇具有較大γ=B(O,L,R)/C(O,L,R)值的對象元組。這種方法的時間復雜度為O(nlogn)。圖4展示了WIVR渲染不同數(shù)量數(shù)據(jù)點的性能。所使用的Web瀏覽器是由Mozilla開發(fā)的火狐瀏覽器，操作系統(tǒng)是Window 10，圖形處理器是GTX 1080，處理器是AMD 1650；所使用的VR設備是Oculus rift cv1，分辨率為2160×1200，刷新率為90 Hz；顯示器分辨率為1920×1080，刷新率為60Hz；智能手機分辨率為1080×2280，刷新率為60Hz。結果顯示，VR設備的幀率在超過1000個數(shù)據(jù)點時下降的幅度較大。智能手機和顯示器雖然幀率也下降了，但是兩者的下降幅度均較小。當使用了自適應渲染技術后，三種設備的幀率下降幅度減少了。其中，由于顯示器和頭戴現(xiàn)實設備是連接了具有較強算力的主機，因此其下降的幀率均遠小于擁有較低算力的智能手機。

圖4 數(shù)據(jù)點數(shù)量與渲染幀率的關系

3 用例評估

WIVR可以使用配置文件創(chuàng)建簡單的笛卡爾可視化，創(chuàng)建具有多個標記形狀的三維條形圖(如圖5(a)所示)和三維散點圖(如圖5(b)所示)。這些圖通過將數(shù)據(jù)字段及其相應的數(shù)據(jù)類型映射到可視化配置中的坐標軸以及其它編碼通道來生成。配置文件中可以指定可視化對象的標題，指定所需要可視化數(shù)據(jù)的統(tǒng)一資源定位符(URL)。三維條形圖的標記屬性為“bar”，三維散點圖的標記屬性為“point”。三維條形圖的橫坐標和縱坐標的數(shù)據(jù)類型均為“nominal(類別)”類型，豎坐標的數(shù)據(jù)類型為“quantitative(定量)”類型。

(a)三維條形圖 (b)三維散點圖

如前所述，通過可視化配置文件，WIVR可以有選擇地啟用或禁用交互，創(chuàng)建基本的選擇和過濾控件。與此同時，開發(fā)人員可以通過WIVR的API將新的、定制的交互控件添加到WIVR。這兩種方法允許基于約束的交互和允許外部操作的交互。圖6展示了WIVR中的三種交互機制。如圖6所示，用戶通過三個軸過濾器過濾數(shù)據(jù)，這些過濾器是特定軸顯示的值的閾值，可以通過在x、y和z軸上上下移動以進行微調。該操作在可視化配置中通過將過濾器選項添加到特定編碼通道的軸來啟用。用戶可以通過圖例過濾數(shù)據(jù)，以選擇地特定類別中數(shù)據(jù)的可見性。該操作可以通過將過濾器選項添加到圖例在配置文件中啟用。通過將鼠標懸停在數(shù)據(jù)點上，用戶可以按需獲取詳細信息。通過指定標記的工具提示屬性啟用此交互。單擊數(shù)據(jù)點將凍結選擇并讓用戶將控制器靠近以進一步檢查輸出。在不支持控制器輸入的顯示器上，比如智能手機，用戶會看到一個注視光標。通過鼠標或觸摸交互在非沉浸式顯示器上支持此交互。

圖6 三種交互機制展示

4 結論

本研究提出的WIVR是一個基于Web技術用于構建沉浸式VR的框架。WIVR可以通過各種設備上的瀏覽器體驗，具有較高的易用性。WIVR通過簡單的配置文件指定可視化類型，簡化了可視化原型、數(shù)據(jù)綁定和交互配置。在后續(xù)的研究工作中，通過擴展WIVR，使其能兼容更多的可視化類型和數(shù)據(jù)模型。另外，將擴展構建器的功能，使其能為用戶提供在VR中構建可視化原型的功能。