基于HTML5的全景圖技術(shù)在社區(qū)規(guī)劃中的應(yīng)用

黃沛然 李瑩利

摘要：該文以為長(zhǎng)沙市燕山街社區(qū)為研究對(duì)象，將全景漫游技術(shù)的實(shí)例成果運(yùn)用到社區(qū)規(guī)劃過程中?；趯?shí)景的全景漫游展示直觀真實(shí)地展現(xiàn)了場(chǎng)景信息，借助這一展示系統(tǒng)，為規(guī)劃設(shè)計(jì)人員和社區(qū)居民之間搭建效的溝通橋梁，為公眾參與暢通渠道，為規(guī)劃設(shè)計(jì)成果搭建平臺(tái)，切實(shí)提高社區(qū)規(guī)劃的公眾參與度。

關(guān)鍵詞：全景圖技術(shù)；社區(qū)規(guī)劃；公眾參與

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）30-0218-03

在城鄉(xiāng)規(guī)劃實(shí)施過程中綜合考慮近期利益與長(zhǎng)遠(yuǎn)利益、發(fā)展需要與群眾要求，努力尋求規(guī)劃的最大公約數(shù)，改善生態(tài)環(huán)境，提高城市宜居性[1]。改進(jìn)前瞻性，科學(xué)性和針對(duì)性的規(guī)劃，并進(jìn)一步優(yōu)化規(guī)劃準(zhǔn)備的規(guī)劃和項(xiàng)目調(diào)試。充分調(diào)動(dòng)各方的積極性，使得規(guī)劃設(shè)計(jì)更符合民眾需求與認(rèn)可。

那么，究竟什么樣的規(guī)劃才是“接地氣”的規(guī)劃，如何才能綜合考慮近期利益、發(fā)展需要與群眾要求，從什么方面來提高規(guī)劃編制的前瞻性、科學(xué)性、針對(duì)性，最終達(dá)到改善生態(tài)環(huán)境、提高城市宜居性？在城市規(guī)劃中，只有抓住信息化時(shí)代潮流這一機(jī)遇，探索城市規(guī)劃新途徑，不做套路性規(guī)劃，力求公眾參與式規(guī)劃，才能使規(guī)劃真正達(dá)到符合民生，以人為本的目的。

社區(qū)規(guī)劃作為城市規(guī)劃系統(tǒng)的一部分，內(nèi)容主要包括物質(zhì)空間的建設(shè)和社區(qū)經(jīng)濟(jì)發(fā)展兩大部分。它具有社會(huì)屬性，社區(qū)規(guī)劃強(qiáng)調(diào)人，人是主體，強(qiáng)調(diào)參與和互動(dòng)。良好的規(guī)劃是滿足人們需求和發(fā)展的計(jì)劃。因此，將公眾參與社區(qū)規(guī)劃用于研究是不尋常的[2]。本文以長(zhǎng)沙市燕山街社區(qū)為例，通過現(xiàn)代科學(xué)信息與技術(shù)手段，將全景圖技術(shù)運(yùn)用到社區(qū)規(guī)劃中去，在社區(qū)規(guī)劃中，利用全景圖的交互功能為公眾參與開辟新的途徑，從而增加公眾參與度。最終打造符合民生的規(guī)劃設(shè)計(jì)，并真正實(shí)現(xiàn)設(shè)計(jì)以人為本。

1全景漫游虛擬現(xiàn)實(shí)技術(shù)概述

1.1虛擬全景技術(shù)的發(fā)展現(xiàn)狀

現(xiàn)在業(yè)內(nèi)普遍認(rèn)可：從現(xiàn)實(shí)世界到虛擬環(huán)境，有兩種類型的虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)， 分別是增強(qiáng)現(xiàn)實(shí)和增強(qiáng)虛擬環(huán)境[3]?，F(xiàn)實(shí)世界的四種相關(guān)技術(shù)：計(jì)算機(jī)視覺，增強(qiáng)現(xiàn)實(shí)，增強(qiáng)的虛擬環(huán)境和虛擬現(xiàn)實(shí)統(tǒng)稱為VR連續(xù)體。周忠、周偉等人在《虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)概述》中指出：與早期相比，增強(qiáng)現(xiàn)實(shí)或增強(qiáng)虛擬環(huán)境的概念發(fā)生了很大變化，技術(shù)領(lǐng)域得到了極大的擴(kuò)展，但其技術(shù)特征離不開以下三點(diǎn)：1）將虛擬和現(xiàn)實(shí)環(huán)境進(jìn)行混合；2） 實(shí)時(shí)交互；3） 三維注冊(cè)[4]。

