曹俊江，昔克，李剑

（新疆电子研究所股份有限公司，新疆 乌鲁木齐 830013）

5G技术的高速发展和应用，推动了VR行业的发展。近年来，市面上推出了很多优秀的VR应用，但是昂贵的开发成本和设备成本阻碍着这些优秀的应用进入千家万户，在这个过程中，WebVR技术就应运而生。WebVR是一种基于WebGL的三维展示技术[1]，WebVR将VR体验搬进了用户浏览器，通过JavaScript和WebGL的有机结合就可以借助系统显卡在浏览器里流畅地展示3D场景和模型。而WebVR提供了专门访问VR硬件的接口，让开发者能构建更加舒适的VR体验[8]，并且可以兼容智能手机、PC、Oculus Rift和 HTC Vive等设备。Krpano作为主流的三维全景和WebVR开发框架，可以方便地将采集到的图像进行拼接、整合，生成无缝的三维虚拟空间[2]。Krpano自带的各种插件也可以方便地将各种图文、音频、视频、模型等资源加载到虚拟场景中，通过编写脚本实现各种场景下的交互。该技术目前已经广泛应用于虚拟博物馆、虚拟景区、数字城市等项目中[5]。由于Krpano是基于XML的数据结构，因此复杂场景的开发往往需要更多的冗余步骤和繁杂节点叠加操作，使得场景的开发缺乏可视化的开发环境[9]。该系统的设计使开发人员构建场景更加直观，同时大大降低了用户对场景业务的维护成本。

1 需求分析

1.1 开发人员需求分析

常规的Krpano场景开发，需要使用该框架下自带的Bat批处理程序进行处理[6]，通过输入不同的参数用以生成不同功能的场景文件。不同场景的生成过程中往往会生成多个场景的配置文件，其中50%以上的文件高度冗余，需要开发人员在对比分析后进行合并。在前端场景界面的设计过程中，也需要根据多个场景对节点进行配置、裁剪、合并，步骤繁琐，极易出错。

为了解决上述问题，首先需要了解Krpano的场景生成过程，对场景生成命令进行抽象化处理[11]，通过Java语言封装成类库加以执行。其次对于各个场景下的冗余文件进行分析，通过程序处理完成自动化裁剪和场景合并。

图1 场景结构分析图

1.2 用户需求分析

传统的Web VR应用在交付给用户后，如果发生业务变更或系统问题，只能交给开发人员进行维护或者重新开发，直接提高了用户的维护成本，最终使产品难以落地。为了降低用户的维护成本，这就需要对各个场景下的图文、音频、视频、模型、脚本等资源进行建库处理[4]。通过系统后台界面完成资源的添加、更新和删除操作。

2 Krpano框架分析

2.1 Krpano运行机制

Krpano引擎同时支持Html5和Flash两种显示方式[3]，为了更好地支持移动设备，该系统采用了Html5显示方式。Krpano在场景配置上使用了XML文档结构，只需要改变XML文档结构就可以对场景进行脚本控制。同Json一样，XML也是一种通用的解析标准[13]，因此外部应用程序可以很方便地对场景进行操作，可以动态地对场景进行扩展和控制。在脚本交互上，Krpano的action同时支持ActionScript3和Javascript两种脚本语言[12]，分别对应Flash和Html5显示方式。Krpano.html是场景的入口页面，通过读取Krpano.xml配置文件完成场景的加载和切换。每个场景都有对应的XML配置文件，完成对场景各个元素的加载和交互控制。

2.2 Krpano语法结构

Krpano通过对XML配置文件的解析，完成对场景、图片、音频、VR插件等元素的加载和控制。每个配置文件的根节点＜krpano>下包含了多种元素标签来实现不同的功能。相同的元素标签用name属性加以区分。＜include>元素可以引入不同的XML配置文件，相当于把配置文件里的内容全部复制到当前配置文件下。＜view>元素控制场景的视野，如起始视角、视角限制与缩放等。＜image>元素控制场景的全景图设置，包括全景图类型，渐进分辨率切片显示等，由框架自动生成。＜control>元素设置鼠标、键盘以及触摸设备对场景浏览的控制方式。＜plugin>元素作为插件元素，可以支持在场景空间中加载透明视频、3D音频、地图、模型、粒子特效、VR特效等多种功能扩展。＜hotspot>元素主要负责各个场景的热点切换。＜events>元素可调用各类型事件，例如全景载入的不同阶段以及鼠标触发的不同行为等。＜action>元素可自定义动态代码，用以完成各个元素的交互。

