基于WebGL的全景技術(shù)智慧旅游系統(tǒng)①

羅雅丹,羅琪斯

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

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

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

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

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

2 WebGL技術(shù)原理

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

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

2.1 支撐層

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

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

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

(2)WebGL三維場(chǎng)景畫(huà)布.

采取canvas標(biāo)簽實(shí)現(xiàn)一個(gè)可以在HTML中畫(huà)圖的場(chǎng)景.

2.2 三維應(yīng)用層

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

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

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

var scene = new THREE.Scene();

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

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

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

var renderer = new THREE.WebGLRenderer();

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

document.body.appendChild(renderer.domElement);

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

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

function render(){

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene,camera);

requestAnimationFrame(render);

2.3 用戶層

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

3 基于WebGL的全景虛擬漫游技術(shù)

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

圖2 全景虛擬漫游技術(shù)整體設(shè)計(jì)

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

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

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

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

3.2 全景拼接

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

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

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

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

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

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

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

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

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

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

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

圖6 程序運(yùn)行流程

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

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

4 應(yīng)用案例與效果分析

4.1 應(yīng)用案例

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

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

4.2 效果分析

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

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

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

表1 技術(shù)對(duì)比

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

表2 性能比較

圖9 3種技術(shù)在主流瀏覽器的CPU使用率對(duì)比

5 結(jié)語(yǔ)

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