基于WebGL的全景技術智慧旅游系統①

羅雅丹,羅琪斯

(廣西壯族自治區地圖院,南寧 530023)

全景虛擬漫游技術是當前環球范圍內流行的一種“基于圖像”的虛擬現實體驗視覺技術[1].360°全景圖像是通過相機拍攝采集場景的圖像數據,后期經過圖片拼接合成全景圖,在全景播放平臺進行展示.該技術的全景瀏覽提供了360°環視視角,可以控制內容的旋轉方向或縮放其大小,交互性好,沉浸感較強.智慧旅游基于新一代信息與通信技術,通過互聯網為游客提供高品質、高滿意度服務,借助PC及平板、智能手機等移動終端,使游客能夠主動感知旅游資源、旅游經濟、旅游活動等方面的信息[2].而全景漫游技術則為智慧旅游提供了重要的展示平臺,通過在便攜式移動終端設備中提供360°沉浸式全景虛擬漫游體驗,使游客在旅游前、旅游中、旅游后能夠主動感知景區風景,提升游客對景區風景的感知度,使得旅游產品的宣傳變得更加真實,景區的知名度也能得到大大的提高,在旅游服務業中有著廣泛的應用[3].

傳統的全景展示系統是通過對整個場景進行三維建模來表達,對硬件設備要求高,制作周期長,開發工作量較大[4].Flash播放插件是全球電腦中安裝數量最多的插件,因此用戶無需再安裝額外的插件便可播放,作為一個動畫軟件,Flash具有相當大的編輯潛力,可以為三維全景實現瀏覽查看功能.由Garden Gnome Software公司研發的Pano2VR,能夠將全景圖片轉成QuickTime或者Flash格式,要求瀏覽者在電腦中安裝QuickTime或者Flash播放插件.目前國內外主流全景虛擬漫游技術是基于WebGL和HTML進行開發的,有學者使用WebGL在3D畫面中展示人體的運動[5],也有的使用WebGL和HTML實現了基于網絡的三維地形可視化[6],還有學者研究基于WebGL技術構建虛擬校園的原型漫游系統[7].這些方法是利用了Three.js的開源3D引擎,在瀏覽器上增加場景、物質、渲染器、燈光、模型等模型,由于目前的標準和方法尚未統一,存在諸如開放性、兼容性,顯示效果以及效率不佳等問題[8].本文提出了一種基于WebGL的輕便式全景虛擬漫游技術,通過HTML5和WebGL結合的方式,脫離中間插件的支持,適用于網絡在線瀏覽,可以通過電腦或移動終端設備進行交互操作.該技術的數據量較小,對客戶端硬件要求不高,功能豐富,系統的獨立性更強,計算機資源占用率低.

1 智慧旅游系統架構

基于全景虛擬漫游的智慧旅游系統采用四層架構模式,包括支持層、數據層、服務層和應用層,系統架構如圖1所示.支持層由云服務器、網絡和數據庫管理系統組成;數據層用于存儲全景、旅游專題等原始數據;服務層包括全景、要素和網絡分析等服務;應用層主要為移動終端和Web提供訪問的接口,內容包括景區全景、語音解說、景區介紹和旅游資訊等;用戶向應用層提出應用需求,應用層將用戶數據訪問數據提交到服務層,服務層則根據用戶不同的需求向數據層請求不同的數據,并將結果返回應用層.

2 WebGL技術原理

本文設計的系統旨在為游客和旅游景區提供一種輕便式的全景虛擬漫游系統,前期的圖像信息數據采集結合地面全景云臺和無人機航拍兩種方式,以全方位視角展現全景內容;全景拼接則是經過提取圖像特征、特征點匹配和圖像拼接完成;場景的生成和發布是系統的核心部分,建立在基本HTML結構之上,在HTML的主體中編寫主程序[9].Three.js作為原生Web3D引擎[10],是當前應用最廣泛的WebGL框架,本文選用Three.js來開發系統,實現了基于網絡瀏覽器的無插件三維場景游覽,網頁包括支撐層、三維應用層和用戶層.

圖1 智慧旅游系統架構

2.1 支撐層

支撐層包括了HTML網頁基本框架和WebGL三維場景畫布.

(1)HTML網頁基本框架.

網頁文件的基本框架,涵蓋了程序、鏈接、音樂和圖片等元素.

