全景漫游方案計劃(web手機(jī))

1、全景漫游方案（web+手機(jī)）項目概況1.1 建設(shè)背景傳統(tǒng)的博物館大多沒有網(wǎng)上展館的功能，觀眾往往要花費(fèi)很長的時間和精力， 親自到博物館，才能了解博物館的內(nèi)部環(huán)境、展品的擺放位置、和相關(guān)說明。這 樣對博物館的影響打了很大的折扣， 不利于知識的傳播和教育。即使是現(xiàn)有的部 分網(wǎng)上展館系統(tǒng)，大部分是通過圖片和文字來進(jìn)行內(nèi)容介紹， 觀眾只能被動的接 收，缺少互動性，因而觀眾的參與意愿較低。本項目針對這些問題，設(shè)計并制作了一套架構(gòu)于 WE小口手機(jī)端的的全景虛擬 參觀系統(tǒng)，可以讓參觀者用鼠標(biāo)或手指滑動在博物館中達(dá)到認(rèn)識、 學(xué)習(xí)、導(dǎo)覽和 體驗的目的，改善傳統(tǒng)博物館的不足 。1.2 建設(shè)內(nèi)容以超高清攝像設(shè)備全視

2、角拍攝作品全貌。 與靜態(tài)的二維平面圖片不同，全景 攝影借助于計算機(jī)和互聯(lián)網(wǎng)技術(shù)，讓人能夠身臨其境，在仿真的 3D環(huán)境之中觀 展。透過指尖的觸碰全方位重現(xiàn)場景全貌，更可動態(tài)地欣賞全景的全部或某一部 分的細(xì)節(jié)，最大限度的主動化視角，從大特寫到超廣角，或遠(yuǎn)或近、或俯或仰，自主操控展示方式廳P制作內(nèi)容說明1全景圖片拍攝不少于20個點(diǎn)，每個點(diǎn)位拍攝6張2全景圖片處理清晰度、影調(diào)、色彩、曝光按標(biāo)準(zhǔn)處理3全景圖片拼接無拼接錯位，無拼接痕跡。4PC端下一場景指引；重點(diǎn)展品介紹5手機(jī)端下一場景指引；重點(diǎn)展品介紹6服務(wù)器部署上線測試及部署到指定服務(wù)器項目內(nèi)容1）為上海中心絲綢文化盛宴展覽采集 2017年館內(nèi)全年展

3、覽的360°全景游 覽數(shù)據(jù)，并提供多套版本以供不同渠道的應(yīng)用，具體版本要求如下：互聯(lián)網(wǎng)應(yīng)用：每張全景圖像的分辨率為 21500 X10750,為網(wǎng)站訪問者提供 在線展覽的360 0全景游覽。移動終端應(yīng)用：每張全景圖像分辨率為 2048 X2048,為微信公眾平臺等提 供在線展覽的360 0全景游覽。2）展覽的全景游覽具體功能實現(xiàn)作為實體展覽的網(wǎng)絡(luò)延伸，展覽全景不僅需要通過多媒體應(yīng)用版及管內(nèi)留檔 版進(jìn)行存留，還需要通過互聯(lián)網(wǎng)進(jìn)行呈現(xiàn)，為突破了傳統(tǒng)互聯(lián)網(wǎng)瀏覽局限， 需滿 足通過移動終端的方式將展覽全景呈現(xiàn)在觀眾面前，需項目承接方保證用戶在訪問過程中全方位的對全景進(jìn)行游覽，即水平3600和

