WebVR在藝術(shù)品展示中的應(yīng)用研究

2018-04-24 07:58陳銳浩熊濤濤

現(xiàn)代計(jì)算機(jī) 2018年8期

陳銳浩，熊濤濤

（1.深圳職業(yè)技術(shù)學(xué)院教育技術(shù)與信息中心，深圳 518055；2.深圳職業(yè)技術(shù)學(xué)院藝術(shù)設(shè)計(jì)學(xué)院，深圳 518055）

1 在線藝術(shù)品展示方法介紹

在線藝術(shù)品拍賣平臺(tái)和在線博物館系統(tǒng)里面，藝術(shù)品的展示模塊是系統(tǒng)的核心，隨著前端技術(shù)的成熟，其展示模式也不斷在完善，用戶體驗(yàn)越來(lái)越成熟，從早期的圖片展示慢慢轉(zhuǎn)向VR支持，具體呈現(xiàn)方式歷經(jīng)三個(gè)階段，平面展示、3D展示、VR展示。

第一階段平面展示，主要是以平面圖片的形式進(jìn)行展示，為了讓用戶對(duì)展品細(xì)節(jié)看得更清除，采用了小圖片和高分辨率圖片結(jié)合的方式，利用諸如jquery.zoom之類的組件實(shí)現(xiàn)放大鏡效果，當(dāng)鼠標(biāo)在小圖片上面停留的時(shí)候，對(duì)應(yīng)的部位就會(huì)出現(xiàn)放大圖片的效果，如圖1所示，當(dāng)鼠標(biāo)停留在左側(cè)展品的時(shí)候，右邊就會(huì)出現(xiàn)以左側(cè)鼠標(biāo)為中心的一個(gè)方型區(qū)域的放大圖，在左側(cè)圖片上面移動(dòng)鼠標(biāo)可以查看不同位置的細(xì)節(jié)，這種模式在很多藝術(shù)品展示網(wǎng)站一直有使用，像國(guó)內(nèi)藝術(shù)品互聯(lián)網(wǎng)拍賣先驅(qū)嘉德在線就采用這種展示方案。

第二階段3D展示，從平面圖片開(kāi)始向3D展示發(fā)展，實(shí)現(xiàn)方式主要有兩種，第一種采用環(huán)物攝影方式實(shí)現(xiàn)，就是運(yùn)用攝影技術(shù)把一件產(chǎn)品從不同角度拍攝成多個(gè)畫(huà)面，再將多個(gè)畫(huà)面用三維技術(shù)制作成一個(gè)完整的動(dòng)畫(huà)并通過(guò)相應(yīng)的程序進(jìn)行演示，客戶可以隨意拖動(dòng)鼠標(biāo)，就能從各個(gè)角度觀看產(chǎn)品的每一個(gè)部位和結(jié)構(gòu)，由于采用數(shù)碼圖片，放大都會(huì)失真，而且受限拍攝條件，一般只是水平拍攝，導(dǎo)致只能呈現(xiàn)水平方向的360度，垂直方向無(wú)法觀看。第二種模式采用3D模型結(jié)合材質(zhì)貼圖進(jìn)行呈現(xiàn)，利用WebGL實(shí)現(xiàn)基于瀏覽器的在線渲染，WebGL定義了一套基于OpenGL ES 2.0的3D圖形API，這些API通過(guò)HTML5的Canvas標(biāo)簽直接將3D圖形引入萬(wàn)維網(wǎng)。通過(guò)WebGL，前端開(kāi)發(fā)人員可以直接借助GPU在瀏覽器里更流暢地展示3D場(chǎng)景和模型，實(shí)現(xiàn)復(fù)雜交互[1]。WebGL技術(shù)標(biāo)準(zhǔn)免去了開(kāi)發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，簡(jiǎn)化開(kāi)發(fā)流程，給用戶帶來(lái)炫酷的3D效果體驗(yàn)。基于WebGL開(kāi)發(fā)的在線展品展示系統(tǒng)比傳統(tǒng)的圖片展示表達(dá)信息更豐富，解決了二維圖片角度的限制，用戶可以對(duì)展品進(jìn)行360度旋轉(zhuǎn)和隨意縮放，如圖2所示，這是筆者開(kāi)發(fā)的深職院南山匠人團(tuán)隊(duì)產(chǎn)品在線展示應(yīng)用，圖中展品為匠人團(tuán)隊(duì)開(kāi)發(fā)的羊壺，用戶可以在右側(cè)轉(zhuǎn)盤(pán)選擇不同展品觀看，每個(gè)展品可以隨意縮放，360度觀察，沒(méi)有死角。

