Unity Shader入门精要 第十章（下）——渲染纹理、程序纹理

10.2 渲染纹理

        摄像机的渲染结果会输出到颜色缓冲，并显示到我们的屏幕上。现代的GPU允许我们把整个三维场景渲染到一个中间缓冲中，即渲染目标纹理（Render Target Texture）。

        多重渲染目标（Multiple Render Target，MRT）：这个技术指的是GPU允许我们把场景同时渲染到多个渲染目标纹理，而不用为每个渲染目标纹理单独渲染完整场景。【某度：允许程序同时渲染到多个颜色缓冲，向不同的颜色缓冲中送入渲染结果的不同方面（如不同RGBA 色彩通道的值、深度值等）。】延迟渲染就使用了多重渲染目标。

        Unity为了渲染目标纹理定义了一种专门的纹理类型——渲染纹理（Render Texture）。使用渲染纹理有两种方式：

1. 在Project目录下创建一个渲染纹理，然后把某个摄像机的渲染目标设置为该渲染纹理，这样摄像机的渲染结果就会实时更新到渲染纹理中，而不会显示在屏幕上。
2. 在屏幕后处理时使用GrapbPass命令或OnRenderImage函数来获取当前屏幕图像，Unity会把这个屏幕图像放到一张和屏幕分辨率相同的渲染纹理中，下面就可以在自定义的Pass中把它们当成普通的纹理来处理。通常用来渲染透明物体。

        下面会依次学习这两种方法。

10.2.1 镜子效果

        这里使用的是上面的第一种方式，使用渲染纹理模拟镜子效果。

1. 我们要先搭建好场景，还有创建一个四边形（Quad）用来当镜子。
2. 在Project窗口下创建一个渲染纹理（Create->Render Texture)，命名为MirrorTexture。我们也可以在Render Texture的inspect窗口下调整这个纹理的分辨率、滤波模式等，如下图；
3. 创建一个摄像机，调整摄像机参数，让摄像机显示的图像是我们希望的镜子的图像。然后把把前面创建的渲染纹理Mirror Texture拖拽到该摄像机的Target Texture上。
4. 最后我们给镜子添加下面的Shader的材质。

         镜子的实现原理很简单，只要使用一个渲染纹理作为输入属性，并把该渲染纹理在水平方向上反转后直接显示到物体上即可。

Shader "MyShader/Chapter 10/Mirror" {
	Properties {
		_MainTex ("Main Tex", 2D) = "white" {} //这个纹理对应摄像机渲染得到的纹理
	}
	SubShader {
		Tags { "RenderType"="Opaque" "Queue"="Geometry"}
		
		Pass {
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			sampler2D _MainTex;
			
			struct a2v {
				float4 vertex : POSITION;
				float3 texcoord : TEXCOORD0;
			};
			
			struct v2f {
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD0;
			};
			
			v2f vert(a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				o.uv = v.texcoord;
				// Mirror needs to filp x
				//因为镜子里面都是左右相反的，所以翻转了x分量的纹理坐标
				o.uv.x = 1 - o.uv.x;
				
				return o;
			}
			
			fixed4 frag(v2f i) : SV_Target {
				return tex2D(_MainTex, i.uv);
			}
			
			ENDCG
		}
	} 
 	FallBack Off
}

        最后我们可以得到下面的效果，其实就是将一个摄像机所拍摄到的图片当成纹理给了镜子。

