手把手教你做一個超寫實爆炸特效
上篇
說到爆炸,我們腦海中一般會浮現出幾個關鍵詞:火球、濃煙、碎片、火星、衝擊波等等。這些元素,其實就是我們在開始設計特效時最初的靈感了。我們可以把這些關鍵詞記錄下來,下一步就是針對這些關鍵詞去找大量的參考,把靈感連成線,形成更清晰和完整的思路過程。
在確定了大致的思路和方向後,我們就可以開始考慮具體細節的部分了。首先,對於一個特效來說,最基礎的是形態。比如這個爆炸,他是球形?還是方形?(顯然不可能是方形)是呈放射狀,還是擴散形?是單一的幾何形狀?還是幾個幾何體的組合?以及在特效變化的過程中,是否有形變?怎麼變?這些都是我們需要考慮的問題。
經常在一些遊戲或者影視作品中,我們一看它們的到爆炸效果就會覺得:辣眼睛、5毛啊!造成這種原因,除了環境以及背景和特效沒什麼關聯以外,更重要的是爆炸的規律不正確。
由於年代久遠、硬體效能或者引擎限制原因,之前的絕大部分遊戲中(甚至包括很多3A級別的端遊),對於爆炸的表現基本就是用粒子發射一大堆火焰or煙霧貼圖糊在一團,有時候再配合一些螢幕後期效果來增強表現。然而隨著硬體技術的進步和引擎的不斷完善,越來越多的遊戲開發者和玩家已經不能滿足這種簡單而抽象的做法,而是去追求增加真實、更偏寫實效果的爆炸表現。
(當然也有往風格化發展的,這裡我們先不討論哈)

[《正當防衛3》]

[《孤島驚魂5》]

[《幽靈行動:荒野》]
從剛才的簡單介紹裡,我們已經對遊戲裡的爆炸有了一個初步的認知,接下來我們繼續討論爆炸的形態。在這之前,我們需要對其進行一下簡單的分類。
- 如果從爆炸的規模來分:小規模爆炸(手雷,槍榴彈)、中等爆炸(汽車,導彈,炮彈)、大型爆炸(轟炸,飛船爆炸、建築物爆炸)、特殊爆炸(蘑菇雲,恆星爆炸)......
- 如果從爆炸方式來分:地面爆炸、空中爆炸、水面爆炸、機器爆炸......
- 如果從爆炸型別來分:炸彈爆炸(塵土,碎片)、燃料爆炸(火焰,黑煙)、科技爆炸(電漿,粒子)......
可以看到,不同型別不同方式下,爆炸的造型、元素和節奏也各不相同。當我們在接到一個需求,或者準備開始一個作品時,首先要確定的是:我需要做一個什麼樣的爆炸。從規模到方式再到型別以及你能想得到的一切,儘可能詳描的在腦海中描述出你要的效果。確定了這些條件,有助於我們在接下來的設計製作過程中始終有一個明確的主題,而不會跑偏。
回到開始,假設這次我們需要做一個:中等規模、在地面上的、汽車類物體被炸彈引爆的爆炸效果。從這些關鍵詞中,我們可以大致確定特效的基本造型:

由於爆炸是在地面產生,因此它的形狀會被地面所影響,從而出現圖中的形態。同時由於溫度差異,中央的火球一般會比煙霧溫度高,呈現出熾熱的紅色,並向上翻滾升騰;周圍煙霧則溫度較低,像四周擴散。因此我們得結論,這種爆炸特效的主體,是中心的火球以及圍繞在周圍的濃煙。到這裡,特效的基本造型也就確定下來了。
有了主體,下一步就是補充輔助元素來豐富整體效果。我們經常在一些電影中看到,劇烈的爆炸帶起來大量的塵土,顯得衝擊力十足。比如:

[電影《紅海行動》]

[《叛亂:沙漠風暴》]
這種放射狀的塵土有助於增加整體特效氛圍的真實感與衝擊力。因此在設計製作的過程中,同樣也會考慮在火球周圍加入了類似的元素。

接下來就是一些小的裝飾性元素,比如火星啦,碎片之類的。我們在已有的基礎上新增它們來豐富一下畫面就好,切勿搶了主體。同時為了增加畫面表現力,我們在爆炸一開始的時候加入一個擴散的衝擊波,模擬空氣被推開的感覺。


[衝擊波和碎片]
到這裡,對爆炸特效造型和元素的分析這裡就先告一段落了。接下來我們討論幾個關鍵點,有助於提升特效品質。我先羅列一下,然後逐個分析:光影關係、環境影響、色彩變化、煙霧消散。
一.光影關係
經常有同學在做寫實類特效時,會覺得做出來的東西不夠真實,缺少體積感。其實光影關係在對塑造特效真實度和體積感中起到了非常大的作用。舉個例子:在現實生活中,很濃的煙霧在強光的照射下,會對自身和環境產生陰影。

