基于HTML5的全景图技术在社区规划中的应用

黄沛然 李莹利

摘要：该文以为长沙市燕山街社区为研究对象，将全景漫游技术的实例成果运用到社区规划过程中。基于实景的全景漫游展示直观真实地展现了场景信息，借助这一展示系统，为规划设计人员和社区居民之间搭建效的沟通桥梁，为公众参与畅通渠道，为规划设计成果搭建平台，切实提高社区规划的公众参与度。

关键词：全景图技术；社区规划；公众参与

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）30-0218-03

在城乡规划实施过程中综合考虑近期利益与长远利益、发展需要与群众要求，努力寻求规划的最大公约数，改善生态环境，提高城市宜居性[1]。改进前瞻性，科学性和针对性的规划，并进一步优化规划准备的规划和项目调试。充分调动各方的积极性，使得规划设计更符合民众需求与认可。

那么，究竟什么样的规划才是“接地气”的规划，如何才能综合考虑近期利益、发展需要与群众要求，从什么方面来提高规划编制的前瞻性、科学性、针对性，最终达到改善生态环境、提高城市宜居性？在城市规划中，只有抓住信息化时代潮流这一机遇，探索城市规划新途径，不做套路性规划，力求公众参与式规划，才能使规划真正达到符合民生，以人为本的目的。

社区规划作为城市规划系统的一部分，内容主要包括物质空间的建设和社区经济发展两大部分。它具有社会属性，社区规划强调人，人是主体，强调参与和互动。良好的规划是满足人们需求和发展的计划。因此，将公众参與社区规划用于研究是不寻常的[2]。本文以长沙市燕山街社区为例，通过现代科学信息与技术手段，将全景图技术运用到社区规划中去，在社区规划中，利用全景图的交互功能为公众参与开辟新的途径，从而增加公众参与度。最终打造符合民生的规划设计，并真正实现设计以人为本。

1全景漫游虚拟现实技术概述

1.1虚拟全景技术的发展现状

现在业内普遍认可：从现实世界到虚拟环境，有两种类型的虚拟现实增强技术， 分别是增强现实和增强虚拟环境[3]。现实世界的四种相关技术：计算机视觉，增强现实，增强的虚拟环境和虚拟现实统称为VR连续体。周忠、周伟等人在《虚拟现实增强技术概述》中指出：与早期相比，增强现实或增强虚拟环境的概念发生了很大变化，技术领域得到了极大的扩展，但其技术特征离不开以下三点：1）将虚拟和现实环境进行混合；2） 实时交互；3） 三维注册[4]。

随着虚拟现实技术的飞速发展，其应用领域也越来越广泛，虚拟现实技术的快速发展和逐步普及使得规划真人秀成为可能。“逼真、自然、交互性强、便捷” 的方向更加深入发展[5]。三维全景显示器以其交互性强，真实渲染，快速渐变，深度全景等特点，有效弥补了传统教学领域，地图领域，虚拟显示不现实等缺陷[6]。 它满足现代虚拟显示领域的基本交互需求，并且越来越受到关注。

全景技术作为虚拟现实技术的主要研究方向之一，对全景技术的要求越来越高[7]。国内外综合研究表明，目前，在互联网上显示全景图像的第三方技术包括VRML，X3D，Java，Quick Time，Flash等[8]。 这些显示方法需要特定的语言库并安装浏览器插件，并且不能跨平台发布。基于HTML5的全景图技术是一项相对较新的技术，它的出现可以解决开发，多平台应用，而且您不需要安装额外的插件， 您有统一的标准，但您还需要一定的编程基础。

1.2全景漫游虚拟现实技术的应用

基于全景图像的360°图像拼接，Google街景是使用此类技术的全景系统中最典型的全景图应用，通常，全景图主要用于地图导航[9]。董春霞，司占军对基于虚拟现实技术的校园全景漫游显示系统进行了相应的研究，为需要了解校园位置的用户提供更直接，更准确的信息，研究结果证实，虚拟现实技术在校园全景漫游展示系统中的应用得到了良好的用户体验[10]。综合来讲，全景图技术有开发成本低，显示效果直观，开发周期短的优点[11]。其重要意义在于为大多数想要了解学校外观的新生或用户提供更直接的方式和更准确地位置信息服务，并为学校发挥一定的宣传作用。

