合肥城中村全景截圖（點(diǎn)擊查看全景）

 

?、為什么想起制作全景地圖 ？

最近兩個(gè)?來(lái)，?劇?直在利?業(yè)余時(shí)間拍攝『合肥城中村』系列主題全景。到?前為?已經(jīng)拍攝了14個(gè)場(chǎng)景，覆蓋16個(gè)村落，并且這個(gè)計(jì)劃仍然在進(jìn)?中。

因?yàn)檫@些城中村零散地分布在合肥的各個(gè)?落，簡(jiǎn)單的羅列場(chǎng)景顯得格外單調(diào)，因此需要?個(gè)?較直觀的組織?式來(lái)呈現(xiàn)。

此前設(shè)想過(guò)通過(guò)720云的沙盤(pán)功能，實(shí)際設(shè)計(jì)時(shí)發(fā)現(xiàn)過(guò)多的場(chǎng)景在沙盤(pán)下效果并不是很理想。

恰好這個(gè)時(shí)候720云官?推薦了『安徽池州VR全景地圖』這樣?幅富有創(chuàng)意的作品。

這個(gè)作品有意思的點(diǎn)在于，它在?份航拍全景?平?向上，均勻放置了四個(gè)地圖，并且在地圖上?熱點(diǎn)鏈接其他各個(gè)作品。

基于這份作品，?劇發(fā)現(xiàn)借助于地圖可以很好的將各個(gè)零散的全景聯(lián)系起來(lái)，起到總覽的作?。

 

?、分析實(shí)現(xiàn)?案

決定了要在『合肥城中村』全景作品中，增加獨(dú)?的地圖總覽場(chǎng)景后，接下來(lái)就該探索實(shí)現(xiàn)?式了。經(jīng)過(guò)?番思考，再結(jié)合之前的經(jīng)驗(yàn)，發(fā)現(xiàn)有兩種?案可以采?。

第?種是直接把地圖?件當(dāng)成圖?素材，嵌?到場(chǎng)景中，具體的操作路徑如下：

 

 

這種?法雖好，但是因?yàn)榈貓D是獨(dú)?的?件，與場(chǎng)景相分離，所以在?戶(hù)打開(kāi)場(chǎng)景的時(shí)候，地圖會(huì)滯后加載。浪費(fèi)流量資源，引起加載時(shí)?過(guò)久的問(wèn)題。

 

針對(duì)這個(gè)問(wèn)題就有了第?個(gè)?案來(lái)實(shí)現(xiàn)，就是直接將地圖繪制在全景圖上，這樣?來(lái)對(duì)加載時(shí)?就沒(méi)有了影響。

我們來(lái)簡(jiǎn)單對(duì)?下這兩個(gè)?式的優(yōu)缺點(diǎn)：
1、圖?嵌?
優(yōu)點(diǎn)：簡(jiǎn)單，單獨(dú)設(shè)計(jì)場(chǎng)景和地圖，?需考慮拼合的問(wèn)題
缺點(diǎn)：浪費(fèi)觀看者流量，加載相對(duì)較慢

2、全景原圖繪制
優(yōu)點(diǎn)：加載時(shí)?沒(méi)有影響，?戶(hù)觀感較好
缺點(diǎn)：每次更新需要重新上傳全景，發(fā)布時(shí)間較?

通過(guò)對(duì)?可以看出來(lái)，第?種圖?嵌?的?案，對(duì)全景制作者較為友好，在終端?戶(hù)側(cè)略微有所影響。第?種全景原圖繪制的?案的優(yōu)勢(shì)都是針對(duì)?戶(hù)的，但是需要制作者多花些?思。

出于【折騰??，?便?家】的?理，很?然的就選擇了全景原圖繪制的?案。

 

三、動(dòng)?設(shè)計(jì)

?案已經(jīng)確定好了，接下來(lái)就是動(dòng)?設(shè)計(jì)了。

3.1、草圖設(shè)計(jì)
前?提到的『安徽池州VR全景地圖』雖然很有創(chuàng)意，但?劇還是想在上?增加點(diǎn)設(shè)計(jì)感，豐富下內(nèi)容組成。

收集了多幅 VR 界?設(shè)計(jì)案例、整理了城中村項(xiàng)?相關(guān)的介紹后，設(shè)計(jì)了如下的草圖。

 

 

