UnityShader学习——使用噪声

概述

很多时候，向规则的事物里添加一些“杂乱无章”的效果往往会有意想不到的效果。而这些“杂乱无章”的效果来源就是噪声。在本章中，我们将会学习如何使用噪声来模拟各种看似“神奇”的特效。

噪声应用

1.模拟火焰的消融效果

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

要实现上图中的效果，原理非常简单，概括来说就是噪声纹理+透明度测试。

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

噪声纹理：

使用不同的噪声和纹理属性（即材质面板上纹理的Tiling和Offset值）都会得到不同的消融效果。因此，要想得到好的消融效果，也需要美术人员提供合适的噪声纹理来配合。

Shader关键代码：

Shader "ShaderBook/Chapter15/Dissolve" {
	Properties {
		//控制消融程度，当值为0时，物体为正常效果，当值为1时，物体会完全消融
		_BurnAmount ("Burn Amount", Range(0.0, 1.0)) = 0.0
		//控制模拟烧焦效果时的线宽，它的值越大，火焰边缘的蔓延范围越广
		_LineWidth("Burn Line Width", Range(0.0, 0.2)) = 0.1		
		//火焰边缘的两种颜色值
		_BurnFirstColor("Burn First Color", Color) = (1, 0, 0, 1)
		_BurnSecondColor("Burn Second Color", Color) = (1, 0, 0, 1)
		//噪声纹理
		_BurnMap("Burn Map", 2D) = "white"{}
		......
	}
	SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}		
		Pass {
			Tags { "LightMode"="ForwardBase" }
			Cull Off //消融会导致裸露模型内部的构造，如果只渲染正面会出现错误的结果			
			CGPROGRAM			
			......					
			fixed4 frag(v2f i) : SV_Target {
				//对噪声纹理进行采样
				fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
				//并将采样结果和用于控制消融程度的属性_BurnAmount相减，传递给clip函数				
				clip(burn.r - _BurnAmount);//当结果小于0时，该像素将会被剔除，从而不会显示到屏幕上
				
				//计算漫反射：略
				
				//在宽度为_LineWidth的范围内模拟一个烧焦的颜色变化
				//使用smoothstep函数来计算混合系数 t
				//当 t值为1时，表明该像素位于消融的边界处
				//当 t值为0时，表明该像素为正常的模型颜色，而中间的插值则表示需要模拟一个烧焦效果。
				fixed t = 1 - smoothstep(0.0, _LineWidth, burn.r - _BurnAmount);
				//根据混合系数计算烧焦颜色burnColor
				fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t);
				burnColor = pow(burnColor, 5);
				......
				//再次使用t来混合正常的光照颜色（环境光+漫反射）和烧焦颜色
				//使用step函数来保证当_BurnAmount为0时，不显示任何消融效果
				fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, t * step(0.0001, _BurnAmount));				
				return fixed4(finalColor, 1);
			}			
			ENDCG
		}		
		//用于投射阴影的Pass
		//使用透明度测试的物体的阴影需要特别处理
		//如果仍然使用普通的阴影Pass，那么被剔除的区域仍然会向其他物体投射阴影，造成“穿帮”
		Pass {
			Tags { "LightMode" = "ShadowCaster" }//用于投射阴影的Pass的LightMode需要被设置为ShadowCaster			
			CGPROGRAM			
			#pragma vertex vert
			#pragma fragment frag			
			#pragma multi_compile_shadowcaster//使用#pragmamulti_compile_shadowcaster指明它需要的编译指令			
			#include "UnityCG.cginc"			
			fixed _BurnAmount;
			sampler2D _BurnMap;
			float4 _BurnMap_ST;
						
			struct v2f {
				V2F_SHADOW_CASTER;
				float2 uvBurnMap : TEXCOORD1;
			};
			
			v2f vert(appdata_base v) {
				v2f o;				
				TRANSFER_SHADOW_CASTER_NORMALOFFSET(o)	
				//计算噪声纹理的采样坐标 uvBurnMap			
				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"
}

播放消融动画的辅助脚本代码：随时间调整材质的_BurnAmount值

using UnityEngine;
using System.Collections;
public class BurnHelper : MonoBehaviour {

	public Material material;
	[Range(0.01f, 1.0f)]	public float burnSpeed = 0.3f;
	private float burnAmount = 0.0f;

	void Start () {
		if (material == null) {
			Renderer renderer = gameObject.GetComponentInChildren<Renderer>();
			if (renderer != null) {
				material = renderer.material;
			}
		}
		if (material == null) {
			this.enabled = false;
		} else {
			material.SetFloat("_BurnAmount", 0.0f);//向材质的 Shader传递参数。初始化 _BurnAmount
		}
	}
	
	void Update () {
		burnAmount = Mathf.Repeat(Time.time * burnSpeed, 1.0f);
		material.SetFloat("_BurnAmount", burnAmount);//向材质的 Shader传递参数
	}
}

2.模拟水面的波动

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

水面Shader和透明玻璃Shader的实现基本相同：

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

Shader关键代码：

Shader "ShaderBook/Chapter15/Water Wave" {
	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" {}//模拟反射的立方体纹理
		_Distortion ("Distortion", Range(0, 100)) = 10//控制模拟折射时图像的扭曲程度
		//控制法线纹理在X和Y方向上的平移速度
		_WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01
		_WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01
		
	}
	SubShader {
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		GrabPass { "_RefractionTex" }		
		Pass {
			Tags { "LightMode"="ForwardBase" }			
			CGPROGRAM			
			......						
			fixed4 frag(v2f i) : SV_Target {
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				//使用内置的_Time.y变量和_WaveXSpeed、_WaveYSpeed属性
				//计算了法线纹理的当前偏移量
				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);//得到切线空间下的法线方向
				......
				fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);//对主纹理进行纹理动画，以模拟水波的效果			......
				//计算菲涅耳系数，并据此来混合折射和反射颜色
				fixed fresnel = pow(1 - saturate(dot(viewDir, bump)), 4);
				fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);				
				return fixed4(finalColor, 1);
			}			
			ENDCG
		}
	}
	FallBack Off//不加阴影
}