2基于HTML5的全景漫游技术在社区规划中的应用可行性分析

全景漫游系统是指物理建筑物和场景的模拟，计算机产生的虚拟图像再现现实世界[12]。基于HTML5的终端漫游展示系统成果可以运用到多个平台，不需要浏览器插件即可实现全景快速浏览，将其运用到社区进行全景漫游展示，其意义在于为社区居民及规划设计人员提供更直观的地理位置信息，同时，利用简单有效的互动手段，促进社区居民之间的沟通和沟通，为社区规划提供有效的公众参与渠道。社区环境如图1所示。

3设计思路与整体框架

首先，通过谷歌地图分析燕山街社区的位置信息，确定合理的空中定位点，并使用高清摄影设备进行定点照片采集；然后，在PTGui工具中自动识别和拼接所收集的照片，并且在PhotoShop中缝合在一起的原始图像经受诸如图像样式和尺寸的二次处理；最后，借助720云平台将photoshop处理完的全景图进行发布。其思路流程图如图2所示。

4社区规划中全景显示系统的设计与实现

4.1基础开发环境与软件说明

制作环境：Windows 7电脑系统、64位操作系统

运行软件：在Free Video To JPG Converter中，将拍摄高清视频以提取图片素材，并在PTGui中完成全景拼接。在PhotoShop中，处理马赛克全景图，并在720云平台中设置全景漫游。

4.2 位置点规划与视频素材采集

在收集图像信息之前，首先要制定合理的位置点计划以确定拍摄位置。根据燕山街社区的现状分析，社区主要是由社区居民建筑、商业建筑、燕山街商业街道、长岛路等主要骨架组成，外围被城市道路围合。经过实地考察与分析，共确定7个位置点进行拍摄，其中包括三个360°全景和四个90°全景，这些拍摄点主要位于交通交叉口及高建筑外视野开阔地带。全景图像采集位置点计划如图3所示。

图像素材的采集及处理：这里我们主要使用航拍机进行图片采集，在拍摄前，需调好摄像设备的曝光度、固定摄像拍摄参数，然后按照上述位置规划点进行逐一拍摄。在航拍社区全景图像素时，为保证拍摄安全及高清图像质量，避免在阴雨天气进行，尽量在光线充足的晴朗天气进行拍摄，航拍无人机的使用且须符合国家民用无人机规定，由持有无人机驾驶资格证书的专业技术人员进行操作。

另外，为了确保全景的整体效果，均匀地设定拍摄装置的主要参数。拍摄过程中确认拍摄设备定点悬停，然后开始进行匀速旋转拍摄，旋转角度为360度，拍摄区域为垂直方向120°为宜，最后正下方区域画面，完成拍摄。本文以中心位置规划点为例，共拍摄视频2分42秒，拍摄位置为中心位置规划点上空100米处，拍摄区域为垂直方向为以水平0°、正45°、负45度方向，以及设备正下方区域固定影像一张。

4.3 全景图像素材拼接与处理

利用Free Video to JPG Converter工具将拍摄好的全景视频进行分解处理，处理过程如图4所示。

首先将拍摄好的视频通过添加文件的方式置入待处理面板区域，选择下方的图片提取方式为每2秒提取一张，然后设置选择提取照片的路径位置，最后进行转换，即可以得到图4右侧的81张素材图片处理结果。

全景图像的拼接是在PTGui pro中完成。将81张素材图片及一张设备正下方固定影像一同加载进入PTGui pro软件中，拼接过程为：加载图像，对齐图像，调整控制点，优化图像和创建全景图。创建过程中如有软件自动拼接不够完善的地方可以进行手动微调优化。其工作界面如图5所示。

