很多同學對shader的了解簡直令人發指,不得不承認我之前的文章很失敗,沒有達到指引效果。
經過我深深的反思,本系列設定起點還是太高,僅僅着眼於本質不能讓很多同學收獲學習圖形學的實效。
我已經反省過了,讓這個系列更貼近初學者,你跟隨着這篇東西去一步步操作,就能得到一些實際可用的Shader。
還是使用Unity作為測試工具,因為用他的人的確很多。
在這個小白叢生的圈子里說到圖形學,大部分人都告訴你shader,我對此早已吐槽無力。
也只好放棄、隨他去吧。該說的話之前的系列已經講的很多,現在就從一個常用效果說起。
先介紹一個蠻常用的效果
流光效果
從畫法的角度看,流光效果的成本很低,一張流光圖,一張過濾圖,一個渲染遍,即可實現效果。
但是效果很令人印象深刻。
流光效果可用於2D或者3D。
用於3D的比如角色盔甲上流動的光斑
用於2D的例子比如在按鈕上弄個飄過的亮光
比如爐石的卡牌
這些都是流光效果。其中爐石的卡牌流光效果比較復雜,多層、帶過濾、多種流動形式。
其實兩張圖的shader,我們在《劍英陪你玩轉圖形學二》中已經展示了幾個。而流光,關鍵在於流動。
在開始寫一個簡單的流光效果之前,我們先普及一些shader的知識
這是一個新建的shader,我只是添加了一些注釋
接下去,我們要在此基礎上,一步步修改加上流光的效果。這里我們使用 surfaceshader,surfaceshader是unity的一個特別設計。
他是pixelshader的一部分,准確的說,前半部分。
Surfaceshader自動生成一個傳統的vertexshader和pixelshader,根據你所指定的光照模型。
因為大部分的shader並不干涉光照模型,而只是在像素階段做一些疊加、混合什么的。
Surfaceshader巧妙的讓你可以只關心這一部分,學習的時候,只關注一部分,恰恰是個優點。
隨便准備兩張圖片,一張底圖,一張流光圖
這里順便給出一個快速制作流光圖的ps操作方法。看圖就懂。
其中logo01是底圖,無所謂用什么東西,最好選擇一張比較暗的圖,我們准備采用加法讓他變亮,暗一點效果更明顯。
我們想使用flow圖的alpha通道,flow圖延x方向運動,循環往復。至少要讓flow圖的一個半邊全黑,因為加法全黑等於沒加。
當使用這半邊時完全不加亮
Flow貼圖的設置這里要特別說明三個地方
-
Alpha from Grayscale 從圖片的灰度生成alpha通道,直接制作alpha通道不直觀,灰度圖很直觀。
這個選項就是讓你用一張直觀的灰度圖生成通道。
你可以不用這個選項,而是自己提供一個有alpha通道的圖片
-
wrap Mode當uv超出0 1 范圍是的取值方法,我們需要讓這張圖循環往復,就是利用wrap mode repeat來實現的。
必須使用這個選項
-
Format,因為這張圖我們只需要一個通道,而且不適合壓縮,沒有比Alpha8更適合的存儲格式了
可選,只是為了節省內存容量
然后流光Shader 新手拈來,有注釋的部分是在空shader基礎上增加的
稍微解釋一下原理,
把一張貼圖的四個頂點的uv連成一個紅框,是這樣的。
把每個頂點的uv.x /2 是這樣的
對uv.x 再加上同一個值是這樣的
我們就是要用加上的這個值,對這個紅框做動畫
效果如下
拖動shader下面的拉桿就可以看到循環效果,用一個腳本去驅動這個參數做動畫,就有流光效果了。
然后讓我們做一點改變,動畫這個東西不用腳本也能做。
因為shaderlab里面有默認參數_Time.y 他等於Time.timeSinceLevelLoad
經過Step02的修改,這個材質可以自動的動起來,不需要代碼驅動。
然后我們可以再改一點點,讓他變成透明的
也可以改成不受光影響的
然后,最后的一步,讓我們引入過濾的概念。
加入一張過濾圖,和流光圖一樣設置
讓只在這張圖白色部分疊加流光
Shader如下
對比效果如圖,前排無過濾,后排有過濾
可以在線看效果http://lightszero.github.io/shader_01/shader_01.html
項目源代碼在這里https://github.com/lightszero/BlockFun/tree/master/unity/shader_btw
這里的流光效果僅僅適用於2D,接下來我們要建立一個更適合3D物體的流光效果。
大家也看到了,上面的球體流光效果一塌糊塗,那么用於3D的流光效果有什么不同呢,我們慢慢往下說。
2D的流光效果(或者說簡單面片,uv均勻分布)直接用UV擾動即可,而3D模型的UV很多情況下分布的一塌糊塗,尤其是接近球體的模型
從uv這個角度考慮會進入一個死胡同,流光是一種反射,一種環境反射。那么自然是適合用一張cubemap,用法線去采樣了。
這樣做自然沒有問題,用cubemap當然沒問題,或者可以用更加節省的方式,極坐標貼圖。
Cubemap是用六張貼圖圍成一個盒子,極坐標貼圖是只用一個圓形貼圖。
可是,流光效果只是簡單的光亮,使用平面貼圖還是環境貼圖其實沒有什么區別
我們只需要他按照法線分布,產生一種在模型表面移動的效果
准備一張自循環貼圖
效果如下
用於復雜的模型時效果更好
最后給3D流光加上過濾功能的shader我就不提供了,大家自己研究一下吧。