(2)WebGL三維場景畫布.

采取canvas標簽實現一個可以在HTML中畫圖的場景.

2.2 三維應用層

本層使用Three.js和JavaScript在支撐層完成三維場景的搭建、數據加載和循環渲染.

(1)三維場景的搭建.具體的部件包含場景、相機以及渲染器.

① 場景:類似于一個裝置物體的容器,將必須要表現的全部元素放到這個容器中.用THREE.Scene來構建一個新的場景,代碼如下:

var scene = new THREE.Scene();

② 相機:相機是模擬了人的眼睛,根據所處的位置和朝向,顯示不同的物體.在WebGL中,提供了透視投影和正投影兩種相機[11].采取透視相機(THREE.PerspectiveCamera)模擬一個相機,代碼如下:

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

③ 渲染器:將空間三維物體轉換到二維平面的軟件被稱為渲染器.渲染工作采取Three.js庫中成效好的WebGLRenderer完成.代碼如下:

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

(2)數據加載.為了保證網絡傳輸及網頁顯示效率,將全景數據轉成JSON格式.當用戶所在的瀏覽器向服務器發送請求,即可下載場景數據到瀏覽器,本地解析場景模型數據,將場景數據顯示在瀏覽器頁面上.

(3)渲染循環.用戶在使用全景虛擬漫游系統切換視野時,系統需要不斷地調用渲染器對畫面進行渲染,從而可以在瀏覽器中顯示出連貫的場景.渲染循環代碼如下:

function render(){

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene,camera);

requestAnimationFrame(render);

2.3 用戶層

本層重點完成全景虛擬漫游系統的用戶交互.采取CSS搭建整個全景網頁的布局,內容涵蓋了網頁的色彩、屬性和元素等;通過JavaScript語言實現鼠標和鍵盤的交互;由CSS中的2D/3D轉換屬性實現頁面內容的縮放和平移等操作.

3 基于WebGL的全景虛擬漫游技術

全景虛擬漫游技術的整體設計分為數據采集、圖像拼接、場景生成、場景發布4個部分,如圖2所示:確定旅游景區所需拍攝的景點和拍攝環境,通過無人機航攝和地面點全景云臺拍攝兩種方式進行數據采集;利用PTGui軟件進行圖片拼接和Photoshop完成圖像美化修飾工作;通過WebGL技術和HTML5技術的結合構建全景場景和數據發布,實現全景漫游、自由瀏覽交互等多種形象生動的視覺體驗.

圖2 全景虛擬漫游技術整體設計

3.1 數據采集

考慮到應用場景的多樣性,數據采集采用無人機航拍與地面全景云臺架設相機拍攝相結合的方式獲得,以便構建空中與地面兩種全景瀏覽視角.

采集數據需要用到的設備:高分辨率的數碼相機、超廣角的魚眼鏡頭、三腳架、全景云臺和無人機.拍攝時相機應處于同一高度和水平面,同時確保中心點在云臺或無人機轉動軸心的垂線上,防止出現視差和偏斜的情況[12].為使后續的圖像拼接能夠順利進行,減少圖像誤差,通常拍攝兩個相鄰圖像須保持30%以上的重疊內容,重疊度越高,拼接出來的圖像質量越好[13];而保持較高的重疊度,則會增加初始數據的采集量.為了解決該問題,提高拍攝效率,本文所有數據的采集均采用180°超廣角的魚眼鏡頭,在同一高度和水平面所需拍攝照片數量比普通的廣角鏡頭少了50%以上.在拍攝時手動設置鏡頭的曝光度和對焦,保證拍攝的白平衡和相鄰的照片之間的感光度,進一步提高全景圖像的質量.

全景數據采集流程如圖3所示:分別在水平方向、向下45°方向、向上45°方向進行該方向上每隔90°拍攝一次的操作,再在垂直方向的向上90°和向下90°分別拍攝一次,通過以上采集可獲取到一個場景的所有全景數據.

3.2 全景拼接

全景圖的拼接,是將前期數據采集的同一個場景的所有圖片組經過拼接和處理合成一張球面全景圖,包括提取圖像特征、特征點匹配和圖像拼接3個部分.

