消融效果

消融（dissolve）角色死亡，地图烧毁等效果。

image

Properties{
    _BurnAmout("Burn Amount", Range（0.0,1.0)）=0.0
    _LineWidth(" Burn Line Width", Range(0.0, 0.2)) = 0.1
    _MainTex ("Base(RGB)", 2D) ="white"{}    //漫反射
    _BumpMap(" Normal Map", 2D) = "bump" {}    //法线纹理
    _BurnFirstColor("Burn First Color", Color) = (1, 0, 0, 1)   //火焰的颜色
    _BurnSecondColor("Burn Second Color", Color) = (1, 0, 0, 1)
    _BurnMap("Burn Map", 2D) = "white"{}   //噪声纹理
}

_BurnAmount 用于控制消融程度，当值为0时， 物体为正常效果， 当值为1时，物体完全消融。_LineWidth 用于控制模拟烧焦效果时的线宽，它的值越大，火焰边缘的蔓延范围越广。_MainTex和_BumpMap分别对应了物体原本的漫反射和法线纹理。 _BurnFirstColor和_BurnSecondColor 对应了火焰边缘的两种颜色。_BurnMap 是关键的噪声纹理
(2) SubShader 定义消融所需的Pass

 Tags{ "RenderType" = "Opaque" "Queue" = "Geometry"}
Pass{
      Tags{ "LightMode" = "ForwardBase"}
      Cull Off    //关闭面片 剔除
      CGPROGRAM
      #include "Lighting.cginc"
      #include "AutoLight.cginc"
      #pragma multi_compile_fwdbase    //编译指令
}

这里关闭了 Shader的面片剔除，所以模型的正面和背面都会被渲染，这是因为，消融会导致裸露模型内部的构造，只渲染正面会出现错误结果
（3）定义顶点着色器

struct  v2f{
      float4 pos : SV_POSITION;
      float2 uvMainTex: TEXCOORD0;
      float2 uvBumpMap : TEXCOORD1;
      float2 uvBurnMap : TEXCOORD2;    // 三个采样纹理坐标
      float3 lightDir : TEXCOORD3;
      float3 worldPos : TEXCOORD4;
    SHADOW_COORDS(5)
}
v2f vert(a2v v){
      v2f o;
      o.pos = mul (UNITY_MATRIX_MVP,  v.vertex);
      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 (_Object2World, v.vertex).xyz

      TRANSFER_SHADOW(O);
      return o;
}

使用宏TRANSFORM_TEX 计算了三张纹理对应的纹理坐标,
再把光源方向从模型空间变换到了切线空间
最后，为了得到阴影信息，计算了世界空间下的顶点位置和阴影纹理的采样坐标（使用了TRANSFER_SHADOW 宏〉
TANGENT_SPACE_ROTATION 宏 相当于嵌入如下两行代码：
　　float3 binormal = cross( v.normal, v.tangent.xyz ) * v.tangent.w;
　　float3x3 rotation = float3x3( v.tangent.xyz, binormal, v.normal );
也就是构造出 tangent space 的坐标系， 定义转换world space的向量到tangent space的rotation 矩阵。
(4) 片元着色器来实现消融效果

fixed4 frag(v2f i): SV_Target{
        fixed3 burn  = tex2D(_BurnMap , i.uvBurnMap).rgb;
        clip(burn.r - _BurnAmount);  //clip 来进行透明度检测
        float3 tangentLightDir = normalize(i.lightDir);
        fixed3  tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uvBumpMap));  //UnpackNormal通过法线贴图计算法线
         fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;  
    fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

        fixed3 diffuse = _LightColor0.rgb *albedo*max(0, dot(tangentNormal, tangentLightDir));
        fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
    fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
    burnColor = pow(burnColor, 5);

      UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);
    fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));
            
    return fixed4(finalColor, 1);

}

