10.2 渲染纹理
摄像机的渲染结果会输出到颜色缓冲,并显示到我们的屏幕上。现代的GPU允许我们把整个三维场景渲染到一个中间缓冲中,即渲染目标纹理(Render Target Texture)。
多重渲染目标(Multiple Render Target,MRT):这个技术指的是GPU允许我们把场景同时渲染到多个渲染目标纹理,而不用为每个渲染目标纹理单独渲染完整场景。【某度:允许程序同时渲染到多个颜色缓冲,向不同的颜色缓冲中送入渲染结果的不同方面(如不同RGBA 色彩通道的值、深度值等)。】延迟渲染就使用了多重渲染目标。
Unity为了渲染目标纹理定义了一种专门的纹理类型——渲染纹理(Render Texture)。使用渲染纹理有两种方式:
- 在Project目录下创建一个渲染纹理,然后把某个摄像机的渲染目标设置为该渲染纹理,这样摄像机的渲染结果就会实时更新到渲染纹理中,而不会显示在屏幕上。
- 在屏幕后处理时使用GrapbPass命令或OnRenderImage函数来获取当前屏幕图像,Unity会把这个屏幕图像放到一张和屏幕分辨率相同的渲染纹理中,下面就可以在自定义的Pass中把它们当成普通的纹理来处理。通常用来渲染透明物体。
下面会依次学习这两种方法。
10.2.1 镜子效果
这里使用的是上面的第一种方式,使用渲染纹理模拟镜子效果。
- 我们要先搭建好场景,还有创建一个四边形(Quad)用来当镜子。
- 在Project窗口下创建一个渲染纹理(Create->Render Texture),命名为MirrorTexture。我们也可以在Render Texture的inspect窗口下调整这个纹理的分辨率、滤波模式等,如下图;
- 创建一个摄像机,调整摄像机参数,让摄像机显示的图像是我们希望的镜子的图像。然后把把前面创建的渲染纹理Mirror Texture拖拽到该摄像机的Target Texture上。
- 最后我们给镜子添加下面的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获取玻璃后面的屏幕图像,并使用切线空间下的法线对屏幕纹理坐标偏移后,再对屏幕图像进行采样来模拟近似的折射效果。最后可以得到下面的结果:
准备工作:
- 搭建好场景,在一个密闭房间,放置一个正方体和球体,球体在正方体内部。这是为了模拟玻璃对内部物体的折射效果。
- 为了得到本场景使用的环境映射纹理,我们使用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得到非常出色的视觉效果,是一种非常强大的材质类型。