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

作者:阿创
2020-06-11
5 1 0

一、前言

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

著名哲学家阿创如是说。

然而可惜的是现实中并没有传送门,但不妨碍传送门的身影出现在无数小说、动漫、游戏中(阿创可能也是逻辑家),比如《哆啦 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 裁剪剔除。

还有对应两个传送门写入的 stencilrefValue1  refValue2

初始化部分中如上一篇所说 portalCameraRT 设置为一个深度缓冲区中的位数是 24 位的渲染纹理,(可选 01624;但只有 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 效果(我的收藏夹都快爆了),如果能有系列的机会当然是最好咧。

加油加油~

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