【摘要】与基于三维建模的漫游系统相比，基于真实图像的全景漫游系统由于采用真实的场景图片，具有数据量小、开发周期短、场景逼真等优点而在旅游、医疗、军事训练等领域得到越来越广泛的应用。全景漫游系统制作平台能够将拍摄的全景图像经过一系列的数学计算进行投影显示，控制实现不同场景间的自主漫游，结合计算机多媒体元素进行展示，真实地还原、定位场景，增强用户的交互性及身临其境的体验感。HTML5是浏览器技术发展的趋势，它使网页设计变得更加集成化.本文通过借鉴相关的开源HTML5解决方案，在传统的全景漫游制作平台基础上设计研发出一套能快速制作全景漫游系统的平台。

【关键词】虚拟漫游；全景图像；HTML5技术

Application of HTML5 Technology in Large - scale Scenes Roaming System

Liang Zhongyi

Anhui Broadcasting Movie And Television College，Hefei City，Anhui Province，230000

Abstract：Compared with the three-dimensional model-based roaming system， the panoramic roaming system based on real image is more suitable for tourism， medical treatment， military training and so on because of its real scene picture， small amount of data， short development period and realistic scene. More and more applications. The Panorama Roaming System is capable of displaying panoramic images by a series of mathematical calculations. It can realize autonomous roaming between different scenes， combine with computer multimedia elements to display， realistically restore， locate scenes and enhance user interaction. Immersive sense of experience. With the help of panorama roaming system， ordinary users can make their own virtual roaming system quickly and conveniently according to their own industry demand. It is of great significance to the promotion of panoramic roaming technology in various industries.

Key words：Virtual tour； panorama image； HTML5 technology

1 三維场景漫游系统的发展概述

目前开发三维虚拟漫游平台案例分为校园景色、城市景色、旅游景观和数码产品四个方面，其中数码产品的虚拟全景技术是运用技术更为先进的内景技术创作的，其余三项是运用虚拟全景外全景技术制作的，通过两种方法的应用，可以很清楚的了解虚拟全景漫游系统的广阔的应用。采用的虚拟漫游系统技术起點高，成本低廉。技术方面采用了全景拍摄，JAVA开发，PhotoShop照片拼合，Flash交互控制，动态网站开发等多项高端的计算机图象综合处理技术作品的导览性、交互操作性强。可与flash技术以及其它多媒体技术实现无缝结合。而投入方面则开发周期短，开发成本相对较低。与传统的三维建模渲染相比我们采用的拍摄制作周期更短，成本也相对较低。摄影的三维全景在发布过程中可以更具需求不同，灵活控制数据量的大小，而丰富的播放格式更适合网络传播。以HTML5技术为载体的全景技术制作虚拟漫游系统，具有复合的计算机技术含量，是目前计算机行业最热点的应用领域之一。

2HTML5及相关技术的发展

2.1 HTML5简介

HTML5是用于在万维网上构造和呈现内容的标记语言。它是HTML标准的第五个和当前版本，它由万维网联盟（W3C）在发布，以支持最新的多媒体，同时保持它易于人类可读性，并通过计算机和设备浏览器，解析器等。HTML5包括详细的处理模型，以鼓励更多的互操作实现；它扩展，改进和合理化可用于文档的标记，并且为复杂的web应用程序引入了标记和应用程序编程接口（API）。出于同样的原因，HTML5也是跨平台移动应用的候选者，因为它包含了使用低功耗设备设计的功能。它包括许多新的句法特征。为了本地包括和处理多媒体和图形内容，添加了新的，

2.3 CSS3技术分析

CSS是用于描述以标记语言编写的文档的表示的样式表语言，虽然最常用于设置以HTML和XHTML编写的网页和用户界面的视觉风格，但该语言可以应用于任何XML文档，包括纯XML，SVG和XUL，并且适用于在语音或其他媒体。除了HTML和JavaScript之外，CSS是大多数网站使用的基础技术，用于创建具有视觉吸引力的网页，Web应用程序的用户界面和许多移动应用程序的用户界面。CSS的设计主要是为了使文档内容与文档表示分离，包括布局，颜色和字体等方面。这种分离可以改进内容可访问性，在表示特性的规范中提供更多的灵活性和控制，通过在单独的.css文件中指定相关的CSS来使多个HTML页面共享格式化，并且减少结构内容中的复杂性和重复。

2.4 JavaScript技术分析

JavaScript是一种高级，动态，无类型和解释的编程语言，它已在ECMAScript语言规范中标准化。除了HTML和CSS，JavaScript是万维网内容生产的三个核心技术之一，大多数网站都使用它，Web浏览器都支持它而不需要插件。JavaScript是基于原型的第一类函数，使其成为一种多范式语言，支持面向对象，命令式和函数式编程风格。它有一个用于处理文本，数组，日期和正则表达式的API，但不包括任何I / O，例如网络，存储或图形设施，在嵌入它们的主机环境中依赖这些。

