环境

系统:Windows 10
引擎:Unity 2017.2.1f1
工具:Shader Forge 1.38

目的

使用Shader Forge制作渐变效果的实例。

(1)导入Shader Forge插件。

unity text 文字渐变 unity颜色渐变_unity text 文字渐变

(2)从菜单项Window的子项,找到Shader Forge。

unity text 文字渐变 unity颜色渐变_Shader Forge_02

(3)选择New Shader。

unity text 文字渐变 unity颜色渐变_插值_03

(4)点击“Unlit”,保存新的Shader文件。

unity text 文字渐变 unity颜色渐变_插值_04

(5-1)做渐变嘛,少不了线性插值,因为它作用于混合两个值或颜色。在Shader Forge编辑界面,按L键,出现L开头的选项集合。

unity text 文字渐变 unity颜色渐变_插值_05

(5-2)选择Lerp,出现Lerp节点。

unity text 文字渐变 unity颜色渐变_插值_06

(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开头的选项集合。

unity text 文字渐变 unity颜色渐变_Shader_07

(6-2)选择Color,出现Color节点,渐变需要两个Color节点。

unity text 文字渐变 unity颜色渐变_Shader Forge_08

(7)把Color节点改名为ColorA(蓝色),ColorB(红色)。

unity text 文字渐变 unity颜色渐变_Shader Forge_09

(8)左键点击Color的输出端,拖拉出一条线到Lerp的输入端,此处混合颜色,就拖RGB输入端,R、G、B的输出只是一个值。两个Color分别连入Lerp的A和B端。

unity text 文字渐变 unity颜色渐变_Shader_10

(9-1)按U键,出现U开头的选项集合。

unity text 文字渐变 unity颜色渐变_unity text 文字渐变_11

(9-2)选择UV Coordinates,出现UV Coord.节点。

unity text 文字渐变 unity颜色渐变_Shader_12

(10-1)使用UV坐标的U值作为插值系数的效果是:横向渐变。

unity text 文字渐变 unity颜色渐变_unity text 文字渐变_13

(10-2)使用UV坐标的V值作为插值系数的效果是:纵向渐变。

unity text 文字渐变 unity颜色渐变_插值_14

(11)关闭Shader Forge编辑器,选择生成的Shader文件。点击Open shader code,打开代码。

unity text 文字渐变 unity颜色渐变_Shader_15

(12-1)UV Coordinates:uv坐标,是一个二元数。从顶点着色器输出给片段着色器。

unity text 文字渐变 unity颜色渐变_Unity_16

(12-2)四元数为例,xyzw可以与rgba互换,三元数xyz、二元数rg如此类推。横向渐变使用R通道,即.r。如果纵向渐变使用G通道,即.g。

unity text 文字渐变 unity颜色渐变_插值_17

(13)回到Unity,选择Shader文件,点击Open in Shader Forge,重新进入Shader Forge编辑器。

unity text 文字渐变 unity颜色渐变_Shader_18

(14-1)添加Component Mask节点。Component Mask:分量遮罩,用于重新排序或提取向量的通道。例如,以uv坐标为基点,当uv坐标传给分量遮罩的是一元数r或g,那么分量遮罩也只能是个一元数,如:uv.r或uv.g,只能变成uv.r.r或uv.g.r。但uv传给分量遮罩的是二元数时,分量遮罩相当于UV的一个引用。

unity text 文字渐变 unity颜色渐变_Shader_19

(14-2)把分量遮罩插入到UV坐标和Lerp节点中间。

unity text 文字渐变 unity颜色渐变_Shader_20

(14-3)此时,分量遮罩输出的是UV的R通道的R通道,实质就是UV的R通道,上述(14-1)已说明原因。

unity text 文字渐变 unity颜色渐变_Shader_21

(15)布局如下。

unity text 文字渐变 unity颜色渐变_Shader Forge_22

(16)实测效果,全黑?(实测机系统:Android 6.0.1)

unity text 文字渐变 unity颜色渐变_Shader Forge_23

(17-1)回到Shader Forge编辑器界面,选择Shader Setting…选项。

unity text 文字渐变 unity颜色渐变_Shader_24

(17-2)勾选OpenGLES 3.0

unity text 文字渐变 unity颜色渐变_Unity_25

(17-3)代码加入gles3

unity text 文字渐变 unity颜色渐变_Shader Forge_26

(18)实测效果,正常。

unity text 文字渐变 unity颜色渐变_插值_27

以上简单回顾。

参考:

Shader Forge - Gradients (Part 1, The Basics)https://www.youtube.com/watch?v=kMHxQukEFoE

ShaderForge官网http://acegikmo.com/shaderforge/nodes/?lang=zh_cn

线性插值https://en.wikipedia.org/wiki/Linear_interpolation