單盛

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

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

1 可視化工作流程

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

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

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

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

2 WIVR框架

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

2.1 框架概述

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

圖2 示例組件圖

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

2.2 可視化配置

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

圖3 可視化配置文件示例

2.3 WIVR應(yīng)用程序接口

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

2.4 交互機(jī)制

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

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

2.5 自適應(yīng)渲染

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

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

maxΣSB(O,L,R)

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

(1)

將渲染過(guò)程分為兩個(gè)階段，分別是原語(yǔ)處理和像素處理。將原語(yǔ)處理階段所花費(fèi)的時(shí)間建模為對(duì)象元組中多邊形和頂點(diǎn)數(shù)量的線性組合，其系數(shù)取決于所使用的渲染算法和機(jī)器。同樣，假設(shè)像素處理階段所花費(fèi)的時(shí)間與對(duì)象覆蓋的像素?cái)?shù)成正比。因此，渲染對(duì)象元組所需的時(shí)間模型是：

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

(2)

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

(3)

其中，E是指基本誤差(通常取值為0.5)，S(L,R)是指光線追蹤的像素?cái)?shù)量，m是指插值方法的指數(shù)參數(shù)。結(jié)合準(zhǔn)確度，重新定義了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)是指對(duì)象O的大小，I(O)是指對(duì)象O的重要性，F(xiàn)(O)是指對(duì)象O的位置，N(O)是指對(duì)象O的移動(dòng)速度，H(O,L,R)是指對(duì)象O的渲染的細(xì)節(jié)級(jí)別減少量。如式(1)所示的優(yōu)化問(wèn)題是一個(gè)NP-complete問(wèn)題。對(duì)此，針對(duì)這個(gè)問(wèn)題設(shè)計(jì)了一個(gè)貪婪近似算法，該算法選擇具有較大γ=B(O,L,R)/C(O,L,R)值的對(duì)象元組。這種方法的時(shí)間復(fù)雜度為O(nlogn)。圖4展示了WIVR渲染不同數(shù)量數(shù)據(jù)點(diǎn)的性能。所使用的Web瀏覽器是由Mozilla開發(fā)的火狐瀏覽器，操作系統(tǒng)是Window 10，圖形處理器是GTX 1080，處理器是AMD 1650；所使用的VR設(shè)備是Oculus rift cv1，分辨率為2160×1200，刷新率為90 Hz；顯示器分辨率為1920×1080，刷新率為60Hz；智能手機(jī)分辨率為1080×2280，刷新率為60Hz。結(jié)果顯示，VR設(shè)備的幀率在超過(guò)1000個(gè)數(shù)據(jù)點(diǎn)時(shí)下降的幅度較大。智能手機(jī)和顯示器雖然幀率也下降了，但是兩者的下降幅度均較小。當(dāng)使用了自適應(yīng)渲染技術(shù)后，三種設(shè)備的幀率下降幅度減少了。其中，由于顯示器和頭戴現(xiàn)實(shí)設(shè)備是連接了具有較強(qiáng)算力的主機(jī)，因此其下降的幀率均遠(yuǎn)小于擁有較低算力的智能手機(jī)。

圖4 數(shù)據(jù)點(diǎn)數(shù)量與渲染幀率的關(guān)系

3 用例評(píng)估

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

(a)三維條形圖 (b)三維散點(diǎn)圖

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

圖6 三種交互機(jī)制展示

4 結(jié)論

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