走进 Stencil Buffer 系列 5：Stencil 后处理非递归传送门效果

一、前言

“在迟到路上赶路的人，大部分心里想的都不是迟到的原因，而是在想如果有传送门就好了。”

著名哲学家阿创如是说。

然而可惜的是现实中并没有传送门，但不妨碍传送门的身影出现在无数小说、动漫、游戏中（阿创可能也是逻辑家），比如《哆啦 a 梦》里的任意门，还有以传送门为核心玩法的游戏《Portal》。本篇文章将介绍用 Stencil Test 和屏幕后处理制作非递归的传送门效果。

二、实现目标与思路

本篇文章将实现最最基本的的非递归传送门视觉效果，也就是说不支持套娃，不支持物体物理位置的传送转移。（传送门完全体可能等项目做完有时间另开文章补上咕咕咕）

也就是说我们的目标效果就如下图这样，我们在空间 1 能通过传送门 1 看到空间 2 中里面的的内容。

传送门视觉效果示意图

那我们如何实现呢？

在现实世界中我们只有在空间 2 才能看到空间 2 里的内容。那我们可以摆一个替身玩家（虚拟摄像机）到空间 2 来帮我们看。要求替身玩家（虚拟摄像机）相对传送门 2 的位置、旋转等于玩家相对传送门 1 的位置、旋转沿 Y 轴旋转 180°。并且看到的内容只能在传送门框框内显示。

替身玩家（虚拟摄像机）的摆放

我们来分析一下其中的技术细节：

1. 对于获取相对位置这个要求，是不是有点熟悉咧？没错就是在我们的系列 3：镜面反射中有用到过镜子 Transform.worldToLocalMatrix 矩阵来获得世界坐标转换到镜子局部空间坐标系矩阵。而在 Unity 提供的 API 中也有一个函数 Transform.InverseTransformPoint 可以把某个点位置转化到物体空间坐标系内。

2. 对于获取相对旋转，我们也可以通过 Unity 提供的 API：Quaternion.Inverse(inPortal.transform.rotation) 获得传送门 1 的 rotation 四元数的逆，用其乘于玩家的 rotation 四元数就可以获得玩家相对于传送门 1 为坐标系的相对旋转。

3. 沿 Y 轴旋转 180 度只需要乘于一个 Quaternion.Euler(0.0f,180.0f,0.0f) 的四元数就好了。

4. 替身玩家就是摆个摄像机在空间 2 的相对位置上，并且使其看到的内容渲染到一张 RenderTexture 渲染纹理中就好了。

5. 只能在传送门框框内显示这个要求，是不是又是很熟悉咧？没错就是在我们系列 1，2，3，4 中都有提到过的，使用 Stencil Test 限定某个区域的显示。先让传送门的材质 Shader 写入某个参考值，然后在屏幕后处理中，根据此参考值把虚拟摄像机渲染所得的 RenderTexture 渲染纹理进行Stencil Test 裁剪剔除后并叠加覆盖先前玩家摄像机所看到的内容。就大功告成了！

三、具体实现

1. 创建一个 PortalMainCamera.cs 脚本挂载在玩家的摄像机身上。

首先是声明变量和初始化部分：

我们声明了 portals 数组来保存两个传送门。还有我们的虚拟摄像机 portalCamera 和玩家摄像机 mainCamera 。

随后还有承接虚拟摄像机渲染所得图像结果的 portalCameraRT 与其 portalRTProcessMat 后处理所用材质用于 Stencil Test 裁剪剔除。

还有对应两个传送门写入的 stencil 值 refValue1 和 refValue2。

初始化部分中如上一篇所说 portalCameraRT 设置为一个深度缓冲区中的位数是 24 位的渲染纹理，（可选 0，16，24；但只有 24 位具有模板缓冲区），是因为 24 位缓冲区里包括了 16 位的深度缓冲 depthBuffer，和 8 位的模板缓冲 stencilBuffer。并将其设置为虚拟摄像机 portalCamera 的渲染目标。

public class PortalMainCamera : MonoBehaviour
{
    [SerializeField] private MyPortal[] portals = new MyPortal[2];
    [SerializeField] private Camera portalCamera;
    private Camera mainCamera;

    private RenderTexture portalCameraRT;
    [SerializeField] private Material portalRTProcessMat;

    private const int refValue1 =1;
    private const int refValue2 =2;

    void Start()
    {
        mainCamera = GetComponent<Camera>();
        portalCameraRT = new RenderTexture(Screen.width,Screen.height,24);
        portalCamera.targetTexture= portalCameraRT;
        portals[0].material.SetInt("_RefValue",refValue1);
        portals[1].material.SetInt("_RefValue",refValue2);
    }

}

2. 创建虚拟摄像机渲染方法 RenderPortalCamera 函数，根据两个传送门和玩家摄像机的位置，摆好虚拟摄像机，并执行渲染。

具体代码如下：

void RenderPortalCamera(MyPortal inPortal,MyPortal outPortal){
        //传送门摄像机位置设置
        //主摄像机（玩家）的位置在入口传送门为原点坐标系的位置
        Vector3 relativePos = inPortal.transform.InverseTransformPoint(transform.position);
        //旋转 180 度
        relativePos = Quaternion.Euler(0.0f,180.0f,0.0f)*relativePos;
        //将我们传送门摄像机位置按相对位置摆到出口传送门坐标系中
        portalCamera.transform.position = outPortal.transform.TransformPoint(relativePos);

        //传送门摄像机旋转设置
        Quaternion relativeQua = Quaternion.Inverse(inPortal.transform.rotation)*transform.rotation;
        relativeQua = Quaternion.Euler(0.0f,180.0f,0.0f)*relativeQua;
        portalCamera.transform.rotation = outPortal.transform.rotation*relativeQua;
        portalCamera.Render();
    }

3. 最后就是最重要的后处理部分：

在 OnRenderImage 函数中，判断传送门是否可见，如果可见则执行 RenderPortalCamera 函数，随后根据看到的传送门向portalRTProcessMat 材质传送 stencil 参考值，最后执行 Graphics.Blit(portalCameraRT,src,portalRTProcessMat) 语句把虚拟摄像机渲染结果 portalCameraRT 渲染纹理通过 portalRTProcessMat 材质 Shader 的 Stencil Test 裁剪剔除处理并叠加覆盖到 src 中。

void OnRenderImage(RenderTexture src, RenderTexture dst){

        if(portals[0].renderer.isVisible == true){
            RenderPortalCamera(portals[0],portals[1]);
            portalRTProcessMat.SetInt("_RefValue",refValue1);
            Graphics.Blit(portalCameraRT,src,portalRTProcessMat);
        }
        if(portals[1].renderer.isVisible == true){
            RenderPortalCamera(portals[1],portals[0]);
            portalRTProcessMat.SetInt("_RefValue",refValue2);
            Graphics.Blit(portalCameraRT,src,portalRTProcessMat);
        }

        Graphics.Blit(src,dst);
    }

最后 portalRTProcessMat 材质代码如下：

与上篇后处理局部描边代码几乎一模一样，就不再赘述了。

Shader "Unlit/PortalRTProcess"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _RefValue("Ref Value",Int) =0
    }
    SubShader
    {

        Stencil{
            Ref [_RefValue]
            Comp Equal
        }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

我们可以在 Frame Debugger 中看到 Stencil Test 裁剪剔除处理并叠加覆盖流程如下：