4、垂直180 進(jìn)行拖動操作，要求實現(xiàn)全方向平滑轉(zhuǎn)動；提供兩種拖動操作方式，即全景轉(zhuǎn)動方向和鼠標(biāo)拖動 方向同向與反向，以滿足不同用戶的使用習(xí)慣；實現(xiàn)放大、還原功能，可以對全 景進(jìn)行逐級放大，并且在放大后能夠逐級還原到初始大??； 需提供手動游覽和自 動游覽兩種瀏覽方式。3）展品的訪問及顯示在全景場景中，將圖文、音頻、視頻介紹以及高清大圖整合于一個播放器內(nèi) 進(jìn)行展示，用戶通過點(diǎn)擊興趣點(diǎn)或展品框體的方式就可以便捷的瀏覽。實現(xiàn)如下功能需求，但不限于這些功能展品及展覽內(nèi)容以圖標(biāo)/興趣點(diǎn)進(jìn)行點(diǎn)擊彈出展示功能支持圖文展示；支持音頻介紹；（建議不易過多）支持視頻介紹；（建議視頻不易太長） 支持展品高清大圖展示；展

5、品及展覽內(nèi)容以圖層線框進(jìn)行點(diǎn)擊彈出展示功能 支持圖文展示；支持音頻介紹;4）數(shù)據(jù)保護(hù)和加密為了保護(hù)原始數(shù)據(jù)的安全，避免原始數(shù)據(jù)直接在網(wǎng)上泄露、傳播，項目承接方對原始數(shù)據(jù)進(jìn)行加密保護(hù)，使得用戶無法在本系統(tǒng)外直接使用。項目承接方提交所有原始數(shù)據(jù)交由館方保存，不得保留備份。項目實施全景漫游是指在由全景圖像構(gòu)建的全景空間里進(jìn)行切換，達(dá)到瀏覽各個不同 場景的目的。全景漫游系統(tǒng)的實現(xiàn)是需要相應(yīng)的硬件和軟件的結(jié)合。 首先需要相 機(jī)和魚眼鏡頭、云臺、三角架等硬件來拍攝出魚眼照片， 然后使用全景拼接軟件 把拍攝的照片拼合，發(fā)布成可以播放和瀏覽的格式。具體制作過程和技術(shù)路線如下：現(xiàn)場實景圖像采集生成魚眼圖!對圖像

6、進(jìn)行拼接的技巧設(shè) |計。渲染技術(shù)利用憑接軟件制作球狀360°全景圖jj 利用 Stitcher、PTGUI、：Pano2vr等主流工具進(jìn)行|球狀全景圖制作。（使用I! iPOF_cMcse接算法）|特效技術(shù)處理配置熱點(diǎn)制作I配置關(guān)鍵熱點(diǎn)區(qū)域、熱點(diǎn) I介紹。程序開發(fā)全景系統(tǒng)實景場景實景圖3.1 全景圖片采集使用全景相機(jī)來直接采集一張柱面全景圖像3.2 全景圖片規(guī)范3.21 目的為了滿足全景圖展現(xiàn)時所需要的數(shù)據(jù)，通過拍攝人員前期對景區(qū)內(nèi)部的拍攝、 后期加工處理，使成果數(shù)據(jù)最終達(dá)到公司規(guī)格需求。3.22 要求1）文件格式：JPG格式2）成圖像素：不得低于8192 X40963.23 定義3

7、）全景圖：即通過對專業(yè)相機(jī)捕捉整個場景的圖像信息或者使用建模軟件 渲染過后的圖片，使用軟件進(jìn)行圖片拼合，并用專門的播放器進(jìn)行播放，即將平 面照片或者計算機(jī)建模圖片變?yōu)?360度全觀。拍攝選點(diǎn)3.24 選點(diǎn)規(guī)則1 .展覽入口處2 .第一章3 .宋慶齡紀(jì)念廣場全景（含宋慶齡漢白玉雕像）4 .宋氏墓地（全景、宋慶齡墓）5 .名人墓園6 .外籍人墓園3.25 選點(diǎn)拍攝要求正門外景1）盡量一張全景圖表現(xiàn)所有的細(xì)節(jié)和內(nèi)容；2）畫面中前后左右的構(gòu)圖要美觀，內(nèi)容要豐富；3）突出景區(qū)的Logo和主建筑，光線最好是側(cè)光或者順側(cè)光，使得層次豐 富立體感強(qiáng)烈。特色地方1）對特色地方一張全景圖表現(xiàn)所有內(nèi)容；2）畫面中前

