三维全景在实训基地漫游系统中应用研究.docVIP

三维全景在实训基地漫游系统中的应用研究 　　摘 要：全景漫游技术是一种基于图像绘制的虚拟现实技术，在“互联网+”的环境下，其良好的交互性和沉浸性，已逐渐在旅游景点虚拟漫游、房产建筑实景展示、文化教育场所三维呈现等领域得到应用。文章以实现杭州轻工技师学院装潢实训工场的全景漫游为例，介绍在全景图的基础上，结合Web标准HTML5和3D绘图标准WebGL，使用第三方库文件Three.js，达到场景水平和垂直方向的自由转换，使用户在网上就能观看实训基地的全景效果，具有身临其境的感觉。 　　关键词：虚拟漫游；全景图；WebGL；Three.js 　　中图分类号：G434 文献标志码：A 文章编号：1673-8454（2016）18-0078-03 　　一、引言 　　“互联网+”是创新2.0下互联网发展的新业态，是利用信息通信技术以及互联网平台，让互联网与传统行业进行深度融合，创造新的发展生态[1]。在“互联网+”的各个领域中，最基础、发展最快的就是Web的应用，人们不再满足于二维平面的网络体验，而是希望在访问网页的过程中具有更鲜活的场景和更真实的感受。网页正逐渐向交互式三维模式发展，其中全景漫游技术已逐渐在旅游景点虚拟漫游、房产建筑实景展示、文化教育场所三维呈现等领域得到应用。 　　但是，早期的网页三维技术如Java Applet并未成熟，不仅编程接口复杂，需要安装相应的渲染插件，而且创建的页面交互性能简单，画面质量相对粗糙，其主要原因就在于Java Applet在进行图形渲染时，并没有直接利用到图形硬件本身的加速功能[2]。而3D绘图标准WebGL则采用JavaScript脚本语言进行友好的交互式三维图形的描述，较好地避免了在浏览器上安装相应插件的步骤。同时，通过统一的跨平台图形程序接口OpenGL ES2.0，实现了利用底层图形硬件进行图形渲染。 　　二、 关键技术 　　1.HTML5标准及canvas标签 　　HTML5标准规范的出现，为多媒体在各种终端设备上的加载提供了新的支持。简单说来，HTML5其实可以看成是HTML、CSS、JavaScript等技术的组合体，该标准在原有的基础上，增加了本地存储、设备兼容、三维图形及特效等新的特性。本文主要利用的是canvas标签，它为网页提供了更绚丽的视觉体验，具备直接在浏览器上绘制矢量图的能力。 　　Canvas就像是一个画板，所有的绘制工作可以在 JavaScript 内部完成，通过id的调用来寻找canvas元素，从而创建context 对象。context对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符和插入图像的方法。 　　2.3D绘图标准WebGL 　　WebGL是一种3D绘图标准，它实现了将JavaScript和OpenGL ES 2.0有效结合在一起，通过增加OpenGL ES 2.0的JavaScript绑定，为HTML5中的canvas标签提供底层硬件的3D加速渲染，这样开发人员就可以直接通过系统显卡在普通浏览器中展示全景漫游，还能创建复杂的导航和数据视觉化[3]。由此可见，WebGL标准脱离了传统三维网页制作所需的专用插件渲染，大大提高了不同终端设备的3D图形渲染速度，甚至可以用来设计3D网页游戏等。目前已有多种基于WebGL技术的JavaScript库被应用在3D图形创建中，如SceneJS、PhiloGL、Babylon.js、Three.js等，本文主要应用Three.js开发框架。 　　3.Three.js框架 　　Three.js是JavaScript编写的WebGL第三方库，依据WebGL规范，对底层的图形接口进行封装。它提供了一个JavaScript API，可以在没有插件的情况下进行2D/3D硬件加速渲染，减轻了开发者的负担并加快了开发速度。同时，Three.js还支持多种渲染器（renderer）进行场景制作，能够提供点、线、面、向量、矩阵等一系列三维创建时所需的基本元素，并可以便捷地将建镜头（cameras）、光线（lights）、物体（objects）等对象添加到场景（scene）中[4]。Three.js在全景漫游浏览时，与内部主要元素之间的关系如图1所示。 　　三、漫游系统的构建 　　1.全景图获取 　　在网页上展示虚拟漫游的效果时，一般有3D建模和全景摄影两种方式。由于全景图片直接由实物拍摄得到，因此，只要做好前期拍摄和后期图片处理，就能得到比建模更真实的视觉感受。本文所得到的虚拟漫游，就是在全景图的基础上实现的。 　　（1）全景图的拍摄 　　由于全景拍摄需要捕捉场景360°范围内的信息，因此要采用广角镜头来拍摄，甚至可以使用鱼眼镜头。但由于鱼眼镜头镜片结构复杂，边缘和中央进光存在差异