第三階段VR展示，在第二階段的基礎(chǔ)之上，引入WebVR技術(shù)，實(shí)現(xiàn)基于瀏覽器的VR應(yīng)用。WebVR提供了專門(mén)訪問(wèn)VR設(shè)備的接口，同時(shí)能夠接收這些設(shè)備的位置和動(dòng)作信息，開(kāi)發(fā)者可以直接采用JavaScript構(gòu)建基于瀏覽器的VR應(yīng)用，體驗(yàn)者能夠在支持Web?VR API[2]的瀏覽器里運(yùn)行VR內(nèi)容。在手機(jī)上運(yùn)行WebVR應(yīng)用，利用手機(jī)的計(jì)算性能和追蹤功能，用戶只需要再加一個(gè)簡(jiǎn)單的VR盒子就可以進(jìn)行體驗(yàn)，大大了降低了VR體驗(yàn)的門(mén)檻。WebVR也支持主流的VR頭盔，如Oculus和HTC Vive，只要在支持VR的PC上運(yùn)行火狐的Firefox Nightly和設(shè)置VR enabled的谷歌Chrome瀏覽器就可以[3]。VR體驗(yàn)縮短了用戶和具體藝術(shù)品的距離，讓用戶足不出戶，也能有身臨其境的逼真體驗(yàn)。

現(xiàn)在支持WebGL的瀏覽器越來(lái)越多，特別是Three.js框架[4]的不斷完善，在線3D呈現(xiàn)已經(jīng)開(kāi)始流行，開(kāi)發(fā)難度也逐步降低，但是采用WebVR方式來(lái)展示藝術(shù)品，目前還是處于比較初級(jí)的階段，相關(guān)應(yīng)用也是鳳毛麟角，下面筆者通過(guò)自己的實(shí)踐，介紹具體的實(shí)現(xiàn)方式。

圖1 嘉德在線拍賣品展示方案

圖2 3D展示應(yīng)用-南山匠人

2 WebVR開(kāi)發(fā)實(shí)踐

2.1 基于WebVR的藝術(shù)品展示的關(guān)鍵技術(shù)

基于WebVR的藝術(shù)品展示的關(guān)鍵技術(shù)主要包括兩部分，基于瀏覽器的3D渲染和VR設(shè)備的支持。3D渲染采用Three.js引擎，它封裝了WebGL函數(shù)，簡(jiǎn)化了創(chuàng)建場(chǎng)景的代碼成本，增加了各種燈光的支持，內(nèi)置多種著色器模板，降低了WebGL開(kāi)發(fā)難度，是目前最主流的WebGL開(kāi)發(fā)框架。利用Three.js框架可以輕松的創(chuàng)建3D場(chǎng)景，導(dǎo)入各種格式的3D模型文件，如常見(jiàn)的 obj、fbx、stl、md2、collada 等。由于不同瀏覽器對(duì)WebVR API支持程度不同，所以需要引入webvr-poly?fill.js來(lái)支持WebVR網(wǎng)頁(yè)，webvr-polyfill.js文件采用ES6標(biāo)準(zhǔn)編寫(xiě)，它提供了大量VR相關(guān)的API，可以輕松獲取頭戴設(shè)備（HMD）的信息。例如navigator.getVR?Displays（）方法可以獲取VR頭顯設(shè)備信息，識(shí)別VR設(shè)備之后，調(diào)用設(shè)備對(duì)象的getPose（）方法就可以返回VR設(shè)備在某一時(shí)刻的信息，包括時(shí)間戳、位置（x,y,z）、線速度、線加速度、角速度、角加速度、方向信息等。

基于Web的VR互動(dòng)主要包括頭顯和手柄兩個(gè)層面，頭顯的互動(dòng)采用WebVR API，手柄的互動(dòng)須引用Gamepad API，Gamepad API是一個(gè) HTML5 接口，讓開(kāi)發(fā)者可以通過(guò)js訪問(wèn)游戲手柄。調(diào)用navigator.get?Gamepads（）方法可以獲取一個(gè)手柄的實(shí)例，它返回一個(gè)gamepads數(shù)組，一旦有手柄連接上，gamepads數(shù)組將產(chǎn)生有效的gamepad對(duì)象。本文案例還不支持手柄互動(dòng)，在這里不再贅述。