我們再來看這兩張圖:


顯然下圖顯得更真實,更接近現實世界裡的煙霧。
回到我們的特效上,對於這個爆炸來說,中央火球在燃燒的同時會發出強烈的光線,因此它對我們整個特效來說,就是一個大光源。煙霧在光的影響下,面向火球的一面會比較亮,背向火球的一面則會較暗,這樣其自身陰影就產生了。

因此,怎麼去模擬這些光影明暗關係,就是我們表現特效體積感的重中之重。
(具體做法下一篇講)
二.環境影響
環境影響也可以說是特效對周圍環境產生的互動,它包含兩方面:特效對環境的影響、環境對特效的影響。
我們在做一個效果時,首先要知道它並不是平白無故的出現在場景中,而是會對周圍的環境產生互動。比如發生爆炸時,除了火球周圍會產生大量的濃煙以外,猛烈的衝擊波掃過地面時,也會帶起大範圍的煙塵:


[真實案例]

[地面帶起的煙塵]
同樣,爆炸產生的火球也會照亮場景以及角色,這裡就不細說了。
除了特效影響環境,事實上環境也會反過來對特效造成影響。舉幾個很簡單的例子:煙霧會受到風力的作用,會隨風飄動的同時消散;火星和碎片會和地面以及環境發生碰撞。這些微小的動態細節組合在一起,極大程度增加了特效的真實度。
至於色彩變化和煙霧消散,都屬於實際製作時候的技巧,先放到下一節去聊,這裡就不贅述啦。

下篇
繼續之前的內容,這一篇我們來討論製作中的具體實現方法(基於虛幻4引擎)。首先我們從特效主體開始。

[主體火球]
在做這種非常寫實的爆炸時,我們經常會用到一些高精度的特效序列圖,比如針對這個火球,我就用到了一張這樣的貼圖。

我們可以在fumeFX或是Houdini等一些常見流體特效外掛中模擬出火焰或煙霧的效果並匯出序列圖片,經過AE處理最終拼合成這樣一張特效序列圖。也可以從現有的素材庫中找到一張合適的貼圖。
(具體貼圖的渲染做法這裡就不講了,感興趣的同學可以去網上收集一些資料,或者以後我也可以出一些相關的教程)
單看這張貼圖,和我們預想的效果還相差甚遠,那麼如何把一張圖片在引擎中加工成為我們想要的效果?下一步我們開始著手準備製作shader。
在開始shader製作之前,有一個好習慣是先大概羅列出想要的功能,這樣可以幫助我們形成一個清晰的思路過程,比如針對這個爆炸,我們希望:
1.基礎顏色:煙霧的固有顏色。
2.自發光:燃燒部分的高亮區域。
3.法線:特效受光時產生更多的明暗細節。
4.DepthFade:與地面接觸時漸隱來消除切貼圖的切邊。
5.ParticleColor:粒子控制顏色。
根據這些功能需求,我們可以做出這樣一個最簡單也是最通用的材質。

接下來,我們用它生成材質例項,方便之後的引用和修改。

其中的Normal貼圖可以從流體外掛中一起匯出,也可以用Crazybump一類的貼圖處理軟體生成。自發光貼圖部分則需要我們在ps裡處理一下,把火焰燃燒的部分提取出來做成黑白通道圖。在除錯引數之後,我們會得到這樣的效果。

至此,材質部分告一段落。接下來我們新建一個粒子發射器,把剛才做好的材質匯入進來。開始製作動態效果。

在除錯動態時,有幾個點是需要我們注意的。首先是為了模擬火球翻滾的效果,我們需要同時發射2-3個粒子,每個粒子有一點微小的隨機旋轉角度。為了讓隨機模擬出來的效果達到我們的要求,這裡我使用了seed去固定旋轉角度。

[火球貼圖的朝向]
另外為了避免出現貼圖和角色穿插從而穿幫的情況,這裡我也給了一個camera offset嗎,讓貼圖朝著攝像機的方向移動了一小段距離。

有一點需要注意的是,因為爆炸的火球實際上是燃料不充分燃燒造型的,橘紅色的火焰產生後會轉化成大量的黑煙。因此我們在調色的過程中,應該保證整體色彩變化符合這樣的規律:

而不是:

最後別忘了給火球加入粒子燈光,模擬光源效果。

完成火球之後,繼續製作周圍的煙塵部分。材質依舊使用我們剛才做好的通用煙霧shader,重新制作一個材質例項,這次我們換一張貼圖:

