蔣金彤，孫雅芃

(南開大學(xué)濱海學(xué)院，天津 300000)

0 引 言

近年來，伴隨著虛擬現(xiàn)實(shí)技術(shù)的不斷進(jìn)步與發(fā)展，以及5G技術(shù)的成熟應(yīng)用，使得數(shù)字校園的發(fā)展進(jìn)入新的領(lǐng)域。目前,有關(guān)高校數(shù)字化校園的相關(guān)研究，已經(jīng)進(jìn)入到虛擬校園階段，并成為世界各國高等教育研究者的重點(diǎn)研究課題之一[1-8]。虛擬校園主要通過兩種方式構(gòu)建：一是借助3DMax 和 VRP 平臺(tái)實(shí)現(xiàn)虛擬校園漫游系統(tǒng)[9]；二是利用全景圖和HTML5交互性優(yōu)勢(shì)搭建虛擬全景校園漫游系統(tǒng)?；趫D像的虛擬系統(tǒng)因其不需要復(fù)雜的建模與編程的特點(diǎn), 特別適合于基于真實(shí)自然場(chǎng)景的仿真研究[10]。此外，借助Krpano平臺(tái)使用Krpano XML編程語言設(shè)計(jì)功能，能夠大大降低開發(fā)難度，提升開發(fā)效率，便于系統(tǒng)的維護(hù)與功能拓展。

該文以南開大學(xué)濱海學(xué)院為研究區(qū)域，通過應(yīng)用Krpano框架、Krpano XML編程、PTGui可視化編輯環(huán)境、Google Maps地圖服務(wù)控件以及SQL數(shù)據(jù)庫技術(shù)，創(chuàng)建了一個(gè)集2D校園全景漫游、WebVR全景顯示、谷歌地圖信息服務(wù)、交互式漫游、真實(shí)感交互為一體的虛擬全景校園漫游系統(tǒng)。

1 虛擬全景校園漫游系統(tǒng)關(guān)鍵技術(shù)

1.1 Krpano 框架

Krpano是目前最流行的全景引擎。它基于Flash的內(nèi)核，同時(shí)提供了HTML5的解決方案[11]。其渲染效果采用Action Script語言實(shí)現(xiàn)，場(chǎng)景內(nèi)容的配置則由XML標(biāo)記語言負(fù)責(zé)[12]。XML指可擴(kuò)展標(biāo)記語言(extensible markup language)，其設(shè)計(jì)宗旨是傳輸和存儲(chǔ)數(shù)據(jù)。因其良好的可拓展性，XML常用于為全景場(chǎng)景配置個(gè)性化、定制化的功能供外部系統(tǒng)使用。Krpano 框架能夠提供 Actions/ Scripting 動(dòng)態(tài)腳本，內(nèi)置如屏幕信息/設(shè)定相關(guān)的fullscreen、bgcolor變量；與自適應(yīng)設(shè)備信息有關(guān)的device變量；核心Krpano Action相關(guān)的編程邏輯控制控制和數(shù)學(xué)運(yùn)算函數(shù)等；以及外部Javascript接口函數(shù)，用于解析Javascript代碼并訪問所有Krpano結(jié)構(gòu)與功能。

Krpano框架如圖1所示，其在邏輯結(jié)構(gòu)中提供4個(gè)主要的核心對(duì)象：全景網(wǎng)頁解析對(duì)象 Tour.html ，負(fù)責(zé)加載和解析腳本文件(Tour.js) ；全景腳本對(duì)象 Tour.js 中包含兩部分：Krpano 嵌入腳本(Krpano.js)和Krpano HTML5 查看器， Krpano.js 將對(duì)JavaScript自動(dòng)檢查，并將全景引擎嵌入加載進(jìn)HTML5中；全景顯示對(duì)象 Tour.swf ，負(fù)責(zé)管理Flash引擎，用于讀取傳輸XML元素內(nèi)容；全景配置對(duì)象 Tour.xml ，將內(nèi)置的26個(gè)XML元素將映射到Krpano內(nèi)部數(shù)據(jù)結(jié)構(gòu)中，并為Krpano查看器傳輸數(shù)據(jù)。

圖1 Krpano 框架

框架中自帶了用于Web端顯示的HTML5/Flash引擎，在無需配置外部工具及修改框架代碼的情況下可完成網(wǎng)頁配置。Krpano XML元素本身只是一種傳輸格式，并且所有的XML元素可以再次定義和引用，可為系統(tǒng)開發(fā)豐富的功能。

1.2 Krpano XML 語法結(jié)構(gòu)

Krpano XML 采用 XML 語法結(jié)構(gòu)，分為靜態(tài)代碼部分和動(dòng)態(tài)代碼部分。Krpano元素為Krpano XML 的根元素，所有的靜態(tài)代碼都需要在Krpano元素內(nèi)定義。

靜態(tài)代碼即內(nèi)置的24個(gè)元素，每類元素實(shí)現(xiàn)不同的功能，它相當(dāng)于一個(gè)具有特定功能的積木，通過疊加不同的元素實(shí)現(xiàn)特定的功能，并且不同元素之間的先后關(guān)系并不重要。

