Unity Shader入门精要-章节15 使用噪声

kio0o0 发布于

最后更新于

求知若饥，虚心若愚

向规则的事物里添加一些“杂乱无章”的效果往往会有意想不到的效果。而这些“杂乱无章”的效果来源就是噪声。

消融效果

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

原理：噪声纹理+透明度测试。对噪声纹理采样的结果和某个控制消融程度的阈值比较，如果小于阈值，就使用clip函数把它对应的像素裁剪掉，这部分就对应了“烧毁”的区域。而镂空区域边缘的烧焦效果则是将两种颜色混合，再用pow函数处理后，与原纹理颜色混合的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
Shader "Unity Shaders Learn/Chapter15/Dissolve"
{
    Properties
    {
        _BurnAmount ("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)     // 火焰边缘颜色1
        _BurnSecondColor ("Burn Second Color", Color) = (1,0,0,1)   // 火焰边缘颜色2
        _BurnMap ("Burn Map", 2D) = "white" {}                      // 噪声纹理
    }
    SubShader
    {
        Pass
        {
            Tags {"LightMode" = "ForwardBase"}
            Cull Off    //消融后避免穿帮
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #pragma multi_compile_fwdbase

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

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

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

            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 = UnityObjectToClipPos(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(unity_ObjectToWorld, v.vertex).xyz;

                TRANSFER_SHADOW(o);

                return o;
            }

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

                // 舍弃透明度测试不过的像素，结果来自噪声纹理的采样
                clip(burn.r - _BurnAmount);
                
                fixed3 tangentLightDir = normalize(i.lightDir);
                fixed3 tangentNormal = normalize(UnpackNormal(tex2D(_BumpMap, i.uvBumpMap)));

                fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb;

                fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

                fixed3 diffuse = _LightColor0.rgb * albedo * saturate(dot(tangentLightDir, tangentNormal));

                // 一减反转，在_LineWidth范围模拟烧焦的颜色变化
                fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
                fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
                burnColor = pow(burnColor, 5);  //为了让效果更接近烧焦的痕迹，使用pow

                UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);

                // 使用t混合烧焦颜色和原有颜色，step(0.0001, _BurnAmount)是为了_BurnAmount为0时完全消除消融效果
                fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));
                return fixed4(finalColor, 1.0);
            }
            ENDCG
        }
        
        // 透明度测试或者顶点动画都要自己处理投射阴影
        Pass
        {
            Tags {"LightMode" = "ShadowCaster"}
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #pragma multi_compile_shadowcaster

            #include "UnityCG.cginc"

            sampler2D _BurnMap;
            float4 _BurnMap_ST;
            fixed _BurnAmount;

            struct v2f
            {
                V2F_SHADOW_CASTER;
                float2 uvBurnMap : TEXCOORD0;
            };

            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);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

箱子的消融效果

消融效果使用的噪声纹理

水波效果

在模拟实时水面的过程中，也会使用噪声纹理。此时噪声纹理会用作一个高度图，不断修改水面的法线方向。为了模拟水不断流动的效果，会使用和时间相关的变量来对噪声纹理进行采样，当得到法线信息后，再进行正常的反射+折射计算，得到最后的水面波动效果。

下面会使用一个由噪声纹理得到的法线贴图，实现一个包含菲涅尔反射的水面效果。

包含菲涅耳反射的水面波动效果。在左图中，视角方向和水面法线的夹角越大，反射效果越强。在右图中，视角方向和水面法线的夹角越大，折射效果越强

  • 和使用反射和折射模拟透明玻璃效果类似。
  • 使用立方体纹理（Cubemap）作为环境纹理，模拟反射。
  • 用GrabPass获取当前屏幕的渲染纹理，使用切线空间下的法线方向对像素的屏幕坐标进行偏移，再使用该坐标对渲染纹理进行屏幕采样，模拟近似的折射效果。
  • 但玻璃效果不一样的是使用噪声纹理来生成水波的法线，随着时间变化不断平移，模拟波光粼粼的效果。另外不使用定值来混合反射和折射颜色，而是用菲涅尔系数来动态决定混合系数：

