一、前言

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

著名哲学家阿创如是说。

然而可惜的是现实中并没有传送门，但不妨碍传送门的身影出现在无数小说、动漫、游戏中（阿创可能也是逻辑家），比如《哆啦 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 裁剪剔除处理并叠加覆盖流程如下：

玩家摄像机看到的图像

随后↓

虚拟摄像机看到的图像

最后↓

Stencil Test 裁剪剔除处理并叠加覆盖

四、效果展示

注意事项 ：

由于只是非递归传送门，不能套娃，当在一个传送门看另外一个传送门的时候，会变成一片白（传送门材质本来的颜色）。

五、完结撒花

Stencil Buffer 系列完结咯。撒花~~（递归传送门文章以后再弄咧，不碍事~~）

写了 6 篇博客，看了好多网上前辈写的资料，算是把 Stencil Buffer 的概念和常见用法弄懂了，实在是让我受益良多啊。

后续打算学习些杂碎但又酷炫的 shader 效果（我的收藏夹都快爆了），如果能有系列的机会当然是最好咧。

加油加油~

系列文章之前的全部链接：

• 走进 Stencil Buffer 系列 0 : 模板缓冲和模板测试是什么?

• 走进 Stencil Buffer 系列 1：模型轮廓描边

• 走进 Stencil Buffer 系列 2：非欧空间

• 走进 Stencil Buffer 系列 3：镜面反射

• 走进 Stencil Buffer 系列 4：Stencil 后处理局部描边