隨著虛擬現(xiàn)實(shí)技術(shù)的飛速發(fā)展，其應(yīng)用領(lǐng)域也越來越廣泛，虛擬現(xiàn)實(shí)技術(shù)的快速發(fā)展和逐步普及使得規(guī)劃真人秀成為可能?！氨普妗⒆匀?、交互性強(qiáng)、便捷” 的方向更加深入發(fā)展[5]。三維全景顯示器以其交互性強(qiáng)，真實(shí)渲染，快速漸變，深度全景等特點(diǎn)，有效彌補(bǔ)了傳統(tǒng)教學(xué)領(lǐng)域，地圖領(lǐng)域，虛擬顯示不現(xiàn)實(shí)等缺陷[6]。 它滿足現(xiàn)代虛擬顯示領(lǐng)域的基本交互需求，并且越來越受到關(guān)注。

全景技術(shù)作為虛擬現(xiàn)實(shí)技術(shù)的主要研究方向之一，對(duì)全景技術(shù)的要求越來越高[7]。國(guó)內(nèi)外綜合研究表明，目前，在互聯(lián)網(wǎng)上顯示全景圖像的第三方技術(shù)包括VRML，X3D，Java，Quick Time，F(xiàn)lash等[8]。 這些顯示方法需要特定的語言庫并安裝瀏覽器插件，并且不能跨平臺(tái)發(fā)布。基于HTML5的全景圖技術(shù)是一項(xiàng)相對(duì)較新的技術(shù)，它的出現(xiàn)可以解決開發(fā)，多平臺(tái)應(yīng)用，而且您不需要安裝額外的插件， 您有統(tǒng)一的標(biāo)準(zhǔn)，但您還需要一定的編程基礎(chǔ)。

1.2全景漫游虛擬現(xiàn)實(shí)技術(shù)的應(yīng)用

基于全景圖像的360°圖像拼接，Google街景是使用此類技術(shù)的全景系統(tǒng)中最典型的全景圖應(yīng)用，通常，全景圖主要用于地圖導(dǎo)航[9]。董春霞，司占軍對(duì)基于虛擬現(xiàn)實(shí)技術(shù)的校園全景漫游顯示系統(tǒng)進(jìn)行了相應(yīng)的研究，為需要了解校園位置的用戶提供更直接，更準(zhǔn)確的信息，研究結(jié)果證實(shí)，虛擬現(xiàn)實(shí)技術(shù)在校園全景漫游展示系統(tǒng)中的應(yīng)用得到了良好的用戶體驗(yàn)[10]。綜合來講，全景圖技術(shù)有開發(fā)成本低，顯示效果直觀，開發(fā)周期短的優(yōu)點(diǎn)[11]。其重要意義在于為大多數(shù)想要了解學(xué)校外觀的新生或用戶提供更直接的方式和更準(zhǔn)確地位置信息服務(wù)，并為學(xué)校發(fā)揮一定的宣傳作用。

2基于HTML5的全景漫游技術(shù)在社區(qū)規(guī)劃中的應(yīng)用可行性分析

全景漫游系統(tǒng)是指物理建筑物和場(chǎng)景的模擬，計(jì)算機(jī)產(chǎn)生的虛擬圖像再現(xiàn)現(xiàn)實(shí)世界[12]。基于HTML5的終端漫游展示系統(tǒng)成果可以運(yùn)用到多個(gè)平臺(tái)，不需要瀏覽器插件即可實(shí)現(xiàn)全景快速瀏覽，將其運(yùn)用到社區(qū)進(jìn)行全景漫游展示，其意義在于為社區(qū)居民及規(guī)劃設(shè)計(jì)人員提供更直觀的地理位置信息，同時(shí)，利用簡(jiǎn)單有效的互動(dòng)手段，促進(jìn)社區(qū)居民之間的溝通和溝通，為社區(qū)規(guī)劃提供有效的公眾參與渠道。社區(qū)環(huán)境如圖1所示。

3設(shè)計(jì)思路與整體框架

首先，通過谷歌地圖分析燕山街社區(qū)的位置信息，確定合理的空中定位點(diǎn)，并使用高清攝影設(shè)備進(jìn)行定點(diǎn)照片采集；然后，在PTGui工具中自動(dòng)識(shí)別和拼接所收集的照片，并且在PhotoShop中縫合在一起的原始圖像經(jīng)受諸如圖像樣式和尺寸的二次處理；最后，借助720云平臺(tái)將photoshop處理完的全景圖進(jìn)行發(fā)布。其思路流程圖如圖2所示。

4社區(qū)規(guī)劃中全景顯示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

4.1基礎(chǔ)開發(fā)環(huán)境與軟件說明

制作環(huán)境：Windows 7電腦系統(tǒng)、64位操作系統(tǒng)