8、后左右的構(gòu)圖要美觀，具有一定的藝術(shù)性。內(nèi)容要豐富，主題 要求完整、空出亮點(diǎn)、體現(xiàn)細(xì)節(jié)。圖片色彩鮮明，不存在色調(diào)單一的情況，但特 殊場景除外，如：雪景。3）需要突出的部分，光線最好是側(cè)光或者順側(cè)光，這樣層次豐富立體感強(qiáng) 烈，可以突出主體。4）升高三腳架拍攝，可以的話可以采用高桿拍攝。5）盡量找高位拍攝，畫面上既可以俯覽也可以仰望， 使得畫面更大氣。- 在拍攝全景的時候，都是以一個點(diǎn)作為中心，360度拍攝，所以不能在高位拍攝。3.26 拍攝時間要求收集待采集區(qū)域的天氣情況，結(jié)合采集計劃，合理安排實采計；建議拍攝時 問段：除特殊景色外，如：日出、晚霞；1）正常天氣，春夏采集時間段約為：白景 9: 0

9、0-18: 30。2）正常天氣，秋冬采集時間段約為：白景 9: 30-16: 30。3）天氣要求：天氣需晴好，能見度需在 8KM以上，風(fēng)力二4級，若出現(xiàn)揚(yáng) 沙、霧、霾等天氣時不能進(jìn)行采集。3.27 拍攝方法拍攝全景圖的設(shè)備都有一定的要求， 一般都用魚眼鏡頭。魚眼鏡頭是一種焦 距為16mm或更短并且視角接近180°的鏡頭，它是一種廣角鏡頭，“魚眼兒鏡 頭”是它的俗稱。3.28 拍攝要求1）盡量安排在游人較少的時間段進(jìn)行采集工作。拍攝過程中，相機(jī)保持固定，不要移動，拍攝完畢后方可移動三角架；2）拍攝過程中，盡量避開大樹，行人等對象，尋找開闊的地點(diǎn)進(jìn)行拍攝。有游人明顯接近取景框時，需要等其

10、離開再進(jìn)行拍攝，避免不相關(guān)的人員占據(jù)相 片的1/2。同一組相片必須同時拍完，若拍攝過程中被行人或車輛等打斷，此場 景點(diǎn)需要重新拍攝；3）在同一個場景點(diǎn)拍攝過程中，相機(jī)的移動速度不要太快，避免快門未完 全閉合導(dǎo)致的畫面不清晰現(xiàn)象；4）關(guān)閉相機(jī)中的日期、時間項。時間、日期不能出現(xiàn)在圖片中。3.29 自檢內(nèi)容每拍攝完一組圖片后，都需要對拍拍攝的圖片成果進(jìn)行自檢，自檢內(nèi)容為：1）圖片中是否存在人的比例過大情況；2）圖片中是否存在相機(jī)帶、頭發(fā)等景物；3）圖片是否存在過曝/欠曝的情況；4）圖片中是否存在跑焦的現(xiàn)象；5）圖片中是否存在由于快門過慢導(dǎo)致焦距不清晰的情況；6）圖片中是否存在由于抖動等誤操作造成畫

11、面不清晰的情況；7）圖片中是否存在臟點(diǎn)的情況（可檢驗天空上是否有存在臟點(diǎn)的情況）。3.3 全景圖的拼接全景照片的拼接主要使用現(xiàn)有的軟件就能完成。 現(xiàn)在國內(nèi)外有很多拼接軟 件可供使用，如 cool 360, PTGuiPro, Realviz Stitcher5.1 , Pixtra Viewer, 上海杰圖的造景師等等。下面就用 PTGui Pro進(jìn)行全景照片的拼接（以魚眼照片 為例。圖像的預(yù)處理投影變換圖像配準(zhǔn)圖像融合圖像的預(yù)處理在圖像采集的過程中，由于自然或人為因素，圖像之間的亮度、灰度、顏色 和形狀等屬性會有所不同，所以需要對圖像中出現(xiàn)的幾何失真、 對比度低、變形 等情況進(jìn)行預(yù)處理，從而