其中v和n分别对应了视角方向和法线方向，它们之间的夹角越小，fresnel值越小，反射越弱，折射越强。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
Shader "Unity Shaders Learn/Chapter15/WaterWave"
{
    Properties
    {
        _Color ("Main Color", Color) = (1,1,1,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  //控制法线纹理在X方向的平移速度
        _WaveYSpeed ("Wave Verticle Speed", Range(-0.1, 0.1)) = 0.01    //控制法线纹理在Y方向的平移速度
        _Distortion ("Distortion", Range(0, 100)) = 10                  //控制模拟折射时图像的扭曲程度
    }
    SubShader
    {
        Tags {"Queue"="Transparent" "RenderType"="Opaque"}
        GrabPass {"_RefractionTex"}
        Pass
        {
            CGPROGRAM
            #include "UnityCG.cginc"

            #pragma vertex vert;
            #pragma fragment frag;
            
            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;

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

            struct v2f
            {
                float4 pos : SV_POSITION;
                float4 srcPos : TEXCOORD0;
                float4 uv : TEXCOORD1;
                float4 TtoW0 : TEXCOORD2;
                float4 TtoW1 : TEXCOORD3;
                float4 TtoW2 : TEXCOORD4;
            };

            v2f vert(a2v v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.srcPos = ComputeGrabScreenPos(o.pos);

                o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
                o.uv.zw = TRANSFORM_TEX(v.texcoord, _WaveMap);

                float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
                float3 worldNormal = UnityObjectToWorldNormal(v.normal);
                float3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
                float3 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;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
                fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));

                // 对法线纹理采样两次是为了模拟两层交叉的水面波动效果
                float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);
                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);

                //_Distortion越大，偏移越大，水面背后的物体变形程度越大
                float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
                //与z分量相乘是为了模拟深度越大，折射效果越大的效果
                i.srcPos.xy = offset * i.srcPos.z + i.srcPos.xy;
                fixed3 refrCol = tex2D(_RefractionTex, i.srcPos.xy/i.srcPos.w).rgb;

                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(-worldViewDir, bump);
                fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;

                // 使用菲涅尔进行混合
                fixed fresnel = pow(1 - saturate(dot(bump, worldViewDir)), 4);
                fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);

                return fixed4(finalColor, 1);
            }

            
            ENDCG
            
        }
        
    }
    FallBack "Diffuse"
}

立方体纹理用之前的脚本生成。法线图可以从高度图生成（将贴图类型改为NormalMap，并勾选CreateFromGrayscale）。

水波效果使用的噪声纹理。左图：噪声纹理的灰度图。右图：由左图生成的法线纹理

再谈全局雾效

前面使用深度纹理实现了一种基于屏幕后处理的全局雾效，但它是基于高度的均匀雾效。有时我们希望可以模拟一种不均匀的雾效，同时让雾不断飘动，使雾看起来更加飘渺，这可以通过噪声纹理来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
using UnityEngine;

namespace Unity_Shaders_Learn
{
    public class FogWithNoise : PostEffectsBase
    {
        public Shader fogShader;
        
        private Material _fogMaterial;
        public Material FogMaterial
        {
            get
            {
                _fogMaterial = CheckShaderAndCreateMaterial(fogShader, _fogMaterial);
                return _fogMaterial;
            }
        }

        private Camera _camera;
        private Transform _cameraTrans;

        [Header("雾的浓度"), Range(0.1f, 3.0f)] public float fogDensity = 1.0f;
        [Header("雾的颜色")] public Color fogColor = Color.white;
        [Header("雾的起始高度")] public float fogStart = 0.0f;
        [Header("雾的终止高度")] public float fogEnd = 2.0f;
        
        [Header("噪声纹理")] public Texture noiseTexture;
        [Header("噪声纹理在X方向的移动速度"), Range(-0.5f, 0.5f)]
        public float fogXSpeed = 0.1f;
        [Header("噪声纹理在Y方向的移动速度"), Range(-0.5f, 0.5f)]
        public float fogYSpeed = 0.1f;
        [Header("噪声程度"), Range(0.0f, 3.0f)] public float noiseAmount = 1.0f;
        private void Awake()
        {
            _camera = GetComponent<Camera>();
            _cameraTrans = _camera.transform;
        }

        private void OnEnable()
        {
            _camera.depthTextureMode |= DepthTextureMode.Depth;
        }

        private void OnDisable()
        {
            _camera.depthTextureMode &= ~DepthTextureMode.Depth;
        }