首先对l噪声纹理进行采样，并将采样结果和用于控制消融程度的属性 _BumAmount 相减，传递给clip 函数。
当结果小于0 时， 该像素将会被剔除，从而不会显示到屏幕上。
如果通过了测试，则进行正常的光照计算。我们首先根据漫反射纹理得到材质的反射率 albedo，并由此计算得到环境光照，进而得到漫反射光照。
我们计算了烧焦颜色bumColor。我们想要在宽度为_LineWidth 的范围内模拟一个烧焦的颜色变化，第一步就使用了smoothstep 函数来计算混合系数 t。当t 值为1 时， 表明该像素位于消融的边界处， 当t 值为0 时， 表明该像素为正常的模型颜色，而中间的插值则表示需要模拟一个烧焦效果。
我们首先用t 来混合两种火焰颜色_BurnFirstColor 和 _BurnSecondColor，为了让效果更接近烧焦的痕迹，我们还使用pow 函数对结果进行处理。
然后，我们再次使用t 来混合正常的光照颜色〈环境光＋漫反射）和烧焦颜色。我们这里又使用了step 函数来保证当 _BumAmount 为0 时，不显示任何消融效果。最后，返回混合后的颜色值 finalColor。
(5) 这里比较特殊，我们还需要实现一个用于投射阴影的Pass，使用透明度测试的物体的阴影 需要特别的处理，如果仍使用普通的阴影pass，那么 被剔除的区域仍然会向其他物体投射阴影，造成穿帮。为了让物体的阴影也能配合透明度测试产生正确的效果，我们需要定义一个投射阴影的pass

// Pass to render object as a shadow caster
Pass {
            Tags { "LightMode" = "ShadowCaster" }
            
            CGPROGRAM
    
            #pragma vertex vert
            #pragma fragment frag
            #pragma multi_compile_shadowcaster

用于投射阴影的Pass 的LightMode 需要被设置为ShadowCaster，同时，还需要使用

pragma multi_compile_shadowcaster 指明它需要的编译指令。

顶点和片元的代码相对简单

struct v2f {
                V2F_SHADOW_CASTER;
                float2 uvBurnMap : TEXCOORD1;
            };
            
            v2f vert(appdata_base v) {
                v2f o;
                
                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)
            }