2.2 3D 模型導(dǎo)入

目前基于網(wǎng)頁(yè)的3D應(yīng)用一般都是采用Three.js框架進(jìn)行開(kāi)發(fā)。Three.js支持多種格式模型的導(dǎo)入，每種模型都有對(duì)應(yīng)的加載器，以插件形式獨(dú)立存在，模型加載器插件命名規(guī)則為：后綴名+Loader.js，在具體開(kāi)發(fā)的時(shí)候，需要加載某種格式的模型，就引入該模型的加載器文件，如要加載obj格式的模型，需要引入obj加載器，具體名稱為：OBJLoader.js。obj是一種簡(jiǎn)單的三位文件格式，使用非常廣泛，定義了對(duì)象的集合體，并沒(méi)有包含材質(zhì)信息，在瀏覽器渲染的時(shí)候，一般和MTL材質(zhì)文件一起使用，加載MTL文件必須引入MTL?Loader.js加載器。如果在3DSMax里面輸出obj模式的時(shí)候，導(dǎo)出了材質(zhì)貼圖，也可以直接調(diào)用THREE.TextureLoader（）對(duì)象的 load（）方法加載圖片。本文案例模型采用obj格式，下面詳細(xì)介紹OBJLoader的load方法。

OBJLoader的load方法包含4個(gè)參數(shù)，具體為load（url,onLoad,onProgress,onError），具體含義如下：

參數(shù)url:表示加載的*.obj模型路徑。

參數(shù)onLoad：回調(diào)函數(shù)，模型加載完畢之后執(zhí)行，以加載完畢的3D模型為參數(shù)，一般模型加載完畢之后需要設(shè)置紋理，所以這個(gè)函數(shù)主要實(shí)現(xiàn)紋理的配置。

參數(shù)onProgress：回調(diào)函數(shù)，加載過(guò)程中調(diào)用的函數(shù)。這個(gè)函數(shù)接收一個(gè)XMLHttpRequest實(shí)例，其中包含總加載字節(jié)，對(duì)于一些比較大的模型，如果需要增加加載進(jìn)度的提示就需要增加該參數(shù)。

參數(shù)onError：回調(diào)函數(shù)，模型加載過(guò)程中如果出錯(cuò)就會(huì)觸發(fā)該函數(shù)，該函數(shù)的參數(shù)為出錯(cuò)信息，開(kāi)發(fā)的時(shí)候調(diào)用該函數(shù)可以獲取出錯(cuò)信息，便于調(diào)試。

除了參數(shù)url之外，其他三個(gè)參數(shù)都是可選項(xiàng)，一般加載模型之后，需要對(duì)模型做一系列的處理，所以onLoad參數(shù)一般不會(huì)省略，而且onLoad參數(shù)里面承擔(dān)主要的計(jì)算工作。本案例的代碼如下：

上述加載方法省略了onProgress和onError兩個(gè)回調(diào)函數(shù)，只實(shí)現(xiàn)onLoad函數(shù)，當(dāng)模型加載完畢之后，接收加載完畢的模型數(shù)據(jù)對(duì)象objData，調(diào)用該對(duì)象的traverse（function）方法，該方法可以遍歷調(diào)用者objData的所有后代，被調(diào)用者和每一個(gè)后代都要執(zhí)行作為參數(shù)傳入的function函數(shù)，函數(shù)的參數(shù)為調(diào)用者本身。上例中遍歷objData里面的每一個(gè)子對(duì)象，如果判斷是Three.Mesh對(duì)象就對(duì)該子對(duì)象執(zhí)行材質(zhì)設(shè)置。所有子對(duì)象設(shè)置好材質(zhì)之后，才添加到場(chǎng)景中。

2.3 VR 實(shí)現(xiàn)

Three.js提供了WebVR實(shí)現(xiàn)的兩個(gè)核心文件：VR?Controls.js和VREffect.js，這兩個(gè)文件通過(guò)調(diào)用Web?VR API實(shí)現(xiàn)特定的目的。

