基于A-Frame的博物館漫游系統設計

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

?

基于A-Frame的博物館漫游系統設計

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

（山東農業大學信息科學與工程學院大數據研究中心，山東 泰安 271018）

虛擬現實技術應用在博物館藏品展示中，使用戶能夠通過佩戴虛擬現實設備，實現在虛擬場景中參觀博物館內部場景，與展品“零距離”接觸。基于A-Frame框架，結合3DMax建模工具開發虛擬漫游系統，從而能夠高度還原泰安市博物館中的部分展品。用戶可在任何地點通過瀏覽器對博物館進行虛擬漫游，身臨其境獲取館內藏品信息。

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

0 引言

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

1 相關技術簡介

1.1 3DMax

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

1.2 A-Frame

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

2 開發步驟

2.1 3D模型的構建

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

2.1.1 做出基本模型

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

圖1 博物館立體效果圖

2.1.2 賦予材質和貼圖

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

2.1.3 創建相機和燈光

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

圖2 添加材質和貼圖后的效果圖

圖3 添加燈光和相機后效果圖

2.1.4 渲染輸出

對輸出對象的色調、亮度、對比度進行調整，使其更接近于現實。圖4和圖5詳細展示了渲染器的參數設置。

渲染器：V-Ray Adv3.60

渲染設置：

（1）設置渲染輸出大小

（2）啟動內置幀緩沖區，圖像采樣器選擇自適應細分，抗鋸齒過濾器選擇Catmull-Rom，環境開啟全局照明

（3）勾選鉗制輸出

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

2.2 A-Frame框架的導入

2.2.1 場景導入

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

2.2.2 模型加載

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

“但現在，職工種出來的香蕉、辣椒、菠蘿等的銷售還是成問題，等著老板來地頭收購，價格上沒什么主動權。”葉振坦言，“企業化改革的目的就是企業增收，職工增收。依托市場，打造品牌，帶領職工進一步打開產品銷售渠道，這也是我們未來努力的方向。”

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

圖4 公用和GI參數設置圖

圖5 V-Ray參數設置圖

2.2.3 交互控制

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

（1）顯式定義實體。

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

（3）配置光標所使用的光線跟蹤器（raycaster）

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

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

圖6 交互效果圖

3 結語

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