UnityShader精要笔记十二 渲染纹理(镜子、玻璃)

本文继续对《UnityShader入门精要》——冯乐乐 第十章 高级纹理 10.2节 进行学习

一、RTT MRT

在之前的学习中,一个摄像机的渲染结果会输出到颜色缓冲中,并显示到我们的屏幕上。现代的GPU允许我们把整个三维场景渲染到一个中间缓存中,即渲染目标纹理(Render Target Texture,RTT),而不是传统的帧缓冲或后备缓冲(back buffer)。

与之相关的是多重渲染目标(Multiple Render Target ,MRT),这种技术指的是GPU允许我们把场景同时渲染到多个目标纹理中,而不再需要为每个渲染目标纹理单独渲染完整的场景。延迟渲染就是使用多重渲染目标的一个应用。

其实冯乐乐之前已经讲过颜色缓冲和多重渲染,现在来回顾一下。

1.颜色缓冲

参考2.3节第17页,在讲渲染管线的最后一步时:
当模型的图元经过了上面层层计算和测试后,就会显示到我们屏幕上。我们的屏幕显示的就是颜色缓冲区的颜色值。但是为了避免我们看到那些正在进行光栅化的图元,GPU会使用双重缓冲策略(Double Buffering)。这意味着,对场景的渲染是在幕后发生的,即在后置缓冲(Back Buffer)中。一旦场景已经被渲染到了后置缓冲中,GPU就会交换后置缓冲区和前置缓冲(Front Buffer)中的内容,而前置缓冲区是之前显示在屏幕中的图像。由此,保证了我们看到的图像是连续的。

2.MRT

参考9.1.3节第187页,在讲延迟渲染时:
对显卡有一定要求。如果要使用延迟渲染的话,显卡必须支持MRT(Multiple Render Targets)、Shader Mode3.0及以上、深度渲染纹理以及双面的模板缓冲。

参考9.4节第197页,在讲阴影时:
在传统的阴影映射纹理的实现中,我们会在正常渲染的Pass中把顶点位置变换到光源空间下,以得到它在光源空间中的三维位置信息。然后我们使用xy分量对阴影映射纹理进行采样,得到阴影映射纹理中该位置的深度信息。如果该深度值小于该顶点的深度值(通常由z分量得到),那么说明该点位于阴影中。

但在Unity5中,Unity使用了不同于这种传统的阴影采样技术,即屏幕空间的阴影映射技术(Screenspace Shadow Map)。屏幕空间的阴影映射原本是延迟渲染中产生阴影的方法。需要注意的是,并不是所有平台的Unity都会使用这种技术。这是因为,屏幕空间的阴影映射需要显卡支持MRT,而有些移动平台不支持这种特性。

3.渲染目标纹理(Render Target Texture,RTT)

这个概念冯乐乐没有细讲,可以参考 什么是渲染目标(render target)&& 渲染到纹理(Render To Texture, RTT)详解

RTT是现在很多特效里面都会用到的一项很基本的技术,实现起来很简单,也很重要。但是让人不解的是网上搜索了半天只找到很少的文章说这个事儿,不知道是因为太简单还是因为这项技术已经出现很长时间了。总之我是在摸索这个东西的时候绕了不少弯子。现在把具体的实现方法写下来。

什么是纹理

熟悉DX的兄弟们都知道什么叫纹理了,这里简单介绍一下,先看看现实生活中的例子吧,其实纹理的例子比比皆是,比如地板,墙面都是纹理。在图形学中,纹理主要是为了增强场景的真实感,如果你想绘制一个地面,简单一点可以直接使用一个矩形,稍微复杂一点可以用三角形网格,再复杂一点可以使用地面纹理,有了纹理以后真实感明显增强了。DX中的纹理映射其实就是对现实生活中纹理的模拟,D3D中有专门的数据结构来管理纹理。

渲染到纹理