(1)提取圖像特征:采用尺度不變特征轉換(Scale-Invariant Feature Transform,SIFT)的方法提取兩張圖片之間的特征[14],流程圖如圖4所示.檢測:在高斯尺度空間中,通過高斯差分函數找到兩幅圖像之間的相同的興趣點;過濾:再對這些興趣點進行擬合,過濾掉不穩定或者低對比度的點,找到關鍵點;賦值:根據關鍵點鄰域像素的梯度值,給每個點賦值特征方向;描述:根據關鍵點的方向信息,生成特征向量.

圖3 數據采集流程

(2)特征點匹配:得到特征點之后進行兩幅圖像之間的特征匹配,會出現許多誤差點.因此,需要采用隨機抽樣一致性(RANdom SAmple Consensus,RANSAC)算法進行最優化匹配[15].假設特征的分布呈直線方程分布,隨機抽取2個樣本點,對數據進行擬合;假設一個容差范圍,找出擬合曲線容差范圍內的點,并統計點數;重新隨機選取2個點,反復實驗,直到結束迭代;迭代完成后,找出點數最多的情形,即為最優匹配.

(3)圖像拼接:目前常用的全景拼接軟件有PTGui、APG、Hugin和漫游大師等軟件[16],本文中采取的軟件是PTGui.導入圖片組,根據圖片的鏡頭參數,識別重疊內容的像素特征,自動生成控制點完成初步的圖像縫合.PTGui軟件能夠自動識別相鄰圖片中的圖形轉折點、色差較大的細部節點等作為重疊部分,并命名為①②③④⑤⑥等控制點.通過設置與查找重疊區域控制點,可以將相鄰兩張圖片中的①②③④⑤⑥等控制點一一對應,依次類推,設置好相應控制點,即可縫合度全景圖.每兩張圖連接部分不能少于3個點.一般情況下PTGui軟件自動建立的控制點就有很好的效果,如果因某些原因軟件不能自動找到控制點的話可以選擇手工添加.根據軟件實際的拼接效果,采用手動方式調整和添加控制點,在相鄰的圖片之間盡可能多地添加控制點,可以降低圖片間的差異性,提高圖像匹配的精確度;并通過優化器和曝光修正調整圖像,確認所有的拼接縫對齊后,創建全景圖像,完成拼接工作.

圖4 尺度不變特征轉換流程

圖像拼接處理后如圖5所示.對由于天氣、拍攝環境等因素造成的相片質量不好的情況,利用PhotoShop軟件進行相片處理,調節相片的色調、顏色、對比度等,必要的時候利用素材庫進行相片優化[17].

圖5 拼接處理后的全景圖像

3.3 構建全景場景及數據發布

單個場景的全景圖像拼接處理完成之后,需要將多個場景的全景圖關聯起來,通過場景鏈接和切換,實現景區范圍內的無縫全景虛擬漫游.而常見的將漫游系統呈現在互聯網上的方式,需要通過展示圖像的第三方插件進行渲染.傳統的渲染插件有VRML、X3D、Java、QuickTime、Flash等[18],在使用全景虛擬漫游系統之前必須在電腦或移動終端安裝好這些瀏覽器插件,大大增加使用前的操作工序,無法做到簡單輕便式的用戶體驗.

為了解決該問題,使用JavaScript語言,結合開源WebGL三維腳本庫Three.js[19],在HTML網頁基本框架中實現全景虛擬漫游系統.程序運行流程如圖6所示,運用Three.js編程,初始化全景瀏覽需要的組件,首先在HTML中創建DIV標簽,構造球體三維模型,設置球體半徑為360,水平方向和垂直方向上分段數分別為80和60.獲取HTML網頁的全景展示的節點對象,并添加WebGL渲染模型,全景圖片將作為球狀模型紋理映射的材料.實例化照相機的參數,視景體豎直方向上的張角設置為45°,容器Canvas的水平方向和豎直方向長度設為1024和512,照相機到視景體最近、最遠的距離為1和1000.將渲染好的全景球體加載到場景中,即可實現全景的展示.

圖6 程序運行流程

本文的全景虛擬漫游系統如圖7所示.全景漫游場景包含:鏈接主頁、平移、縮放和語音講解等.全景導航菜單包括:全屏、場景切換以及層疊樣式表生成的場景照片墻等.全景數據文件包含全景分塊圖像、HTML導航頁面、XML配置文件、界面皮膚文件等.將打包好的全景數據文件發布到網絡服務器上,即可通過瀏覽器訪問的方式進行全景虛擬漫游體驗.

