WebVR技術在短期商業會展中的應用研究

陳偉娜，陳銳浩

（1.深圳職業技術學院圖書館，深圳518055；2.深圳職業技術學院教育技術與信息中心，深圳518055)

WebVR技術在短期商業會展中的應用研究

陳偉娜1，陳銳浩2

（1.深圳職業技術學院圖書館，深圳518055；2.深圳職業技術學院教育技術與信息中心，深圳518055)

針對短期商業會展時間短、難于重現的問題，提出采用基于實景拍攝的全景圖開發全景漫游的方案，利用krpano XML編程，實現基于WebVR的虛擬現實，并利用微信公眾號和二維碼進行快速傳播，用戶通過手機訪問，采用普通的VR眼鏡就可以有身臨其境的體驗，這種方案真正讓有限的線下展覽變成永不落幕的展覽。

1 商業會展介紹

商業會展按照展出的時間段可分為短期、中期和長期展示。短期展示的時間往往都按天計算，一般都不超過5天。在這幾天時間內，參展商需要完成展區的展示裝配布置和準備展示內容，展期一到，還必須快速拆卸。由于參展期短，如何能夠在短時間內吸引參觀者并精確傳遞信息就是展會組織方和參展商最關系的問題。2010上海世博會最大的亮點之一就是開設網上世博會，為我們提供了未來虛擬展會的發展趨勢。2010年之后隨著VR技術的發展，開始出現了同步的線上虛擬展。展示體驗性以及交互方式具有一定的新穎性和獨創性，給參觀者留下深刻印象，幫助參觀者加深理解展示內容，提高消費欲望，讓展會永不落幕[1-3]。

近幾年，隨著手機設備的性能提升，加上HTML 5的完善，很多會展都同步發布在線的全景漫游，讓用戶可以通過手機獲取展會的全景信息，但是大部分在線展會都無法提供身臨其境的沉浸式感覺。2016年，隨著Facebook和HTC兩家企業相繼推出VR頭盔消費者版，加上大量類似于VRBox的簡單體驗設備也在用戶中有了普及，VR體驗已經接近消費者。隨著軟硬件的成熟，開發展會的VR體驗，成了商業會展的一個趨勢。

2 WebVR技術方案介紹

VR會展的主要要求是重現現場，給用戶創造一個身臨其境的體驗，即沉浸式的體驗，互動功能要求不高，主要包括場景漫游，展物瀏覽。頭戴式顯示器（HMD）是VR目前最常見的一種體驗方式。顯示器被分為左右兩個部分，分別顯示左右眼看到的圖像。大腦再將左右眼所看到的圖像（兩眼視差）做融合處理，從而產生3D效果，同時，HMD會根據頭部運動讓視角與之同步。用戶通過HMD體驗VR時就如同在現實中觀看一樣，這種體驗也被稱為沉浸式體驗。

目前VR體驗以應用程序的形式呈現的居多，在使用之前，必須先安裝，而且面向不同系統，要開發不同的版本，這種模式對于短期商業會展這種需要在短期時間向廣大的用戶傳播的應用顯然不合適。Web?VR則可以不安裝應用程序，只要有支持WebVR API的瀏覽器就可以，WebVR API提供了專門訪問VR硬件的接口，如手機的陀螺儀，主流的頭盔設備等。對于WebVR應用，用戶可以直接通過手機打開，并采用簡單的眼鏡盒子就可以體驗，也可以在PC中用支持Web VR的瀏覽器打開，用主流的頭盔，如Oculus和HTC vive頭盔進行體驗。WebVR技術將能夠求同存異地讓所有頭顯、內容都處在同一個生態圈之中。這種跨平臺的特性不僅僅能夠大大地方便用戶的使用體驗，更能反過來促進VR內容生產商們早日在技術標準、格式等方面達成一個統一的標準。

對于短期商業會展這種受眾面廣，以虛擬漫游為主的展會，采用WebVR方案更便于內容的傳播，而且同時具備沉浸式體驗，下面介紹具體的實現過程。

3 具體實施過程

以在深圳舉行的第27屆鐘表展的VR應用開發為例，介紹WebVR在短期商業會展中的具體實現。

3.1 實景采集及素材制作

目前實現線上虛擬展主要采用全景漫游的方式，方案主要有兩種。

第一種：基于3D模型的全景漫游，可以漫游到場景中的任何一個地方。

第二種：基于全景圖的全景漫游[4]，比較逼真，但是觀察點固定。

