Unity Shader - 消融效果原理与变体

时间 2019-12-20

标签 unity shader 消融效果原理变体繁體版

原文原文链接

基本原理与实现

主要使用噪声和透明度测试，从噪声图中读取某个通道的值，而后使用该值进行透明度测试。
主要代码以下：html

fixed cutout = tex2D(_NoiseTex, i.uvNoiseTex).r;
clip(cutout - _Threshold);

完整代码点这里git

边缘颜色

若是纯粹这样镂空，则效果太朴素了，所以一般要在镂空边缘上弄点颜色来模拟火化、融化等效果。github

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;

完整代码点这里3d

2. 两种颜色混合

第一种纯颜色的效果并不太好，更好的效果是混合两种颜色，来实现一种更加天然的过渡效果。
主要代码以下：code

if(cutout - _Threshold < _EdgeLength)
{
    float degree = (cutout - _Threshold) / _EdgeLength;
    return lerp(_EdgeFirstColor, _EdgeSecondColor, degree);
}

完整代码点这里orm

3. 边缘颜色混合物体颜色

为了让过渡更加天然，咱们能够进一步混合边缘颜色和物体本来的颜色。
主要代码以下：htm

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);

完整代码点这里blog

4. 使用渐变纹理

为了让边缘颜色更加丰富，咱们能够进而使用渐变纹理：

而后咱们就能够利用degree来对这条渐变纹理采样做为咱们的边缘颜色：ip

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);

完整代码点这里

从特定点开始消融

为了从特定点开始消融，咱们须要把片元到特定点的距离考虑进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的效果图：

这就完成了从特定点开始消融的效果了，不过有一点要注意，消融开始点最好是在网格上面，这样效果会好点。

完整代码点这里

应用：场景切换

利用这个从特定点消融的原理，咱们能够实现场景切换。
假设咱们要实现以下效果：

由于咱们原来的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，就能实现以下结果了：

具体的场景文件点这里

从特定方向开始消融

理解了上面的从特定点开始消融，那么理解从特定方向开始消融就很简单了。
下面实现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;

完整代码点这里

灰烬飞散效果

主要效果就是上面的从特定方向消融加上灰烬向特定方向飞散。
首先咱们须要生成灰烬，咱们能够延迟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的镜头遮挡消融

具体原理参考 Unity案例介绍:Trifox里的遮挡处理和溶解着色器(一)

完整代码点这里我这里的实现是简化版。

项目代码

项目代码在Github上，点这里查看

参考

《Unity Shader 入门精要》
Tutorial - Burning Edges Dissolve Shader in Unity
A Burning Paper Shader
Unity案例介绍:Trifox里的遮挡处理和溶解着色器(一)
《Trifox》中的遮挡处理和溶解着色器技术（下）