圖7 全景虛擬漫游系統

4 應用案例與效果分析

4.1 應用案例

以桂平市重要景區景點為研究對象,將基于WebGL的全景漫游技術應用到桂平市旅游智慧化建設項目當中,實現了桂平市景區的全景虛擬漫游系統.景區全景漫游系統截圖如圖8所示.

景區全景系統提供三大景區的全景虛擬漫游數據,包括桂平西山風景名勝區29個場景切換、大藤峽生態旅游區9個場景切換、桂平市太平天國金田起義12個場景切換.通過該系統,用戶可以在瀏覽器中進行虛擬交互式全景體驗,在線欣賞桂平市重要景區的景點風光,體驗全景漫游的沉浸、逼真感.本文在虛擬漫游系統中加入了文字簡介、語音解說、視頻短片和背景音樂等內容,為用戶提供更多樣的視聽體驗.

4.2 效果分析

傳統的全景漫游技術要求用戶在體驗全景系統之前在客戶端安裝Flash等第三方插件,插件通常有幾十兆的大小,占用計算機的資源,增加了用戶的操作工序.而目前常用的全景漫游技術軟件多為商用收費軟件,技術標準不統一,不支持開源開發.相比于傳統的全景漫游技術和目前商用的全景漫游技術,本文利用WebGL技術能夠直接對像素進行操作和編輯,改善像素級別的圖像顯示性能,具有較好的顯示效果;省去了安裝第三方插件的繁瑣操作,對客戶端硬件要求不高,系統獨立性強;開放性方面,采用的WebGL第三方庫和HTML5技術屬于完全開放的,有利于系統后續的擴展;兼容性方面,系統各項功能模塊在IE11.0、Chrome、Firefox等各類主流瀏覽器的不同版本中運行正常,具備較好的兼容性.

圖8 景區全景虛擬漫游系統截圖

常見的Web3D技術對比結果如表1所示.Cult3D和Viewpoint必須要安裝插件,對客戶端硬件要求高.Babylon.js是一款3D游戲引擎,側重于游戲的開發應用;SceneJS則尤其適用于需要高精度細節的模型需求;Cesium屬于地圖引擎范疇,常用于3D、2D和2.5D形式的地圖展示;本文采用基于WebGL的Three.js,與其他三維引擎相比,Three.js文檔齊全,案例豐富,簡單直觀,將復雜的接口簡單化,擴展性很強.

表1 技術對比

在相同的硬件環境下(處理器:Intel Core i7-6500U@ 2.50 GHz雙核,內存容量:16 GB),將本文方法與以Flash為例的傳統漫游技術和目前商用較為廣泛的Pano2VR全景漫游技術進行對比,計算機使用性能比較結果如表2所示,3種技術在主流瀏覽器的CPU使用率對比如圖9所示.由表2和圖9可以看出,本技術在網站平均加載速度、CPU使用率和物理內存的使用情況3個方面都略勝一籌.由此可見,本文借助Three.js完成的全景漫游系統,系統占用空間更少,成本更低,系統穩定性和加載效率更高.

表2 性能比較

圖9 3種技術在主流瀏覽器的CPU使用率對比

5 結語

本文以解決傳統全景展示技術開發周期長、對硬件要求高、工序繁瑣的問題作為出發點,結合傳統漫游技術和目前基于HTML5和WebGL的全景漫游技術,在HTML5框架上設計開發了一套基于WebGL的全景虛擬漫游系統.通過HTML5編輯WebGL的圖像API進行圖像呈現,同時對HTML5的組件進行硬件加速渲染,確保全景內容讀取的流暢性和交互的靈活性,實現在線快捷體驗全景虛擬漫游的功能.和傳統全景展示技術相比,免去安裝Flash等渲染插件的繁瑣工序,系統要更加輕量級,資源使用率更低,開發更快捷.本文將基于WebGL的全景技術應用到智慧旅游景區的虛擬體驗當中,采用高效的方式實現智慧旅游全景漫游系統的建立及其展示,該系統可在門戶網站、智能手機等終端設備上應用,用戶可以在瀏覽器中進行沉浸式的交互體驗,在線觀賞智慧旅游景區的風光.