论文部分内容阅读
摘 要：全景漫游技术是一种基于图像绘制的虚拟现实技术，在“互联网 ”的环境下，其良好的交互性和沉浸性，已逐渐在旅游景点虚拟漫游、房产建筑实景展示、文化教育场所三维呈现等领域得到应用。文章以实现杭州轻工技师学院装潢实训工场的全景漫游为例，介绍在全景图的基础上，结合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°范围内的信息，因此要采用广角镜头来拍摄，甚至可以使用鱼眼镜头。但由于鱼眼镜头镜片结构复杂，边缘和中央进光存在差异，对使用者的技术水平要求比较高，因此这里所采用的是一般的广角数码相机，同时配合三脚架和云台，以保证拍摄时位置的水平。在每个场景的拍摄中，将云台设定为水平方向每60°为一个结点，垂直方向每30°为一个结点，以保证所得的照片中有至少20%的重叠量，一共拍摄3组，每组6张照片。
而对于环境的要求则是能见度高、光线充足，避免出现一亮一暗的场景。在进行室内拍摄时，一般以内部光照为主，如果室外光线过于明亮，就可能导致图中出现较多过暗的角落，影响拼接效果。全景拍摄需要表现场景的全局信息，考虑到在观看时需要旋转场景，因此拍摄点一般选在场景的几何中心或某个较高位置，同时避免在拍摄时镜头里包含运动物体。
（2）全景图的拼接
在得到场景图后，可以使用Photoshop、PhotoImpact、Fireworks等图像处理软件对它们进行去噪、杂色处理和色彩色调等相关调整，使得同一场景的曝光程度和色彩浓度基本保持一致。本文所采用的图像处理软件是Photoshop CS3，同时该软件能智能化地完成全景图的拼接，步骤依次为选择文件菜单、自动、photomerge（照片拼合）。最后使用变形工具和裁剪工具把完整部分切割出来，装潢实训工场的全景图如图2所示。
2.三维环境的设置
（1）镜头设置
最终实现的装潢实训工场全景漫游如图3所示。
四、结束语
本文介绍了基于装潢实训工场全景图的虚拟漫游实现技术，采用HTML5和WebGL相结合的模式，创建出具有良好交互性和沉浸性的三维网页效果，提供了较二维网页更友好的用户体验和形象生动的画面效果。WebGL 是新一代Web3D 技术，也是未来三维网页开发的核心技术，加之与规范的Web标准HTML5的紧密配合，必然成为三维网页应用的趋势。同时对第三方库文件Three.Js进行研究分析，实现了全景图的仿真视角和相关鼠标事件的操作，具有较强的应用价值。
参考文献：
[1]百度百科.“互联网 ”[DB/OL].http：//baike.baidu.com/link？url=z3Tj1V657OaXjPEIhtH1wXaUC7_sfIz 6udmtmknF _XSljkJpo_YZkq674SElGIhISv3-RHn9h7 lTZGD85xE-J_.
[2]方强.基于WebGL 的3D图形引擎设计与实现[D].合肥：安徽大学，2013.
[3]百度百科.”OpenGL ES” [DB/OL].http：//baike.baidu.com/link？url=P0fvVPhRHIQ4Z7Af8w1YyYXa4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.
[4]许虎，聂云峰，舒坚.基于中间件的瓦片地图服务设计与实现[J].地球信息科学学报，2010（4）：562-567.
[5]刘爱华，韩勇等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012（5）：79-81.
[6]周辉，程陈，任海军，王丹宁等.基于HTML5的全景图展示[J].微型机与应用，2012（20）.
（编辑：鲁利瑞）
关键词：虚拟漫游；全景图；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°范围内的信息，因此要采用广角镜头来拍摄，甚至可以使用鱼眼镜头。但由于鱼眼镜头镜片结构复杂，边缘和中央进光存在差异，对使用者的技术水平要求比较高，因此这里所采用的是一般的广角数码相机，同时配合三脚架和云台，以保证拍摄时位置的水平。在每个场景的拍摄中，将云台设定为水平方向每60°为一个结点，垂直方向每30°为一个结点，以保证所得的照片中有至少20%的重叠量，一共拍摄3组，每组6张照片。
而对于环境的要求则是能见度高、光线充足，避免出现一亮一暗的场景。在进行室内拍摄时，一般以内部光照为主，如果室外光线过于明亮，就可能导致图中出现较多过暗的角落，影响拼接效果。全景拍摄需要表现场景的全局信息，考虑到在观看时需要旋转场景，因此拍摄点一般选在场景的几何中心或某个较高位置，同时避免在拍摄时镜头里包含运动物体。
（2）全景图的拼接
在得到场景图后，可以使用Photoshop、PhotoImpact、Fireworks等图像处理软件对它们进行去噪、杂色处理和色彩色调等相关调整，使得同一场景的曝光程度和色彩浓度基本保持一致。本文所采用的图像处理软件是Photoshop CS3，同时该软件能智能化地完成全景图的拼接，步骤依次为选择文件菜单、自动、photomerge（照片拼合）。最后使用变形工具和裁剪工具把完整部分切割出来，装潢实训工场的全景图如图2所示。
2.三维环境的设置
（1）镜头设置
最终实现的装潢实训工场全景漫游如图3所示。
四、结束语
本文介绍了基于装潢实训工场全景图的虚拟漫游实现技术，采用HTML5和WebGL相结合的模式，创建出具有良好交互性和沉浸性的三维网页效果，提供了较二维网页更友好的用户体验和形象生动的画面效果。WebGL 是新一代Web3D 技术，也是未来三维网页开发的核心技术，加之与规范的Web标准HTML5的紧密配合，必然成为三维网页应用的趋势。同时对第三方库文件Three.Js进行研究分析，实现了全景图的仿真视角和相关鼠标事件的操作，具有较强的应用价值。
参考文献：
[1]百度百科.“互联网 ”[DB/OL].http：//baike.baidu.com/link？url=z3Tj1V657OaXjPEIhtH1wXaUC7_sfIz 6udmtmknF _XSljkJpo_YZkq674SElGIhISv3-RHn9h7 lTZGD85xE-J_.
[2]方强.基于WebGL 的3D图形引擎设计与实现[D].合肥：安徽大学，2013.
[3]百度百科.”OpenGL ES” [DB/OL].http：//baike.baidu.com/link？url=P0fvVPhRHIQ4Z7Af8w1YyYXa4IePYK45dQ4XL3iCD012kn-AE5Tm2lLyoLH5Iq6ut FGM2jFGM8cwoIecEv9s3a.
[4]许虎，聂云峰，舒坚.基于中间件的瓦片地图服务设计与实现[J].地球信息科学学报，2010（4）：562-567.
[5]刘爱华，韩勇等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012（5）：79-81.
[6]周辉，程陈，任海军，王丹宁等.基于HTML5的全景图展示[J].微型机与应用，2012（20）.
（编辑：鲁利瑞）