全景漫游方案[web+手機]

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

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

3、360全景游覽數(shù)據(jù)，并提供多套版本以供不同渠道的應用，具體版本要求如下：互聯(lián)網應用：每張全景圖像的分辨率為 2150010750，為網站訪問者提供在線展覽的 360全景游覽。移動終端應用：每張全景圖像分辨率為 20482048，為微信公眾平臺等提供在線展覽的 360全景游覽。展覽的全景游覽具體功能實現(xiàn)作為實體展覽的網絡延伸，展覽全景不僅需要通過多媒體應用版及管內留檔版進展存留，還需要通過互聯(lián)網進展呈現(xiàn)，為突破了傳統(tǒng)互聯(lián)網瀏覽局限，需滿足通過移動終端的方式將展覽全景呈現(xiàn)在觀眾面前，需工程承接方保證用戶在訪問過程中全方位的對全景進展游覽，即水平360和垂直 180進展拖動操作，要求實現(xiàn)全方向平滑轉

4、動；提供兩種拖動操作方式，即全景轉動方向和鼠標拖動方向同向與反向，以滿足不同用戶的使用習慣；實現(xiàn)放大、復原功能，可以對全景進展逐級放大，并且在放大后能夠逐級復原到初始大?。恍杼峁┦謩佑斡[和自動游覽兩種瀏覽方式。展品的訪問及顯示在全景場景中，將圖文、音頻、視頻介紹以及高清大圖整合于一個播放器內進展展示，用戶通過點擊興趣點或展品框體的方式就可以便捷的瀏覽。實現(xiàn)如下功能需求，但不限于這些功能展品及展覽內容以圖標/興趣點進展點擊彈出展示功能支持圖文展示；支持音頻介紹；建議不易過多支持視頻介紹；建議視頻不易太長支持展品高清大圖展示；展品及展覽內容以圖層線框進展點擊彈出展示功能支持圖文展示；支持音頻介紹；

5、4)數(shù)據(jù)保護和加密為了保護原始數(shù)據(jù)的安全，防止原始數(shù)據(jù)直接在網上泄露、傳播，工程承接方對原始數(shù)據(jù)進展加密保護，使得用戶無法在本系統(tǒng)外直接使用。工程承接方提交所有原始數(shù)據(jù)交由館方保存，不得保存?zhèn)浞?。工程實施全景漫游是指在由全景圖像構建的全景空間里進展切換，到達瀏覽各個不同場景的目的。全景漫游系統(tǒng)的實現(xiàn)是需要相應的硬件和軟件的結合。首先需要相機和魚眼鏡頭、云臺、三角架等硬件來拍攝出魚眼照片，然后使用全景拼接軟件把拍攝的照片拼合，發(fā)布成可以播放和瀏覽的格式。具體制作過程和技術路線如下： 現(xiàn)場實景圖像采集生成魚眼圖渲染技術利用憑接軟件制作球狀 360全景圖特效技術處理配置熱點制作程序開發(fā)全景系統(tǒng)實景場

6、景實景圖對圖像進展拼接的技巧設計。利用Stitcher、PTGUI、Pano2vr等主流工具進展球狀全景圖制作。使用IPOF_CMCS憑接算法配置關鍵熱點區(qū)域、熱點介紹。3.1 全景圖片采集使用全景相機來直接采集一張柱面全景圖像3.2 全景圖片標準3.21 目的為了滿足全景圖展現(xiàn)時所需要的數(shù)據(jù)，通過拍攝人員前期對景區(qū)內部的拍攝、后期加工處理，使成果數(shù)據(jù)最終到達公司規(guī)格需求。3.22 要求1)文件格式：JPG 格式2)成圖像素：不得低于 819240963.23 定義3)全景圖：即通過對專業(yè)相機捕捉整個場景的圖像信息或者使用建模軟件渲染過后的圖片，使用軟件進展圖片拼合，并用專門的播放器進展播放，

7、即將平面照片或者計算機建模圖片變?yōu)?360 度全觀。拍攝選點3.24選點規(guī)那么展覽入口處第一章宋慶齡紀念廣場全景含宋慶齡漢白玉雕像宋氏墓地全景、宋慶齡墓名人墓園外籍人墓園3.25 選點拍攝要求正門外景1)盡量一張全景圖表現(xiàn)所有的細節(jié)和內容；2)畫面中前后左右的構圖要美觀，內容要豐富；3)突出景區(qū)的Logo 和主建筑，光線最好是側光或者順側光，使得層次豐富立體感強烈。特色地方1)對特色地方一張全景圖表現(xiàn)所有內容；2)畫面中前后左右的構圖要美觀，具有一定的藝術性。內容要豐富，主題要求完整、空出亮點、表達細節(jié)。圖片色彩鮮明，不存在色調單一的情況，但特殊場景除外，如：雪景。3)需要突出的局部，光線最好