常规的渲染操作都是直接将场景呈现到backbuffer中的,backbuffer说白了其实就是一个表面,再说白了就是一块内存,场景通过绘制函数载入显存后,再通过Present函数送至显示器。那么为什么还要渲染到纹理呢?这是为了实现一些特殊的效果,比如常见的环境映射,简单的说,想象你有一个光滑的球体,它应该是可以反射周围环境的,这就是环境映射。

实现步骤

上面说了常规的渲染操作是将场景送至backbuffer,而backbuffer实际上是一个Surface,而纹理恰恰又包含了Surface,所以我们只需要取得纹理的Surface,其次将场景送至这个Surface,最后再把这个纹理渲染到backbuffer中即可。举个例子,假设你要在一面墙壁上画一幅画,你有两种方法

  • 直接在墙上画,这个很好理解,就对应常规的backbuffer渲染。
  • 先将画绘制在纸上,然后将纸贴到墙上,这就对应渲染到纹理的过程。

这里墙壁相当于backbuffer,而纸张相当于纹理的Surface,在纸上作画相当于渲染到纹理,把纸贴到墙上相当于把纹理渲染到backbuffer,希望大家没有迷糊就好。具体的步骤如下

  • 创建纹理并获得纹理的表面(Surface)
  • 向纹理的表面渲染场景
  • 渲染纹理本身
4.MRT

参考
OpenGL ES 多目标渲染(MRT)

OpenGL ES 多目标渲染(MRT),即多重渲染目标,是 OpenGL ES 3.0 新特性,它允许应用程序一次渲染到多个缓冲区。

利用 MRT 技术,片段着色器可以输出多个颜色,可以用于保存 RGBA 颜色、 法线、 深度信息或者纹理坐标,每个颜色连接一个颜色缓冲区。

就目前接触的 MRT 技术,在图形图像算法中比较常用,主要用于获取算法中间结果、底图或者 Mask ,也用于多种高级渲染算法中,例如延迟着色和快速环境遮蔽估算。

二、Unity的渲染纹理

Unity为渲染目标纹理定义了一种专门的纹理类型——渲染纹理(Render Texture)。

在Unity中使用渲染纹理通常有两种方式:

  • 一种方式是在Project目录下创建一个渲染纹理,然后把某个摄像机的渲染目标设置成该渲染纹理,这样一来该摄像机的渲染结果就会实时更新到渲染纹理中,而不会显示在屏幕上。使用这种方法,我们还可以选择纹理的分辨率、滤波模式等纹理属性。
  • 另一种方式是在屏幕后处理时使用GrabPass命令或OnRenderImage函数来获取当前屏幕图像,Unity会把这个屏幕图像放到一张和屏幕分辨率等同的渲染纹理中,下面我们可以在自定义的Pass中把它们当成普通纹理来处理,从而实现各种屏幕特效。我们将依次学习这两种方法在Unity中的实现(OnRenderImage函数会在第12章中讲到)。
三、镜子效果
图10.11 镜子效果

为了得到从镜子出发观察到的场景图像,我们还需要创建一个摄像机,并调整它的位置、裁剪平面、视角等,使得它显示的图像是我们希望的镜子的图像。由于这个摄像机不需要直接显示在屏幕上,而是用于渲染纹理。因此我们可以直接将创建的Texture拖拽到该摄像机的Target Texture上。下图显示了摄像机面板和渲染纹理的相关设置。

图10.12 左图:把摄像机的Target Texture设置成自定义的渲染纹理。右图:渲染纹理使用的纹理设置

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

1.Properties
    Properties {
        _MainTex ("Main Tex", 2D) = "white" {}
    }
2.在顶点着色器中计算纹理坐标
v2f vert(a2v v) {
    v2f o;
    o.pos = UnityObjectToClipPos(v.vertex);
    
    o.uv = v.texcoord;
    // Mirror needs to filp x
    o.uv.x = 1 - o.uv.x;
    
    return o;
}

在上面代码中,我们翻转了x分量的纹理坐标。这是因为,镜子里显示的图像都是左右相反的。

注:这里冯乐乐并没有详细解释为什么要用1减原来的o.uv.x。


image.png