VRControls.js：在3D應(yīng)用中，我們能看到的內(nèi)容是由攝像機(jī)（camera）決定的，Three.js提供了一些攝像機(jī)控件，使用這些控件可以控制場(chǎng)景中的攝像機(jī)，通過(guò)調(diào)整攝像機(jī)的位置讓輸出的場(chǎng)景內(nèi)容產(chǎn)生變化。VRCon?trols.js是Three.js提供的VR控制器，這個(gè)控件能夠獲取HMD的狀態(tài)信息并應(yīng)用到camera上，頭戴設(shè)備的信息具體包括頭顯自身（HMDVRDevice）和一個(gè)跟蹤頭部位置的位置捕捉傳感器（PositionSensorVRDevice）。例如在手機(jī)上顯示的時(shí)候，由于手機(jī)有陀螺儀，陀螺儀信息能夠通過(guò)PositionSensorVRDevice接口訪問(wèn)，所以手機(jī)的旋轉(zhuǎn)傾斜等就會(huì)直接作用到camera上，我們旋轉(zhuǎn)手機(jī)，就會(huì)看到不同角度的內(nèi)容。

VR控制器的使用語(yǔ)法如下：

VREffect.js：實(shí)現(xiàn)立體視覺(jué)的控件，人眼立體視覺(jué)的原理基本是依靠深度知覺(jué)加上兩眼視差來(lái)實(shí)現(xiàn)的，根據(jù)這個(gè)原理，VREffect.js把屏幕切割為左右眼所視的屏幕，實(shí)現(xiàn)雙屏渲染輸出，兩個(gè)屏幕所顯示的內(nèi)容差異由瞳距的偏移offset和左右眼的視角fov決定。兩個(gè)屏幕分別對(duì)應(yīng)左右眼，利用深度知覺(jué)+兩眼視差，讓大腦“重建”出立體場(chǎng)景。雙屏渲染輸出流程如下：

圖3 雙屏渲染流程

立體視覺(jué)控件調(diào)用代碼如下：

var effect=new THREE.VREffect（renderer）;//定義一個(gè)立體渲染對(duì)象，傳入?yún)?shù)renderer為一個(gè)WebGLRender（）類型的渲染器，返回對(duì)象effect為立體對(duì)象渲染器

effect.setSize（window.innerWidth,window.innerHeight）;

//初始化，傳遞參數(shù)為屏幕參數(shù)的寬度和高度，該方法里面調(diào)用getEyeParameters（），返回左右眼所視屏幕信息

最后把左右眼相機(jī)的所示內(nèi)容分別渲染到左右屏幕，就形成了立體視覺(jué)。

2.4 完整流程及實(shí)現(xiàn)效果

基于WebVR的藝術(shù)品展示程序由兩部分組成，初始化部份init（）和動(dòng)畫(huà)部分animate（），init（）運(yùn)行一遍，animate（）方法里面調(diào)用 requestAnimationFrame（ani?mate）實(shí)現(xiàn)渲染循環(huán)，重復(fù)執(zhí)行，整個(gè)程序的流程圖如圖4所示。

展示的時(shí)候，天空盒背景可以更換，讓用戶可以在不同環(huán)境下面觀察具體的藝術(shù)品，充分發(fā)揮VR沉浸式的體驗(yàn)效果。圖5和圖6是本案例實(shí)現(xiàn)效果，運(yùn)行于Android手機(jī)上面的Chrome瀏覽器，加上普通的VR盒子就可以進(jìn)行沉浸式VR體驗(yàn)。

3 結(jié)語(yǔ)

WebVR技術(shù)應(yīng)用在在線藝術(shù)品展示或在線博物館方面，目前還是處于起步階段，除了技術(shù)瓶頸之外，高精度的模型制作也需要花費(fèi)很大的工作量，隨著3D掃描儀掃描質(zhì)量的提升，建模工作量將會(huì)大大較少，難度也降低。當(dāng)我們?cè)诓┪镳^觀看某個(gè)展品的時(shí)候，我們只能隔著櫥窗，無(wú)法細(xì)致觀察，利用本文介紹的技術(shù)和方法，我們觀察的時(shí)候，只要拿出手機(jī)，掃描一下展品對(duì)應(yīng)的二維碼，馬上我們的手機(jī)屏幕就出現(xiàn)了該展品，我們可以在手機(jī)上隨意縮放該展品，每個(gè)角度都可以觀察，而且可以切換到VR模式，進(jìn)行沉浸式的體驗(yàn)。