基于Krpano的全景校園漫游的設計與實現

2021-03-08 00:25:06蔣金彤孫雅芃

計算機技術與發展 2021年2期

蔣金彤，孫雅芃

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

0 引言

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

該文以南開大學濱海學院為研究區域，通過應用Krpano框架、Krpano XML編程、PTGui可視化編輯環境、Google Maps地圖服務控件以及SQL數據庫技術，創建了一個集2D校園全景漫游、WebVR全景顯示、谷歌地圖信息服務、交互式漫游、真實感交互為一體的虛擬全景校園漫游系統。

1 虛擬全景校園漫游系統關鍵技術

1.1 Krpano 框架

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

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

圖1 Krpano 框架

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

1.2 Krpano XML 語法結構

Krpano XML 采用 XML 語法結構，分為靜態代碼部分和動態代碼部分。Krpano元素為Krpano XML 的根元素，所有的靜態代碼都需要在Krpano元素內定義。

靜態代碼即內置的24個元素，每類元素實現不同的功能，它相當于一個具有特定功能的積木，通過疊加不同的元素實現特定的功能，并且不同元素之間的先后關系并不重要。

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

view元素用于存儲當前視圖設置的信息，包括視圖水平/垂直視線坐標、最大/最小全景圖縮放系數、默認視區等信息。

control元素負責外部鼠標和鍵盤控制設置，使用control.mouse和control.touch變量設置鼠標的控制模式和傳遞信息。

layer元素和plugin元素用于包含圖像、圖標、交互按鈕或動態插件。layer和plugin元素適用于子父層級關系，能夠互相聲明子xml元素。現在layer元素與plugin元素在Krpano內部是完全相同的元素，layer元素能夠更好地描述元素。

scene元素可以在xml文檔中自定義多個場景，只有使用loadscene函數才會被解析。scene元素上可以存儲任何自定義元素，同時每個scene元素內可包含不同的操作，當loadscene函數加載新的外部scene元素時，上一個scene元素的內容就會被移除。

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

Krpano XML結構如下[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數據庫技術

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

1.4 全景圖制作技術

全景圖制作流程如圖 2 所示。制作時利用專業數碼相機+魚眼鏡頭或專業全景相機進行圖像采集[15],并進行編碼標記日期和地點；圖像采集完成后將照片導入PTGui 進行全景拼接及HDR處理，并映射到球面或等距離長圓柱的.JPG文件中；最后將導出的.JPG格式照片導入Lightroom或Photoshop中進行調色處理。

圖2 全景圖制作流程

2 虛擬全景校園漫游系統總體設計

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

2.1 系統功能設計

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

系統功能如圖3所示。

圖3 系統功能設計

2.2 系統整體架構

系統基于 Krpano 框架和 Google Maps API Server 服務，系統整體架構設計如圖4所示。該架構使用主流的B/S模式，分別為數據層、服務層和應用層三層結構。

圖4 系統整體框架

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

3 虛擬全景校園系統的實現

3.1 數據的采集與處理

校園全景數據的采集是必不可少的。在采集過程中，通常使用數字攝影測量，選取專業全景相機進行圖像采集可以保證后續穩定、有效的處理。通過PTGui對拍攝的圖像進行校正和圖像HDR融合處理，為導入Krpano 平臺前做準備。該文采集了南開大學濱海學院正門、教學樓、圖書館、食堂等10個地點。

圖像采集完成后，使用第三方拼接工具PTGui手動進行全景拼接。該軟件具有專業的控制點拼接功能，能夠細微調整全景照片，并在內部集成HDR處理功能。

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

圖5 單張全景圖

3.2 功能實現

本虛擬全景校園系統實現了2D全景、WebVR全景顯示、谷歌地圖信息、全景定位、全景控制、全景交互、全景漫游等功能。

系統實現界面如圖6所示。

圖6 系統功能實現界面

(1)2D全景圖顯示。使用 Krpano 框架中的全景配置對象(tour.xml)中的scene元素、image元素、view元素負責每個地點全景圖，通過修改配置文件即可實現鏈接數據層全景切片，完成全景圖的加載顯示。

核心代碼如下：

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

fov="120" maxpixelzoom="2.0"

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

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

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

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

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

全景配置對象(tour.xml)封裝了全景圖配置的scene、image、view等元素，實現了根據配置信息自動完成全景圖初始化加載和請求。WebVR全景顯示界面如圖7所示。

圖7 WebVR全景顯示界面

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

maps="true"

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

maps_google_api_key=""

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

實現效果如圖8所示。

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

(4)全景交互。Krpano 框架已默認配置外部交互設備，如鼠標、鍵盤等形式的交互。通過配置全景配置對象增加熱點交互、陀螺儀體感交互功能，調用陀螺儀傳感器，并提高移動設備的交互體驗感。