image元素控制全景圖設(shè)置，包括全景圖類型、漸進(jìn)分辨率切片顯示等。Krpano viewer 支持的全景圖像類型：立方體(cube)全景、球形(sphere)全景、等矩形(equirectangular)全景、圓柱(cylinder)全景、1～170度平面(flat)全景、魚眼(fisheye)全景等，以及它提供為全景圖添加3D深度的深度圖，實(shí)現(xiàn)VR觀看，3D轉(zhuǎn)換，甚至在3D空間中四處走動(dòng)(需外部VR設(shè)備支持)。

view元素用于存儲(chǔ)當(dāng)前視圖設(shè)置的信息，包括視圖水平/垂直視線坐標(biāo)、最大/最小全景圖縮放系數(shù)、默認(rèn)視區(qū)等信息。

control元素負(fù)責(zé)外部鼠標(biāo)和鍵盤控制設(shè)置，使用control.mouse和control.touch變量設(shè)置鼠標(biāo)的控制模式和傳遞信息。

layer元素和plugin元素用于包含圖像、圖標(biāo)、交互按鈕或動(dòng)態(tài)插件。layer和plugin元素適用于子父層級(jí)關(guān)系，能夠互相聲明子xml元素?，F(xiàn)在layer元素與plugin元素在Krpano內(nèi)部是完全相同的元素，layer元素能夠更好地描述元素。

scene元素可以在xml文檔中自定義多個(gè)場(chǎng)景，只有使用loadscene函數(shù)才會(huì)被解析。scene元素上可以存儲(chǔ)任何自定義元素，同時(shí)每個(gè)scene元素內(nèi)可包含不同的操作，當(dāng)loadscene函數(shù)加載新的外部scene元素時(shí)，上一個(gè)scene元素的內(nèi)容就會(huì)被移除。

action元素可以定義Krpano動(dòng)作，它的本質(zhì)是動(dòng)態(tài)代碼，與其他腳本和程序語言函數(shù)相似，可以通過Krpano Javascrip 接口從事件、動(dòng)作或外部插件在任意位置調(diào)用動(dòng)作。并通過args 屬性完成參數(shù)到變量的映射，將局部變量添加到action元素中。

Krpano XML結(jié)構(gòu)如下[13]:

< Krpano > < include > < preview > < image > < view > < area > < display > < control > < cursors > < autorotate > < plugin > < layer > < hotspot > < style > < events > < action > < context- menu > < network > < memory > < security > < textstyle > < lensflareset > < lensflare > < data > < scene > < Krpano >

1.3 SQL數(shù)據(jù)庫技術(shù)

SQL數(shù)據(jù)庫技術(shù),即操作命令集,在使用時(shí),不必考慮 “怎么做” ,只需要發(fā)出“做什么” 的命令就可以, 屬于一種功能齊全的數(shù)據(jù)庫語言。SQL 功能強(qiáng)大,使用方便,成本低,性能高,已成為數(shù)據(jù)庫操作的基礎(chǔ)[14]。

1.4 全景圖制作技術(shù)

全景圖制作流程如圖 2 所示。制作時(shí)利用專業(yè)數(shù)碼相機(jī)+魚眼鏡頭或?qū)I(yè)全景相機(jī)進(jìn)行圖像采集[15],并進(jìn)行編碼標(biāo)記日期和地點(diǎn)；圖像采集完成后將照片導(dǎo)入PTGui 進(jìn)行全景拼接及HDR處理，并映射到球面或等距離長(zhǎng)圓柱的.JPG文件中；最后將導(dǎo)出的.JPG格式照片導(dǎo)入Lightroom或Photoshop中進(jìn)行調(diào)色處理。

圖2 全景圖制作流程

2 虛擬全景校園漫游系統(tǒng)總體設(shè)計(jì)

南開大學(xué)濱海學(xué)院虛擬全景校園漫游系統(tǒng)旨在為在校師生提供一個(gè)可跨系統(tǒng)、跨設(shè)備使用的穩(wěn)定的虛擬校園系統(tǒng)，此系統(tǒng)實(shí)現(xiàn)了2D校園全景和谷歌地圖信息服務(wù)功能，并提供了搭載陀螺儀傳感器的可穿戴式VR設(shè)備使用的WebVR全景顯示。

2.1 系統(tǒng)功能設(shè)計(jì)

全景校園分為2D全景圖、WebVR全景兩種全景模式，需要實(shí)現(xiàn)全景的漫游、控制、定位、交互和谷歌地圖信息服務(wù)。

系統(tǒng)功能如圖3所示。

圖3 系統(tǒng)功能設(shè)計(jì)

2.2 系統(tǒng)整體架構(gòu)

系統(tǒng)基于 Krpano 框架和 Google Maps API Server 服務(wù)，系統(tǒng)整體架構(gòu)設(shè)計(jì)如圖4所示。該架構(gòu)使用主流的B/S模式，分別為數(shù)據(jù)層、服務(wù)層和應(yīng)用層三層結(jié)構(gòu)。

