基于Krpano的全景校园漫游的设计与实现

蒋金彤，孙雅芃

(南开大学滨海学院，天津 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"//开启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"//开启maps，配置type为“google”

maps_google_api_key=""

lat="38.86109000" lng="117.44135556" heading="0.0">//自动获取全景图exif信息并存储在lat、lng、heading属性中

实现效果如图8所示。

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

(4)全景交互。Krpano 框架已默认配置外部交互设备，如鼠标、键盘等形式的交互。通过配置全景配置对象增加热点交互、陀螺仪体感交互功能，调用陀螺仪传感器，并提高移动设备的交互体验感。

核心代码如下：

"1.960" atv="0.603"

linkedscene="scene_3" />//配置热点信息，指定链接场景