3 系统功能设计

3.1 系统总体设计

系统拓扑架构如图2所示。

图2 系统拓扑架构图

系统采用B/S架构，使用Java编程语言进行开发，整个系统包含执行层和数据层。执行层负责对底层文件进行读写，包括场景生成和配置文件的修改等操作。数据层负责系统XML数据的交互和数据库的存取。

3.2 系统功能设计

VR场景应该具备以下主要功能：

1）场景管理功能。主要负责对场景进行新增、删除和编辑操作。系统根据相关操作生成、合并XML配置文件。

2）多线程处理功能。通过调用Krpano自带的命令进行XML文件的自动化生成和合并操作。

3）元素管理功能。负责对场景下的各种元素进行新增、删除和编辑操作，如3D文字、转场链接、透明视频、模型、插件等。

4）可视化场景编辑功能。主要负责场景的可视化编辑，在后台新增相应的元素后或在编辑相关属性后对场景进行实时计算和显示。

5）脚本在线编辑功能。主要负责对脚本进行编辑和语法检查，配合可视化场景编辑器可以实时对脚本功能进行测试和调整。

4 功能实现

4.1 场景自动生成

Krpano框架自带的Bat批处理文件支持场景的生成[7]，但是繁多的命令和参数对于开发人员和用户来说操作极为不便并且非常难以扩展。通过对命令和参数的封装和处理，可以在系统后台中完成场景的自动化生成操作。关键代码如下：

图3 系统功能设计图

4.2 场景配置文件解析

Krpano的场景配置文件基于XML结构，目前对于XML结构的解析方式有两种：Dom（document object model）和 Sax（simple api for xml）。Dom 解析方式是将XML文档预先加载到内存，对文档的查找和编辑操作比较方便。Sax解析方式是基于事件驱动[10]，无需完全加载XML文档，效率较高，但是难以实现文档的排序和编辑操作。系统采用Java下主流的解析工具Dom4j，它同时具备Dom/Sax两种解析方式[14]，可以根据业务需要灵活选择。关键代码如下：

4.3 在线编辑器实现

Krpano场景的建立和交互都是基于XML配置文件进行配置的。传统的开发方式是基于文本编辑器对XML节点进行添加和移动[15]，对于开发人员和维护人员来说不仅要对Krpano的语法非常清楚，而且开发效率也不高，极易出错。Javascript是一种解释语言，用于对Web页面中元素的操作，而JQuery是对Javascript的封装，使页面Dom元素的操作更加高效、便捷。JQuery也可以方便地对XML文件进行解析和操作[16]，实现代码如下：

图4 场景信息流程图

4.4 界面实现

系统后台采用主流的Bootstrap响应式框架。该框架包含多种常见界面组件，包括导航菜单、表单、进度条、提示框、媒体对象、缩略图、代码编辑器等。Bootstrap支持积木式开发，可以方便地对各种组件自由组合，仅需要将使用到的插件（如缩略图）的js文件和css文件引用，就可以使用JQuery方便地调用该组件的各种功能。加载场景缩略图关键代码如下：

图5 场景可视化编辑视图

5 结论

通过对系统的测试使用和后续优化，本系统已经实现了对场景的上传、生成、元素编辑和交互脚本的编辑等功能，既满足了开发人员可视化、便捷化发布需求，也满足了维护人员对场景元素的自定义编辑。在用户体验上，支持了基于红蓝眼镜、谷歌纸盒、HTC Vive等设备的VR体验。在交互体验上，基于Krpano原生和第三方插件实现了全景视频漫游、3D展馆漫游、虚拟导游讲解、VR积分游戏等功能。目前本系统已经在旅游集散中心、景区、展馆等领域落地使用，既大大降低了开发成本，也为客户提高了服务效率，具有较强的应用价值和推广价值。