12、提高圖像的質(zhì)量以保證圖像配準(zhǔn)和拼接過程的順利進(jìn)行。（1）加載圖像：選擇要拼接的2張或多張照片，加載到此軟件中，在此功 能中可以對加載的照片進(jìn)行排序、剪裁工作，并且設(shè)置鏡頭的參數(shù)。排序：調(diào)整好照片的左右位置，便于正確拼接。剪裁：可以修剪照片中不需要的邊緣部分， 如魚眼照片可能會有黑邊，可以 用此功能對其進(jìn)行去除。鏡頭的參數(shù)：可以選擇“自動”選項，讓軟件自動判斷 設(shè)置此參數(shù)，但如果已知鏡頭參數(shù)的話，可以手動設(shè)置（拼接魚眼照片鏡頭類型 為：環(huán)形，水平角度一般為180° ）。投影變換由于采集到的一組反應(yīng)全景的圖像是在不同角度下拍攝的，因此這組圖像并不在同一個投影平面上，并且投影平面之間存在著

13、一定的夾角，如果對這組重疊 的圖像直接進(jìn)行拼接的話，則會破壞實際景物中各個對象之間的視覺一致性， 例 如景物中的直線在拼接后 會變成折線。為了保證實際景物的空間約束關(guān)系，在 拼接全景圖像之前，必須將所得到的反映各自投影平面的圖像統(tǒng)一的投影到同一 個坐標(biāo)系上，一般有立方體形、球形和圓柱形三種模型。不同模型的全景圖在存 取難易程度和觀察效果上均有很大的差異。圖像配準(zhǔn)圖像配準(zhǔn)算法是全景圖拼接技術(shù)的核心和關(guān)鍵，圖像配準(zhǔn)算法的好壞將直接 影響到全景圖的拼接質(zhì)量。基本思想是對重疊圖像采用一定的匹配策略，以確定 相鄰兩圖像間的拼接位置。由于圖像配準(zhǔn)技術(shù)在眾多領(lǐng)域中起著非常重要作用， 因此國內(nèi)外的研究者們 對

14、其進(jìn)行了深入的研究，并提出了很多種配準(zhǔn)方法，但是目前還存在著很多問題。 這主要是因為相機(jī)在拍攝圖像序列時由于拍攝時間、 拍攝角度、自然環(huán)境的變 化、多種傳感器的使用和傳感器本身的缺點(diǎn)， 使得拍攝的圖像序列不僅受噪聲的 影響而且存在著嚴(yán)重的灰度失真和幾何畸變， 在這種條件下，相機(jī)所獲取的待配 準(zhǔn)圖像序列之間就必然存在著差異。因此如何統(tǒng)一這種差異，以及配準(zhǔn)精度的提 高、速度的提高、匹配正確率的提高、魯棒性和抗干擾 性的增強(qiáng)以及并行實現(xiàn) 等問題都是制約配準(zhǔn)技術(shù)發(fā)展的重要因素。圖像融合拼接后的圖像由于分辨率和視角的不同以及受到光照等因素的影響，在圖像拼接的重疊部分會產(chǎn)生模糊、鬼影或噪聲點(diǎn)，邊界處也可能

15、有明顯的接縫。為了 改善拼接圖像的視覺效果和質(zhì)量，需要對拼接后的圖像進(jìn)行融合處理。即圖像融 合是指圖像拼接中調(diào)整配準(zhǔn)后，對圖像的像素值進(jìn)行處理的過程。 它使圖像在拼 接后不會看出拼接的痕跡同時融合后的圖像也盡可能地保持原有圖像的質(zhì)量。也就是說通過圖像融合，必須達(dá)到兩個目的：一是使圖像間的接縫在視覺上不可察 覺；二是盡可能地保持圖像的質(zhì)量。(1)對準(zhǔn)圖像：準(zhǔn)備工作完了之后就可以對準(zhǔn)圖像，也就是照片拼接。此 功能也可以讓軟件自動完成，但一般都需要手動加入一些控制點(diǎn)。 在“控制點(diǎn)” 標(biāo)簽下，選擇要拼接的兩張照片，在相重合的地方點(diǎn)擊，選擇至少3個同名像點(diǎn)， 這些同名像點(diǎn)遵循均勻分布的原則。 完成后進(jìn)行