如上图,当我们选中Mirror中输出纹理的相机,会发现这个相机位置,是在我们场景运行相机的另一侧的。就像是镜子前面2个立方体和3个小球,我们和这些立方体和小球是站在同一侧的,而那个输出纹理的相机,是在镜子的后面,那么它看到的东西,它的左右正好和我们是相反的,在Camera Preview中就能对比出来。

然后纹理的uv其实就是2D坐标,本身就在0至1的范围。如果需要交换左右,自然就是用1减,比如本来在0.3的位置,相当于左侧30%的位置,用1减之后变成0.7,就是右侧30%的位置了。

image.png

关于uv更多了解,可以参考图形学笔记七 纹理和贴图 AO

3.在片元着色器中对渲染纹理进行采样和输出
fixed4 frag(v2f i) : SV_Target {
    return tex2D(_MainTex, i.uv);
}

在上面的使用中,我们把渲染纹理的分辨率大小设置为256×256。有时,这样的分辨率会使图像模糊不清,此时我们可以使用更高的分辨率或更多的抗锯齿采样等。但需要注意的是,更高的分辨率会影响带宽和性能,我们应当尽量使用较小的分辨率。

4.使用Target Texture做小地图

参考【Cocos Creator3.0教程】小地图的实现方式
TargetTexture 指定相机的渲染输出目标贴图,默认为空,直接渲染到屏幕,本例将副摄像机看到的内容动态输出到一个sprite中。ClearColor 指定清空颜色,本例中将颜色值和透明度全部清0。

//MiniMap.ts:
import { _decorator, Component, Node, Camera, Sprite, RenderTexture, UITransform, SpriteFrame } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Minimap')
export class Minimap extends Component {
    @property(Camera)
    private minimapCamera: Camera = null!;
    @property(Sprite)
    private contentSprite: Sprite = null!;

    start() {
        //新建一个和当前contentSprite大小一样的rendertexture
        const size = this.contentSprite.getComponent(UITransform)!.contentSize;
        const renderTexture = new RenderTexture();
        renderTexture.reset(size);
        //把摄像机看到的内容输出到这个rendertexture
        this.minimapCamera.targetTexture = renderTexture;

        //把这个rendertexture包装到SpriteFrame中,然后呈现给当前contentSprite
        const spriteFrame = new SpriteFrame();
        spriteFrame.texture = renderTexture;
        this.contentSprite.spriteFrame = spriteFrame;
    }

}
四、玻璃效果

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

需要注意的是,在使用GrabPass的时候,我们需要额外小心物体的渲染队列设置。正如之前所说,GrabPass通常用于渲染透明物体,尽管代码里并不包含混合指令,但我们往往仍然需要把物体的渲染队列设置成透明队列(即"Queue"="Transparent")。这样才能保证渲染物体时,所有的不透明物体都已经被绘制在屏幕上,从而获得正确的屏幕图像。

在本节中,我们将会使用GrabPass来模拟一个玻璃效果。学习完本节后,我们可以得到类似下图的效果。


图10.13 玻璃效果

这种效果实现非常简单,我们首先使用一张法线纹理来修改模型的法线信息,然后使用反射的方法,通过一个Cubemap来模拟玻璃反射,而在模拟折射时,则使用了GrabPass获取玻璃后面的屏幕图像,并使用切线空间下的法线对屏幕纹理坐标偏移后,再对屏幕图像进行采样来模拟近似的折射效果。
本节使用的立方体纹理如下:


图10.14 本例使用的立方体纹理

这个例子位于Scene_10_2_2,稍显复杂,冯乐乐讲的有点快。

1.这个例子使用了上一节讲的立方体纹理映射

就是上面10.14图片中的那个立方体纹理,不过上一节和立方体纹理复合的是一个颜色,而这一节复合的是主纹理。先来回顾上一节的核心代码:

