網頁的720度全景圖和手機端的720度全景圖分別都是怎麼做到的?

像義烏市行政服務中心一樣的全景效果怎麼做的?
像百度地圖手機端全景地圖那樣的效果都是怎麼做出來的?


讓開 讓專業的來給你們解釋! (注意:後面多圖 流量慎重!處女答! )
什麼叫720全景 我就不用在說了吧 反正就是720度無死角的圖片(=.=我是這樣理解的)比360全景又多了上面和下面 現在很多酒店 景區(特別是智慧旅遊) 房間都會涉及到 !
我先把分成兩類吧 一個航拍的 一個地面的。先來幾張給各位看看吧
正好我在做九寨溝的航拍

這裡不好展示 所以用了小行星給大家看看

航拍: 由於現在無人機的技術限制 民用級別的效果就那樣 肯定不能和單反比 但是我用的HDR手法拍出來的效果也不錯(後面我會說到怎麼製作)我用的是大疆(絕逼不是廣告!但確實好用!)就是起飛時 對環境要求比較高 這裡就不說明怎麼起飛啊之類的了 等買了自己就知道!
我來說說航拍怎麼拍:我用的HDR手法 用的JPG+RAW 用LR合成 一個角度連拍5張(拍3張也可以 大疆自己就有個功能就是拍HDR 很方便)一個點位拍下來 少說5G 大的8G都有可能!然後高度必須是50M以上!50M以上!50M以上! 不然接點不好找 後面麻煩的很!用大疆APP的時候右邊有個視角高度

我選擇從上往下的第二個點開始拍 因為第一個點會看到機翼。 依次往左邊拍 拍的時候一定要保證第一張和第二種有三分之一的重合面 切記! 第一個高度大概拍8張左右比較合適 然後往下移動2個點 往左依次拍照 和第一個高度一樣 一定要保證第一張和第二種有三分之一的重合面!然後再往下移動2個點 由於越往下 重合點的面積就越大 拍照數量會減少 一般我拍完 260張到420張原始照片不等 然後後期合成HDR 大概38張左右!
我來說說航拍怎麼合成:

這是我用到的軟體 後面我會一一說明用途
前期的拍攝很簡單 剛剛開始的新手可以多拍幾張 保證後期的時候元素多 拼接不會那麼麻煩。
把拍好的數據拖進LR 選擇需要合成HDR的圖片 快捷鍵是Ctrl+H

大概是這樣

合成後是這樣的效果 注意右邊的選項!

合成完後 選擇合成完的圖片右鍵導出就可以了

然後會用到PTGui

把圖片拖進去 對準圖像

得到這種效果的圖片

有些是第一次用PTGui 注意圖片上的這個就行

然後保存就不用說了吧

把保存好的圖片拖入 DevalVR playerU 就可以很全面的看圖片 看哪些細節不對 再用PTG裡面修改 這裡先不說怎麼修改 這個比較麻煩=.=(請原諒我的懶 有什麼問題可以直接問我)

都覺得OK了 會用到pano2vr

界面是這樣的

把圖片拖進去 點擊 打補丁

點 增加

然後拖動圖片 選擇你要修補的地方 滑鼠滾輪可以調節視角 然後再點 提取就可以了 在圖片的文件夾會多出這張圖片 用PS修就OK了

修好後點 確定

再點 轉換輸入的圖片 類型一定必須是 矩形球面投影! 然後大功告成!
再用DevalVR playerU 看時 你會發現天空都補好了!
再用PS調色啊 修細節啊就可以了!
這裡只是說了一張補天的方法 還有單反幫助補天 PS極坐標補天 但是用這軟體補天的效果我覺得最好 雖然麻煩了點 (我會說我懶 懶得打字不想說嘛=.=)