第一種方式開發工作量大，需要提前建模，由于展會時間短，很難在短期時間內把場館的布置場景數字化，而且采用這種方式也存在一定的失真情況，加上這種方式成本和技術要求都比較高，所以近幾年，商業會展很少采用這種模式。第二種方式采用實地采集全景的方法，借助專業拍攝設備可以快速把實景采集，再通過專業的合成軟件可以快速地制作出專業水準的漫游作品，所以近幾年，基于全景圖的三維全景漫游很普及。

VR漫游開發的第一步是素材收集和制作，素材包括UI元素和場景的全景圖。UI元素主要包括界面圖標，導航鍵頭，場景地圖；全景圖一般采用現場多角度拍攝，然后利用合成工具合成的方法得到。全景拍攝需要應用到專業的設備，如：專業單反相機、三腳架、全景云臺、漁眼鏡頭、無線遙控器等。其中全景云臺是比較關鍵的設備，利用它來保證鏡頭的光學中心，即鏡頭節點在轉動拍攝場景時，始終保持在同一個位置。鏡頭焦距越長，畫質越好，整圖放大倍率越大，同時拍攝張數也就越多，后期合成難度也就越大，為了降低合成難度，提高拼接效果，目前一般采用魚眼鏡頭，因為它焦距短，每張單張照片拍攝到較大的視角范圍，從而以較少的照片拼接成一個360度全景圖。如本項目就采用佳能5DII加15mm鏡頭，在拍攝效率和畫質的滿意度上達到一個很好的“質效比”。

現場拍攝的時候需要解決的兩個問題，一是光線問題，二是焦距問題。由于是多張照片合成，如果不同方向拍攝照片采用光圈不同，則過度會不自然，同樣如果不同照片焦距不同，也會導致拼接處不協調，所以，要統一光圈，采用平均值，焦距要采用定焦，保證向各個方向的焦距一致。

本文案例實際拍攝的時候，由于取景點太多，為了提高效率，對于一些要求不高的點，如公共地區，也可以采用全景相機一次性采集的方法，如圖1所示，藍色圓點為公共區域，采用理光Theta S相機采集，各展位和重要區域為保證成像質量，則采用多圖合成方式。展位拍攝采用佳能5DII相機，適馬定焦15mm鏡頭，根據相機和鏡頭參數，現場實地采集的時候拍攝了水平8張，天空1張，地面2張，后期用代碼，采用LO?GO圖片把三腳架遮住，減少補地的工作量。

圖1 展會地圖一角

3.2 全景圖合成

目前主流的全景圖是球形全景，球形全景覆蓋水平360度，垂直180度，把拍攝的若干張圖片合成一張全景圖，這個過程就是全景合成，主流的工具有：PT?Gui，Kolor Autopano Giga，這兩軟件各有優缺點。

由于全景圖覆蓋水平360度，垂直180度，所以我們拍攝的時候采用的三腳架，全景云臺都會在合成的全景圖中出現，在有方向光的的場景，如早晚的陽光，還有長長的三腳架陰影也需要處理。下面采用PT?GUI，以項目中雷諾企業的展位為例，介紹全景合成的流程，具體軟件界面如圖2所示：

圖2 PTGUI拼圖界面

具體的操作主要有如下三大步驟：

（1）導入拍攝的圖片，每個角度選一張，包括天空和地面。

（2）拼接圖像，PTGUI一般能識別相機鏡頭的參數，有些時候無法識別，則需要手工設置鏡頭參數，拼接完之后，需要對合成結果進行處理，如控制點優化。

（3）后期處理，合成的全景圖一般都無法把三腳架完全去掉，需要進行補地處理。補地處理有多種方式，最常見的是把全景圖轉成立方體模型，即包括前后，左右，上下的六張圖片，然后用Photoshop或Fireworks把下面的圖片，即底部圖片進行處理，最后再把六張圖片重新合成全景圖、本項目由于場景太多，補地工作量太大，所以采用在漫游作品開發的使用，通過代碼控制LOGO，覆蓋三腳架的方式。前期拍攝的時候，由于地形的原因，有時候后期合成會出現問題，還必須手動添加控制點，讓相鄰的兩張圖建立聯系，一般每張圖至少有3個以上的控制點，控制點不要太集中，要分開分布。

3.3 生成漫游

把生成的各個全景圖建立鏈接，讓用戶可以在各個場景之間切換和瀏覽，這就是全景漫游。全景漫游的開發軟件眾多，隨著移動互聯網的普及，由于在移動端良好的兼容性和對WebVR的很好支持，KrPano在競爭中勝出，成了目前行業的主流工具。KrPano只提供一個內核加一系列的批處理程序，用戶可以利用提供的這些程序快速生成全景漫游，對于有個性化需求的應用，可以利用KrPano Xml語言對生成應用進行個性化定制和開發。