Shader "Unity Shaders Book/Chapter 10/Reflection" {
    Properties {
        _Color ("Color Tint", Color) = (1, 1, 1, 1)
        _ReflectColor ("Reflection Color", Color) = (1, 1, 1, 1)
        _ReflectAmount ("Reflect Amount", Range(0, 1)) = 1
        _Cubemap ("Reflection Cubemap", Cube) = "_Skybox" {}
    }
...
// Use the reflect dir in world space to access the cubemap
fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb * _ReflectColor.rgb;

_ReflectColor是一个颜色值,就相当于主色调


image.png

如图,我们把_ReflectColor改成红色,就能看到一个红色的茶壶在反射纹理。

但是这一节的玻璃效果,并不是主色调的颜色值,而是另一个材质:

// Convert the normal to world space
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);
fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;

现在知道Properties中的_Cubemap和_MainTex是干啥的了,就是为了计算反射的立方体纹理。

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" }

我们通过关键词GrabPass定义了一个抓取屏幕图像的Pass。在这个Pass中我们定义了一个字符串,该字符串内部的名称决定了抓取到的屏幕图像将会被存入哪个纹理中。实际上,我们可以省略声明该字符串,但直接声明纹理名称的方法往往可以得到更高的性能。具体原因后面讲到。

定义变量:

sampler2D _RefractionTex;
float4 _RefractionTex_TexelSize;

需要注意的是,我们还定义了_RefractionTex和_RefractionTex_TexelSize变量,这对应了在使用GrabPass时指定的纹理名称。_RefractionTex_TexelSize可以让我们得到该像素的纹理大小,例如一个大小为256×512的纹理,它的像素大小为(1/256,1/512)。我们需要在对屏幕图像的采样坐标进行偏移时使用该量。

关于_RefractionTex_TexelSize,可以参考
unity shader _MainTex_TexelSize 和 UNITY_UV_STARTS_AT_TOP 的作用
https://forum.unity.com/threads/_maintex_texelsize-whats-the-meaning.110278/

_MainTex_TexelSize,这个变量的从字面意思是主贴图 _MainTex 的像素尺寸大小,是一个四元数,是 unity 内置的变量,它的值为 Vector4(1 / width, 1 / height, width, height)

在Direct3D平台下,如果我们开启了抗锯齿,则xxx_TexelSize.y 会变成负值,好让我们能够正确的进行采样。 所以if (_MainTex_TexelSize.y < 0)的作用就是判断我们当前是否开启了抗锯齿。

3.顶点着色器
v2f vert (a2v v) {
    v2f o;
    o.pos = UnityObjectToClipPos(v.vertex);
    
    o.scrPos = ComputeGrabScreenPos(o.pos);
    
    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; 
    
    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函数来得到对应被抓取的屏幕图像的采样坐标,它的主要代码和ComputeScreenPos类似。最大的不同是针对平台差异造成的采样坐标问题进行了处理。接着,我们计算了_MainTex和_BumpMap的采样坐标,并把它们分别存储在一个float4类型变量的xy和zw分量中。由于我们需要在片元着色器中把法线方向从切线空间(由法线纹理采样得到)变换到世界空间下,以便对Cubemap采样,因此在这里我们需要计算该顶点对应的从切线空间到世界空间的变换矩阵,并把该矩阵的每一行分别存储在TtoW0、TtoW1和TtoW2的xyz分量中。这里面使用的数学方法就是,得到切线空间下的3个坐标轴(xyz轴分别对应了副切线、切线和法线方向)在世界空间下的表示,再把他们依次按列组成一个变换矩阵即可。TtoW0等值的w轴同样被利用起来,用于存储世界空间下的顶点坐标。

4.片元着色器
fixed4 frag (v2f i) : SV_Target {       
    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));   
    
    // 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)));
    fixed3 reflDir = reflect(-worldViewDir, bump);
    fixed4 texColor = tex2D(_MainTex, i.uv.xy);
    fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb;
    
    fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * _RefractAmount;
    
    return fixed4(finalColor, 1);
}

