Unity Shader - 消融效果原理与变体
基本原理与实现
主要使用噪声和透明度测试，从噪声图中读取某个通道的值，然后使用该值进行透明度测试。
主要代码如下：
fixed cutout = tex2D(_NoiseTex, i.uvNoiseTex).r;
clip(cutout - _Threshold);
Basic场景
边缘颜色
如果纯粹这样镂空，则效果太朴素了，因此通常要在镂空边缘上弄点颜色来模拟火化、融化等效果。
1. 纯颜色
第一种实现很简单，首先定义_EdgeLength和_EdgeColor两个属性来决定边缘多长范围要显示边缘颜色；然后在代码中找到合适的范围来显示边缘颜色。
主要代码如下：
//Properties
_EdgeLength("Edge Length", Range(0.0, 0.2)) = 0.1
_EdgeColor("Border Color", Color) = (1,1,1,1)
...
//Fragment
if(cutout - _Threshold < _EdgeLength)
return _EdgeColor;
EdgeColor场景
2. 两种颜色混合
第一种纯颜色的效果并不太好，更好的效果是混合两种颜色，来实现一种更加自然的过渡效果。
主要代码如下：
if(cutout - _Threshold < _EdgeLength)
{
float degree = (cutout - _Threshold) / _EdgeLength;
return lerp(_EdgeFirstColor, _EdgeSecondColor, degree);
}
TwoEdgeColor场景
3. 边缘颜色混合物体颜色
为了让过渡更加自然，我们可以进一步混合边缘颜色和物体原本的颜色。
主要代码如下：
float degree = saturate((cutout - _Threshold) / _EdgeLength); //需要保证在[0,1]以免后面插值时颜色过亮
fixed4 edgeColor = lerp(_EdgeFirstColor, _EdgeSecondColor, degree);
fixed4 col = tex2D(_MainTex, i.uvMainTex);
fixed4 finalColor = lerp(edgeColor, col, degree);
return fixed4(finalColor.rgb, 1);
BlendOriginColor场景
4. 使用渐变纹理
为了让边缘颜色更加丰富，我们可以进而使用渐变纹理：
然后我们就可以利用degree来对这条渐变纹理采样作为我们的边缘颜色：
float degree = saturate((cutout - _Threshold) / _EdgeLength);
fixed4 edgeColor = tex2D(_RampTex, float2(degree, degree));
fixed4 col = tex2D(_MainTex, i.uvMainTex);
fixed4 finalColor = lerp(edgeColor, col, degree);
return fixed4(finalColor.rgb, 1);
Ramp场景
从特定点开始消融
DissolveFromPoint场景
为了从特定点开始消融，我们需要把片元到特定点的距离考虑进clip中。
第一步需要先定义消融开始点，然后求出各个片元到该点的距离（本例子是在模型空间中进行）：
//Properties
_StartPoint("Start Point", Vector) = (0, 0, 0, 0) //消融开始点
...
//Vert
//把点都转到模型空间
o.objPos = v.vertex;
o.objStartPos = mul(unity_WorldToObject, _StartPoint);
...
//Fragment
float dist = length(i.objPos.xyz - i.objStartPos.xyz); //求出片元到开始点距离
第二步是求出网格内两点的最大距离，用来对第一步求出的距离进行归一化。这一步需要在C#脚本中进行，思路就是遍历任意两点，然后找出最大距离：
public class Dissolve : MonoBehaviour {
void Start () {
Material mat = GetComponent<MeshRenderer>().material;
mat.SetFloat("_MaxDistance", CalculateMaxDistance());
}
float CalculateMaxDistance()
{
float maxDistance = 0;
Vector3[] vertices = GetComponent<MeshFilter>().mesh.vertices;
for(int i = 0; i < vertices.Length; i++)
{
Vector3 v1 = vertices[i];
for(int k = 0; k < vertices.Length; k++)
{
if (i == k) continue;
Vector3 v2 = vertices[k];
float mag = (v1 - v2).magnitude;
if (maxDistance < mag) maxDistance = mag;
}
}
return maxDistance;
}
}
同时Shader里面也要同时定义_MaxDistance来存放最大距离的值：
//Properties
_MaxDistance("Max Distance", Float) = 0
//Pass
float _MaxDistance;
第三步就是归一化距离值
//Fragment
float normalizedDist = saturate(dist / _MaxDistance);
第四步要加入一个_DistanceEffect属性来控制距离值对整个消融的影响程度：
//Properties
_DistanceEffect("Distance Effect", Range(0.0, 1.0)) = 0.5
...
//Pass
float _DistanceEffect;
...
//Fragment
fixed cutout = tex2D(_NoiseTex, i.uvNoiseTex).r * (1 - _DistanceEffect) + normalizedDist * _DistanceEffect;
clip(cutout - _Threshold);
上面已经看到一个合适_DistanceEffect的效果了，下面贴出_DistanceEffect为1的效果图：
_DistanceEffect = 1
这就完成了从特定点开始消融的效果了，不过有一点要注意，消融开始点最好是在网格上面，这样效果会好点。
应用：场景切换
利用这个从特定点消融的原理，我们可以实现场景切换。
假设我们要实现如下效果：
来自Trifox的图
因为我们原来的Shader是从中间开始镂空的，和图中从四周开始镂空有点不同，因此我们需要稍微修改一下计算距离的方式：
//Fragment
float normalizedDist = 1 - saturate(dist / _MaxDistance);
这时候我们的Shader就能从四周开始消融了。
第二步就是需要修改计算距离的坐标空间，原来我们是在模型空间下计算的，而现在很明显多个不同的物体会同时受消融值的影响，因此我们改为世界空间下计算距离：
//Vert
o.worldPos = mul(unity_ObjectToWorld, v.vertex);
//Fragment
float dist = length(i.worldPos.xyz - _StartPoint.xyz);
完整代码点这里
为了让Shader应用到场景物体上好看点，我加了点漫反射代码。
第三步为了计算所有场景的物体的顶点到消融开始点的最大距离，我定义了下面这个脚本：
public class DissolveEnvironment : MonoBehaviour {
public Vector3 dissolveStartPoint;
[Range(0, 1)]
public float dissolveThreshold = 0;
[Range(0, 1)]
public float distanceEffect = 0.6f;
void Start () {
//计算所有子物体到消融开始点的最大距离
MeshFilter[] meshFilters = GetComponentsInChildren<MeshFilter>();
float maxDistance = 0;
for(int i = 0; i < meshFilters.Length; i++)
{
float distance = CalculateMaxDistance(meshFilters[i].mesh.vertices);
if (distance > maxDistance)
maxDistance = distance;
}
//传值到Shader
MeshRenderer[] meshRenderers = GetComponentsInChildren<MeshRenderer>();
for(int i = 0; i < meshRenderers.Length; i++)
{
meshRenderers[i].material.SetVector("_StartPoint", dissolveStartPoint);
meshRenderers[i].material.SetFloat("_MaxDistance", maxDistance);
}
}
void Update () {
//传值到Shader，为了方便控制所有子物体Material的值
MeshRenderer[] meshRenderers = GetComponentsInChildren<MeshRenderer>();
for (int i = 0; i < meshRenderers.Length; i++)
{
meshRenderers[i].material.SetFloat("_Threshold", dissolveThreshold);
meshRenderers[i].material.SetFloat("_DistanceEffect", distanceEffect);
}
}
//计算给定顶点集到消融开始点的最大距离
float CalculateMaxDistance(Vector3[] vertices)
{
float maxDistance = 0;
for(int i = 0; i < vertices.Length; i++)
{
Vector3 vert = vertices[i];
float distance = (vert - dissolveStartPoint).magnitude;
if (distance > maxDistance)
maxDistance = distance;
}
return maxDistance;
}
}
这个脚本同时还提供了一些值来方便控制所有场景的物体。
像这样把场景的物体放到Environment物体下面，然后把脚本挂到Environment，就能实现如下结果了：
DissolveEnvironment场景
从特定方向开始消融
DissolveFromDirectionX场景
理解了上面的从特定点开始消融，那么理解从特定方向开始消融就很简单了。
下面实现X方向消融的效果。
第一步求出X方向的边界，然后传给Shader：
using UnityEngine;
using System.Collections;
public class DissolveDirection : MonoBehaviour {
void Start () {
Material mat = GetComponent<Renderer>().material;
float minX, maxX;
CalculateMinMaxX(out minX, out maxX);
mat.SetFloat("_MinBorderX", minX);
mat.SetFloat("_MaxBorderX", maxX);
}
void CalculateMinMaxX(out float minX, out float maxX)
{
Vector3[] vertices = GetComponent<MeshFilter>().mesh.vertices;
minX = maxX = vertices[0].x;
for(int i = 1; i < vertices.Length; i++)
{
float x = vertices[i].x;
if (x < minX)
minX = x;
if (x > maxX)
maxX = x;
}
}
}
第二步定义是从X正方向还是负方向开始消融，然后求出各个片元在X分量上与边界的距离：
//Properties
_Direction("Direction", Int) = 1 //1表示从X正方向开始，其他值则从负方向
_MinBorderX("Min Border X", Float) = -0.5 //从程序传入
_MaxBorderX("Max Border X", Float) = 0.5 //从程序传入
...
//Vert
o.objPosX = v.vertex.x;
...
//Fragment
float range = _MaxBorderX - _MinBorderX;
float border = _MinBorderX;
if(_Direction == 1) //1表示从X正方向开始，其他值则从负方向
border = _MaxBorderX;
灰烬飞散效果
DirectionAsh场景
主要效果就是上面的从特定方向消融加上灰烬向特定方向飞散。
首先我们需要生成灰烬，我们可以延迟clip的时机：
float edgeCutout = cutout - _Threshold;
clip(edgeCutout + _AshWidth); //延至灰烬宽度处才剔除掉
这样可以在消融边缘上面留下一大片的颜色，而我们需要的是细碎的灰烬，因此我们还需要用白噪声图对这片颜色再进行一次Dissolve：
float degree = saturate(edgeCutout / _EdgeWidth);
fixed4 edgeColor = tex2D(_RampTex, float2(degree, degree));
fixed4 finalColor = fixed4(lerp(edgeColor, albedo, degree).rgb, 1);
if(degree < 0.001) //粗略表明这是灰烬部分
{
clip(whiteNoise * _AshDensity + normalizedDist * _DistanceEffect - _Threshold); //灰烬处用白噪声来进行碎片化
finalColor = _AshColor;
}
下一步就是让灰烬能够向特定方向飞散，实际上就是操作顶点，让顶点进行偏移，因此这一步在顶点着色器中进行：
float cutout = GetNormalizedDist(o.worldPos.y);
float3 localFlyDirection = normalize(mul(unity_WorldToObject, _FlyDirection.xyz));
float flyDegree = (_Threshold - cutout)/_EdgeWidth;
float val = max(0, flyDegree * _FlyIntensity);
v.vertex.xyz += localFlyDirection * val;
Trifox的镜头遮挡消融
Trifox场景
具体原理参考 Unity案例介绍:Trifox里的遮挡处理和溶解着色器(一)
完整代码点这里 我这里的实现是简化版。
项目代码
项目代码在Github上，点这里查看
参考
《Unity Shader 入门精要》
Tutorial - Burning Edges Dissolve Shader in Unity
A Burning Paper Shader
Unity案例介绍:Trifox里的遮挡处理和溶解着色器(一)
《Trifox》中的遮挡处理和溶解着色器技术（下）