8、是側光或者順側光，這樣層次豐富立體感強烈，可以突出主體。4)升高三腳架拍攝，可以的話可以采用高桿拍攝。5)盡量找高位拍攝，畫面上既可以俯覽也可以仰望，使得畫面更大氣。 - 在拍攝全景的時候，都是以一個點作為中心，360度拍攝，所以不能在高位拍攝。3.26拍攝時間要求收集待采集區(qū)域的天氣情況，結合采集方案，合理安排實采計；建議拍攝時間段：除特殊風光外，如：日出、晚霞；1)正常天氣，春夏采集時間段約為：白景9：00-18：30。2)正常天氣，秋冬采集時間段約為：白景9：30-16：30。3)天氣要求：天氣需晴好，能見度需在8KM 以上，風力=4 級，假設出現(xiàn)揚沙、霧、霾等天氣時不能進展采集。3.2

9、7 拍攝方法拍攝全景圖的設備都有一定的要求，一般都用魚眼鏡頭。魚眼鏡頭是一種焦距為 16mm 或更短并且視角接近 180的鏡頭，它是一種廣角鏡頭，“魚眼兒鏡頭是它的俗稱。3.28 拍攝要求1)盡量安排在游人較少的時間段進展采集工作。拍攝過程中，相機保持固定，不要移動，拍攝完畢前方可移動三角架；2)拍攝過程中，盡量避開大樹，行人等對象，尋找開闊的地點進展拍攝。有游人明顯接近取景框時，需要等其離開再進展拍攝，防止不相關的人員占據(jù)相片的1/2。同一組相片必須同時拍完，假設拍攝過程中被行人或車輛等打斷，此場景點需要重新拍攝；3)在同一個場景點拍攝過程中，相機的移動速度不要太快，防止快門未完全閉合導致的

10、畫面不清晰現(xiàn)象；4)關閉相機中的日期、時間項。時間、日期不能出現(xiàn)在圖片中。3.29自檢內容每拍攝完一組圖片后，都需要對拍拍攝的圖片成果進展自檢，自檢內容為：1)圖片中是否存在人的比例過大情況；2)圖片中是否存在相機帶、頭發(fā)等景物；3)圖片是否存在過曝/欠曝的情況；4)圖片中是否存在跑焦的現(xiàn)象；5)圖片中是否存在由于快門過慢導致焦距不清晰的情況；6)圖片中是否存在由于抖動等誤操作造成畫面不清晰的情況；7)圖片中是否存在臟點的情況可檢驗天空上是否有存在臟點的情況。3.3 全景圖的拼接全景照片的拼接主要使用現(xiàn)有的軟件就能完成?，F(xiàn)在國內外有很多拼接軟件可供使用，如cool 360，PTGui Pro，

11、 Realviz Stitcher5.1，Pixtra Viewer，上海杰圖的造景師等等。下面就用PTGui Pro進展全景照片的拼接以魚眼照片為例。圖像的預處理投影變換圖像配準圖像融合圖像的預處理在圖像采集的過程中，由于自然或人為因素，圖像之間的亮度、灰度、顏色和形狀等屬性會有所不同，所以需要對圖像中出現(xiàn)的幾何失真、比照度低、變形等情況進展預處理，從而提高圖像的質量以保證圖像配準和拼接過程的順利進展。1加載圖像：選擇要拼接的2張或多張照片，加載到此軟件中，在此功能中可以對加載的照片進展排序、剪裁工作，并且設置鏡頭的參數(shù)。排序：調整好照片的左右位置，便于正確拼接。剪裁：可以修剪照片中不需要的

