基于HTML5 WebGL技术的校园全景漫游系统研究

周昌权

摘要：该文对校园全景漫游系统设计进行了探究，该系统全景的实现是基于图像建模的，取材于"校园区实景图片"，通过使用相机及全景云台等设备在校园区选择景点拍摄采集图片，然后通过图像拼接处理软件生成全景视图，再采用Xml Dom创建节点树封装场景元素库供JS调用，最后运用WebGL渲染管线技术在Canvas容器中实现3D动画效果，从而实现整个系统功能。

关键词：虚拟现实；透视投影；渲染管线；节点树；封装

中图分类号：TP391 文献标识码：A 文章编号：1009-3044（2016）35-0086-03

Research on Campus Panoramic Roaming System Based on WebGL HTML5 Technology

ZHOU Chang-quan

（Anhui Finance & Trade Vocational College， Hefei 230601， China）

Abstract： This paper explores the design of campus roaming system， the system is based on the panoramic image modeling， based on the "campus pictures"， through the use of cameras and other equipment in the campus panoramic head area attractions shooting acquisition image， then splicing processing software to generate a panoramic view of the image， then use Xml to create Dom the node tree scene elements library call for JS package， the final realization of 3D animation in the Canvas container using the WebGL pipeline technology， so as to realize the function of the whole system.

Key words： virtual reality； perspective projection； rendering pipeline；node tree；encapsulation

1 概述

全景漫游技术可实现在网络虚拟环境中的交互性、沉浸性实景漫游体验。传统漫游技术在使用过程中主要还脱离不了安装插件等问题。而本系统综合了传统漫游技术优势，借鉴当今网络较流行的全景漫游系统技术经验，在HTML5框架基础上运用WebGL技术而设计开发的新兴校园三维全景漫游系统，它有效缓解和改善了传统技术的不足。

2 研究意义和必要性

传统的三维全景漫游技术大多需要插件支持或特定的播放格式才能在客户端实现漫游、人机交互等功能，图像的渲染能力也有限，这在损害用户体验的同时也大大阻碍了三维全景漫游技术的进一步发展。

现在三维全景漫游技术虽然在房地产业和旅游业等方面发展迅速，但广泛应用于高校信息化建设的还不多见，很多高校整个信息化系统里面，缺少针对校园整体环境的一个立体化、形象化的展示，只能通过文字加图片的传统网页形式来展示学校风貌，这样局限了学校自身形象建设发展，也不便于学生和家长对校园环境快速全面的了解，从而要花费大量的时间和力气去实地考察，成本费用大，受众面又窄。若利用三维全景漫游技术开发校园三维全景漫游系统，它将是一个面向大众，跨越时空界限，广泛展示校园风采，提升学院整体形象，宣传学校办学理念的非常重要的窗口和应用支撑平台。

本系统研发不仅采用了编程技术，还结合了摄影和图形图像编辑处理等技术手段，联系学校专业教育，它将程序设计專业、摄影专业和图形图像编辑处理等专业融合一起，这就决定了项目开发的成果可作为学校公共教育资源应用于专业教学中，为专业理论实训教学及相关专业学生实习实训提供丰富的任务案例，对重点专业和特色专业建设提供有力的支撑。同时，本项目开发技术性强，有较强的可操作性，对强化学生专业技能，提高学生实际动手能力，也起到十分重要的作用。

3 系统功能设计与规划

本系统具体分为三个部分：可伸缩导航热点地图、三维场景浏览视窗和控制菜单组。

导航热点地图部分包括校区景点分布图、图中根据不同景点设置了可供用户选择链接的场景切换点，用于选择切换浏览不同的场景，为了不影响三维场景主视窗的浏览效果，导航图区域可实现伸缩功能。

三维场景浏览视窗，由三维全景图片建模构成仿真场景视图，效果逼真，用户以第一人称的角色进行操作，提供用户上下180度、左右360度及远近全景视角的沉浸性漫游体验。支持不同场景间的相互切换，即用户可点击场景中导航按钮快速进入下一个场景浏览。

控制菜单组部分是由若干控制按钮组成，主要通过多个控制按钮来实现上下左右环视、全屏、远近视图模式和昼夜景视图模式切换等功能。系统功能结构如图1所示。

4 采取的关键技术与方法

4.1 全景图虚拟现实技术

本系统采用的三维全景虚拟现实技术是基于全景图像的真实场景虚拟现实技术，即利用照相机拍摄多张实景图像通过拼接获得完整的全景图像，再通过构建合适的空间模型，把多幅全景图像组合渲染成虚拟实景空间，并实现全方位互动式真实场景还原展示技术。

全景图像素材采集是基于数码相机拍摄而成，要达到最理想效果，先搭建360度全景云台，再选择起始取景点，按照某一个方向（顺时针或逆时针）旋转360度拍摄一组照片，图像间要有部分重叠，便于后期拼接和融合处理。根据显现方式的不同，拼接生成的全景图像有三种类型：球面、立方体和柱状全景图。

