1. 渲染纹理
渲染纹理(Render Texture —— RT)是非常常用的一种渲染技术,其工作原理是将指定摄像机的渲染结果储存到一张纹理(中间缓存)上,而不是直接显示到屏幕上,通过这张中间纹理就可以对当前渲染结果添加各种效果的处理。
渲染纹理的生成通常有两种方式:
- 在工程中直接创建,通过这种方式创建的RT,我们可以指定它的分辨率、抗锯齿等级、颜色格式等
- 通过GrabPass或OnRenderImage函数抓取摄像机渲染结果,此时Unity会将抓取的图像储存在一张渲染纹理中,通过这种方式创建的渲染纹理,保持跟屏幕相同的分辨率
2. 简单镜子效果
这个例子中我们通过渲染纹理实现一个简单的镜子效果。
- 首先在工程中创建一个渲染纹理 Chapter_10_Mirror_RT
- 创建一个摄像机用来模拟镜子看到的视角,调整摄像机的各项参数,使其渲染的结果满足我们需要的镜子的效果
- 将 Chapter_10_Mirror_RT 拖到摄像机的 Target Texture选项,该摄像机的渲染结果就会保存到 Chapter_10_Mirror_RT中,而不会直接显示到屏幕上
- 在场景中创建一个 Quad 作为镜子,为 Quad 创建测试材质 Chapter_10_Mirror_Mat
- 创建 Chapter_10_Mirror_Shader 作为测试Shader,并赋给Chapter_10_Mirror_Mat
- 将 Chapter_10_Mirror_RT 赋给 Chapter_10_Mirror_Shader 的 MainTex,这样摄像机的渲染结果就可以作为一张正常的纹理被测试 Shader 使用了
另外需要注意的一点,为了模拟镜子的镜像效果,在对RT采样时,需要通过 uv.x = 1 - uv,x 对采样的X坐标进行翻转
测试Shader如下:
Shader "MyShader/Chapter_10/Chapter_10_Mirror_Shader"
{
Properties
{
_MainTex("MainTex", 2D) = "white"{}
_Color("Color", Color) = (1, 1, 1, 1)
}
SubShader
{
Pass
{
Tags{"LightMode" = "ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
struct a2v
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float2 uv : TEXCOORD0;
};
struct v2f
{
float4 pos : SV_POSITION;
float2 uv : TEXCOORD0;
float3 worldNormal : TEXCOORD1;
float3 worldPos : TEXCOORD2;
SHADOW_COORDS(3)
};
sampler2D _MainTex;
float4 _MainTex_ST;
fixed4 _Color;
v2f vert(a2v v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.uv.x = 1 - o.uv.x;
o.worldNormal = UnityObjectToWorldNormal(v.normal);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
TRANSFER_SHADOW(o);
return o;
}
fixed4 frag(v2f i) : SV_Target
{
fixed3 _ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
fixed3 _samplerColor = tex2D(_MainTex, i.uv).rgb;
float3 _worldNormal = normalize(i.worldNormal);
float3 _worldLight = normalize(_WorldSpaceLightPos0.xyz);
fixed3 _diffuse = _LightColor0.rgb * _Color.rgb * _samplerColor * (0.5 * dot(_worldLight, _worldNormal) + 0.5);
UNITY_LIGHT_ATTENUATION(_atten, i, i.worldPos);
return fixed4(_ambient + _diffuse * _atten, 1);
}
ENDCG
}
}
}
效果如下:
3. 玻璃效果
下面的例子中,通过在 SubShader 中调用 GrabPass 抓取摄像机渲染的内容生成一张 Render Texture,通过对这张RT进行采样显示,模拟玻璃的透明效果。
使用GrabPass抓取屏幕图像生成RT有两种方式:
- 指定纹理名,形式为 GrabPass {“_XXXTexture”} ,此时会动态生成一张名为 _XXXTexture 的 RenderTexture,并把当前摄像机已经渲染的图像存储到该纹理中,同时,Shader 中也需要声明名为 _XXXTexture 的变量,在后续的Pass中就可以对这张纹理进行使用了。使用这种方式进行抓取时,场景中所有指定了相同RT名字的物体使用的都是同一张渲染纹理,也就是同名情况只会抓取一次,在满足需求的情况下,可以节省下反复抓取屏幕的消耗。
- 不指定纹理名,形式为 GrabPass {},此时会动态生成一张名为固定为 _GrabTexture 的 RenderTexture,并把当前摄像机已经渲染的图像存储到该纹理中。每个调用 GrabPass {} 的物体都会为自己生成一张独立的 _GrabTexture,有可能会造成浪费。
通过这种方式模拟玻璃的透明效果虽然不进行透明度混合,但 SubShader 的 “Queue” 标签依然需要设置为 “Transparent”,这是为了在抓取屏幕时所有不透明的物体都已经渲染完成了,这样才能抓取到完整的显示内容,从而达到透过玻璃看到后面物体的效果。
在通过GrabPass获取了RT之后,还需要确定对应的采样坐标,由于存在针对不同平台的纹理翻转等问题,针对GrabPass纹理,可以通过内置的方法来获取采样坐标:
o.screenPos = ComputeGrabScreenPos(o.pos);
注意这里虽然方法名叫 ScreenPos,但其实得到的并不是屏幕坐标,而是一个特殊构造的坐标
inline float4 ComputeGrabScreenPos (float4 pos) {
#if UNITY_UV_STARTS_AT_TOP
float scale = -1.0;
#else
float scale = 1.0;
#endif
float4 o = pos * 0.5f;
o.xy = float2(o.x, o.y*scale) + o.w;
#ifdef UNITY_SINGLE_PASS_STEREO
o.xy = TransformStereoScreenSpaceTex(o.xy, pos.w);
#endif
o.zw = pos.zw;
return o;
}
该方法传进来的是一个投影空间下的坐标,这个坐标已经经过了一系列这样那样的空间变换,此时范围在[-w, w]之间,由于我们需要用它来进行采样,因此只需要关心其xy的值。
- 方法中先乘以0.5将其缩放到[-0.5w, 0.5w]的范围
- 然后处理翻转,并上移0.5w(注意此时o.w是pos.w * 0.5的结果,也就是上移了0.5w),将xy的范围映射到了[0, w]的区间
- 最后重新保存回原始的z和w值,此时screenPos.w的值又变回了原始的w值
- 在片元着色器中,通过 i.screenPos.xy/i.screenPos.w 将xy缩放至 [0, 1] 的区间后就是真正的采样坐标了
至于为什么要保留w分量到片元着色器中再进行除法,是因为在顶点着色器到片元着色器之间会进行线性插值,由于此时Pos为投影空间的坐标,对于投影摄像机来说,这是个非线性的空间,如果先除以w后进行线性插值的话,会得到错误结果,如果保留各个分量分别进行线性插值最后在片元着色器中进行除法,就可以抵消这个影响(具体数学原理不详,反正我乐在92页是这么说的)。
另外,为了更清晰地体现折射对于光线的影响,模拟透过玻璃看到背后物体的效果,这里还使用了一张法线贴图,通过法线的xy值对采样坐标进行了偏移。法线提供了一个偏移方向和偏移量,要得到偏移后的实际采样坐标,还需要乘以RT的纹素大小:
sampler2D _RefractTex;
float4 _RefractTex_TexelSize;
与_ST后缀的变量类似,_TexelSize 后缀的变量会为我们提供对应纹理的纹素大小信息
测试Shader如下:
Shader "MyShader/Chapter_10/Chapter_10_Glass_Shader"
{
Properties
{
_Color("Color", Color) = (1, 1, 1, 1)
_BumpTex("BumpTex", 2D) = "bump"{}
_EvnCube("EvnCube", Cube) = "_skybox"{}
_RefractRatio("RefractRatio", Range(0.1, 1.0)) = 0.5
_ReflToRefr("ReflToRefr", Range(0, 1)) = 0
_BumpScale("BumpScale", Range(0.1, 50)) = 1
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Opaque" }
GrabPass {"_RefractTex"}
GrabPass{}
Pass
{
Tags{"LightMode" = "ForwardBase"}
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma multi_compile_fwdbase
#include "UnityCG.cginc"
#include "Lighting.cginc"
#include "AutoLight.cginc"
struct a2v
{
float4 vertex : POSITION;
float3 normal : NORMAL;
float4 tangent : TANGENT;
float2 uv : TEXCOORD0;
};
struct v2f
{
float4 pos : SV_POSITION;
float4 tangetToWorld0 : TEXCOORD0;
float4 tangetToWorld1 : TEXCOORD1;
float4 tangetToWorld2 : TEXCOORD2;
float2 bumpUV : TEXCOORD3;
float3 worldRefl : TEXCOORD4;
float4 screenPos : TEXCOORD5;
SHADOW_COORDS(6)
};
fixed4 _Color;
sampler2D _BumpTex;
float4 _BumpTex_ST;
samplerCUBE _EvnCube;
fixed _RefractRatio;
fixed _ReflToRefr;
sampler2D _RefractTex;
float4 _RefractTex_TexelSize;
float _BumpScale;
v2f vert(a2v v)
{
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
float3 _worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
float3 _normal = normalize(v.normal);
float3 _biNormal = normalize(cross(v.tangent.xyz, v.normal) * v.tangent.w);
float3 _tagent = normalize(v.tangent.xyz);
o.tangetToWorld0 = float4(_tagent.x, _biNormal.x, _normal.x, _worldPos.x);
o.tangetToWorld1 = float4(_tagent.y, _biNormal.y, _normal.y, _worldPos.y);
o.tangetToWorld2 = float4(_tagent.z, _biNormal.z, _normal.z, _worldPos.z);
o.bumpUV = TRANSFORM_TEX(v.uv, _BumpTex);
float3 _objView = ObjSpaceViewDir(v.vertex);
float3 _objRefl = reflect(-_objView, v.normal);
o.worldRefl = UnityObjectToWorldDir(_objRefl);
o.screenPos = ComputeGrabScreenPos(o.pos);
TRANSFER_SHADOW(o);
return o;
}
fixed4 frag(v2f i) : SV_Target
{
fixed3 _ambient = UNITY_LIGHTMODEL_AMBIENT.rgb;
float3 _bump = UnpackNormal(tex2D(_BumpTex, i.bumpUV)).xyz;
float2 _offset = _bump.xy * _BumpScale * _RefractTex_TexelSize.xy;
i.screenPos.xy = i.screenPos.xy + _offset;
fixed3 _refractColor = tex2D(_RefractTex, i.screenPos.xy/i.screenPos.w).rgb;
fixed3 _reflectColor = texCUBE(_EvnCube, i.worldRefl).rgb;
_bump.z = sqrt(1.0 - dot(_bump.xy, _bump.xy));
float3 _worldNormal = normalize(float3(dot(i.tangetToWorld0.xyz, _bump), dot(i.tangetToWorld1.xyz, _bump), dot(i.tangetToWorld2.xyz, _bump)));
float3 _worldLight = normalize(_WorldSpaceLightPos0.xyz);
fixed3 _diffuse = _LightColor0.rgb * _Color.xyz * (0.5 * dot(_worldLight, _worldNormal) + 0.5);
float3 _worldPos = float3(i.tangetToWorld0.w, i.tangetToWorld1.w, i.tangetToWorld2.w);
UNITY_LIGHT_ATTENUATION(_atten, i, _worldPos);
fixed3 _finalColor = lerp(_reflectColor, _refractColor, _ReflToRefr);
return fixed4(_ambient + _diffuse * _finalColor * _atten, 1);
}
ENDCG
}
}
}
效果如下:
4. 程序纹理
4.1 通过脚本生成纹理
这部分比较简单,代码中创建一个Texture2D,根据需求调用 SetPixel 或 SetPixels 方法设置像素,关键是最后不要忘了调用 Apply 方法。
一个简单的测试脚本(Shader部分就是单纯的采样纹理进行显示):
using UnityEngine;
public class Chapter_10_CreateTexture : MonoBehaviour
{
public int Width = 512;
public int Height = 512;
public GameObject MatObj;
private int mDis = 64;
private int mHalfLine = 2;
void Start()
{
CreateTexture();
}
void CreateTexture()
{
Texture2D _tex = new Texture2D(Width, Height);
int _left = 0;
for (int _w = 0; _w < Width; _w++)
{
for (int _h = 0; _h < Height; _h++)
{
_left = _w % mDis;
if (_left <= mHalfLine || _left > Width - mHalfLine)
{
_tex.SetPixel(_w, _h, Color.white);
}
else
{
_left = _h % mDis;
if (_left <= mHalfLine || _left > Height - mHalfLine)
{
_tex.SetPixel(_w, _h, Color.white);
}
else _tex.SetPixel(_w, _h, Color.gray);
}
}
}
_tex.Apply();
Material _material = MatObj.GetComponent<MeshRenderer>().material;
_material.SetTexture("_MainTex", _tex);
}
}
效果如下:
4.2 程序材质
Procedural Materials,一类专门使用程序纹理的特殊材质。
程序材质和它使用的纹理都不是在Unity内创建的,而是通过一些特定的工具生成,如Substance Designer。