圖4 系統(tǒng)整體框架

其中，數(shù)據(jù)層將處理完成的全景圖切片上傳至Web服務(wù)器，全景圖數(shù)據(jù)以文件形式直接存儲(chǔ)在Web服務(wù)器以便用戶請(qǐng)求訪問。服務(wù)層使用Google cloud server作為谷歌地圖信息的應(yīng)用服務(wù)器。它提供Google maps API for JavaScript 等谷歌地圖功能，可將Google maps嵌入到Web端，并提供唯一憑據(jù)(key)供Krpano 應(yīng)用程序調(diào)用。應(yīng)用層通過Krpano 平臺(tái)為系統(tǒng)設(shè)計(jì)2D全景、WebVR全景顯示、谷歌地圖信息、全景定位、全景控制、全景交互、全景漫游等功能。

3 虛擬全景校園系統(tǒng)的實(shí)現(xiàn)

3.1 數(shù)據(jù)的采集與處理

校園全景數(shù)據(jù)的采集是必不可少的。在采集過程中，通常使用數(shù)字?jǐn)z影測(cè)量，選取專業(yè)全景相機(jī)進(jìn)行圖像采集可以保證后續(xù)穩(wěn)定、有效的處理。通過PTGui對(duì)拍攝的圖像進(jìn)行校正和圖像HDR融合處理，為導(dǎo)入Krpano 平臺(tái)前做準(zhǔn)備。該文采集了南開大學(xué)濱海學(xué)院正門、教學(xué)樓、圖書館、食堂等10個(gè)地點(diǎn)。

圖像采集完成后，使用第三方拼接工具PTGui手動(dòng)進(jìn)行全景拼接。該軟件具有專業(yè)的控制點(diǎn)拼接功能，能夠細(xì)微調(diào)整全景照片，并在內(nèi)部集成HDR處理功能。

拼接完成的單張全景圖如圖5所示。

圖5 單張全景圖

3.2 功能實(shí)現(xiàn)

本虛擬全景校園系統(tǒng)實(shí)現(xiàn)了2D全景、WebVR全景顯示、谷歌地圖信息、全景定位、全景控制、全景交互、全景漫游等功能。

系統(tǒng)實(shí)現(xiàn)界面如圖6所示。

圖6 系統(tǒng)功能實(shí)現(xiàn)界面

(1)2D全景圖顯示。使用 Krpano 框架中的全景配置對(duì)象(tour.xml)中的scene元素、image元素、view元素負(fù)責(zé)每個(gè)地點(diǎn)全景圖，通過修改配置文件即可實(shí)現(xiàn)鏈接數(shù)據(jù)層全景切片，完成全景圖的加載顯示。

核心代碼如下：

//通過thumburl鏈接全景圖切片，并自定義全景地點(diǎn)名稱

fov="120" maxpixelzoom="2.0"

fovmin="70" fovmax="140" limitview="auto" />

//配置全景類型為立方體

(2)WebVR 全景顯示。Krpano 框架提供外掛WebVR插件(webvr.js)，通過調(diào)用WebVR API，實(shí)現(xiàn)了對(duì)外部移動(dòng)設(shè)備的加速傳感器和陀螺儀傳感器進(jìn)行體感和位置追蹤。核心代碼如下：

webvr="true"http://開啟WebVR模式

//鏈接WebVR模式下的全景圖切片

全景配置對(duì)象(tour.xml)封裝了全景圖配置的scene、image、view等元素，實(shí)現(xiàn)了根據(jù)配置信息自動(dòng)完成全景圖初始化加載和請(qǐng)求。WebVR全景顯示界面如圖7所示。

圖7 WebVR全景顯示界面

(3)谷歌地圖信息服務(wù)、全景定位。由Google maps services提供的 Maps API for JavaScript 支持將Google maps信息服務(wù)嵌入到Krpano框架中，并通過全景配置對(duì)象(tour.xml)和全景腳本對(duì)象(tour.js)配置實(shí)現(xiàn)全景定位，將全景圖EXIF中的地理信息(緯度lat、經(jīng)度lng、方位heading)自動(dòng)定位標(biāo)記在谷歌地圖中。核心代碼如下：

maps="true"

maps_type="google"http://開啟maps，配置type為“google”

maps_google_api_key=""

lat="38.86109000" lng="117.44135556" heading="0.0">//自動(dòng)獲取全景圖exif信息并存儲(chǔ)在lat、lng、heading屬性中

實(shí)現(xiàn)效果如圖8所示。

圖8 全景定位及谷歌地圖效果圖

(4)全景交互。Krpano 框架已默認(rèn)配置外部交互設(shè)備，如鼠標(biāo)、鍵盤等形式的交互。通過配置全景配置對(duì)象增加熱點(diǎn)交互、陀螺儀體感交互功能，調(diào)用陀螺儀傳感器，并提高移動(dòng)設(shè)備的交互體驗(yàn)感。

核心代碼如下：

"1.960" atv="0.603"

linkedscene="scene_3" />//配置熱點(diǎn)信息，指定鏈接場(chǎng)景