论坛 › 技术讨论 Technology Answers › 《Unity Shader入门精要》笔记（二十九）

DomDomm 发表于 2022-11-19 12:22

《Unity Shader入门精要》笔记（二十九）

本文为《Unity Shader入门精要》第十五章《使用噪声》的第一节内容《消融效果》。
本文相关代码，详见：

原书代码，详见原作者github：
<hr/>本章将学习噪声纹理的相关使用，它将带来意想不到的效果，给特效以随机自然的感觉。本章将学习三种基于噪声纹理的效果，分别是：火焰的消融效果、水面的波动效果、雾效的缥缈效果，对我们初学者来说，可算是视觉感拉满！本次笔记将学习火焰的消融效果。

1. 概念原理

消融（dissolve）效果常见于游戏中的角色死亡、地图烧毁等效果，往往从不同的区域开始，向看似随机的方向扩展，最后整个物体都消失不见。

消融效果的实现原理：
噪声纹理 + 透明度测试。

实现方式：
对噪声纹理采样的结果与控制消融程度的阈值比较，如果小于阈值，就用clip函数把对应的像素裁减掉。而镂空区域边缘的烧焦效果则是将两种颜色融合，再用pow函数处理后，与原纹理颜色混合的结果。

2. 案例：消融效果的实现

2.1 效果预览

本案例最终实现效果如下：



2.2 准备工作

完成如下准备工作：

[*]新建名为Scene_15_1的场景，并去掉天空盒；
[*]往场景中放置一个立方体；
[*]新建名为Dissolve的材质，并赋给上一步创建的立方体；
[*]新建名为Chapter15-Dissolve的Unity Shader，并赋给上一步创建的材质；
[*]保存场景。

2.3 编写Shader：Chapter15-Dissolve