目前基于KrPano的全景漫游項目開發主要有三種方式，第一種是基于KrPano二次開發的本地化界面軟件，如Kolor Panotour Pro、krpanoGUI等，這種方式開發難度比較小，部署也靈活，但是軟件沒有提供的功能就很難實現；第二種是采用基于KrPano內核的在線全景云平臺進行制作和發布，如720云、得圖云等，這種方式制作簡單，而且直接發布，但是由于采用在線云平臺，用戶是無法完全控制自己的作品的，而且在傳輸的時候帶寬問題也會成為一個瓶頸；第三種是直接利用KrPano提供的批處理工具直接生成，并采用KrPano XML進行個性化開發，這種方式靈活性很強，利用默認提供的模板也能做出專業的作品，但是如果需要進行個性化開發就需要掌握KrPano XML語言。本文中項目采用第三種方式進行開發，具體的項目結構如下：

圖3 項目結構

KrPano之所以能夠在行業得到廣泛的應用，除了功能強大，提供HTML 5和Flash兩種解析引擎，更重要的是為開發者提供了一個簡單輕便的接口用于開發第三方插件。KrPano的插件可以是純代碼插件用于擴展功能或控制KrPano，也可以是在屏幕上展示或處理某些事情的“圖形化插件”。由于KrPano支持HTML 5和Flash，所以插件也分為兩種格式，以js為后綴的HTML 5插件和以swf為后綴的Flash插件，象常見的功能，如：視頻播放、聲音播放、地圖、文本域、復選框、WebVR等都是以插件的的形式出現，新版本生成作品默認自帶這些插件。項目的個性化開發主要是配置文件的編寫，配置文件都是XML文件，采用KrPano XML語言編寫，每個KrPano XML文件由若干XML節點元素組成，根節點元素為KrPano。KrPano XML遵循XML語法規則，但在XML的基礎之上，定義了一些特定元素和語法，包括由KrPano元素組成的靜態代碼和動態代碼。靜態代碼主要是描述性語言，由scene、plu?gin、layer、hotspot等24種節點構成；動態代碼主要由action節點定義，action類似于其他動態語言的函數定義，在KrPano xml里面，是把函數過程定義在里面。一個action可以被event節點或者其他action節點調用，也可使用接口被外部調用。

KrPano插件的基礎結構里含有registerplugin、un?loadplugin、onresize三個公共函數和若干自定義函數，它們將在KrPano中被調用[5]。具體作用如下：

registerplugin函數：相當于構造函數，當插件載入時，從KrPano中調用插件里的該函數。該函數提供了KrPano Interface Object以及KrPano Plugin Object。可以很容易地地針對KrPano對象或插件對象向KrPano添加屬性或自定義函數。

unloadplugin函數：析構函數，當插件從KrPano中移除時，該函數被調用。函數執行后插件添加的所有元素和事件將被移除。

onresize函數：允許插件根據屏幕大小改變插件的尺寸。

本項目對地圖導航有個性化要求，所以利用KrPa?no xml代碼進行個性化開發，導航方式除了傳統的底部縮圖，還增加了地圖導航，地圖支持縮放、拖拽、雷達等功能，最后實現的效果如下。

3.4 WebVR實現

WebVR提供了專門訪問VR硬件的接口，讓開發者能構建舒適的VR體驗。WebVR API目前可用于安裝了Firefox nightly的Oculus Rift、Chrome的實驗性版本和Samsung Gear VR的瀏覽器。移動端瀏覽器體驗WebVR可以使用WebVR Polyfill。

KrPano在1.19版本之后，增加了WebVR的支持，MAKE VTOUR生成器內置對VR的支持，配合VR設備使用，可以實現VR效果。訪問如Oculus Rift和Google Cardboard等VR設備功能的API封裝在webvr. js文件里面，具體的參數由webvr.xml文件進行配置，可以設置VR頭顯或VR頭戴設備、屏幕尺寸、瞳距、陀螺儀校準等信息。

圖4 全景漫游效果

WebVR是一個試驗性的JavaScript API，通過這些API可以在瀏覽器中獲取VR設備相關信息，包括頭部跟蹤信息，頭戴設備進行鏡頭畸變信息等。目前進行桌面體驗需要使用特定的內建WebVR支持的瀏覽器版本，如采用Windows版本的Chromium WebVR瀏覽器。通過普通盒子加手機體驗的方式則門檻比較低，只要支持HTML 5的手機基本都支持。使用普通的智能手機體驗VR的話，頭部跟蹤將由手機自帶的加速度傳感器和陀螺儀傳感器完成，由手機上支持WebGL的瀏覽器完成渲染，用于體驗VR的手機需要滿足下面的條件：

