WebVR在藝術品展示中的應用研究

陳銳浩，熊濤濤

（1.深圳職業技術學院教育技術與信息中心，深圳 518055；2.深圳職業技術學院藝術設計學院，深圳 518055）

1 在線藝術品展示方法介紹

在線藝術品拍賣平臺和在線博物館系統里面，藝術品的展示模塊是系統的核心，隨著前端技術的成熟，其展示模式也不斷在完善，用戶體驗越來越成熟，從早期的圖片展示慢慢轉向VR支持，具體呈現方式歷經三個階段，平面展示、3D展示、VR展示。

第一階段平面展示，主要是以平面圖片的形式進行展示，為了讓用戶對展品細節看得更清除，采用了小圖片和高分辨率圖片結合的方式，利用諸如jquery.zoom之類的組件實現放大鏡效果，當鼠標在小圖片上面停留的時候，對應的部位就會出現放大圖片的效果，如圖1所示，當鼠標停留在左側展品的時候，右邊就會出現以左側鼠標為中心的一個方型區域的放大圖，在左側圖片上面移動鼠標可以查看不同位置的細節，這種模式在很多藝術品展示網站一直有使用，像國內藝術品互聯網拍賣先驅嘉德在線就采用這種展示方案。

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

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

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

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

圖2 3D展示應用-南山匠人

2 WebVR開發實踐

2.1 基于WebVR的藝術品展示的關鍵技術

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

基于Web的VR互動主要包括頭顯和手柄兩個層面，頭顯的互動采用WebVR API，手柄的互動須引用Gamepad API，Gamepad API是一個 HTML5 接口，讓開發者可以通過js訪問游戲手柄。調用navigator.get?Gamepads（）方法可以獲取一個手柄的實例，它返回一個gamepads數組，一旦有手柄連接上，gamepads數組將產生有效的gamepad對象。本文案例還不支持手柄互動，在這里不再贅述。

2.2 3D 模型導入

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

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

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

參數onLoad：回調函數，模型加載完畢之后執行，以加載完畢的3D模型為參數，一般模型加載完畢之后需要設置紋理，所以這個函數主要實現紋理的配置。

參數onProgress：回調函數，加載過程中調用的函數。這個函數接收一個XMLHttpRequest實例，其中包含總加載字節，對于一些比較大的模型，如果需要增加加載進度的提示就需要增加該參數。

參數onError：回調函數，模型加載過程中如果出錯就會觸發該函數，該函數的參數為出錯信息，開發的時候調用該函數可以獲取出錯信息，便于調試。

除了參數url之外，其他三個參數都是可選項，一般加載模型之后，需要對模型做一系列的處理，所以onLoad參數一般不會省略，而且onLoad參數里面承擔主要的計算工作。本案例的代碼如下：

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

2.3 VR 實現

Three.js提供了WebVR實現的兩個核心文件：VR?Controls.js和VREffect.js，這兩個文件通過調用Web?VR API實現特定的目的。

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

VR控制器的使用語法如下：

VREffect.js：實現立體視覺的控件，人眼立體視覺的原理基本是依靠深度知覺加上兩眼視差來實現的，根據這個原理，VREffect.js把屏幕切割為左右眼所視的屏幕，實現雙屏渲染輸出，兩個屏幕所顯示的內容差異由瞳距的偏移offset和左右眼的視角fov決定。兩個屏幕分別對應左右眼，利用深度知覺+兩眼視差，讓大腦“重建”出立體場景。雙屏渲染輸出流程如下：

圖3 雙屏渲染流程

立體視覺控件調用代碼如下：

var effect=new THREE.VREffect（renderer）;//定義一個立體渲染對象，傳入參數renderer為一個WebGLRender（）類型的渲染器，返回對象effect為立體對象渲染器

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

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

最后把左右眼相機的所示內容分別渲染到左右屏幕，就形成了立體視覺。

2.4 完整流程及實現效果

基于WebVR的藝術品展示程序由兩部分組成，初始化部份init（）和動畫部分animate（），init（）運行一遍，animate（）方法里面調用 requestAnimationFrame（ani?mate）實現渲染循環，重復執行，整個程序的流程圖如圖4所示。

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

3 結語

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

圖4 WebVR程序流程

圖5 手機VR模式展示界面截圖1

圖6 手機VR模式展示界面截圖2

參考文獻：

[1]Tony Parisi著，郝稼力譯.WebGL入門指南[M].北京：人民郵電出版社，2017.

[2]WebVR API[EB/OL].https://developer.mozilla.org/zh-CN/docs/Web/API/WebVR_API，2018

[3]陳偉娜，陳銳浩.WebVR技術在短期商業會展中的應用研究[J].現代計算機，2017（21）.

[4]three.js docs[EB/OL].https://threejs.org/docs/，2018.