        private void OnRenderImage(RenderTexture src, RenderTexture dest)
        {
            if (FogMaterial == null)
            {
                Graphics.Blit(src, dest);
                return;
            }
            
            Matrix4x4 frustumCorners = Matrix4x4.identity;

            float near = _camera.nearClipPlane;
            float aspect =  _camera.aspect;
            float fov = _camera.fieldOfView;

            float halfHeight = near * Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad);
            Vector3 toTop = _cameraTrans.up * halfHeight;
            Vector3 toRight = _cameraTrans.right * halfHeight * aspect;
                
            Vector3 forward = _cameraTrans.forward;
            Vector3 topLeft = forward * near + toTop - toRight;
            float scale = topLeft.magnitude / near;
            
            topLeft.Normalize();
            topLeft *= scale;

            Vector3 topRight = forward * near + toTop + toRight;
            topRight.Normalize();
            topRight *= scale;

            Vector3 bottomRight = forward * near - toTop + toRight;
            bottomRight.Normalize();
            bottomRight *= scale;

            Vector3 bottomLeft = forward * near - toTop - toRight;
            bottomLeft.Normalize();
            bottomLeft *= scale;
            
            frustumCorners.SetRow(0, bottomLeft);
            frustumCorners.SetRow(1, bottomRight);
            frustumCorners.SetRow(2, topRight);
            frustumCorners.SetRow(3, topLeft);
            
            FogMaterial.SetMatrix("_FrustumCornersRay", frustumCorners);
            
            FogMaterial.SetFloat("_FogDensity", fogDensity);
            FogMaterial.SetColor("_FogColor", fogColor);
            FogMaterial.SetFloat("_FogStart", fogStart);
            FogMaterial.SetFloat("_FogEnd", fogEnd);
            
            FogMaterial.SetTexture("_NoiseTex", noiseTexture);
            FogMaterial.SetFloat("_FogXSpeed", fogXSpeed);
            FogMaterial.SetFloat("_FogYSpeed", fogYSpeed);
            FogMaterial.SetFloat("_NoiseAmount", noiseAmount);
            
            Graphics.Blit(src, dest, FogMaterial);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
Shader "Unity Shaders Learn/Chapter15/FogWithNoise" {
	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 Verticle Speed", Float) = 0.1
		_NoiseAmount ("Noise Amount", Float) = 1
	}
	SubShader {
		CGINCLUDE

		#include "UnityCG.cginc"

		float4x4 _FrustumCorners;
		sampler2D _MainTex;
		half4 _MainTex_TexelSize;
		sampler2D _CameraDepthTexture;
		half _FogDensity;
		fixed4 _FogColor;
		float _FogStart;
		float _FogEnd;
		sampler2D _NoiseTex;
		half _FogXSpeed;
		half _FogYSpeed;
		half _NoiseAmount;

		struct v2f
		{
			float4 pos : SV_POSITION;
			half2 uv : TEXCOORD0;
			half2 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

			// 虽然用了很多if，但考虑到只有四个顶点，可以忽略不计
			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 = _FrustumCorners[index];

			return o;
		}

		fixed4 frag(v2f i) : SV_Target
		{
			float linearDepth = LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth));
			float3 worldPos = _WorldSpaceCameraPos + i.interpolatedRay.xyz * linearDepth;

			// 求噪音值
			float2 speed = _Time.y * float2(_FogXSpeed, _FogYSpeed);
			float noise = (tex2D(_NoiseTex, i.uv + speed).r - 0.5) * _NoiseAmount;
			
			// 套线性公式计算
			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
		{
			Cull Off ZWrite Off ZTest Always
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			ENDCG
		}
	}
	FallBack Off
}

左图：均匀雾效。右图：使用噪声纹理后的非均匀雾效

本节使用的噪声纹理

扩展阅读

噪声纹理可以被认为是一种程序纹理（Procedure Texture），它们都是由计算机利用某些算法生成的。Perlin噪声可以用于生成更自然的噪声纹理，Worley噪声通常用于模拟石头、水、纸张等多孔噪声。

kio0o0

kio0o0

如果可以做到不懂就问，做不到的事情就拒绝，或许可以活得更轻松点

107
6
27
NOTICE

正在努力学习图形学中！

CATEGORYS
TAGS
AMD OS X C#笔记 Github技巧 Hackintosh Lua笔记 Unity Unity Shader入门精要 c++笔记 cocos c语言笔记 drcom shader 代码设计 卡通渲染 图形学 学习 平板 性能优化 搞机 数据结构 游戏开发 百人计划 解题 计划 设计模式 路由器 重构