10.2.2 玻璃效果

        在Unity Shader中我们还可以使用一种特殊的Pass来完成获取屏幕图像的目的，这就是GrabPass，对应的第二种方法。 当我们定义了一个GrabPass之后，Unity会把当前屏幕的图像绘制在一张纹理中，以便我们在后续的Pass中访问它。通常会使用GrabPass来实现玻璃等透明材质的模拟。与简单的他们混合不同，使用GrabPass可以让我们对该物体后面的图像进行更复杂的处理，如使用法线来模拟折射效果，而不是简单的和原屏幕颜色进行混合。

        在使用GrapbPass时，我们要把渲染队列设置为透明队列（即“Queue” = “Transparent”），虽然代码中不包含混合指令，但是我们要保证该物体在所有不透明物体之后渲染。

        下面我们用GrabPass来模拟一个玻璃效果。思路如下：先使用一张法线纹理来修改模型的法线信息（凹凸纹理）；然后使用10.1的反射方法，通过一个Cubemap模拟玻璃的反射。然后在模拟折射时，使用了GrabPass获取玻璃后面的屏幕图像，并使用切线空间下的法线对屏幕纹理坐标偏移后，再对屏幕图像进行采样来模拟近似的折射效果。最后可以得到下面的结果：

        准备工作：

1. 搭建好场景，在一个密闭房间，放置一个正方体和球体，球体在正方体内部。这是为了模拟玻璃对内部物体的折射效果。
2. 为了得到本场景使用的环境映射纹理，我们使用10.1.2的脚本来生成，得到类似于下面的环境映射纹理。

         然后我们来写一下正方体的Shader。

Shader "MyShader/Chapter 10/Glass Refraction" {
	Properties {
		_MainTex ("Main Tex", 2D) = "white" {} //玻璃的纹理材质，默认为白色纹理
		_BumpMap ("Normal Map", 2D) = "bump" {} //玻璃的法线纹理
		_Cubemap ("Environment Cubemap", Cube) = "_Skybox" {} //模拟反射的环境纹理
		_Distortion ("Distortion", Range(0, 1000)) = 10 //控制模拟折射时图像的扭曲程度
		_RefractAmount ("Refract Amount", Range(0.0, 1.0)) = 1.0 //控制折射程度，0->只有反射，1->只有折射
	}
	SubShader {
		// 把渲染队列设置为Transparent，虽然RenderType设置的是Opaque（不透明），实际上是服务于不同的需求
		// Transparent可以确保渲染该物体时，其他所有不透明物体都以及被渲染到屏幕上了，否则可能无法正确得到“透过玻璃看到的图像”
		// Opaque 是为了在使用着色器替换（Shader Replacement）时，该物体可以在需要时被正确渲染13章会讲到
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }
		
		// 通过关键字GrabPass定义了一个抓取屏幕图像的Pass。
		// 这里我们定义了一个字符串 "_RefractionTex" ，这决定我们抓取得到的屏幕图像会被存入哪个纹理中
		GrabPass { "_RefractionTex" }
		
		Pass {		
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _BumpMap;
			float4 _BumpMap_ST;
			samplerCUBE _Cubemap;
			float _Distortion;
			fixed _RefractAmount;
			sampler2D _RefractionTex; //使用GrabPass指定的纹理名称
			 // 可以让我们得到该纹理的纹素大小，如果大小为256*512，纹素大小为（1/256，1/512），对屏幕图像的采样坐标进行偏移时使用该变量
			float4 _RefractionTex_TexelSize;
		
			struct a2v {
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 tangent : TANGENT; 
				float2 texcoord: TEXCOORD0;
			};
			
			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 = UnityObjectToClipPos(v.vertex);
				//通过调用内置的 ComputeGrabScreenPos 函数来得到对应被抓取的屏幕图像的采样坐标
				o.scrPos = ComputeGrabScreenPos(o.pos);
				//计算了两个纹理的采样坐标。分别放在float4类型变量的xy和zw中
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);
				
				//因为使用了凹凸纹理，这里要计算切线空间到世界空间的变换矩阵
				
				float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;  
				fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);  
				fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);  
				fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w; //cross返回两个三维向量的叉积 
				//xyz储存矩阵，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 {	
				//使用w分量得到世界坐标	
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				
				// Get the normal in tangent space
				// 对法线纹理采样，得到切线空间下的法线方向
				fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));	
				
				// 使用bump、_Distortion、_RefractionTex_TexelSize对屏幕图像的采样坐标进行偏移
				// _Distortion值越大，偏移量越大，玻璃背后物体看起来的变形程度就越大。
				float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;
				//这里乘了一个i.scrPos.z会让变形程度随着摄像机的距离发生远近变换，不乘也可以
				i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;
				//对抓取的屏幕图_RefractionTex进行采样，得到模拟的折射颜色
				fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
				
				//把法线从切线空间转到世界空间
				bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
				fixed3 reflDir = reflect(-worldViewDir, bump);
				fixed4 texColor = tex2D(_MainTex, i.uv.xy);
				//通过texCUBE函数，使用反射方向对立方体纹理采样
				fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;
				//混合反射和折射颜色
				fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;
				
				return fixed4(finalColor, 1);
			}
			
			ENDCG
		}
	}
	
	FallBack "Diffuse"
}

         最后给对这几个纹理赋值即可

         在代码中有一行：GrabPass { "_RefractionTex" } ，使用了字符串指明了被抓取的屏幕图像将会存储在哪个纹理名称中。实际上GrabPass支持两种形式。

