Unity 实现游戏中多相机屏幕CutIn效果

(180) 2024-04-17 20:01:01

效果展示

下图是Game窗口里面显示的两个不同物体的cutin拼接起来的效果,当然可以自由调整斜切的角度,以及拍摄的内容
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第1张
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第2张
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第3张

原理说明

基本原理还是使用的RenderTexture,将相机照射的内容都拼接起来,相信基本的使用RenderTexture实现左右分屏显示不同的内容,应该是比较简单的了;但是,要实现上面这种不规则的切屏,相对来说就比较困难了。
所谓拼接,本质上还是指我们只想把一个相机照射的内容的某一部分显示出来,另外的部分我们不想展示出来,顺着这个思路,我们可以尝试着用几个面片去遮挡整个屏幕,然后只留下我们不想遮挡的那部分,然后多复制几组面片,分别打开各个部分,最后把所有部分看到的内容拼起来就是一个完整的屏幕了。
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第4张
比如上面的效果,我就用了两个斜着的面片去挡住了镜头,然后想显示左边,我就把左边的面片隐藏,同理,右边也是一样。
但是使用默认材质是无法这样做出来,摄像机照到的只会是一边白,一边有内容的(相机使用Clear Depth,会叠加最上层和下一层相机照射的内容)
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第5张

我们希望的是,白的那一部分是“透明的”,也就是我们能够通过这部分去看到下一层的相机照到的内容。
而这只需要我们再Shader里面去开启深度写入,然后剔除掉一部分的深度信息即可,具体Shader如下

Shader "Custom/CutInMask"
{ 
   
    Properties
    { 
   
        _Stencial ("Stencial ID", Float) = 100
        _StencialComp ("Stencial Compression", Float) = 8
        _StencialOp ("Stencial Operation", Float) = 2
    }

    SubShader
    { 
   
        Tags{ 
   
            "RenderType" = "Opaque"
            "Queue" = "Geometry-500"
        }

        Lighting Off
        ZWrite On
        ColorMask 0

        Stencil
        { 
   
            Ref[_Stencil]
            Comp[_StencilComp]
            Pass[_StencilOp]
        }

        Pass
        { 
   
            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            fixed4 vert(float4 v : POSITION) : SV_POSITION
            { 
   
                return UnityObjectToClipPos(v);
            }

            fixed4 frag() : SV_TARGET
            { 
   
                return float4(0,0,0,0);
            }

            ENDCG   
        }
        
    }
}

这个Shader里面的顶点和片元着色器并不重要,就是最基础的坐标转换和输出颜色(颜色是啥都不重要,因为都会被剔除掉),然后将这个Shader放到一个材质上,就可以在场景中看到效果了。测试场景如下,两个一模一样的遮罩物体,然后一个打开一个,都用相机去照自己想看的物体(两个相机都得是Depth only)
Unity 实现游戏中多相机屏幕CutIn效果 (https://mushiming.com/)  第6张

THE END

发表回复