16、一下“優(yōu)化”處理，判斷同名像 點(diǎn)選取的是否合理，如果優(yōu)化器優(yōu)化后結(jié)果不錯，可以接受優(yōu)化并可以在全景編 輯器中查看拼接的全景照片，并且可以對照片進(jìn)行整體編輯， 選擇視野、投影方 式等。在此功能中還能進(jìn)行曝光/HDR的調(diào)整，修改拼接好的全景圖，當(dāng)然也可 以在photoshop中進(jìn)行。(2)創(chuàng)建全景圖：在此功能中可以選擇要輸出的全景圖的尺寸、格式、圖 層以及保存路徑。選擇好后就可以輸出了。3.4 構(gòu)建全景漫游系統(tǒng)漫游是在建立一個場景的項目之后， 對多個場景的交互和跳轉(zhuǎn)，具內(nèi)容包括 位置和漫游兩部分，當(dāng)柱面全景制作好后，所得到的僅僅是單個視點(diǎn)的瀏覽， 并 不能稱之為是真正的虛擬現(xiàn)實實景，必須對制作好的

17、全景進(jìn)行合理地空間編輯和 組織。本課題采用P a n o 2 VR軟件將全景圖導(dǎo)入后，進(jìn)行一些參數(shù)的設(shè)置， 根據(jù)實際需要可以修改圖像質(zhì)量， 顯示大小和播放幀數(shù)；如需全景自動旋轉(zhuǎn)，可 以點(diǎn)擊右邊的開啟自動旋轉(zhuǎn)功能，一般選擇加載完畢后開始旋轉(zhuǎn)。最后選擇輸出 一個swf文件格式，在3 6 0 0全景網(wǎng)站制作時，將全景展示文件嵌入在網(wǎng)站某 頁面里，發(fā)布后，即可供使用者瀏覽。制作全景圖像，實現(xiàn)全景漫游?，F(xiàn)在國內(nèi)外也有許多軟件能夠完成， 如上海 杰圖的漫游大師、pano2vr等。由于現(xiàn)在flash插件的廣泛使用，因此下面使用 pano2vr軟件制作flash格式的全景漫游。(1)選擇要制作的全景圖，用pa

18、no2vr軟件打開，輸入類型選擇“自動”默認(rèn) 就行當(dāng)然也可以根據(jù)需求選擇“立面體”、“柱形”、“平面”等類型。(3)在“輸出”標(biāo)簽中選擇(2)可以“顯示參數(shù)”標(biāo)簽中設(shè)置初始視場的方位、大小等參數(shù)，在“用戶數(shù) 據(jù)”標(biāo)簽中設(shè)置用戶信息，在“交互熱區(qū)”標(biāo)簽中設(shè)置場景切換熱鍵， 在“音頻” 標(biāo)簽中加入音頻到全景中。flash ”格式輸出，并且可以選擇一個自帶的皮膚或自制的皮膚加載其中。一個簡單的全景圖漫游就完成了3.5 發(fā)布虛擬全景網(wǎng)頁當(dāng)一個全景制作好后，往往會將其發(fā)布到網(wǎng)上以供人們便于瀏覽，了解場景 環(huán)境，因此發(fā)布虛擬全景網(wǎng)頁勢在必行。 在pano2vr軟件中就能方便的實現(xiàn)此動 作。在“輸出”標(biāo)簽中

19、選擇flash格式后，點(diǎn)擊后面的“增加”按鈕，在彈出的 flash輸出設(shè)置框中選擇“ HTML標(biāo)簽，開啟HTMLC件輸出，對HTMLC件的外 部化、模板進(jìn)行需求設(shè)置，完成之后會創(chuàng)建一個HTMLt件，此文件就是將全景圖發(fā)布到網(wǎng)上，實現(xiàn)虛擬漫游。以下代碼是代碼，加上了注釋：<script src="js/three.js"></script><script src="js/renderers/CSS3DRenderer.js"></script><script>/定義相機(jī)，場景，渲染器，是 3D場景