阴影投射的重点在于我们需要按正常Pass 的处理来剔除片元或进行顶点动画，以便阴影可以和物体正常渲染的结果相匹配。在自定义的阴影投射的Pass 中，我们通常会使用Unity 提供的内置宏V2F_SHADOW_CASTER、TRANSFER_SHADOW_CASTER_NORMALOFFSET ( 旧版本中会使用TRANSFER_SHADOW_CASTER ）和SHADOW_CASTER_FRAGMENT 来帮助我们计算阴影投射时需要的各种变量，而我们可以只关注自定义计算的部分
我们首先在v2f 结构体中利用V2F_SHADOW_CASTER 来定义阴影投射需要定义的变量。
随后， 在顶点着色器中，我们使用TRANSFER_SHADOW_CASTER_NORMALOFFSET 来填充V2F_SHADOW_CASTER 在背后声明的一些变量，这是由Unity 在背后为我们完成的。
我们需要在顶点着色器中关注自定义的计算部分，这里指的就是我们需要计算噪声纹理的采样坐标 uvBurnMap。
在片元着色器中，我们首先按之前的处理方法使用噪声纹理的采样结果来剔除片元， 最后再利用SHADOW_CASTER_FRAGMENT 来让Unity 为我们完成阴影投射的部分，把结果输出到深度图和阴影映射纹理中。
通过Unity 提供的这3 个内置宏（在UnityCG.cginc 文件中被定义〉，我们可以方便地自定义需要的阴影投射的Pass，但由于这些宏需要使用一些特定的输入变量， 因此我们需要保证为它们提供了这些变量。例如， TRANSFER_SHADOW_CASTER_NORMALOFFSET 会使用名称v 作为输入结构体， v 中需要包含顶点位置v.vertex 和顶点法线v.normal的信息，我们可以直接使用内置的appdata_base 结构体，它包含了这些必需的顶点变量。如果我们需要进行顶点动画，可以在顶点着色器中直接修改v.vertex ，再传递给TRANSFER_SHADOW_CASTER_NORMALOFFSET 即可（可参见11.3.3 节〉。
我们实现了一个辅助脚本，用来随时间调整材质的 _BurnAmount值，因此，当读者单击运行后，也可以看到消融的动画效果。
使用不同的噪声和纹理属性〈即材质面板上纹理的Tiling 和Offset 值〉都会得到不同的消融效果。因此，要想得到好的消融效果，也需要美术人员提供合适的噪声纹理来配合。

水波效果

模拟实时水面，也会使用噪声纹理， 这里噪声纹理作为一个高度图，不断的修改水面的法线方向。 为了模拟不断流动的效果，我们会使用和时间相关的变量来对噪声进行采样，当得到法线信息后，在进行正常的反射+折射计算，得到最后的水面波动效果。
本节中，使用一个噪声纹理得到的法线贴图，实现一个包含菲涅耳反射（详见10.1.5 节〉的水面效果

image

image

Properties {
        _Color ("Main Color", Color) = (0, 0.15, 0.115, 1)  //水面的颜色
        _MainTex ("Base (RGB)", 2D) = "white" {}
        _WaveMap ("Wave Map", 2D) = "bump" {}
        _Cubemap ("Environment Cubemap", Cube) = "_Skybox" {}
        _WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01
        _WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01
        _Distortion ("Distortion", Range(0, 100)) = 10
    }

_MainTex 是水面波纹材质纹理，默认为白色纹理：_WaveMap 是一个由噪声纹理生成的法线纹理； _Cubemap 是用于模拟反射的立方体纹理； _Distortion 则用于控制模拟折射时图像的扭曲程度； _WaveXSpeed 和_WaveYSpeed 分别用于控制法线纹理在X 和Y 方向上的平移速度。
（2）定义 渲染队列，并使用GrabPass 来获取屏幕图像

SubShader {
        // We must be transparent, so other objects are drawn before this one.
        Tags { "Queue"="Transparent" "RenderType"="Opaque" }
        
        // This pass grabs the screen behind the object into a texture.
        // We can access the result in the next pass as _RefractionTex
        GrabPass { "_RefractionTex" }  //注意这个名称 后面会用

将渲染队列设置成 Transparent， 并把后面的RenderType 设置为Opaque。把Queue设置成 Transparent可以确保该物体渲染时，其他所有不透明物体都已经被渲染到屏幕上，否则就可能无法正确得到“透过水面看到的图像”。
而设置RenderType则是为了 在使用着色器替换（Shader Replacement）时，该物体可以在需要时被正确渲染。这通常发生在我们需要得到摄像机的深度和法线纹理时。
随后通过关键词GrabPass 定义一个抓取屏幕图像的Pass。这Pass中我们定义一个字符串，这个string决定了得到的屏幕图像将会保存到哪个纹理中。
（3）定义Pass。先定义它们对应的属性

fixed4 _Color;
            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _WaveMap;
            float4 _WaveMap_ST;
            samplerCUBE _Cubemap;
            fixed _WaveXSpeed;
            fixed _WaveYSpeed;
            float _Distortion;  
            sampler2D _RefractionTex;
            float4 _RefractionTex_TexelSize;

我们还定义了** _RefractionTex 和 _RefractionTex_TexelSize 变量，这对应了在使用GrabPass 时，指定的纹理名称。_RefractionTex_TexelSize 可以让我们得到该纹理的纹素大小**，例如一个大小为256 × 512 的纹理，它的纹素大小为（ 1/256, 1/512）。我们需要在对屏幕图像的采样坐标进行偏移时使用该变量。
（4）顶点着色器 和10.2.2 节中的实现完全一样

struct v2f {
                float4 pos : SV_POSITION;
                float4 scrPos : TEXCOORD0;
                float4 uv : TEXCOORD1;
                float4 TtoW0 : TEXCOORD2;  
                float4 TtoW1 : TEXCOORD3;  
                float4 TtoW2 : TEXCOORD4; 
            };
            
            v2f vert(a2v v) {
                v2f o;
                o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
                
                o.scrPos = ComputeGrabScreenPos(o.pos);
                
                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _WaveMap);
                
                float3 worldPos = mul(_Object2World, v.vertex).xyz;  
                fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);  
                fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
                fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w; 
                
                o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);  
                o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);  
                o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);  
                
                return o;
            }