3.2、畫(huà)?失焦處理
在參考了其他優(yōu)秀的 VR 界?設(shè)計(jì)案例后發(fā)現(xiàn)，為了區(qū)分界?與場(chǎng)景，都會(huì)將環(huán)境做失焦處理。這樣處理后畫(huà)?主體更清晰，觀感更舒服，也更符合?眼觀察世界的感受。

這?步操作的是 2:1 的球?模型圖，因此你需要提前準(zhǔn)備?個(gè)場(chǎng)景相對(duì)開(kāi)闊的作品作為背景。簡(jiǎn)單處理的話(huà)，直接使? PS 的?斯模糊即可。但是?斯模糊算法需要和相鄰像素做計(jì)算，所以處理完之后畫(huà)?左右會(huì)因?yàn)?差產(chǎn)?接縫，因?并不能簡(jiǎn)單的?步完成。

這?簡(jiǎn)單說(shuō)下我的處理?式：
第?步：使? PS 打開(kāi) 2:1 的球?模型圖，并復(fù)制?層
第?步：將上層圖層?平位移 4000 像素（原圖寬度?半左右即可，這?以 4000 為例）
第三步：將上下層執(zhí)?同樣數(shù)值的?斯模糊（??覺(jué)得舒服就?）
第四步：將上層圖層位移 -4000 像素
第五步：你會(huì)發(fā)現(xiàn)畫(huà)?右側(cè) 4000 像素處會(huì)有?條明顯的接縫，借助蒙版消除，合并圖層

通過(guò)這?通騷操作，全景畫(huà)?即實(shí)現(xiàn)了失焦效果，并且不存在垂直接縫。

 

3.3、轉(zhuǎn)換為六?體模型
地圖繪制的時(shí)候需要注意?個(gè)問(wèn)題，那就是我們只能在六?體模型上進(jìn)?繪制，?不能直接在 2:1 的球?模型圖上操作，通過(guò)下圖就能看出差異在哪?。

 

 

因?yàn)榍?模型本身內(nèi)容并?橫平豎直，所以直接繪制出的效果，在預(yù)覽的時(shí)候會(huì)出像各種扭曲，因此并不推薦。

關(guān)于球?模型轉(zhuǎn)六?體模型有很多種?法，這?只說(shuō)下我使?的?法。
Krpano 有很多實(shí)?的?具，其中?個(gè)是 Convert SPHERE to CUBE droplet，也就是實(shí)現(xiàn) 2:1 球?模型轉(zhuǎn)換為六?體模型的?具，拖放 2:1 的球?模型圖?件到這個(gè)腳本上，等待數(shù)秒即可完成轉(zhuǎn)換。

 

觀察六?體模型我們會(huì)發(fā)現(xiàn)，3.2 步驟?的失焦處理并不完美，在頂?、底?的中?點(diǎn)位置存在明顯的瑕疵，所以我們需要復(fù)制?層補(bǔ)充上?斯模糊，配合蒙版將菊花狀的瑕疵消除掉。

3.4、界?結(jié)構(gòu)繪制
按照前?草圖設(shè)計(jì)，只需要在??體的?個(gè)?繪制界?即可，很顯然我們選擇的是正前?的?，也就是_f 結(jié)尾的?件。

再看?遍草圖設(shè)計(jì)，我們來(lái)進(jìn)?框架設(shè)計(jì)。

 

 

框架設(shè)計(jì)這?步很簡(jiǎn)單，??就是拖拽?條參考線，畫(huà)?個(gè)框框?已。最重要的還是前期的草圖階段，你要預(yù)先想好整體框架布局，各個(gè)模塊放置哪些元素，做到??有數(shù)。

需要注意的是，六?體模型的任意?個(gè)?，?平、垂直?向的視野都是 90 度。??單眼的舒適視域僅為60度，所以在繪制的時(shí)候不要把畫(huà)?鋪得過(guò)滿(mǎn)，避免影響觀感。

 

 

四、地圖繪制

如果你直接使?百度、?德等地圖的截圖，地圖繪制這?步可以省略。

但是常規(guī)的地圖界??般會(huì)包含太多?關(guān)的細(xì)節(jié)，畫(huà)??擾因素太多，很難突出主體，因此如果您對(duì)PS、AI 等圖像繪制軟件操作熟練的話(huà)，建議地圖還是由??繪制。

4.1、創(chuàng)建獨(dú)?的地圖?件
地圖繪制?作量較?，后期更改的頻率較?，因此不建議在第三步的?件?直接操作。
根據(jù) 3.4 步?地圖所占區(qū)域??創(chuàng)建地圖?件。