编写如下代码：
Shader "Unity Shaders Book/Chapter 15/Dissolve"
{
    Properties
    {
      // 控制消融的程度，值为0时没有消融，值为1时完全消融
      _BurnAmount ("Burn Amount", Range(0.0, 1.0)) = 0.0
      // 控制灼烧时边缘线宽，值越大，火焰边缘的蔓延范围越广
      _LineWidth ("Blur Line Width", Range(0.0, 0.2)) = 0.1
      // 物体原本的漫反射纹理
      _MainTex ("Base (RGB)", 2D) = "white" {}
      // 物体原本的法线纹理
      _BumpMap ("Normal Map", 2D) = "bump" {}
      // 火焰边缘颜色1
      _BurnFirstColor ("Burn First Color", Color) = (1.0, 0.0, 0.0, 1.0)
      // 火焰边缘颜色2
      _BurnSecondColor ("Burn Second Color", Color) = (1.0, 0.0, 0.0, 1.0)
      // 消融效果的噪声纹理
      _BurnMap ("Burn Map", 2D) = "white" {}
    }

    SubShader
    {
      Pass
      {
            // 为了得到正确的光照，设置Pass的LightMode和multi_compile_fwdbase编译指令
            Tags
            {
                "LightMode" = "ForwardBase"
            }

            // 双面渲染
            Cull Off

            CGPROGRAM

            #include "Lighting.cginc"
            #include "AutoLight.cginc"

            #pragma multi_compile_fwdbase

            #pragma vertex vert
            #pragma fragment frag

            struct a2v
            {
                float4 vertex : POSITION;
                float2 texcoord : TEXCOORD0;
                float3 normal : NORMAL;
                float4 tangent : TANGENT;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uvMainTex : TEXCOORD0;
                float2 uvBumpMap : TEXCOORD1;
                float2 uvBurnMap : TEXCOORD2;
                float3 lightDir : TEXCOORD3;
                float3 worldPos : TEXCOORD4;
                // 阴影纹理坐标
                SHADOW_COORDS(5)
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _BumpMap;
            float4 _BumpMap_ST;
            sampler2D _BurnMap;
            float4 _BurnMap_ST;
            float _BurnAmount;
            float _LineWidth;
            fixed4 _BurnFirstColor;
            fixed4 _BurnSecondColor;

            v2f vert (a2v v)
            {
                v2f o;

                o.pos = UnityObjectToClipPos(v.vertex);
                // 计算三张纹理的UV
                o.uvMainTex = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uvBumpMap = TRANSFORM_TEX(v.texcoord, _BumpMap);
                o.uvBurnMap = TRANSFORM_TEX(v.texcoord, _BurnMap);

                TANGENT_SPACE_ROTATION;
                // 将光源方向从模型空间变换到切线空间
                o.lightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz;

                // 为了得到阴影信息，计算世界空间下的顶点位置
                o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                // 为了得到阴影信息，计算阴影纹理的采样坐标
                TRANSFER_SHADOW(o);

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // 消融噪声纹理采样
                fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;

                // 阈值以下的r分量被裁减掉，不会显示在屏幕上（被烧没的效果）
                clip(burn.r - _BurnAmount);

                // 切线空间光源方向
                float3 tangentLightDir = normalize(i.lightDir);
                // 切线空间法线方向（法线纹理本来就是基于切线空间）
                fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uvBumpMap));

                // 漫反射纹理采样得到反射率
                fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;
                // 环境光
                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
                // 基于切线空间的法线、光源方向点乘，求得漫反射光照
                // （因为这里用了法线纹理，所以需要基于切线空间，和之前基于世界空间的做法不同）
                fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));

                // 在宽度_LineWidth的范围内模拟一个烧焦的颜色变化
                // 计算得到混合系数t
                // 当t=1时，表明该像素位于消融的边界处
                // 当t=0时，表明该像素为未开始消融的地方
                fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
                // 根据消融程度，得到烧焦的颜色
                fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
                // 使用pow函数对颜色进行处理，使之更接近烧焦的效果
                burnColor = pow(burnColor, 5);

                // 光照衰减
                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
                // 根据烧焦颜色，在正常漫反射（+环境光）和烧焦颜色之间进行插值
                // 使用step函数，保证当_BurnAmount为0时，不显示任何消融效果
                fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));

                return fixed4(finalColor, 1.0);
            }
            ENDCG
      }

      // 定义一个用于投射阴影的Pass
      // 因为被消融掉的像素不应该投射阴影，所以不用普通的阴影Pass
      Pass
      {
            Tags
            {
                "LightMode" = "ShadowCaster"
            }

            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #pragma multi_compile_shadowcaster

            #include "UnityCG.cginc"

            struct v2f
            {
                // 内置宏，阴影投射内置封装的变量
                V2F_SHADOW_CASTER;
                float2 uvBurnMap : TEXCOORD1;
            };

            sampler2D _BumpMap;
            float4 _BumpMap_ST;
            sampler2D _BurnMap;
            float4 _BurnMap_ST;
            float _BurnAmount;

            v2f vert(appdata_base v)
            {
                v2f o;

                // 内置宏，阴影投射内置封装的逻辑，在里面会使用名称“v”作为输入的变量，
                // 所以顶点着色器的传参变量名必须是“v”
                // 且需要包含顶点位置v.vertex和顶点法线v.normal
                // 这里内置结构体appdata_base已经包含了这些变量
                // 如果需要做顶点动画，只需要在调用这个内置宏前修改v.vertex即可
                TRANSFER_SHADOW_CASTER_NORMALOFFSET(o);

                o.uvBurnMap = TRANSFORM_TEX(v.texcoord, _BurnMap);
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;

                // 被消融掉的像素不会投射阴影
                clip(burn.r - _BurnAmount);

                // 内置宏，阴影投射内置封装的逻辑
                SHADOW_CASTER_FRAGMENT(i)
            }

            ENDCG
      }
    }

    Fallback "Diffuse"
}

2.4 配置材质参数

配置材质参数如下：



材质面板的漫反射纹理、法线纹理及扰乱纹理可从文章开头给出链接的工程中找。配置完毕后可得到最终的消融效果。
以上是本次笔记的所有内容，下一篇笔记我们将学习《水波效果》的相关知识。

<hr/>
写在最后

本文内容会同步发在笔者的公众号上，欢迎大家关注交流！
公众号：程序员叨叨叨（ID：i_coder）

查看完整版本: 《Unity Shader入门精要》笔记（二十九）