进行了必要的顶点坐标变换后， 我们通过调用ComputeGrabScreenPos 来得到对应被抓取屏幕图像的采样坐标。读者可以在UnityCG.cginc 文件中找到它的声明，它的主要代码和 ComputeScreenPos 基本类似， 最大的不同是针对平台差异造成的采样坐标问题〈见5.6.1 节〉进行了处理。
我们计算了 _MainTex 和 _BumpMap 的采样坐标，并把它们分别存储在一个float4类型变量的xy 和zw 分量中。由于我们需要在片元着色器中把法线方向从切线空间（由法线纹理来样得到〉变换到世界空间下，以便对Cubemap 进行采样， 因此，我们需要在这里计算该顶点对应的从切线空间到世界空间的变换矩阵， 并把该矩阵的每一行分别存储在TtoW0、TtoW1 和 TtoW2 的 xyz 分量中。
这里面使用的数学方法就是，得到切线空间下的3 个坐标轴( x 、y、z 轴分别对应了切线、副切线和法线的方向〉在世界空间下的表示，再把它们依次按列组成一个变换矩阵即可。
TtoW0 等值的w 分量同样被利用起来，用于存储世界空间下的顶点坐标。

（5）定义片元着色器

fixed4 frag(v2f i) : SV_Target {
                float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
                fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
                float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);
                
                // Get the normal in tangent space
                fixed3 bump1 = UnpackNormal(tex2D(_WaveMap, i.uv.zw + speed)).rgb;
                fixed3 bump2 = UnpackNormal(tex2D(_WaveMap, i.uv.zw - speed)).rgb;
                fixed3 bump = normalize(bump1 + bump2);
                
                // Compute the offset in tangent space
                float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
                i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
                fixed3 refrCol = tex2D( _RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
                
                // Convert the normal to world space
                bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
                fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);
                fixed3 reflDir = reflect(-viewDir, bump);
                fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;
                
                fixed fresnel = pow(1 - saturate(dot(viewDir, bump)), 4);
                fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);
                
                return fixed4(finalColor, 1);
            }

首先通过TtoW0 等变量的w分量 得到世界坐标，并用该值得到该片元第一的视角方向。
还使用内置的_Time.y变量和_WaveXSpeed、 _WaveYSpeed 属性 计算了法线纹理的当前偏移量。并利用该值对法线纹理进行两次采样（为了模拟两层交叉的水面波动效果）
对两次结果相加并归一化后得到切线空间下的法线方向。
然后和10.2节处理一样，我们使用该值和_Distortion属性以及_Refraction Tex_TexelSize来对屏幕图像的采样坐标进行偏移，模拟折射效果。Distortion 值越大，偏移量越大，水面背后的物体看起来变形程度越大。 在这里，我们选择使用切线空间下的法线方向来进行偏移，是因为该空间下的法线可以反映顶点局部空间下的法线方向。
需要注意的是，在计算偏移后的屏幕坐标是，我们把偏移量和屏幕坐标的Z分量相乘，折射为了模拟深度越大，折射程度越大的效果。如果读者不希望产生这样的效果可以直接把偏移值叠加到屏幕坐标上。
随后，我们对scrPos进行了透视除法，再使用该坐标对抓取的屏幕图像_RefractionTex 进行采样，得到模拟的折射颜色。
我们把法线方向从切线空间变换到 世界空间下（使用变换矩阵的每一行，即TtoW0，toW1 和 TtoW2 ，分别和法线方向点乘，构成新的法线方向），并据此得到视角方向相对于法线方向的反射方向。
随后，使用反射方向对Cubemap进行采样，并把结果和主纹理颜色相乘得到反射颜色。也对主纹理进行了纹理动画，以模拟水波的效果。
为了混合折射和反射颜色，随后计算了菲涅耳系数。我们使用之前的公式来计算菲涅耳系数，并据此来混合折射和反射颜色，作为最终的输出颜色。

image

image