我们可以从该噪声纹理的灰度值中生成需要的法线信息，这是通过在它的纹理面板中把纹理类型设置为Normal map，并选中Create from grayscale来完成的。

使用纹理如下：

Main Texture	原始噪声纹理	设置为Normal Map 的噪声纹理

3.模拟不均匀的飘渺雾效

之前实现了用深度纹理来实现一种基于屏幕后处理的全局雾效。我们由深度纹理重建每个像素在世界空间下的位置，再使用一个基于高度的公式来计算雾效的混合系数，最后使用该系数来混合雾的颜色和原屏幕颜色。之前实现效果是一个基于高度的均匀雾效，即在同一个高度上，雾的浓度是相同的。然而，一些时候我们希望可以模拟一种不均匀的雾效，同时让雾不断飘动，使雾看起来更加飘渺。而这就可以通过使用一张噪声纹理来实现。绝大多数代码和之前的完全一样，只是添加了噪声相关的参数和属性，并在Shader的片元着色器中对高度的计算添加了噪声的影响。

摄像机脚本关键代码：

using UnityEngine;
using System.Collections;
public class FogWithNoise : PostEffectsBase {

	public Shader fogShader;
	private Material fogMaterial = null;
	public Material material {get {	fogMaterial = CheckShaderAndCreateMaterial(fogShader,fogMaterial);return fogMaterial;}}	
	......
	public Texture noiseTexture;
	[Range(-0.5f, 0.5f)]public float fogXSpeed = 0.1f;
	[Range(-0.5f, 0.5f)]public float fogYSpeed = 0.1f;
	//当noiseAmount为0时，表示不应用任何噪声，即得到一个均匀的基于高度的全局雾效
	[Range(0.0f, 3.0f)]	public float noiseAmount = 1.0f;
	......
	void OnRenderImage (RenderTexture src, RenderTexture dest) {
		if (material != null) {
			......
			material.SetTexture("_NoiseTex", noiseTexture);
			material.SetFloat("_FogXSpeed", fogXSpeed);
			material.SetFloat("_FogYSpeed", fogYSpeed);
			material.SetFloat("_NoiseAmount", noiseAmount);
			Graphics.Blit (src, dest, material);
		} else {
			Graphics.Blit(src, dest);
		}
	}
}

Shader关键代码：

Shader "ShaderBook/Chapter15/Fog With Noise" {
	Properties {
		......
		_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		
		......			
		fixed4 frag(v2f i) : SV_Target {
			......
			//利用内置的_Time.y变量和_FogXSpeed、_FogYSpeed属性计算出当前噪声纹理的偏移量			
			float2 speed = _Time.y * float2(_FogXSpeed, _FogYSpeed);
			//对噪声纹理进行采样，得到噪声值
			float noise = (tex2D(_NoiseTex, i.uv + speed).r - 0.5) * _NoiseAmount;
			//把该噪声值添加到雾效浓度的计算中，得到应用噪声后的雾效混合系数fogDensity
			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噪声和Worley噪声是两种最常使用的噪声类型。Perlin噪声可以用于生成更自然的噪声纹理，而Worley噪声则通常用于模拟诸如石头、水、纸张等多孔噪声。现代的图像编辑软件，如Photoshop等，往往提供了类似的功能或插件，以帮助美术人员生成需要的噪声纹理，但如果读者想要更加自由地控制噪声纹理的生成，可能就需要了解它们的生成原理。