4.2、截取衛(wèi)星地圖
這?步是為了獲取地圖基礎(chǔ)框架的，同時(shí)在我這個(gè)例?也是為了展示城中村的衛(wèi)星畫(huà)?所?。

過(guò)程很簡(jiǎn)單，只需要注意兩點(diǎn)即可：
1、使?衛(wèi)星地球模式，去除路?，以得到較為?凈的衛(wèi)星畫(huà)?
2、根據(jù)?件??，選擇合適的地圖縮放?例，以獲得較為清晰的畫(huà)?，必要的話(huà)可以多次截取，再拼合

 

 

4.3、勾勒出?標(biāo)區(qū)域
這?步是為了將全景在地圖上對(duì)應(yīng)的區(qū)域勾選出來(lái)，蒙版是最好的選擇。
為了操作?便，建議將地圖復(fù)制?層，下層降低透明度做參考。

4.4、繪制道路
道路的繪制盡量貼合真實(shí)路徑，需要的話(huà)在保證?向、?例?體相符的前提下，可以做適當(dāng)調(diào)整。

為了幫助?戶(hù)觀看地圖時(shí)快速定位，畫(huà)??的?架橋、快速路等主?道?定要標(biāo)注清楚。和全景場(chǎng)景相交叉、臨近的道路盡可能還原。其他的?些?路可以忽略不畫(huà)。

最后再標(biāo)注上路名，地圖就算繪制完成。

路名標(biāo)注時(shí)沒(méi)必要在每?段道路上都寫(xiě)上路名，但是在場(chǎng)景附近盡可能標(biāo)注完整，避免引起?戶(hù)觀看時(shí)不必要的困擾。

最后再把地圖復(fù)制粘貼到第三步?的所在區(qū)域，繪制?作就算完成了。

 

 

五、作品配置

經(jīng)過(guò)前?的設(shè)計(jì)、繪制，地圖全景就已經(jīng)準(zhǔn)備好了。

因?yàn)?720 云?持直接上傳六?體模型的場(chǎng)景，因此我們就不需要再將六?體模型轉(zhuǎn)換回 2:1 的球?模型。

后續(xù)的步驟相信?家都?較熟悉了，這?提?個(gè)需要注意的點(diǎn)。

5.1、視?設(shè)置
?定要避免調(diào)整設(shè)置初始視??向，因?yàn)槿敖?的地圖是在正前?繪制的，720云默認(rèn)的視?也是在正前?，因此初始視?就是最合適的視?。

FOV 建議設(shè)置為 10、100、120

最? FOV 決定了畫(huà)?的放?極限，為了?戶(hù)能看清地圖上的細(xì)節(jié)，建議最? FOV 設(shè)置在 10 - 20 這個(gè)范圍內(nèi)。

100 是初始 FOV，可以保證?戶(hù)在 PC 或?機(jī)橫屏的時(shí)候可以完整看到地圖界?。120 倒不重要，不?解釋。

5.2、添加熱點(diǎn)
從結(jié)構(gòu)上來(lái)看地圖所在場(chǎng)景類(lèi)似于?站的??，??可以通往各個(gè)??，每個(gè)??也需要能夠順利地回到??。所以添加熱點(diǎn)這部分?作共有兩部分。

?部分是需要在地圖上，逐個(gè)鏈接?各個(gè)場(chǎng)景。

另?部分則是，在每個(gè)場(chǎng)景內(nèi)同樣設(shè)置鏈接，確保能夠回到地圖的場(chǎng)景。

5.3、場(chǎng)景順序調(diào)整
前?提到，地圖的作?類(lèi)似于?站的??，如果?戶(hù)第?次打開(kāi)作品時(shí)展示的是地圖場(chǎng)景，效果肯定會(huì)更好。
所以建議把地圖場(chǎng)景調(diào)整到最前?，以獲得最佳的效果。

六、相關(guān)分享
此次全景地圖的探索?致就是這些，以上全部?jī)?nèi)容只是『合肥城中村』全景作品創(chuàng)作過(guò)程中的?些嘗試?已，并沒(méi)有?較深?的研究，僅供?家參考。獻(xiàn)丑了！

6.1、相關(guān)?具
Krpano：?款強(qiáng)?的全景圖漫游制作引擎
Photoshop：不?解釋?zhuān)愣?br /> 720云：專(zhuān)業(yè)的全景平臺(tái)https://720yun.com

6.2、相關(guān)鏈接
拍攝計(jì)劃表
合肥城中村作品
安徽池州VR全景地圖