• 直接使用GrabPass{ }，然后在后续的Pass中直接使用_GrabTexture来访问屏幕图像。但当场景有多个物体都使用这种方法来抓取屏幕时，性能消耗较大，因为对于每一个使用它的物体，Unity都会单独进行一次昂贵的屏幕抓取操作。但这种方法可以让每个物体得到不同的屏幕图像，这取决于它们的渲染队列和渲染它们时当前的屏幕缓冲的颜色。
• 使用 GrabPass { "TextureName" } ，也就是本节使用的方法，可以在后续的Pass中使用TextureName来访问屏幕图像。使用这种方法可以抓取屏幕，但Unity只会在每一帧时为第一个使用名为TextureName的纹理的物体执行一次抓取屏幕的操作，这个纹理也可以在其他Pass中被访问。这种方法更高效，因为不管场景中有多少物体使用了该命令，每一帧中 nity 都只会执行一次抓取工作，但这也意味着所有物体都会使用同一张屏幕图像。不过，在大多数情况下这已经足够了。

10.3 程序纹理

        程序纹理（Procedural Texture）指的是那些由计算机生成的图像。我们通常使用一些特定的 算法来创建个性化图案或非常真实的自然元素， 例如木头、石子等。使用程序纹理的好处在于我 们可以使用各种参数来控制纹理的外观，而这些属性不仅仅是那些颜色属性，甚至可以是完全不同类型的图案属性 ，这使得我们可以得到更加丰富的动画和视觉效果 。

10.3.1 在Untiy中实现简单的程序纹理

        我们先创建一个正方体，把第七章的SingleTexture的材质赋给这个正方体，然后也不需要任何的纹理。然后我们创建一个C#脚本，把这个脚本搭载到立方体上，然后我们要用代码来生成一个波点纹理。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

[ExecuteInEditMode]//为了让该脚本能在编辑器模式下运行，要加上这行代码
public class ProceduralTextureGeneration : MonoBehaviour {
	//声明一个材质，这个材质将使用该脚本中生成的程序纹理。
	public Material material = null;

	#region Material properties //声明程序纹理使用的各种参数
	//SetProperty一个开源插件，让我们在修改材质属性时候，可以执行_UpdateMaterial() 使用新的属性重新生成程序纹理
	[SerializeField, SetProperty("textureWidth")]
	private int m_textureWidth = 512;//纹理大小
	public int textureWidth {
		get {
			return m_textureWidth;
		}
		set {
			m_textureWidth = value;
			_UpdateMaterial();
		}
	}

	[SerializeField, SetProperty("backgroundColor")]
	private Color m_backgroundColor = Color.white;//纹理背景颜色
	public Color backgroundColor {
		get {
			return m_backgroundColor;
		}
		set {
			m_backgroundColor = value;
			_UpdateMaterial();
		}
	}