12、邊緣局部，如魚眼照片可能會有黑邊，可以用此功能對其進展去除。鏡頭的參數(shù)：可以選擇“自動選項，讓軟件自動判斷設置此參數(shù)，但如果鏡頭參數(shù)的話，可以手動設置拼接魚眼照片鏡頭類型為：環(huán)形，水平角度一般為180。投影變換由于采集到的一組反響全景的圖像是在不同角度下拍攝的，因此這組圖像并不在同一個投影平面上，并且投影平面之間存在著一定的夾角，如果對這組重疊的圖像直接進展拼接的話，那么會破壞實際景物中各個對象之間的視覺一致性，例如景物中的直線在拼接后 會變成折線。為了保證實際景物的空間約束關系，在拼接全景圖像之前，必須將所得到的反映各自投影平面的圖像統(tǒng)一的投影到同一個坐標系上，一般有立方體形、球形和圓柱形三

13、種模型。不同模型的全景圖在存取難易程度和觀察效果上均有很大的差異。圖像配準圖像配準算法是全景圖拼接技術的核心和關鍵，圖像配準算法的好壞將直接影響到全景圖的拼接質量。 根本思想是對重疊圖像采用一定的匹配策略，以確定相鄰兩圖像間的拼接位置。由于圖像配準技術在眾多領域中起著非常重要作用，因此國內外的研究者們對其進展了深入的研究，并提出了很多種配準方法，但是目前還存在著很多問題。 這主要是因為相機在拍攝圖像序列時由于拍攝時間、 拍攝角度、自然環(huán)境的變化、多種傳感器的使用和傳感器本身的缺點，使得拍攝的圖像序列不僅受噪聲的影響而且存在著嚴重的灰度失真和幾何畸變，在這種條件下，相機所獲取的待配準圖像序列之間

14、就必然存在著差異。因此若何統(tǒng)一這種差異，以及配準精度的提高、速度的提高、匹配正確率的提高、魯棒性和抗干擾 性的增強以及并行實現(xiàn)等問題都是制約配準技術開展的重要因素。圖像融合拼接后的圖像由于分辨率和視角的不同以及受到光照等因素的影響，在圖像拼接的重疊局部會產生模糊、鬼影或噪聲點，邊界處也可能有明顯的接縫。為了 改善拼接圖像的視覺效果和質量，需要對拼接后的圖像進展融合處理。即圖像融合是指圖像拼接中調整配準后，對圖像的像素值進展處理的過程。它使圖像在拼接后不會看出拼接的痕跡同時融合后的圖像也盡可能地保持原有圖像的質量。也就是說通過圖像融合，必須到達兩個目的：一是使圖像間的接縫在視覺上不可覺察；二是盡

15、可能地保持圖像的質量。1對準圖像：準備工作完了之后就可以對準圖像，也就是照片拼接。此功能也可以讓軟件自動完成，但一般都需要手動參加一些控制點。在“控制點標簽下，選擇要拼接的兩張照片，在相重合的地方點擊，選擇至少3個同名像點，這些同名像點遵循均勻分布的原那么。完成后進展一下“優(yōu)化處理，判斷同名像點選取的是否合理，如果優(yōu)化器優(yōu)化后結果不錯，可以承受優(yōu)化并可以在全景編輯器中查看拼接的全景照片，并且可以對照片進展整體編輯，選擇視野、投影方式等。在此功能中還能進展曝光/HDR的調整，修改拼接好的全景圖，當然也可以在photoshop中進展。2創(chuàng)立全景圖：在此功能中可以選擇要輸出的全景圖的尺寸、格式、圖層

16、以及保存路徑。選擇好后就可以輸出了。3.4構建全景漫游系統(tǒng)漫游是在建設一個場景的工程之后，對多個場景的交互和跳轉，其內容包括位置和漫游兩局部，當柱面全景制作好后，所得到的僅僅是單個視點的瀏覽，并不能稱之為是真正的虛擬現(xiàn)實實景，必須對制作好的全景進展合理地空間編輯和組織。本課題采用軟件將全景圖導入后，進展一些參數(shù)的設置，根據(jù)實際需要可以修改圖像質量，顯示大小和播放幀數(shù)；如需全景自動旋轉，可以點擊右邊的開啟自動旋轉功能，一般選擇加載完畢后開場旋轉。最后選擇輸出一個swf文件格式，在全景網站制作時，將全景展示文件嵌入在網站某頁面里，發(fā)布后，即可供使用者瀏覽。制作全景圖像，實現(xiàn)全景漫游?，F(xiàn)在國內外也有

