羅雅丹,羅琪斯

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

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

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

1 智慧旅游系統(tǒng)架構(gòu)

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

2 WebGL技術原理

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

圖1 智慧旅游系統(tǒng)架構(gòu)

2.1 支撐層

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

(1)HTML網(wǎng)頁基本框架.

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

(2)WebGL三維場景畫布.

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

2.2 三維應用層

本層使用Three.js和JavaScript在支撐層完成三維場景的搭建、數(shù)據(jù)加載和循環(huán)渲染.

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

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

var scene = new THREE.Scene();

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

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

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

var renderer = new THREE.WebGLRenderer();

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

document.body.appendChild(renderer.domElement);

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

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

function render(){

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene,camera);

requestAnimationFrame(render);

2.3 用戶層

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

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

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

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

3.1 數(shù)據(jù)采集

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

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

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

3.2 全景拼接

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

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

圖3 數(shù)據(jù)采集流程

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

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

圖4 尺度不變特征轉(zhuǎn)換流程

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

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

3.3 構(gòu)建全景場景及數(shù)據(jù)發(fā)布

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

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

圖6 程序運行流程

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

圖7 全景虛擬漫游系統(tǒng)

4 應用案例與效果分析

4.1 應用案例

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

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

4.2 效果分析

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

圖8 景區(qū)全景虛擬漫游系統(tǒng)截圖

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

表1 技術對比

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

表2 性能比較

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

5 結(jié)語

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