【经验分享】黑客帝国数字矩阵特效做法

首先，不要被表象所迷惑！
这个特效是由这三张图做成的

两张噪声图，一张数字图集，（当然，你可以换成字母或其他符号）
第一张噪声图用于决定格子内生成的数字；
第二张噪声图用于决定格子内数字的亮度。

首先，准备一个大小为1的面片（GameObject >> 3D Object >> Quad），
再准备一个空的fragment shader，创建一个材质使用这个shader，并将面片的材质选为该材质。
开工。
2楼中提到了格子的概念，我们先来划分用于装数字的格子吧
属性中定义
_CellSize ("Cell Size (xyz)", Vector) = (0.03, 0.04, 0.03, 0)
代表以x = 0.03， y = 0.04一格
另外定义三张图
_RandomTex ("Random Tex", 2D) = "white" {}
_FlowingTex ("Flowing Tex", 2D) = "white" {}
_NumberTex ("Number Tex", 2D) = "white" {}
分别代表2楼的三张图
再定义属性：
_TexelSizes ("Random Texel Size, Flowing Texel Size, Number Count", Vector) = (0.015625, 0.00390625, 10, 0)
记录两张噪声图的大小以及数字的个数。
#define _RandomTexelSize (_TexelSizes.x)
#define _FlowingTexelSize (_TexelSizes.y)
#define _NumberCount (_TexelSizes.z)
然后我们就可以把格子划分出来了
fixed4 frag (v2f i) : COLOR
{
float3 cellc = i.texc.xyz / _CellSize;
fixed4 c = tex2D(_RandomTex, cellc.xy * _RandomTexelSize).rgba;
return c;
}

接下来，定义一个时间用于动画：
#define T (_Time.y)
这次我们模拟亮度流动的动画：
将4楼中代码改为_FlowingTex：
fixed4 intens = tex2D(_FlowingTex, (cellc.xy + float2(0,T*_Speed.x)) * _FlowingTexelSize);
return intens;
亮度开始流动了：
（由于GIF很短，所以过一阵会闪，但在实际中是连续的流动，下同）

这个流动很难看，
因为所有的列都以同样的速度在运动，
现在我们要做的是让每一列有不同的速度在流动：
借用RandomTex上的随机值，以x轴为依据，获取列速度：
float speed = tex2D(_RandomTex, cellc.xx * _RandomTexelSize).g * 2 + 0.3;
乘2加0.3的意思是把速度规定在0.3至2.3之间，拉开速度差距。
然后把5楼中的 T*_Speed.x 改为 T*speed*_Speed.x ：
fixed4 intens = tex2D(_FlowingTex, (cellc.xy + float2(0,T*speed*_Speed.x)) * _FlowingTexelSize).rgba;
return intens;
各列异速流动就出来了：

害怕大家跟丢了，强调一下，现在做的是亮度的运动图。

接下来在上面的基础之上做数字的运动图，
但不是真正的数字，我们还是用亮度来代表数字。
亮度范围是【0,1】，对应0~9，十个数字。
fixed4 frag (v2f i) : COLOR
{
// 格子
float3 cellc = i.texc.xyz / _CellSize;
float speed = tex2D(_RandomTex, cellc.xx * _RandomTexelSize).g * 2 + 0.3;
cellc.y += T*speed*_Speed.x;
// 数字（亮度代表数字）
float number = round(tex2D(_RandomTex, cellc.xy * _RandomTexelSize).r * _NumberCount) / _NumberCount;
return number;
}
round（x * NumberCount）/ NumberCount 的意思是将得到的数字变为：
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9
（如果NumberCount = 20，则是 0 0.05 0.10 .... 这些值）
为什么要做成这些值，这是为了后面在数字图上确定起始纹理坐标。
如图所示为数字的运动图：
（以亮度代表数字，黑色0，白色9，黑到白渐变1~8）

可以发现上图不够好，因为所有的数字只有流动，没有变化
说清楚一点就是对于每一列来讲，亮度的组合是一定的，也就是数字的组合是一定的。
定义_Speed.y 代表数字的变化速度
float2 nc = cellc;
nc.x += round(T*_Speed.y*speed);
在x方向做一个随时间的位移
float number = round(tex2D(_RandomTex, nc * _RandomTexelSize).r * _NumberCount) / _NumberCount;

可以看到数字（亮度）既在变化，也在流动

现在，我们要把亮度变成真正的数字！！
在求出 number 过后，写如下代码：
float2 number_tex_base = float2(number, 0);
// 用 number 生成基准纹理坐标（在数字图【0123456789】上的纹理坐标）
fixed4 ncolor = tex2D(_NumberTex, number_tex_base + float2(frac(cellc.x/_NumberCount), frac(cellc.y)));
// 根据基准纹理坐标取数字图
return ncolor;
“duang”的一声，数字就出来了！！

数字之间夹杂着许多不好看的线条，这是由于上面的frac函数造成的，
frac会在1突变为0处造成ddx，ddy很大，这样会取到更大的mipmap等级，
我们把tex2D函数改为tex2Dlod 强制取mipmap lod 0
float2 number_tex = number_tex_base + float2(frac(cellc.x/_NumberCount), frac(cellc.y));
fixed4 ncolor = tex2Dlod(_NumberTex, float4(number_tex, 0, 0));
杂线条就去掉了

既然数字已经出来了，叠上亮度，大功告成！
float intens = tex2D(_FlowingTex, cellc.xy * _FlowingTexelSize).r;
// 之前6楼的intens
..
return ncolor * pow(intens,2);

加上两个属性
_TintColor ("Tint Color", Color) = (1,1,1,1)
_Intensity ("Global Intensity", Float) = 1
颜色和总体亮度
return ncolor * pow(intens,2) * _Intensity * _TintColor;
将一个Quad 复制为5个Quad，最终效果就出来了。
如图是在场景中看的效果

最后再在摄像机上加上Bloom，Depth Blur等特效，就是1楼的图了！

这是贴在球上的效果

这是最终材质面板

老规矩，只贴shader，不发工程，授人以鱼不如授人以渔。
fixed4 frag (v2f i) : COLOR
{
float3 cellc = i.texc.xyz / _CellSize + EPSILON;
float speed = tex2D(_RandomTex, cellc.xx * _RandomTexelSize).g * 3 + 1;
cellc.y += T*speed*_Speed.x;
float intens = tex2D(_FlowingTex, cellc.xy * _FlowingTexelSize).r;
float2 nc = cellc;
nc.x += round(T*_Speed.y*speed);
float number = round(tex2D(_RandomTex, nc * _RandomTexelSize).r * _NumberCount) / _NumberCount;
float2 number_tex_base = float2(number, 0);
float2 number_tex = number_tex_base + float2(frac(cellc.x/_NumberCount), frac(cellc.y));
fixed4 ncolor = tex2Dlod(_NumberTex, float4(number_tex, 0, 0)).rgba;
return ncolor * pow(intens,3) * _Intensity * _TintColor;
}

先收藏再看