運(yùn)行軟件：在Free Video To JPG Converter中，將拍攝高清視頻以提取圖片素材，并在PTGui中完成全景拼接。在PhotoShop中，處理馬賽克全景圖，并在720云平臺(tái)中設(shè)置全景漫游。

4.2 位置點(diǎn)規(guī)劃與視頻素材采集

在收集圖像信息之前，首先要制定合理的位置點(diǎn)計(jì)劃以確定拍攝位置。根據(jù)燕山街社區(qū)的現(xiàn)狀分析，社區(qū)主要是由社區(qū)居民建筑、商業(yè)建筑、燕山街商業(yè)街道、長(zhǎng)島路等主要骨架組成，外圍被城市道路圍合。經(jīng)過實(shí)地考察與分析，共確定7個(gè)位置點(diǎn)進(jìn)行拍攝，其中包括三個(gè)360°全景和四個(gè)90°全景，這些拍攝點(diǎn)主要位于交通交叉口及高建筑外視野開闊地帶。全景圖像采集位置點(diǎn)計(jì)劃如圖3所示。

圖像素材的采集及處理：這里我們主要使用航拍機(jī)進(jìn)行圖片采集，在拍攝前，需調(diào)好攝像設(shè)備的曝光度、固定攝像拍攝參數(shù)，然后按照上述位置規(guī)劃點(diǎn)進(jìn)行逐一拍攝。在航拍社區(qū)全景圖像素時(shí)，為保證拍攝安全及高清圖像質(zhì)量，避免在陰雨天氣進(jìn)行，盡量在光線充足的晴朗天氣進(jìn)行拍攝，航拍無人機(jī)的使用且須符合國(guó)家民用無人機(jī)規(guī)定，由持有無人機(jī)駕駛資格證書的專業(yè)技術(shù)人員進(jìn)行操作。

另外，為了確保全景的整體效果，均勻地設(shè)定拍攝裝置的主要參數(shù)。拍攝過程中確認(rèn)拍攝設(shè)備定點(diǎn)懸停，然后開始進(jìn)行勻速旋轉(zhuǎn)拍攝，旋轉(zhuǎn)角度為360度，拍攝區(qū)域?yàn)榇怪狈较?20°為宜，最后正下方區(qū)域畫面，完成拍攝。本文以中心位置規(guī)劃點(diǎn)為例，共拍攝視頻2分42秒，拍攝位置為中心位置規(guī)劃點(diǎn)上空100米處，拍攝區(qū)域?yàn)榇怪狈较驗(yàn)橐运?°、正45°、負(fù)45度方向，以及設(shè)備正下方區(qū)域固定影像一張。

4.3 全景圖像素材拼接與處理

利用Free Video to JPG Converter工具將拍攝好的全景視頻進(jìn)行分解處理，處理過程如圖4所示。

首先將拍攝好的視頻通過添加文件的方式置入待處理面板區(qū)域，選擇下方的圖片提取方式為每2秒提取一張，然后設(shè)置選擇提取照片的路徑位置，最后進(jìn)行轉(zhuǎn)換，即可以得到圖4右側(cè)的81張素材圖片處理結(jié)果。

全景圖像的拼接是在PTGui pro中完成。將81張素材圖片及一張?jiān)O(shè)備正下方固定影像一同加載進(jìn)入PTGui pro軟件中，拼接過程為：加載圖像，對(duì)齊圖像，調(diào)整控制點(diǎn)，優(yōu)化圖像和創(chuàng)建全景圖。創(chuàng)建過程中如有軟件自動(dòng)拼接不夠完善的地方可以進(jìn)行手動(dòng)微調(diào)優(yōu)化。其工作界面如圖5所示。

由PTGui直接合成的全景圖像容易出現(xiàn)不完整和不一致，因此有必要使用PhotoShop來修改和拼接圖像的拼接，陰影，色調(diào)和曝光值。亦可以借助 ps進(jìn)行天空替換，最后將調(diào)整完善的圖像進(jìn)行長(zhǎng)寬比為2：1的尺寸進(jìn)行裁剪，最后導(dǎo)出合成完整的全景圖JPG圖片。

4.4 全景圖的生成與發(fā)布

打開720 yun網(wǎng)頁，注冊(cè)賬號(hào)之后，將生成的全景圖 JPG圖片進(jìn)行上傳， HTML5云端系統(tǒng)生成全景圖預(yù)覽界面，確認(rèn)無誤后進(jìn)行全景圖像的創(chuàng)建與發(fā)布。如圖6所示。

在“全景圖片”中，您將看到創(chuàng)建的作品。豐富場(chǎng)景的真是體驗(yàn)感。同時(shí)也可以進(jìn)行不同視角的切換，如：正常視角，魚眼視角，小行星視角，水晶球角等在使用者的交互功能上可以進(jìn)行界面內(nèi)定點(diǎn)評(píng)論、點(diǎn)贊、收藏分享等。