Shader "Unity Shaders Book/FogTestShader"
{
    Properties
    {
        _MainTex("Base (RGB)", 2D) = "white" {}
        _FogDensity("Fog Density", Float) = 1.0
        _FogColor("Fog Color", Color) = (1, 1, 1, 1)
        _FogStart("Fog Start", Float) = 0.0
        _FogEnd("Fog End", Float) = 1.0
        _NoiseTex("Noise Texture", 2D) = "white" {}
        _FogXSpeed("Fog Horizontal Speed", Float) = 0.1
        _FogYSpeed("Fog Vertical Speed", Float) = 0.1
        _NoiseAmount("Noise Amount", Float) = 1
    }
    SubShader
    {
            CGINCLUDE
        #include "UnityCG.cginc"  //引入库文件

        float4x4 _FrustumCornersRay;  //没有在Properties 声明，仍然可以由脚本传递过来
        sampler2D _MainTex;
        half4 _MainTex_TexelSize;
        sampler2D _CameraDepthTexture;  //unity 会背后把得到的深度纹理传递给该值
        half _FogDensity;
        fixed4 _FogColor;
        float _FogStart;
        float _FogEnd;
        sampler2D _NoiseTex;
        half _FogXSpeed;
        half _FogYSpeed;
        half _NoiseAmount;

        struct v2f {
            float4 pos : SV_POSITION;
            float2 uv : TEXCOORD0;
            float2 uv_depth : TEXCOORD1;
            float4 interpolatedRay : TEXCOORD2;
        };

        v2f vert(appdata_img v) {
            v2f o;
            o.pos = UnityObjectToClipPos(v.vertex);

            o.uv = v.texcoord;
            o.uv_depth = v.texcoord;

            #if UNITY_UV_STARTS_AT_TOP
            if (_MainTex_TexelSize.y < 0)
                o.uv_depth.y = 1 - o.uv_depth.y;
            #endif

            int index = 0;
            if (v.texcoord.x < 0.5 && v.texcoord.y < 0.5) {
                index = 0;
            }
            else if (v.texcoord.x > 0.5 && v.texcoord.y < 0.5) {
                index = 1;
            }
            else if (v.texcoord.x > 0.5 && v.texcoord.y > 0.5) {
                index = 2;
            }
            else {
                index = 3;
            }
            #if UNITY_UV_STARTS_AT_TOP
            if (_MainTex_TexelSize.y < 0)
                index = 3 - index;
            #endif
            o.interpolatedRay = _FrustumCornersRay[index];
            return o;
        }
        fixed4  frag(v2f i) :SV_Target{
            float linearDepth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth));  //根据深度纹理来重建该像素在世界空间中的位置
            float3 worldPos = _WorldSpaceCameraPos + linearDepth * i.interpolatedRay.xyz;

            float2 speed = _Time.y* float2(_FogXSpeed, _FogYSpeed);     //噪声纹理的偏移量  利用两个speed速度
            float noise = (tex2D(_NoiseTex, i.uv + speed).r - 0.5)*_NoiseAmount;  //采样 把该值减0.5，再乘以控制噪声程度的属性 

            float fogDensity = (_FogEnd - worldPos.y) / (_FogEnd - _FogStart);      //在高度值
            fogDensity = saturate(fogDensity * _FogDensity*(1 + noise));   //

            fixed4 finalColor = tex2D(_MainTex, i.uv);
            finalColor.rgb = lerp(finalColor.rgb, _FogColor.rgb, fogDensity);
            return finalColor;
        }
            ENDCG
        Pass {
                CGPROGRAM
                #pragma vertex vert
                #pragma fragment frag
                ENDCG
        }
    }
        FallBack Off
}

扩展阅读

读者在阅读本章时，可能会有一个疑问：这些噪声纹理都是如何构建出来的？这些噪声纹理可以被认为是一种程序纹理（Procedure Texture），它们都是由计算机利用某些算法生成的。Perlin 噪声（https://en.wikipedia.org/wiki/Perlin_noise）和Worley 噪声(https://en.wikipedia.org/wiki/Worley_noise)是两种最常使用的噪声类型，例如我们在15.3 节中使用的噪声纹理由Perlin 噪声生成而来。Perlin噪声可以用于生成更自然的噪声纹理，而Worley 噪声则通常用于模拟诸如石头、水、纸张等多孔噪声。现代的图像编辑软件，如Photoshop 等，往往提供了类似的功能或插件，以帮助美术人员生成需要的噪声纹理，但如果读者想要更加自由地控制噪声纹理的生成，可能就需要了解它们的生成原理。读者可以在这个博客（http://flafla2.github.io/2014/08/09/perlinnoise.html ）中找到一篇关于理解Perlin 噪声的非常好的文章，在文章的最后，作者还给出了很多其他出色的参考链接。关于Worley 噪声，读者可以在作者Worley1998 年发表的论文[1] 中找到它的算法和实现细节。在另一个非常好的博客
（http://scrawkblog.com/category/procedural-noise/）中，博主给出了很多程序噪声在Unity 中的实现，并包含了实现源码。