我们首先通过TtoW0等变量的w分量得到世界坐标,并用该值得到该片元对应的视角方向。随后,我们对法线纹理进行采样,得到切线空间下的法线方向。我们使用该值和_Distortion属性以及_RefractionTex_TexelSize来对屏幕图像的采样坐标进行偏移,模拟折射效果。_Distortion值越大,偏移量越大,玻璃背后的物体看起来变形程度越大。在这里,我们选择使用切线空间下的法线方向来进行偏移,是因为该空间下的法线可以反映顶点局部空间下的法线方向。随后我们对srcPos透视除法得到真正的屏幕坐标,再使用该坐标对抓取的屏幕图像_RefractionTex进行采样,得到模拟的折射颜色。

之后,我们把法线方向从切线空间变换到了世界空间下(使用变换矩阵的每一行,即TtoW0、TtoW1和TtoW2,分别和法线方向点乘,构成新的法线方向),并据此得到的视角方向相对于法线方向的反射方向。随后,使用反射方向对Cubemap进行采样,并把结果和主纹理相乘后得到反射颜色。

最后,我们使用_RefractAmount属性对反射和折射颜色进行混合,作为最终的输出颜色。_RefractAmount用于控制折射程度,当_RefractAmount值为0时,该玻璃只包含反射效果,当_RefractAmount值为1时,该玻璃只包含折射效果。

5.折射详解

上面关于折射部分,冯乐乐讲的很快。说一下我的个人理解:

首先,可以把_RefractAmount改为1,这样就只能看到折射效果了。然后把_Distortion调为0,可以看到此时没有任何效果,即使把cube和Sphere都隐藏掉,画面也无变化。现在把_Distortion调为100

image.png

这里是有明显的正方体轮廓,范围内本来应该看到的东西,发生了模糊。也就是这一部分的像素,本来是屏幕抓取到的_RefractionTex,但现在做了一个特效的变化。而且仔细看这个轮廓,其实是有凸起的效果,这正是因为使用了法线贴图。在之前的Chapter7-NormalMapWorldSpace.shader中有如下代码:

fixed4 frag(v2f i) : SV_Target {
    // Get the position in world space      
    //float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
    // Compute the light and view dir in world space
    //fixed3 lightDir = normalize(UnityWorldSpaceLightDir(worldPos));
    //fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));
    fixed3 lightDir = normalize(i.lightDir);
    fixed3 viewDir = normalize(i.viewDir);

    // Get the normal in tangent space
    fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
    bump.xy *= _BumpScale;
    bump.z = sqrt(1.0 - saturate(dot(bump.xy, bump.xy)));
    // Transform the narmal from tangent space to world space
    bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));
    
    fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
    
    fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
    
    fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(bump, lightDir));

    fixed3 halfDir = normalize(lightDir + viewDir);
    fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(bump, halfDir)), _Gloss);
    
    return fixed4(ambient+ diffuse + specular, 1.0);
}

上面的代码分析,详见UnityShader精要笔记六 基础纹理,大概就是法线只存了xy,用勾股定理求出z,得到完整的法线,然后转到世界空间后进行光照计算。对比一下本例,会发现只使用了法线的xy部分。现在我们需要使用法线来模拟玻璃的折射效果:

    // 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;

关于_RefractionTex_TexelSize,上面已经介绍过,是一个四元数,是 unity 内置的变量,它的值为 Vector4(1 / width, 1 / height, width, height)。这里个人理解就是,要把offset从纹理空间映射到屏幕空间,而_RefractionTex_TexelSize就提供了这个比例关系。再具体解释就是,u的范围是0-1,映射到width像素,每一份的长度就是1/width。

得到了屏幕像素的偏移量offset后,再去和 i.scrPos计算。scrPos使用ComputeGrabScreenPos函数来得到对应被抓取的屏幕图像的采样坐标,它的主要代码和ComputeScreenPos类似。关于ComputeScreenPos在4.9.3节有解释,可参考UnityShader精要笔记三 内置文件和变量 语义

