一、前言
“在迟到路上赶路的人,大部分心里想的都不是迟到的原因,而是在想如果有传送门就好了。”
著名哲学家阿创如是说。
然而可惜的是现实中并没有传送门,但不妨碍传送门的身影出现在无数小说、动漫、游戏中(阿创可能也是逻辑家),比如《哆啦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效果(我的收藏夹都快爆了),如果能有系列的机会当然是最好咧。
加油加油~
暂无关于此日志的评论。