天天看點

Diablo(暗黑破壞神)的特效實作

http://candycat1992.github.io/2016/06/25/diablo/

視訊:GDC 2013

Diablo(暗黑破壞神),暴雪出品。演講者是暴雪TA,額最後的QA環節聽出來代碼不是他寫的(恩什麼ps、vs他看起來也完全不知道,“I have no idea, haha”)……看來暴雪TA負責是的設計shader和特效,但代碼還是另外由人來寫的。

Simon在他的文章裡詳細分析了翅膀特效的實作,他當時沒看到這個演講是以很多靠猜很不容易……

“Blend Add” Shading

Diablo(暗黑破壞神)的特效實作

傳統的additive(左邊)太亮了,blend(中間)缺少bloom效果,是以他們選擇右邊這種。

他們所說的Blend Add實際就是把各個顔色或透明通道相乘以後又乘以了2進行加亮。

Blend One OneMinusSrcAlpha // Blend Add

Texture Multiplication Shader

下面的公式就是所有特效使用的基本公式,簡單來說就是在普通的乘法後又乘以2。

Diablo(暗黑破壞神)的特效實作

下面他舉了很多例子。先從最簡單的開始。下面是兩張非常簡單的紋理,隻考慮alpha通道,是以rgb現在都是白色。TEX1和TEX2是兩張相同的紋理,但是按照不同的速率滾動,乘起來之後就可以得到右邊的效果。看起來像雲。

Diablo(暗黑破壞神)的特效實作

下面再添加一張紋理,TEX2現在是縮放成0.5,TEX3是放大成2.0,然後按不同速率滾動,得到更加複雜的類似雲層飄逸的效果。

Diablo(暗黑破壞神)的特效實作

下面是再添加一張texture(其實隻是第二張,前三張本質是一張紋理,隻是uv不同),這張紋理定義了particle的基本區域,然後乘起來(注意這裡沒有乘以2,因為隻是想作為mask)得到一個基本的particle渲染效果。

Diablo(暗黑破壞神)的特效實作

下面是把7個這樣的particle疊在一起的效果,就很有圓狀的動态效果了。

Diablo(暗黑破壞神)的特效實作

他指出很多特效都是靠這種方法,然後舉了一些實際的例子。例如下面的幽靈毒藥效果,TEX1不動,TEX2不斷向上滾動,把17個這樣的particle疊加起來就得到了右側的效果。

Diablo(暗黑破壞神)的特效實作

再比如下面的火焰特效。

Diablo(暗黑破壞神)的特效實作

以及下面的冰凍拖尾特效。拖尾的動作還是依靠改變particle網格動畫得到的,但每個particle的渲染是使用了這種方法。

Diablo(暗黑破壞神)的特效實作

下面這個特效也是僅靠兩張texture來實作的。

Diablo(暗黑破壞神)的特效實作

下面這張圖是上面那個特效的實作細節。TEX1是一個不動的紋理,TEX2不停滾動,然後整個特效再依靠12個particle的運動來實作。

Diablo(暗黑破壞神)的特效實作

同上,還有一些更複雜的例子。這個火焰隻使用了23個particle。

Diablo(暗黑破壞神)的特效實作

上面的特效,這種方法來用于渲染一些僞體積渲染。例如下面的煙霧,隻用了60個particle。

Diablo(暗黑破壞神)的特效實作

下面這張圖是真正的網格。

Diablo(暗黑破壞神)的特效實作

下面的地火也是,隻用了28個particle,和一些滾動的紋理。

Diablo(暗黑破壞神)的特效實作

這種方法大大節省了particle的數目,進而減少了overdraw,在作者看來這是一個huge win!oh yeah!這種方法的瓶頸其實是在memory上,而不是shader計算上。每個particle多用了大概兩張texture,但減少了很多overdraw。

QA環節有一個人問,為什麼要把alpha和rgb分開,和在一起可以嗎?除了一些内容建立的原因,他更傾向于分開,是以這樣每張texture都比較小,texture load的時間就比較快。

繼續閱讀