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

 

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

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

因為這些城中村零散地分布在合肥的各個?落，簡單的羅列場景顯得格外單調(diào)，因此需要?個?較直觀的組織?式來呈現(xiàn)。

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

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

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

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

 

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

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

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

 

 

這種?法雖好，但是因為地圖是獨(dú)?的?件，與場景相分離，所以在?戶打開場景的時候，地圖會滯后加載。浪費(fèi)流量資源，引起加載時?過久的問題。

 

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

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

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

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

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

 

三、動?設(shè)計

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

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

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

 

 

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

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

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

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

 

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

 

 

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

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

 

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

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

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

 

 

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

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

 

 

四、地圖繪制

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

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

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

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

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

 

 

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

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

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

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

路名標(biāo)注時沒必要在每?段道路上都寫上路名，但是在場景附近盡可能標(biāo)注完整，避免引起?戶觀看時不必要的困擾。

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

 

 

五、作品配置

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

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

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

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

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

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

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

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

?部分是需要在地圖上，逐個鏈接?各個場景。

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

5.3、場景順序調(diào)整
前?提到，地圖的作?類似于?站的??，如果?戶第?次打開作品時展示的是地圖場景，效果肯定會更好。
所以建議把地圖場景調(diào)整到最前?，以獲得最佳的效果。

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

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

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