17、許多軟件能夠完成，如上海杰圖的漫游大師、pano2vr等。由于現(xiàn)在flash插件的廣泛使用，因此下面使用pano2vr軟件制作flash格式的全景漫游。1選擇要制作的全景圖，用pano2vr軟件翻開，輸入類型選擇“自動默認就行當然也可以根據(jù)需求選擇“立面體、“柱形、“平面等類型。2可以“顯示參數(shù)標簽中設置初始視場的方位、大小等參數(shù)，在“用戶數(shù)據(jù)標簽中設置用戶信息，在“交互熱區(qū)標簽中設置場景切換熱鍵，在“音頻標簽中參加音頻到全景中。3在“輸出標簽中選擇“flash格式輸出，并且可以選擇一個自帶的皮膚或自制的皮膚加載其中。一個簡單的全景圖漫游就完成了。3.5發(fā)布虛擬全景網頁當一個全景制作好后，往往

18、會將其發(fā)布到網上以供人們便于瀏覽，了解場景環(huán)境，因此發(fā)布虛擬全景網頁勢在必行。在pano2vr軟件中就能方便的實現(xiàn)此動作。在“輸出標簽中選擇flash格式后，點擊后面的“增加按鈕，在彈出的flash輸出設置框中選擇“HTML標簽，開啟HTML文件輸出，對HTML文件的外部化、模板進展需求設置，完成之后會創(chuàng)立一個HTML文件，此文件就是將全景圖發(fā)布到網上，實現(xiàn)虛擬漫游。以下代碼是代碼，加上了注釋： /定義相機，場景，渲染器，是3D場景形成的三大要素 var camera, scene, renderer; /定義幾何體，材質，以及幾何體加材質之后形成的網格 var geometry, mater

19、ial, mesh; /生成三維向量0,0,0，相機的目標點 var target = new THREE.Vector3(); /lon 經度 豎著的 有東經 西經 ；lat 維度 橫著的 有南緯 北緯 /該經緯表示相機的聚焦點，初始狀態(tài)在前面 var lon = 90, lat = 0; /同樣是相機的聚焦點，上面是角度，此處轉化為弧度制 var phi = 0, theta = 0; /移動端用戶輸入的x，y var touchX, touchY; init(); animate(); function init() /相機的默認位置在坐標系的原點 camera = new THREE.

20、PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); scene = new THREE.Scene(); /右手坐標系，z朝向觀察者，即相機。下面是將六個面拼接成立方體，分別對應 var sides = url: res/Bridge2/posx.jpg, /左側 position: -512, 0, 0 , rotation: 0, Math.PI / 2, 0 , url: res/Bridge2/negx.jpg, /右側 position: 512, 0, 0 , rotation: 0,

21、-Math.PI / 2, 0 , url: res/Bridge2/posy.jpg, /上側 position: 0, 512, 0 , rotation: Math.PI / 2, 0, Math.PI , url: res/Bridge2/negy.jpg, /下側 position: 0, -512, 0 , rotation: -Math.PI / 2, 0, Math.PI , url: res/Bridge2/posz.jpg, /前 position: 0, 0, 512 , rotation: 0, Math.PI, 0 , url: res/Bridge2/negz.jp

22、g, /后 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 = 1026; / 2 pixels extra to close the gap. element.src = side.url; /CSS3DObject 是拓展出去的方法，原型是object3D，見CSS3DRenderer.js

23、var object = new THREE.CSS3DObject( element ); object.position.fromArray( side.position ); object.rotation.fromArray( side.rotation ); scene.add( object ); /渲染器也是拓展出來的方法，見CSS3DRenderer.js renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.a

24、ppendChild( renderer.domElement ); /添加鼠標，手勢，窗口事件 document.addEventListener( mousedown, onDocumentMouseDown, false ); document.addEventListener( wheel, onDocumentMouseWheel, false ); document.addEventListener( touchstart, onDocumentTouchStart, false ); document.addEventListener( touchmove, onDocument

25、TouchMove, false ); window.addEventListener( resize, onWindowResize, false ); function onWindowResize() /窗口縮放的時候，保證場景也跟隨著一起縮放 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); function onDocumentMouseDo

26、wn( event ) event.preventDefault(); /保證監(jiān)聽拖拽事件 document.addEventListener( mousemove, onDocumentMouseMove, false ); document.addEventListener( mouseup, onDocumentMouseUp, false ); function onDocumentMouseMove( event ) /鼠標的移動距離 currentEvent.movementX = currentEvent.screenX - previousEvent.screenX var m

27、ovementX = 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( mouseup, onDocumentMouseUp ); function onDocumentMouseWheel( even