3基于HTML5技术的场景漫游系統的设计与实现

HTML5等建模工具建立了良好的复杂模型，可以使用各种文件格式进行存储。考虑到WebGL提供了一个由多边形方法构造的基本三维模型，它存储在三角形网络中。 VR-BWS软件部分是基于面向对象的技术。三维图形类，呈现场景类别的基本属性，如：颜色类，纹理类，材质类，对象面光源Dengjun方法使用Open GL功能包，软件，各组该模块使用OCX控件和COM接口作为标准。这可以大大节省开发时间，也提高了渲染速度。

每个对象在虚拟环境中包含用于存储虚拟环境的两个区域的形状和外观，模型文件的几何模型应该能够提供这两种信息。同时满足虚拟建模技术的三个常用指标 - 交互显示能力，交互操作能力，轻松构建虚拟对象模型需求的能力。Open GL很容易在各种变换，着色，光，纹理，交互和动画中实现模型，但它只能提供建模函数的基本几何元素，使得建模复杂模型的相对困难。 3DMAX如三维图形建模工具可以方便建立各種特殊物理模型的复杂，但是难以进行过程控制。因此，在3DMAX工具等复杂模型中建立了良好的Open GL，实现了控制和转换他们的方便。

虚拟现实的最重要的特征是在控制手感动态下的场景中的随机变化中的人类交互。并提高了显示性能的技术，包括硬件和软件方面。在硬件方面，采用高速DSP芯片进行实时数据采集和传输；软件建立了多线程，非阻塞漫游框架，并使用以下方法提高了场景的屏幕刷新率。

（1）双缓冲机制。还显示建立两个视频缓冲区，一个用于后台刷新屏幕，一个用于前台绘制。当需要更新时，切换最初用于刷新缓冲区的两个缓冲区用于映射新帧，而原始缓冲区用于绘制显示以进行刷新。场景越复杂，使用双缓冲机制的优越性越好，反映时间越长。而双缓冲机制可以解决屏幕显示过程中严重的“闪屏”现象。

（2）LOD（细节水平）细节的技术水平。根据两种不同类型的判断来选择不同模型的细节水平：一种是从视点距离具有高精度的物体绘制的距离远的物体以较低精度绘制的距离；双速设置由自行车不同的阈值，根据阈值模型选择不同的精度，然后平滑过渡技术显示。

（3）技术实例。场景通常需要相同数量的虚拟对象，例如完全相同的树。经常需要这样的特殊体，使用Open GL库的显示列表函数，将分别定义为单独的显示列表，预先生成的三维实体；然后通过其他位置的特殊体的几何变换获得。在图形显示中，只需调用所需的显示列表即可显示相应的三维立体，大幅节省内存，提高图形显示速度。

（4）预处理技术。在一些复杂的场景模型中，例如沿着道路的高层建筑物等，在预处理阶段，仅仅计算在场景内显示在观看者中并存储在动态显示中的视场消除了对不可见的对象和由图形之外的空间对象的观察定义的下降，从而在测试和计算时大大降低动态显示可见性。

（5）代替使用二维纹理的三维模型。漫游场景中非常复杂的物体的细节，例如斜坡上的植被，如果三维模型需要很多多边形，但实际动态显示时不需要显示它们非常精确，因此使用二维纹理而不是三维模型。该方法是复杂和特殊的身体图像粘贴在一个平面上并放置在场景中，在三维复杂场景中实时显示，使法线平面总是指向观察点。因此，这些复杂物体的形成与观察到的旋转方向的变化，改善了现场显示的实时性。

三维显示技术作为虚拟现实的关键技术之一。为了实现三维景观立体显示，首先必须与立体图像对的三维特征一致。关于上一代的电影可以遵循传统的单一网格生成方法生成的三维图形，即首先计算关于矢量的视点，并分离视点和第一颜色转换处理，可以获得左眼图像。然而，作为关于强图像的相关性的膜，对象通常仅仅是视差d，而其颜色和亮度值的差异非常小，可以利用它来实现三维片得到快速算法。

参考文献：

[1] 由延军. 基于序关系分析的视景仿真评估研究[J]. 电子世界. 2014（03）

[2] 阮奕熹. 多通道技术在视景仿真中的应用[J]. 信息与电脑（理论版）. 2010（06）

[3] 郭玺，薛青，颜国明，张申. 视景仿真中车辆在不同路面上运动状态的研究[J]. 系统仿真学报. 2016（S1）

[4] 邹腊梅，杨卫东. “视景仿真”课程教学设计方案[J]. 电气电子教学学报. 2014（05）

[5] 梁洪涛，康凤举，翟楠楠. 基于突变理论与梯形模糊数的海洋视景仿真逼真度综合评定[J]. 江苏大学学报（自然科学版）. 2014（01）

作者简介：梁中义（1978.12-） ，男，汉，安徽省合肥人，讲师，硕士研究生，研究方向：计算机应用。

基金项目：安徽省自然科学研究项目。