20、形成的三大要素 var camera, scene, renderer;/定義幾何體，材質(zhì)，以及幾何體加材質(zhì)之后形成的網(wǎng)格var geometry, material, mesh;/生成三維向量(0,0,0 ),相機(jī)的目標(biāo)點(diǎn)var target = new THREE.Vector3();/lon 經(jīng)度豎著的有東經(jīng)西經(jīng)；lat維度橫著的有南緯北緯/該經(jīng)緯表示相機(jī)的聚焦點(diǎn)，初始狀態(tài)在前面var lon = 90, lat = 0;/同樣是相機(jī)的聚焦點(diǎn)，上面是角度，此處轉(zhuǎn)化為弧度制var phi = 0, theta = 0;/移動端用戶輸入的x, yvar touchX, touchY;init

21、();animate。；function init() /相機(jī)的默認(rèn)位置在坐標(biāo)系的原點(diǎn)camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 1, 1000 );scene = new THREE.Scene();/ 右手坐標(biāo)系，z朝向觀察者，即相機(jī)。下面是將六個面拼接成立方體, 分別對應(yīng)var sides =url: 'res/Bridge2/posx.jpg', /左側(cè)position: -512, 0, 0 , rotation: 0, Math.PI / 2, 0

22、, url: 'res/Bridge2/negx.jpg', /右側(cè)position: 512, 0, 0 , rotation: 0, -Math.PI / 2, 0 , url: 'res/Bridge2/posy.jpg', /上側(cè)position: 0, 512, 0 ,rotation: Math.PI / 2, 0, Math.PI ,url: 'res/Bridge2/negy.jpg', /下側(cè)position: 0,-512, 0 ,rotation: -Math.PI / 2, 0, Math.PI ,斗url: 'r

23、es/Bridge2/posz.jpg', /前position: 0, 0, 512 , rotation: 0, Math.PI, 0 , url: 'res/Bridge2/negz.jpg', /后position: 0, 0, -512 , rotation: 0, 0, 0 ; /將六個圖片添加到場景中for ( var i = 0; i < sides.length; i + ) var side = sides i ;var element = document.createElement( 'img');element.width

24、 = 1026; / 2 pixels extra to close the gap.element.src = side.url;/CSS3DObject 是拓展出去的方法，原型是 object3D ,見CSS3DRenderer.jsvar object = new THREE.CSS3DObject( element );object.position.fromArray( side.position );object.rotation.fromArray( side.rotation ); scene.add( object );/渲染器也是拓展出來的方法，見 CSS3DRendere

25、r.jsrenderer = new THREE.CSS3DRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );/ 添加鼠標(biāo)，手勢，窗口事件document.addEventListener('mousedown', onDocumentMouseDown,false );document.addEventListener( 'wheel', onDocumentMouseWhee

26、l, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener('touchmove', onDocumentTouchMove,false );window.addEventListener( 'resize', onWindowResize, false );function onWindowResize() /窗口縮放的時候，保證場景也跟隨著一起縮放camera.aspect = windo

27、w.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );function onDocumentMouseDown( event ) event.preventDefault();/保證監(jiān)聽拖拽事件document.addEventListener('mousemove', onDocumentMouseMove,false );document.addEventListener( '

28、;mouseup', onDocumentMouseUp, false );function onDocumentMouseMove( event ) /鼠標(biāo)的移動距離 currentEvent.movementX =currentEvent.screenX - previousEvent.screenXvar movementX = event.movementX | event.mozMovementX | event.webkitMovementX | 0;var movementY = event.movementY | event.mozMovementY | event.webkitMovementY | 0;lon -= movementX * 0.1;lat += movementY * 0.1;function onDocumentMouseUp( event ) / 保證監(jiān)聽拖拽事件document.removeEventListener( 'mousemove', onDocumentMouseMove );document.removeEventListener( '