球面全景图用于展示大场景，构成场景图片素材较多，但采用非均匀采样建模方式，在效果显示时易变形。

柱状全景图易处理，但天空和地面两端效果显示不完整，三维空间感及用户的视野较差。

立方体全景图通过将实景素材纹理映射到立方体六个面上，可实现多角度变换，三维空间效果好，视野开阔。

本项目建模类型就是立方体全景图。

4.2 HTML5技术

HTML5中采用了Canvas标签技术增强图形处理能力。一个 Canvas 标签都有一个类似于绘图板的上下文“context ”，可通过调用API 函数绘制任意图形。

Canvas技术的getContext（）方法，可展现所绘图形的环境效果，使用格式是：Canvas.getContext（Context），其中可通过括弧里的参数context设定图形的类型和环境参数，但目前只能通过二维制图模式来绘制线条、路径、图像等图形。

例如：创建一个 WebGL的渲染环境，先要在网页中定义一个名为“canvas ”的标签单元。一个canvas单元可对应一个WebGL渲染环境。实现代码如下：

var myCanvasObject = document. createElement （“Canvas”）；

myCanvasObject.width=100； myCanvasObject.height=100；

var webgl = myCanvasObject.getContext（"experimental-webgl"）；

4.3 WebGL技术

透视投影模型，如图2所示。其中指向X轴方向的向量表示照相机镜头视角，中间立方体代表3d空间中的景物。模型中的大矩形面表示远裁剪平面，而小矩形面表示近裁剪平面。这两个裁剪平面和视场共同构成3d空间的一个子空间又称视见体或视锥体，通过它的形状和位置照相机可将模型从空间投射到近裁剪平面构成的视窗上，最终形成图像渲染区域。

透视投影就是将模型中的视锥体变换成立方体的过程。经变换后棱台的近剪裁平面的右上角顶点转变成立方体近平面的中心点（见图3中虚线所示）。由图3所示，这样就放大了视锥体较近的面，缩小了较远的面，产生近大远小的透视效果。

顶点数组：包含提交给GPU的顶点信息。

顶点着色器：处理顶点的程序。GPU将并行地在每个顶点上运行顶点着色器。顶点着色器的作用之一是得到顶点的位置信息。

图元装配：经过顶点着色器可获取顶点的位置，图元装配阶段将顶点连接成三角形（或连接成线段，或描述为点），然后考察新图形是否位于画布可见的区域内。可见区域内的图形进入下个步骤，其他的删除。

光栅化：经过图元装配得到了三角形的外形，光栅化阶段将用像素来填充三角形。经过光栅化，取得了由像素描述的三角形，而非由顶点描述的三角形。

片段着色器：处理像素的程序。GPU将并行地在光栅化得到的每个像素上运行片段着色器。片段着色器的作用之一是指定每个像素的颜色。

处理片元：这是深度测试阶段，测试像素的前后关系。被其他像素遮挡的像素是无法被看到的，将在测试里被丢弃。

帧缓冲：到达帧缓冲区的像素将被显示到屏幕上。

其中图元装配，光栅化，处理片元都是自动完成的，而真正需要考量设计的核心点是顶点着色器和片段着色器。

4.4 XML技术

运用节点树建立XML文档[5]，用来标记场景中的各素材元素对象属性值（如ID值、文本、文件存储路径等），便于JS解析调用，下述是本系统XML文档中某场景节点树代码与结构模型（如图5所示）。某场景节点树标签代码：

4.6 技術路线

编程技术路线如图7所示。通过节点树创建XML文档，标记六方体片图、文本和背景音乐等元素属性值（如ID、大小、位置等），便于在JS文件中解析调用，再利用JavaScript 脚本语言和 WebGL 渲染管线，建立js文件来完成三维场景渲染、导航热点地图和鼠标等事件的配置、编辑处理，最后建立Html5文件确定场景容器确定场景容器（container）大小，封装调用JS文件，完成调试工作并发布到IIS服务器端。

5 结束语

现全景漫游系统应用越来越广，实现手段也多种多样，因篇幅限制，本文只针对系统开发所涉及的关键技术与切入点作了简要阐述，所走的有别传统的技术路线，可供业内相关人员参考。

参考文献：

[1] 周辉， 程陈， 任海军， 等. 基于HTML5的全景图展示[J]. 微型机与应用， 2012， 31（20）： 77-78.

[2] 刘海娜. 基于HTML5的全景漫游技术研究[D]. 郑州： 郑州大学， 2013.

[3] 刘海娜， 林予松， 王宗敏. 利用HTML5开发全景漫游系统[J]. 中国教育网络， 2013（7）： 54-56.

[4] Matsuda K， Lea R. WebGL编程指南[M]. 谢光磊，译. 北京： 电子工业出版社， 2014.

[5] David Hunter， Jeff Rafter， Joe Fawcett . XML入门经典[M]，吴文国，译.4版.北京： 清华大学出版社， 2009.

[6] JavaScript 教程[EB/OL].http：//www.w3school.com.cn/js/index.asp.