在写shader的过程中,我们有时候希望能够获得片元在屏幕上的像素位置。首先在顶点着色器中将ComputeScreenPos的结果保存在输出结构体中,然后在片元着色器中进行一个齐次除法运算后得到视口空间下的坐标。虽然ComputeScreenPos的函数名字似乎意味着会直接得到屏幕空间的位置,但并不是这样的,我们仍需在片元着色器中除以它的w分量来得到真正的视口空间的位置。那么为什么Unity不直接在ComputeScreenPos中为我们进行除以w分量这个步骤呢?为什么还需要我们进行这个除法?这是因为,如果Unity在顶点着色器中这么做的话,就会破坏插值结果。我们知道,从顶点着色器到片元着色器的过程实际会有一个插值的过程。如果不在顶点着色器中进行这个除法,保留x,y和w分量,那么它们在插值后再进行这个除法,得到的x/w和y/w就是正确的(我们可以认为是除法抵消了插值的影响)。但是如果我们直接在顶点着色器中进行这个除法,那么就需要对x/w和y/w直接进行插值,这样得到结果就会不准确。原因是,我们不可以在投影空间中进行插值,因为这并不是一个线性空间,而插值往往是线性的。

但是,这句话我还是完全没看懂

i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;

为什么offset要与i.scrPos.z相乘???

6.Queue RenderType
SubShader {
    // We must be transparent, so other objects are drawn before this one.
    Tags { "Queue"="Transparent" "RenderType"="Opaque" }

我们首先在SubShader的标签中将渲染队列设置成Transparent,尽管后面的RenderType被设置为了Opaque。这两者看似矛盾,但实际上服务于不同的需求。我们在之前说过,把Queue设置成Transparent可以保证该物体渲染时,其它所有不透明物体都已经被渲染到屏幕上了,否则就可能无法正确得到“透过玻璃看到的图像”。而设置RenderType则是为了在使用着色器替换(Shader Replacement)时,该物体可以在需要时被正确渲染。这通常发生在我们需要得到摄像机的深度和纹理发现时,我们在后面会讲到。

7.GrabPass抓取方式

在前面的实现中,我们在GrabPass中使用一个字符串指明了被抓取的屏幕图像将会存储在哪个名称纹理中。实际上,GrabPass支持两种形式。

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

尽管GrabPass和渲染纹理+额外摄像机的方式都可以抓取屏幕图像,但它们之间还是有一些不同的。GrabPass的好处在于实现简单,我们只需在Shader中写几行代码就可以实现抓取屏幕的问题。而要使用渲染纹里的话,我们首先要创建一个渲染纹理和一个额外的摄像机,再把该摄像机的Render Target设置为新建的渲染纹理对象,最后把该渲染纹理传递给相应的Shader。

但从效率上来讲,使用渲染纹理的效率往往要好于GrabPass,尤其在移动设备上。使用渲染纹理我们可以自定义渲染纹理的大小,尽管这种方法需要把部分场景再次渲染一遍,但我们可以通过调整摄像机的渲染层来减少二次渲染时的场景大小,或使用其它方法来控制摄像机是否需要开启。而使用GrabPass获取到的图像分辨率和显示屏幕是一致的,这意味着在一些高分辨率的设备上可能会造成严重的带宽影响。而且在移动设备上,GrabPass虽然不会重新渲染场景,但它往往需要CPU直接读取后备缓冲(back buffer)中的数据,破坏了CPU和GPU之间的并行性,这是比较耗时的,甚至在一些移动设备上这是不支持的。

在Unity5中,Unity引入了命令缓冲(Command Buffers)来允许我们扩展Unity的渲染流水线。使用命令缓冲我们也可以得到类似抓屏的效果,它可以在不透明物体渲染后把当前的图像复制到一个临时的渲染目标纹理中,然后在那里进行一些额外的操作,例如模糊等,最后把图像传递给需要使用它的物体进行处理和显示。除此之外,命令缓冲还允许我们实现很多特殊的效果,读者可以在Unity官方手册的图像命令缓冲一文(http://docs.unity3d.com/Manual/GraphicsCommandBuffers.html)中找到更多的内容,Unity还提供了一个示例工程供我们学习。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容