（1）手機自帶加速度傳感器以及陀螺儀傳感器。

（2）devicemotion event設備運動事件支持。

（3）WebGL支持，KrPano的WebVR方案是基于WebGL的。

（4）HTML5全屏模式的支持，如果無法全屏，體驗效果會打折扣。

（5）優質的高分辨率大屏幕及強大的CPU和GPU處理能力。屏幕分辨率越高越好，尺寸達到6英寸為最佳。

KrPano的WebVR是基于HTML 5的WebGL技術，必須支持WebGL的瀏覽器才能體驗WebVR。We?bGL是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染。

KrPano封裝了WebVR插件，進行WebVR開發只需要根據KrPano xml語法，對該插件進行配置就可以，具體的配置樣例如下圖所示：

圖5 WebVR插件的配置

上圖中，用戶可以通過設置WebVR屬性參數獲取最優的體驗，每個參數代表不同的意義，如mobi?levr_ipd屬性，默認值為63.5，表示以毫米（mm）為單位設置的瞳孔距離（IPD），用于在手機VR模式中讓使用者獲得正確的立體3D呈現；mobilevr_screensize屬性，用于設置自定義對角線的設備屏幕尺寸，默認值為au?to，當無法檢測到屏幕尺寸時，插件會假定屏幕尺寸在五英寸，并發送onunknowndevice事件，讓用戶自己設計屏幕尺寸。所有參數的詳細說明可以參考官方網站提供的文檔說明。

項目的VR體驗最簡單的方式是采用手機加盒子的組合，圖6是雷諾企業展位的VR效果，場景切換通過畫面中間的十字點，當轉動手機盒子，讓十字點和場景中的熱點重疊，則自動進入熱點鏈接的場景。

圖6 手機體驗雷諾展位VR效果

3.5 發布

應用開發完成之后，由于是以HTML應用形式呈現，需要發布到Internet，才能方便用戶使用。隨著移動互聯網的普及，微信平臺成了很多應用移動端的入口，本項目面向的用戶主要是采用手機等移動設備，所以發布的時候除了采用傳統的方式公布地址，還通過微信公眾號，二維碼掃描等方式推廣，用戶通過移動設備訪問本應用之后，加上普通的VR眼鏡就可以體驗VR效果。

圖7 項目入口

4 結語

本文針對WebVR在短期商業會展中的應用開展研究，以27屆鐘表展為例子，介紹整個項目的實現過程。利用KrPano xml進行編程，實現基于瀏覽器的VR效果并通過微信和二維碼進行傳輸，項目投入少，效果好，對短期會展開發VR應用有一定的參考意義。

參考文獻：

[1]王悅.網上世博催生商業新模式_虛擬會展[J]．企業管理，2010(5).

[2]唐震宇,楊勤.基于全景技術的博物館網絡虛擬展示實現研究[J].博物館研究，2015(1).

[3]楊建杰,胡進.360°全景漫游在短期商業會展中的應用研究[J].藝術科技，2016(4).

[4]馮建平,吳麗華.基于全景圖像的三維全景漫游系統的構建＊[J].計算機與數字工程，2013(1).

[5]krpano.krpano Plugin Interface[EB/OL].https://krpano.com/docu/plugininterface/#js，2017.

Research on the Application of WebVR Technology in Short Term Business Exhibition

CHEN Wei-na1，CHEN Rui-hao2

（1．The Library Department of Shenzhen Polytechnic,Shenzhen 518055；2．The Information Center of Shenzhen Polytechnic,Shenzhen 518055）

For short-term commercial exhibition time is short,difficult to reproduce the problem,puts forward the development of panorama photo?graphing panoramic roaming scheme based on krpano,uses XML programming,realizes the virtual reality based on WebVR,and the rapid spread of the use of WeChat public number and two-dimensional code,the user uses the mobile phone to access,uses ordinary VR glasses can be personally on the scene experience,this program really let the limited line into everlasting exhibition.

深圳職業技術學院校級科研課題（No.22K370149991）

1007-1423（2017）21-0059-06

10.3969/j.issn.1007-1423.2017.21.012

陳偉娜（1978-），女，廣東潮州人，設計師，本科，研究方向為展示設計；陳銳浩（1977-），男，廣東潮州人，高級實驗師，碩士，研究方向為教育技術、虛擬仿真；收款日期：2017-04-25

2017-05-31

WebVR；商業會展；全景漫游；WebGL

WebVR;Business Exhibition;Panorama Roaming;WebGL