地面:
一定要用720全景雲台!一定要用720全景雲台!一定要用720全景雲台! 其他雲台都不行!!!!!
最主要的就補地了 很多新手對補地很頭疼 在這裡我會說兩個方法 一個就是用pano2vr補地 原理和補天一樣 但是效果不太好 有瑕疵!!!還有種方法是相機翻轉補地 這種方法效果好 但是比較麻煩 而且畢竟考研耐心
前期的拍攝:
前期的拍攝都很簡單 專用的720雲台都有接點 這裡就不多說了!對於單反機身來說 沒啥要求 哪怕最低端的單反都可以 但是鏡頭很重要(當然 用18-55也可以拍 只是張數比多) 我用的是10.5 F2.8 這款魚眼 旋轉拍6張 天空2天 地面2張 還是用的JPG+RAW 合成HDR
各焦距鏡頭一圈拍攝張數速查表(尼康C畫幅 焦距成像係數...
用什麼鏡頭拍多少張 可以參考↑↑↑↑↑↑↑↑↑↑
有個教程只說了這麼後期 好像沒說怎麼拍 我來給大家演示

翻轉補地會多拍一張圖或者兩張圖 上面圓圈的位置是拍720全景的位置 之所以要拍這張圖 就是離開原諒的位置 在沒有遮擋物的情況下 拍一張地面 後面用PTGui來拼接!里原來的地方大概1M半左右比較合適

後期的製作:
合成HDR和航拍一樣 用PTGui也一樣 然後翻轉補地詳見↓↓↓↓↓↓↓↓↓
翻轉補地PTGUI拼接新方法(作者CAT貓)
如果看不懂的同學可以回復 我再來解釋!

至於krpano和sublime_text 這兩個 是用做720全景串聯用的 這個太太麻煩 這裡就不說了!如果有興趣的同學可以問我!

終於寫完了!寫的頭暈腦脹的.....估計有錯字什麼的 將就了吧=.= 能懂意思就行 我也懶得檢查了!!!


可能是用天空球或者天空盒吧=_=
如果這些網頁實現跟遊戲里差不多的話,那是會用到點計算機圖形學。
天空盒 ,那就是六張圖片拼成的正方體,或者叫cube map,模擬攝像機角度的話就用多個旋轉矩陣對正方體的頂點施行仿射變換就好啦

天空球,把圖的笛卡爾直角坐標活生生映射(解釋)成球面坐標,於是就形成了一個球形圖片,然後再施加仿射變換。有點像把一張世界地圖鋪在球面上(需要扭曲)


多個圖片貼圖+計算機視覺的一些線性代數演算法


Html5分層輸出,倆文件夾。樓上樓下都散了吧,我專業這行的。


http://jingyan.baidu.com/article/a501d80c111ab9ec630f5e0b.html


手機端試試Google相機(酷市場有下載),大概拍二十多張照片,自動合成,可以旋轉手機看效果。解析度大概4000*8000,有時候結合處有錯誤,畢竟不是專業的。
效果:(沒法演示只能這樣了)
(上傳了幾次都沒成功,待會試試)
可以看到腳這一部分沒辦法搞掉


先上案例

具體製作方法就是在你做好的三維場景裡面打一個球形相機 長寬比例設置為2:1。然後輸出圖紙如上。再導入全景軟體就可以了。


這個看上去和 [移動雲全景-帶上全景去旅行 http://vr.he29.com] 的作品是一樣的, 你需要有一定的 前端知識(html/css/javascript),使用 krpano 進行切圖後就可以做成這樣的效果!


三維局部小場景中實時繪製渲染貼上全景照片紋理的球形對象,輔以相機操作完成滑鼠事件對應的視角調整;

不同全景點間的移動切換根據數據存儲的拓撲關係決定。


Insta360 nano能給你省去很多煩惱


手機或者相機拍攝多角度照片,然後通過PTgui合成一張六面圖,然後通過軟體程序控制,可以加入音樂,導航,陀螺儀,vr,圖集,logo,聯繫方式等等功能!行業從業者,只能說這麼多了!


做這個很多方法,flash ,webgl,css3,canvas,你給的是flash,想學技術學原理看計算機圖形圖像學,看看天空盒相機實現原理,當然了還有很多軟體可以直接導出


theta s可以直接拍照成像,使用很方便的。或者專業的單反拍攝球形圖片,再使用720雲全景,或者得圖雲編輯分享。


做全景的,佔位明天答


推薦閱讀:

TAG:前端開發 | 後端技術 | AdobeFlash | Android | JavaWeb |