[煙霧貼圖]

[材質例項]
之後我們建立一個圓形範圍粒子發射器,在火球周圍產生煙霧。同時為了體現場景互動中的風力作用,給它一個X或Y方向的速度,模擬煙霧被風吹散的效果。

有一點非常重要的是,為了表現出特效的光影關係,我們的煙霧貼圖需要受光照影響併產生明暗面。因此需要將材質裡的混合模式改為Trasnslucent,並且材質型別改為Default Lit,同時在Translucency下將光照模式改為如下所示:


這個時候我們開啟之前做好的火球,讓粒子燈光影響到煙霧,貼圖的明暗關係就產生了:

通過剛才的步驟,我們對流程應該已經相對熟悉了。有了之前的理論作為鋪墊,知道需要做什麼,那麼接下來速度就很快了。我們加入周圍放射狀的塵土以及火星粒子和爆炸產生的碎片。

同樣是剛才的材質,明暗和虛實上可以做出很多細節:


[放花煙啦]

[繼承父粒子的位置進行繁殖]

[碎片有大小兩種形態,注意區分重力和速度]

[把這些元素整合在一起]
最後,我們再加入衝擊波還有地面大範圍揚起的煙塵:

[實際上是個半球模型+折射材質]

[這個要是不會你可以來打我]
完成所有的元素後,我們還要對整體的造型、節奏、元素和色彩進行調整,直到效果滿意為止。最後再配合螢幕後期效果比如震屏啦、徑向模糊之類的增加下整體氛圍,這樣一個寫實爆炸特效就算是完成了。



由於文字的限制,一些具體的引數調整過程和細節演示在這裡就略過了。感興趣的朋友可以在這個基礎上繼續擴充套件,做出一個完整的特效作品,比如加入一些導彈飛行動畫,或者做個飛機投炸彈之類的表演,相信你一定能比我做的出色!
作者:馬識途
來源:騰訊遊戲學院
原地址:https://mp.weixin.qq.com/s/YskwnIDz0RqJ3_W9I5TDPg
相關文章
- 手把手教你做一個快取工具快取
- 寫一個滑鼠跟隨的特效特效
- 手把手教你做一個自己的chrome擴充套件程式Chrome套件
- 寫一個網頁點選的特效網頁特效
- Vite 實戰:手把手教你寫一個 Vite 外掛Vite
- 手把手教你做測開
- 情人節到了,手把手教你做一個表白牆,附有詳細步驟
- 手把手教你寫一個SpringMVC框架SpringMVC框架
- Pika 1.5王者歸來!將一切壓扁、膨脹、融化、爆炸,化身為了超強特效利器特效
- 手把手教你寫一個java的orm(一)JavaORM
- 2021年Wordpress手把手教你做個獨立站——部署篇
- 手把手教你寫一個 VSCode 外掛VSCode
- netty系列之:小白福利!手把手教你做一個簡單的代理伺服器Netty伺服器
- 手把手教你寫一個java的orm(五)JavaORM
- 手把手教你寫一個java的orm(三)JavaORM
- R資料分析:跟隨top期刊手把手教你做一個臨床預測模型模型
- 手把手教你做遊戲玩法開發遊戲
- 手把手教你利用 SpringBoot + Mybatis 實現一個讀寫分庫專案Spring BootMyBatis
- 手把手教你寫一個Java的orm框架(4)JavaORM框架
- 手把手教你寫一個Java的orm框架(2)JavaORM框架
- 手把手教你寫一個Java的orm框架(1)JavaORM框架
- 手把手教你寫一個Java的orm框架(3)JavaORM框架
- 手把手教你做線性迴歸分析,實用且通俗易懂!
- 第一季度,遊戲行業幾個爆炸的超預期遊戲行業
- 手把手教你擼一個React元件庫(超詳細)React元件
- 手寫一個超簡單的VueVue
- 超貼心的,手把手教你寫爬蟲爬蟲
- 手把手教你寫一個簡易的微前端框架前端框架
- 年底了!Smartbi教你做一個好看又實用的自助儀表盤!
- 手把手寫一個Clean(+mvp+rxjava)架構的DemoMVPRxJava架構
- 手把手教你寫一個微信小程式日曆元件微信小程式元件
- 手把手教你根據PromiseA+手寫一個Promise類Promise
- 手把手實現一個mini-Retrofit框架框架
- 帶你手把手實操一個RPC框架RPC框架
- 如何實現一個 滑鼠點選特效的 chrome外掛特效Chrome
- 5年新媒體人,手把手教你做選題
- 17 個實用的影像特效庫特效
- 前端工程化: 手把手node寫一個cli+物料庫前端