張柏林，劉華清，尹 猛，韓佳坤

?

基于A-Frame的博物館漫游系統(tǒng)設(shè)計

張柏林，劉華清，尹 猛，韓佳坤

（山東農(nóng)業(yè)大學(xué)信息科學(xué)與工程學(xué)院大數(shù)據(jù)研究中心，山東 泰安 271018）

虛擬現(xiàn)實技術(shù)應(yīng)用在博物館藏品展示中，使用戶能夠通過佩戴虛擬現(xiàn)實設(shè)備，實現(xiàn)在虛擬場景中參觀博物館內(nèi)部場景，與展品“零距離”接觸?；贏-Frame框架，結(jié)合3DMax建模工具開發(fā)虛擬漫游系統(tǒng)，從而能夠高度還原泰安市博物館中的部分展品。用戶可在任何地點通過瀏覽器對博物館進(jìn)行虛擬漫游，身臨其境獲取館內(nèi)藏品信息。

A-Frame；WebVR；3DMax；博物館漫游

0 引言

隨著2012年谷歌發(fā)布Google Glass，把虛擬現(xiàn)實技術(shù)、增強(qiáng)現(xiàn)實、頭戴式顯示器帶到了大眾的視野中，這一概念完全顛覆了傳統(tǒng)的圖像顯示設(shè)備，在今后的幾年里虛擬現(xiàn)實得到了許多著名公司，如索尼、三星、LG等許多公司的廣泛關(guān)注。在虛擬現(xiàn)實技術(shù)快速發(fā)展的過程中，也產(chǎn)生了許多問題，而WebVR的出現(xiàn)讓大眾在瀏覽器上能輕松體驗VR并進(jìn)行分享，并且無需安裝插件[1-3]，進(jìn)而解決了內(nèi)容不豐富、設(shè)計成本高、開發(fā)困難等限制VR技術(shù)大眾化的問題[4]。A-Frame是一個通過HTML創(chuàng)建虛擬現(xiàn)實體驗的開源WebVR框架，可以用于開發(fā)虛擬現(xiàn)實應(yīng)用，方便快捷的創(chuàng)建虛擬場景中的模型對象，并進(jìn)行編輯動畫和虛擬交互等[5]。目前VR技術(shù)仍處于快速發(fā)展階段，在未來的智慧時代將會呈現(xiàn)出更大的價值。

1 相關(guān)技術(shù)簡介

1.1 3DMax

3DMax是Autodesk公司的一種優(yōu)秀的三維動畫造型軟件，內(nèi)含豐富全面的建模工具和插件，并提供了多種材質(zhì)貼圖，可以制作逼真、美觀、造型豐富的模型，廣泛應(yīng)用與廣告設(shè)計、建筑建模、游戲模型開發(fā)等領(lǐng)域[6-7]，但其與用戶的交互不足。

1.2 A-Frame

A-Frame通過HTML建立虛擬場景的Web框架，其核心是一個強(qiáng)大的實體組件框架。Three.js是WebGL的第三方類庫，封裝了底層圖形接口，用于實現(xiàn)WebVR[8]。A-Frame支持Three.js，并提供了與其相關(guān)的聲明、擴(kuò)展與組合結(jié)構(gòu)。A-Frame支持跨平臺操作，用戶可通過PC機(jī)、手機(jī)等不同設(shè)備體驗VR應(yīng)用程序。A-Frame框架便于開發(fā)者創(chuàng)建虛擬現(xiàn)實場景，并能夠創(chuàng)建并編輯場景中的模型、調(diào)整光源與攝像機(jī)、編輯動畫場景等[9]。

2 開發(fā)步驟

2.1 3D模型的構(gòu)建

使用3D Max制作效果圖時遵循一定的工作流程，按照各個階段工作內(nèi)容不同大致分為四個階段：根據(jù)導(dǎo)入的CAD創(chuàng)建模型或者使用圖形命令做出基本幾何模型；給模型賦予材質(zhì)、貼圖；創(chuàng)建相機(jī)與燈光；渲染輸出。

2.1.1 做出基本模型

建模是效果圖制作的基礎(chǔ)，CAD能夠幫助我們快速、準(zhǔn)確的創(chuàng)建出模型。首先將CAD導(dǎo)入3D max，X/Y/Z三軸歸零后添加擠出修改器，就能將CAD圖像轉(zhuǎn)化成立體模型。圖1展示了博物館的三維立體效果。

圖1 博物館立體效果圖

2.1.2 賦予材質(zhì)和貼圖

