很多时候，向规则的事物里添加一些“杂乱无章”的效果往往会有意想不到的效果。而这些“杂乱无章”的效果来源就是噪声。在本章中，我们将会学习如何使用噪声来模拟各种看似“神奇”的特效。
在15.1 节中，我们将使用一张噪声纹理来模拟火焰的消融效果。
15.2 节则把噪声应用在模拟水面的波动上，从而产生波光粼粼的视觉效果。
在15.3 节中，我们会回顾13.3 节中实现的全局雾效，并向其中添加噪声来模拟不均匀的飘渺雾效。
15.1 消融效果
为了实现上述消融效果，我们首先进行如下准备工作。
（1）在Unity 中新建一个场景。在本书资源中，该场景名为Scene_15_1 。在Unity 5.2 中， 默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window ->Lighting -> Skybox 中去掉场景中的天空盒子。
(2）新建一个材质。在本书资源中，该材质名为DissolveMat.
(3 ）新建一个Unity Shader。在本书资源中，该Unity Shader 名为Chapter15-Dissolve。把新的Unity Shader 赋给第2 步中创建的材质。
( 4 ）我们需要搭建一个测试消融的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了一个立方体。把第2 步创建的材质拖曳给立方体。
( 5）保存场景。
打开Chapter 15-Dissolve，删除原有代码，进行如下关键修改。
( 1）首先，声明消融效果需要的各个属性：
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)
_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
为了得到正确的光照，我们设置了Pass 的LightMode 和 multi_compile_ fwdbase 的编译指令。值得注意的是，我们还使用Cull 命令关闭了该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 宏〉。具体原理可参见9.4 节。
( 4 ）我们还需要实现片元着色器来模拟消融效果：
fixed4 frag(v2f i) : SV_Target {
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb;
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));
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。正如我们在9.4.5节中的解释一样，使用透明度测试的物体的阴影需要特别处理，如果仍然使用普通的阴影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
在Unity 中，用于投射阴影的Pass 的LightMode 需要被设置为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、
在本例中，我们使用的噪声纹理（对应本书资源的 Assets/Textures/Chapter 15/Burn_Noise.png ）如图15.2 所示 。
15.2 水波效果
在模拟实时水面的过程中，我们往往也会使用噪声纹理。此时，噪声纹理通常会用作一个高度图，以不断修改水面的法线方向。为了模拟水不断流动的效果，我们会使用和时间相关的变量来对噪声纹理进行采样，当得到法线信息后，再进行正常的反射＋折射计算，得到最后的水面波动效果。在本节中，我们将会使用一个由噪声纹理得到的法线贴图，实现一个包含菲涅耳反射（详见10.1.5 节〉的水面效果，如图15.3 所示。
为此，我们需要做如下准备工作。
(1）新建一个场景。在本书资源中，该场景名为Scene_15_2。在Unity 5.2 中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window -> Lighting -> Skybox 中去掉场景中的天空盒子。
(2）新建一个材质。在本书资源中，该材质名为WaterWaveMat。
(3）新建一个Unity Shader。在本书资源中，该Shader 名为Chapter15-WaterWave。把新的 Shader 赋给第2 步中创建的材质。
(4）构建一个测试水波效果的场景。在本书资源的实现中，我们构建了一个由6 面墙围成的封闭房间，它们都使用了我们在9.5 节中创建的标准材质。我们还在房间中放置了一个平面来模拟水面。把第2 步中创建的材质赋给该平面。
(1）首先， 我们需要声明该Shader 使用的各个属性：`
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
}
`其中， _Color 用于控制水面颜色； _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" }
我们首先在SubShader 的标签中将渲染队列设置成Transparent， 并把后面的RenderType 设置为Opaque。把Queue 设置成Transparent 可以确保该物体渲染时，其他所有不透明物体都已经被渲染到屏幕上了， 否则就可能无法正确得到“透过水面看到的图像”。而设置RenderType 则是为了在使用着色器替换（ Shader Replacement）时，该物体可以在需要时被正确渲染。这通常发生在
我们需要得到摄像机的深度和法线纹理时， 这在第13 章中介绍过。随后，我们通过关键词GrabPass 定义了一个抓取屏幕图像的Pass 。在这个Pass 中我们定义了一个字符串，该字符串内部的名称决定了抓取得到的屏幕图像将会被存入哪个纹理中
(3）定义渲染水面所需的Pass。为了在Shader 中访问各个属性， 我们首先需要定义它们对应的变量：
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.2 节中的处理一样，我们
使用该值和 _Distortion 属性以及 _RefractionTex_TexeISize 来对屏幕图像的采样坐标进行偏移，模拟折射效果。Distortion 值越大，偏移量越大，水面背后的物体看起来变形程度越大。在这里，我们选择使用切线空间下的法线方向来进行偏移，是因为该空间下的法线可以反映顶点局部空间下的法线方向。需要注意的是，在计算偏移后的屏幕坐标时，我们把偏移量和l屏幕坐标的z 分量
相乘，这是为了模拟深度越大、折射程度越大的效果。如果读者不希望产生这样的效果，可以直接把偏移值叠加到屏幕坐标上。随后，我们对scrPos 进行了透视除法， 再使用该坐标对抓取的屏幕图像 _RefractionTex 进行采样，得到模拟的折射颜色。
之后，我们把法线方向从切线空间变换到了世界空间下（使用变换矩阵的每一行，即TtoW0、TtoW1 和 TtoW2 ，分别和法线方向点乘，构成新的法线方向），并据此得到视角方向相对于法线方向的反射方向。随后，使用反射方向对Cubemap 进行采样，并把结果和主纹理颜色相乘后得到反射颜色。我们也对主纹理进行了纹理动画，以模拟水波的效果。
为了混合折射和反射颜色，我们随后计算了菲涅耳系数。我们使用之前的公式来计算菲涅耳系数，并据此来混合折射和反射颜色，作为最终的输出颜色。
在本例中，我们使用的噪声纹理（对应本书资源的Assets/Textures/Chapter15/Water_Noise.png) 如图15.5 左图所示。
15.3 再谈全局雾效
我们在13.3 节讲到了如何使用深度纹理来实现一种基于屏幕后处理的全局雾效。我们由深度纹理重建每个像素在世界空间下的位置，再使用一个基于高度的公式来计算雾效的混合系数，最后使用该系数来混合雾的颜色和原屏幕颜色。13.3 节的实现效果是一个基于高度的均匀雾效，即在同一个高度上， 雾的浓度是相同的，如图15.6 左图所示。然而， 一些时候我们希望可以模拟一种不均匀的雾效，同时让雾不断飘动，使雾看起来更加飘渺，如图15.6 右图所示。而这就可以通过使用一张噪声纹理来实现。
我们首先需要进行如下准备工作。
（1）新建一个场景。在本书资源中， 该场景名为Scene_15_3 。在Unity 5.2 中，默认情况下场景将包含一个摄像机和一个平行光，并且使用了内置的天空盒子。在Window -> Lighting-> Skybox 中去掉场景中的天空盒子。
(2）我们需要搭建一个测试雾效的场景。在本书资源的实现中，我们构建了一个包含3 面墙的房间，并放置了两个立方体和两个球体，它们都使用了我们在9.5 节中创建的标准材质。
(3）新建一个脚本。在本书资源中，该脚本名为FogWithNoise.cs。把该脚本拖曳到摄像机上。
(4）新建一个Unity Shader。在本书资源中，该Shader 名为Chapter15-FogWithNoise。
我们首先来编写FogWithNoise.cs 脚本。打开该脚本，并进行如下修改。
(1）首先，继承12.1 节中创建的基类：
public class FogWithNoise : PostEffectsBase {
(2）声明该效果需要的Shader， 并据此创建相应的材质：
public Shader fogShader;
private Material fogMaterial = null;
public Material material {
get {
fogMaterial = CheckShaderAndCreateMaterial(fogShader, fogMaterial);
return fogMaterial;
}
}
(3 ）在本节中，我们需要获取摄像机的相关参数，如近裁剪平面的距离、FOV 等，同时还需要获取摄像机在世界空间下的前方、上方和右方等方向，因此我们用两个变量存储摄像机的Camera 组件和Transform 组件：
private Camera myCamera;
public Camera camera {
get {
if (myCamera == null) {
myCamera = GetComponent<Camera>();
}
return myCamera;
}
}
private Transform myCameraTransform;
public Transform cameraTransform {
get {
if (myCameraTransform == null) {
myCameraTransform = camera.transform;
}
return myCameraTransform;
}
}```
( 4）定义模拟雾效时使用的各个参数：
```csharp
[Range(0.1f, 3.0f)]
public float fogDensity = 1.0f;
public Color fogColor = Color.white;
public float fogStart = 0.0f;
public float fogEnd = 2.0f;
public Texture noiseTexture;
[Range(-0.5f, 0.5f)]
public float fogXSpeed = 0.1f;
[Range(-0.5f, 0.5f)]
public float fogYSpeed = 0.1f;
[Range(0.0f, 3.0f)]
public float noiseAmount = 1.0f;
fogDensity 用于控制雾的浓度， fogColor 用于控制雾的颜色。我们使用的雾效模拟函数是基于高度的，因此参数 fogStart 用于控制雾效的起始高度， fogEnd 用于控制雾效的终止高度。noiseTexture 是我们使用的噪声纹理， fogXSpeed 和fogYSpeed 分别对应了噪声纹理在X 和Y 方向上的移动速度， 以此来模拟雾的飘动效果。最后， noiseAmount
用于控制噪声程度，当 noiseAmount 为0 时，表示不应用任何噪声，即得到一个均匀的基于高度的全局雾效。
( 5 ）由于本例需要获取摄像机的深度纹理，我们在脚本的OnEnable 函数中设置摄像机的相应状态：
void OnEnable() {
GetComponent<Camera>().depthTextureMode |= DepthTextureMode.Depth;
}
( 6 ）最后， 我们实现了OnRenderlmage 函数：
void OnRenderImage (RenderTexture src, RenderTexture dest) {
if (material != null) {
Matrix4x4 frustumCorners = Matrix4x4.identity;
float fov = camera.fieldOfView;
float near = camera.nearClipPlane;
float aspect = camera.aspect;
float halfHeight = near * Mathf.Tan(fov * 0.5f * Mathf.Deg2Rad);
Vector3 toRight = cameraTransform.right * halfHeight * aspect;
Vector3 toTop = cameraTransform.up * halfHeight;
Vector3 topLeft = cameraTransform.forward * near + toTop - toRight;
float scale = topLeft.magnitude / near;
topLeft.Normalize();
topLeft *= scale;
Vector3 topRight = cameraTransform.forward * near + toRight + toTop;
topRight.Normalize();
topRight *= scale;
Vector3 bottomLeft = cameraTransform.forward * near - toTop - toRight;
bottomLeft.Normalize();
bottomLeft *= scale;
Vector3 bottomRight = cameraTransform.forward * near + toRight - toTop;
bottomRight.Normalize();
bottomRight *= scale;
frustumCorners.SetRow(0, bottomLeft);
frustumCorners.SetRow(1, bottomRight);
frustumCorners.SetRow(2, topRight);
frustumCorners.SetRow(3, topLeft);
material.SetMatrix("_FrustumCornersRay", frustumCorners);
material.SetFloat("_FogDensity", fogDensity);
material.SetColor("_FogColor", fogColor);
material.SetFloat("_FogStart", fogStart);
material.SetFloat("_FogEnd", fogEnd);
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);
}
}
我们首先利用13.3 节学习的方法计算近裁剪平面的4 个角对应的向量，并把它们存储在一个矩阵类型的变量（ frusturnCorners ）中。计算过程和原理均可参见13.3 节。随后，我们把结果和其他参数传递给材质， 并调用Graphics.Blit ( src, dest, material）把渲染结果显示在屏幕上。
下面，我们来实现Shader 的部分。打开Chapter15-FogWithNoise ，进行如下修改。
( 1 ）我们首先需要声明本例使用的各个属性：
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
}
( 2 ）在本节中，我们使用CGINCLUDE 来组织代码。我们在SubShader 块中利用CGINCLUDE 和 ENDCG 语义来定义一系列代码：
SubShader {
CGINCLODE
...
ENDCG
...
(3 ）声明代码中需要使用的各个变量：
float4x4 _FrustumCornersRay;
sampler2D _MainTex;
half4 _MainTex_TexelSize;
sampler2D _CameraDepthTexture;
half _FogDensity;
fixed4 _FogColor;
float _FogStart;
float _FogEnd;
sampler2D _NoiseTex;
half _FogXSpeed;
half _FogYSpeed;
half _NoiseAmount;
_FrustumCornersRay 虽然没有在Properties 中声明，但仍可由脚本传递给Shader。除了Properties 中声明的各个属性，我们还声明了深度纹理 _CameraDepthTexture, Unity 会在背后把得到的深度纹理传递给该值。
( 4 ）定义顶点着色器，这和13.3 节中的实现完全一致。读者可以在13.3 节找到它的实现和相关解释。
( 5 ）定义片元着色器：
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);
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;
}
我们首先根据深度纹理来重建该像素在世界空间中的位置。然后，我们利用内置的 _Time.y 变量和 _FogXSpeed 、_FogYSpeed 属性计算出当前噪声纹理的偏移量， 并据此对噪声纹理进行采样，得到噪声值。我们把该值减去0.5， 再乘以控制噪声程度的属性 _NoiseAmount ， 得到最终的噪声值。随后，我们把该噪声值添加到雾效浓度的计算中，得到应用噪声后的雾效混合系数fogDensity。最后，我们使用该系数将雾的颜色和原始颜色进行混合后返回。
(6）随后，我们定义了雾效渲染所需的Pass:
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
ENDCG
}
(7 ）最后，我们关闭了Shader 的Fallback:
FallBack Off
完成后返回编辑器，并把Chapter15-FogWithNoise 拖曳到摄像机的FogWithNoise.cs 脚本中的fogShader 参数中。当然，我们可以在FogWithNoise.cs 的脚本面板中将fogShader 参数的默认值设置为Chapter15-FogWithNoise，这样就不需要以后使用时每次都手动拖曳了。本节使用的噪声纹理（对应本书资源的 Assets/Textures/Chapter15/Fog_Noise.jpg）如图15.7
所示。
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