	[SerializeField, SetProperty("circleColor")]
	private Color m_circleColor = Color.yellow;//圆点的颜色
	public Color circleColor {
		get {
			return m_circleColor;
		}
		set {
			m_circleColor = value;
			_UpdateMaterial();
		}
	}

	[SerializeField, SetProperty("blurFactor")]
	private float m_blurFactor = 2.0f;//模糊因子，用来模糊圆形边界的
	public float blurFactor {
		get {
			return m_blurFactor;
		}
		set {
			m_blurFactor = value;
			_UpdateMaterial();
		}
	}
	#endregion

	private Texture2D m_generatedTexture = null;

	// 初始化
	void Start () {
		if (material == null) {//如果为空，找到身上的Rederer组件
			Renderer renderer = gameObject.GetComponent<Renderer>();
			if (renderer == null) {
				Debug.LogWarning("Cannot find a renderer.");
				return;
			}

			material = renderer.sharedMaterial;//给material赋值
		}

		_UpdateMaterial();
	}

	private void _UpdateMaterial() {
		if (material != null) {
			m_generatedTexture = _GenerateProceduralTexture();
			material.SetTexture("_MainTex", m_generatedTexture);//给材质的MainTex纹理赋值
		}
	}

	private Color _MixColor(Color color0, Color color1, float mixFactor) {
		Color mixColor = Color.white;
		mixColor.r = Mathf.Lerp(color0.r, color1.r, mixFactor);
		mixColor.g = Mathf.Lerp(color0.g, color1.g, mixFactor);
		mixColor.b = Mathf.Lerp(color0.b, color1.b, mixFactor);
		mixColor.a = Mathf.Lerp(color0.a, color1.a, mixFactor);
		return mixColor;
	}

	//用来生成程序纹理
	private Texture2D _GenerateProceduralTexture() {
		Texture2D proceduralTexture = new Texture2D(textureWidth, textureWidth);

		// 定义圆于圆之间的距离，就是纹理宽度除4，因为每行有3个圆
		float circleInterval = textureWidth / 4.0f;
		// 定义圆的半径
		float radius = textureWidth / 10.0f;
		// 定义模糊系数
		float edgeBlur = 1.0f / blurFactor;

		//遍历纹理图的每个像素
		for (int w = 0; w < textureWidth; w++) {
			for (int h = 0; h < textureWidth; h++) {
				// 使用背景颜色进行初始化
				Color pixel = backgroundColor;

				// 依次画9个圆
				for (int i = 0; i < 3; i++) {
					for (int j = 0; j < 3; j++) {
						// 计算当前所绘制圆的圆心位置
						Vector2 circleCenter = new Vector2(circleInterval * (i + 1), circleInterval * (j + 1));

						// 计算当前像素与圆形的距离
						float dist = Vector2.Distance(new Vector2(w, h), circleCenter) - radius;

						// 模糊圆的边界
						Color color = _MixColor(circleColor, new Color(pixel.r, pixel.g, pixel.b, 0.0f), Mathf.SmoothStep(0f, 1.0f, dist * edgeBlur));

						// 与之前得到的颜色进行混合
						pixel = _MixColor(pixel, color, color.a);
					}
				}

				proceduralTexture.SetPixel(w, h, pixel);
			}
		}

		proceduralTexture.Apply();//apply函数强制把像素值写入纹理中

		return proceduralTexture;//返回该程序纹理
	}
}

        然后我们就可以通过调整C#脚本里面的参数来生成程序纹理了。

10.3.2 程序材质

        在Unity中，有一类专门使用程序纹理的材质，叫做程序材质（Procedural Materials）。这个程序材质和程序纹理要使用叫Substance Designer的软件在Unity外部生成的。这些材质的后缀是.sbsar，也可以和其他资源一样之间拖入到Unity中进行使用。

        程序材质的自由的很高，而且可以配合Shader得到非常出色的视觉效果，是一种非常强大的材质类型。