賦予材質(zhì)是指為創(chuàng)建的各種模型賦予相應(yīng)的材質(zhì)，使其表面效果更加貼近現(xiàn)實。貼圖能夠改善材質(zhì)的外觀和真實感。為模型添加了材質(zhì)和貼圖后的效果如圖2。

2.1.3 創(chuàng)建相機(jī)和燈光

創(chuàng)建相機(jī)的目的是表現(xiàn)出效果圖的層次感和立體透視感，創(chuàng)建燈光的目的是為賦予材質(zhì)后的模型布光，營造真實的光照效果。為了突出相機(jī)和燈光，圖3中模型以線框顯示。

圖2 添加材質(zhì)和貼圖后的效果圖

圖3 添加燈光和相機(jī)后效果圖

2.1.4 渲染輸出

對輸出對象的色調(diào)、亮度、對比度進(jìn)行調(diào)整，使其更接近于現(xiàn)實。圖4和圖5詳細(xì)展示了渲染器的參數(shù)設(shè)置。

渲染器：V-Ray Adv3.60

渲染設(shè)置：

（1）設(shè)置渲染輸出大小

（2）啟動內(nèi)置幀緩沖區(qū)，圖像采樣器選擇自適應(yīng)細(xì)分，抗鋸齒過濾器選擇Catmull-Rom，環(huán)境開啟全局照明

（3）勾選鉗制輸出

（4）全局照明開啟，首次引擎發(fā)光貼圖，二次引擎燈光緩存。將發(fā)光貼圖細(xì)分值和插值采樣為80和82。燈光緩存細(xì)分值為2200。

2.2 A-Frame框架的導(dǎo)入

2.2.1 場景導(dǎo)入

A-Frame的是場景容器，用來包含所有實體。處理所有3D所需要的設(shè)置：建立WebGL上下文，畫布，相機(jī)，光照，渲染器。在中聲明一個標(biāo)簽，初始代碼如下：

2.2.2 模型加載

A-Frame的資源管理系統(tǒng)便于預(yù)加載和緩存來達(dá)到更好的性能。在渲染場景之前預(yù)加載資源，可以確保資源不會出現(xiàn)視覺丟失，避免場景試圖在渲染時才去獲取資源所導(dǎo)致的性能問題。具體做法是

“但現(xiàn)在，職工種出來的香蕉、辣椒、菠蘿等的銷售還是成問題，等著老板來地頭收購，價格上沒什么主動權(quán)?！比~振坦言，“企業(yè)化改革的目的就是企業(yè)增收，職工增收。依托市場，打造品牌，帶領(lǐng)職工進(jìn)一步打開產(chǎn)品銷售渠道，這也是我們未來努力的方向?！?/p>

把三維模型和材料放在里，然后使用實體標(biāo)簽進(jìn)行展示。展示大廳hall模型的代碼如下：

圖4 公用和GI參數(shù)設(shè)置圖

圖5 V-Ray參數(shù)設(shè)置圖

2.2.3 交互控制

A-Frame支持多種交互方式。使用基于凝視的光標(biāo)組件交互方式，當(dāng)用戶在頭戴設(shè)備上凝視或在PC端點擊館藏文物時，顯示文物的詳細(xì)介紹。具體做法是：

（1）顯式定義實體。

（2）添加一個實體作為camera實體的子元素。

（3）配置光標(biāo)所使用的光線跟蹤器（raycaster）

（4）為文物實體配置event-set事件處理組件

其中，顯示文物詳細(xì)介紹時，屬于non-ascii字符的中文在WebVR框架下的展示是一大難題。A-Frame給出的text組件只能渲染ascii字符。使用custom font組件可以展示自己生成的non-ascii字符。具體做法是：使用Don McCurdy開發(fā)的MSDF font generator生成簡短的中文字符資源，然后利用加載該字符。對于較長的大段文字介紹內(nèi)容在模型創(chuàng)建階段放置在藏品展臺右側(cè)的公告牌里。圖6是用戶與藏品的交互效果，當(dāng)光標(biāo)黑圈停頓在藏品上時，彈出藏品名稱，用戶可走進(jìn)公告牌詳細(xì)閱讀藏品介紹信息。

圖6 交互效果圖

3 結(jié)語

VR技術(shù)能夠?qū)⑽幕z產(chǎn)中的信息元素(包括視覺、聽覺、觸覺、互動等)與時間、空間的實體信息相互疊加在同一個情境中[10]，特別適合應(yīng)用在博物館文物展示場景中。A-Frame框架的易用性使得整個博物館漫游系統(tǒng)的開發(fā)過程簡單流暢。只需事先使用3DMax完成建模工作，然后在html文件中引入相應(yīng)的