4.5 HTML5全景顯示系統(tǒng)在社區(qū)規(guī)劃中的應(yīng)用

通過沉浸式全景漫游的方式，針對(duì)社區(qū)居民，特別是文化水平相對(duì)落后的老舊社區(qū)人群，方便了解社區(qū)周圍生活環(huán)境變化，實(shí)現(xiàn)社區(qū)內(nèi)的全景顯示和互動(dòng)漫游，快速實(shí)現(xiàn)社區(qū)整體瀏覽，實(shí)時(shí)位置顯示，實(shí)時(shí)漫游等功能。能夠?yàn)橛脩籼峁└苯樱鼫?zhǔn)確的信息，以便了解社區(qū)位置信息。真正做到規(guī)劃為了居民、規(guī)劃適合居民、規(guī)劃成果和居民共享。

另一方面，社區(qū)居可以通過沉浸式交互場(chǎng)景的體驗(yàn)，進(jìn)一步暢通渠道促進(jìn)規(guī)劃公眾參與，力求做到在社區(qū)規(guī)劃中能夠使得公眾參的最大化，從根本上提高社區(qū)規(guī)劃中公眾的參與度，打造符合人需求的設(shè)計(jì)，樹立規(guī)劃部門陽光、公開的政府部門形象，它們共同創(chuàng)造了一個(gè)更好的生活環(huán)境，也為社區(qū)發(fā)揮了宣傳作用。

沉浸式全景漫游技術(shù)分別運(yùn)用到社區(qū)規(guī)劃前期的現(xiàn)狀分析與展示、中期的方案溝通與交流、后期的成果跟蹤與反饋等過程中。如：社區(qū)規(guī)劃過程中應(yīng)用全景圖技術(shù)可以展示街面現(xiàn)狀，可以用于街道綜合整治改造；在全景中可視化市政設(shè)施的位置可以改善市政設(shè)施的可視化管理。

5結(jié)論

自從虛擬全景技術(shù)引入市場(chǎng)以來，各個(gè)領(lǐng)域已開始嘗試將虛擬現(xiàn)實(shí)引入其自己的行業(yè)。 本文用實(shí)際案例證實(shí)全景技術(shù)在社區(qū)規(guī)劃領(lǐng)域應(yīng)用的可行性，利用其便捷、直觀的視覺效果， 豐富使用者的視覺體驗(yàn)，其交互功能可以讓用戶在留言互動(dòng)中增進(jìn)鄰里聯(lián)系，提高社區(qū)居民的參與互動(dòng)積極性， 在社區(qū)規(guī)劃中達(dá)到設(shè)計(jì)人員與居民便捷高效溝通的目的。

參考文獻(xiàn)：

[1] 長(zhǎng)沙市城鄉(xiāng)規(guī)劃局.長(zhǎng)沙市城鄉(xiāng)規(guī)劃局2016年城鄉(xiāng)規(guī)劃工作思路.http：//ghj.changsha.gov.cn/csup/frmShowNews.aspx？id=85261&typeId;=7.2016-11-7.

[2] 賀文萃.社區(qū)發(fā)展規(guī)劃中的公眾參與研究[D].重慶大學(xué)，2014.

[3] 周忠，周頤，肖江劍. 虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)綜述[J]. 中國(guó)科學(xué)：信息科學(xué)，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 度全景展示技術(shù)的實(shí)現(xiàn)[J]. 科技資訊，2012， 9（18）： 211-212.

[6] 王曉峰， 李龍梅. DIBR實(shí)景圖像的三維全景展示技術(shù)[J]. 測(cè)繪科學(xué)， 2014， 39（1）： 129-132.

[7] 龐廣樺. 基于面片建模的三維全景圖技術(shù)研究[D].蘭州交通大學(xué)，2015.

[8] 石權(quán)洲， 黃國(guó)政. 基于 3ds Max 與 Pano2VR 的校園全景漫游系統(tǒng)[J]. 信息與電腦：理論版， 2014， 6（10）： 159-160.

[9] 豆帥濤，謝勇軍. 基于全景圖技術(shù)的Android訂餐系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件導(dǎo)刊，2015，14（05）：121-124.

[10] 董春俠，司占軍.全景圖技術(shù)在校園全景漫游中的應(yīng)用研究[J].電腦知識(shí)與技術(shù)，2017，13（04）：210-211+220.

[11] 劉海娜. 基于HTML5的全景漫游技術(shù)研究[D]. 鄭州： 鄭州大學(xué)， 2013.

[12] 黃國(guó)政.基于Pano2VR的交互式校園全景漫游系統(tǒng)的研究[J].軟件工程師，2015，18（01）：17-18.

【通聯(lián)編輯：唐一東】