由PTGui直接合成的全景图像容易出现不完整和不一致，因此有必要使用PhotoShop来修改和拼接图像的拼接，阴影，色调和曝光值。亦可以借助 ps进行天空替换，最后将调整完善的图像进行长宽比为2：1的尺寸进行裁剪，最后导出合成完整的全景图JPG图片。

4.4 全景图的生成与发布

打开720 yun网页，注册账号之后，将生成的全景图 JPG图片进行上传， HTML5云端系统生成全景图预览界面，确认无误后进行全景图像的创建与发布。如图6所示。

在“全景图片”中，您将看到创建的作品。丰富场景的真是体验感。同时也可以进行不同视角的切换，如：正常视角，鱼眼视角，小行星视角，水晶球角等在使用者的交互功能上可以进行界面内定点评论、点赞、收藏分享等。

4.5 HTML5全景显示系统在社区规划中的应用

通过沉浸式全景漫游的方式，针对社区居民，特别是文化水平相对落后的老旧社区人群，方便了解社区周围生活环境变化，实现社区内的全景显示和互动漫游，快速实现社区整体浏览，实时位置显示，实时漫游等功能。能够为用户提供更直接，更准确的信息，以便了解社区位置信息。真正做到规划为了居民、规划适合居民、规划成果和居民共享。

另一方面，社区居可以通过沉浸式交互场景的体验，进一步畅通渠道促进规划公众参与，力求做到在社区规划中能够使得公众参的最大化，从根本上提高社区规划中公众的参与度，打造符合人需求的设计，树立规划部门阳光、公开的政府部门形象，它们共同创造了一个更好的生活环境，也为社区发挥了宣传作用。

沉浸式全景漫游技术分别运用到社区规划前期的现状分析与展示、中期的方案沟通与交流、后期的成果跟踪与反馈等过程中。如：社区规划过程中应用全景图技术可以展示街面现状，可以用于街道综合整治改造；在全景中可视化市政设施的位置可以改善市政设施的可视化管理。

5结论

自从虚拟全景技术引入市场以来，各个领域已开始尝试将虚拟现实引入其自己的行业。 本文用实际案例证实全景技术在社区规划领域应用的可行性，利用其便捷、直觀的视觉效果， 丰富使用者的视觉体验，其交互功能可以让用户在留言互动中增进邻里联系，提高社区居民的参与互动积极性， 在社区规划中达到设计人员与居民便捷高效沟通的目的。

参考文献：

[1] 长沙市城乡规划局.长沙市城乡规划局2016年城乡规划工作思路.http：//ghj.changsha.gov.cn/csup/frmShowNews.aspx？id=85261&typeId;=7.2016-11-7.

[2] 贺文萃.社区发展规划中的公众参与研究[D].重庆大学，2014.

[3] 周忠，周颐，肖江剑. 虚拟现实增强技术综述[J]. 中国科学：信息科学，2015，45（02）：157-180.

[4] Azuma R， Baillot Y， Behringer R， et al. Recent advances in augmented reality. Comput Graph Appl， 2001， 21： 34–47

[5] 李慧. 刍议校园 360 度全景展示技术的实现[J]. 科技资讯，2012， 9（18）： 211-212.

[6] 王晓峰， 李龙梅. DIBR实景图像的三维全景展示技术[J]. 测绘科学， 2014， 39（1）： 129-132.

[7] 庞广桦. 基于面片建模的三维全景图技术研究[D].兰州交通大学，2015.

[8] 石权洲， 黄国政. 基于 3ds Max 与 Pano2VR 的校园全景漫游系统[J]. 信息与电脑：理论版， 2014， 6（10）： 159-160.

[9] 豆帅涛，谢勇军. 基于全景图技术的Android订餐系统设计与实现[J]. 软件导刊，2015，14（05）：121-124.

[10] 董春侠，司占军.全景图技术在校园全景漫游中的应用研究[J].电脑知识与技术，2017，13（04）：210-211+220.

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

[12] 黄国政.基于Pano2VR的交互式校园全景漫游系统的研究[J].软件工程师，2015，18（01）：17-18.

【通联编辑：唐一东】