日落20181210001 - Unity插件應用之ShaderForge製作顏色漸變效果

原創

海盐布丁

2020-05-31 16:05

環境

系統：Windows 10
引擎：Unity 2017.2.1f1
工具：Shader Forge 1.38

目的

使用Shader Forge製作漸變效果的實例。

（1）導入Shader Forge插件。

（2）從菜單項Window的子項，找到Shader Forge。

（3）選擇New Shader。

（4）點擊“Unlit”，保存新的Shader文件。

（5-1）做漸變嘛，少不了線性插值，因爲它作用於混合兩個值或顏色。在Shader Forge編輯界面，按L鍵，出現L開頭的選項集合。

（5-2）選擇Lerp，出現Lerp節點。

（5-3）Lerp的計算：
按照本例設置，
插值係數：橫向座標U（或者縱向座標V），設值爲t。
起點顏色：ColorA，設值爲(r0, g0, b0, a0)。
終點顏色：ColorB，設值爲(r1, g1, b1, a1)。
過渡顏色：Color，設值爲(r, g, b, a)。
由於數值爲一元數，二維座標爲二元數xy，顏色爲四元數rgba。
而本例雖然用到的是顏色，但回看代碼：

uniform float4 _ColorA;
uniform float4 _ColorB;
// 其中代碼略......
float3 emissive = lerp(_ColorA.rgb,_ColorB.rgb,i.uv0.r);

雖然ColorA和ColorB均設爲四元數，只是用到三元數rgb。
根據線性插值原理，
則有t = (r - r0) / (r1 - r0) = (g - g0) / (g1 - g0) = (b - b0) / (b1 - b0)
即：
r = t * (r1 - r0) + r0
g = t * (g1 - g0) + g0
b = t * (b1 - b0) + b0

（6-1）按C鍵，出現C開頭的選項集合。

（6-2）選擇Color，出現Color節點，漸變需要兩個Color節點。

（7）把Color節點改名爲ColorA(藍色)，ColorB(紅色)。

（8）左鍵點擊Color的輸出端，拖拉出一條線到Lerp的輸入端，此處混合顏色，就拖RGB輸入端，R、G、B的輸出只是一個值。兩個Color分別連入Lerp的A和B端。

（9-1）按U鍵，出現U開頭的選項集合。

（9-2）選擇UV Coordinates，出現UV Coord.節點。

（10-1）使用UV座標的U值作爲插值係數的效果是：橫向漸變。

（10-2）使用UV座標的V值作爲插值係數的效果是：縱向漸變。

（11）關閉Shader Forge編輯器，選擇生成的Shader文件。點擊Open shader code，打開代碼。

（12-1）UV Coordinates：uv座標，是一個二元數。從頂點着色器輸出給片段着色器。

（12-2）四元數爲例，xyzw可以與rgba互換，三元數xyz、二元數rg如此類推。橫向漸變使用R通道，即.r。如果縱向漸變使用G通道，即.g。

（13）回到Unity，選擇Shader文件，點擊Open in Shader Forge，重新進入Shader Forge編輯器。

（14-1）添加Component Mask節點。Component Mask：分量遮罩，用於重新排序或提取向量的通道。例如，以uv座標爲基點，當uv座標傳給分量遮罩的是一元數r或g，那麼分量遮罩也只能是個一元數，如：uv.r或uv.g，只能變成uv.r.r或uv.g.r。但uv傳給分量遮罩的是二元數時，分量遮罩相當於UV的一個引用。