【Unity/UI】多个摄像机的组合使用

柔光的暖阳◎ 2022-09-01 09:15 298阅读 0赞

# 说明 #

Unity 版本 2018.4.0f1

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70][]

在UI设计的时候可能会遇到正射投影与透视投影组合的情况，这个时候就需要用到多个摄像机来实现。

**一般`3D`游戏项目，会创建至少两个摄像机，一个`3D`摄像机（使用透视视角）和一个`UI`摄像机（使用正交视角）**。

例如明日方舟的主界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1][]

右边这一块是可以根据手机的陀螺仪进行一定角度的3D转动的，而左上角的几个Button是固定的。

#    实例 #

使用unity自带的UI组件来完成一个简单的例子，不涉及C\#脚本。

##    层级结构 ##

如下  
 ![2021072717033965.png][]

## 先创建两个摄像头 ##

UI`Camera`以及3D`Camera`，这两个摄像头的配置如下，均使用正射投影：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3][]

*  注意他俩的`Depth`属性均为`-1`
 *  
 *  ## 两个相机下各自创建一个`Canvas` ##
 *  在UI`Camera`下创建一个`Canvas，`用于盛装固定的UI，就简单添加一个`Text`，这两者的配置如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4][]

然后在`3DCamera`下创建一个`Canvas`，用于盛装`3D UI`，添加一个`Scroll View`组件，这两者的配置如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5][]

注意这个`Canvas`的`Render Mode`使用`World Space`，`Event Camera`选择后面创建的透视投影摄像头，并且我们将这个`Canvas`旋转一定的角度，这样看起来就有3D效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6][]

*  可以在`Scroll View`组件中添加一些文字，便于测试。  
    ![在这里插入图片描述][20200522172215863.png]

##  ##

## 最后创建透视相机 ##

*  最后在3D`Camera`下再创建一个摄像头，这个摄像头使用透视投影，配置如下：  
     
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7][]
 *    
    注意这个摄像机的`Depth`为1，**表示这个摄像机捕捉到的东西将会在前面两个摄像机之后渲染**。

## 关于相机渲染Layer层级  ##

**UI摄像机和3D场景摄像机分别属于两个渲染层（Layer），所以它们之间的渲染互不干扰 , 将摄像机深度（depth）控制好 , 使得 UI摄像机高于场景摄像机 , UI永远位于场景上层 .**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11][]

最后显示的画面如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 12][]

# 结果 #

试着改变Sub Camera下的Camera的Rotation属性，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 13][]

可以轻松的看到效果（如下GIF）

![20200522173855303.gif_pic_center][]

##  ##

# 总结 #

至少两个摄像机

3D部分的Canvas的Render Mode使用World Space  
3D部分的Canvas的Event Camera选择3D部分的摄像机  
3D部分的摄像机Depth属性要高于其他正常UI摄像机（按需调整）,一般UI摄像机depth高于场景摄像机 , UI永远位于场景上层 .

**UI摄像机和3D场景摄像机分别属于设置为两个不同的渲染层（Layer），将摄像机深度（depth）控制好 , 使得渲染互不干扰 **

# 例二： #

一个多个摄像机看到的场景在同一个层显示，比如我们做一个类似反光镜的效果，当然反光镜可以直接用Shader来实现，但我就是了实现一个类比这样的一个效果，一个摄像机将看到的图像显示到一个Texture上，然后将Textrue赋予一个面板，然后另一个摄像机看到这个的这个面板放在UI层，然后最后将所有场景里面的物体都置于MainCamera的可见区域。

# 效果图： #

![Center][]

# 制作过程： #

1.创建四个Button,分别命名为设备1-4，这就形成了左边的四个按钮；

2.创建一个新的层，取名为UI层；

3.创建一个Texture

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 15][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 17][]

4、新建一个Camera取名 CameraTexture，并将Camera的Culling Mask的UI层取消，并且将它的TargetTexture设为刚刚新建的Texture，这样这个摄像机所看到的就呈现在这个texture上，比如随便在下面新建一个自旋转的Cube立方体；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 18][]

立方体上挂上这个自转脚本

public class CubeGoRotate : MonoBehaviour
    {
        void Update()
        {
            //自身旋转
            this.transform.Rotate(Vector3.up * (Time.deltaTime * 50));
            
        }
    }

5. 新建UI Camera，  这个Camera下新建一Panel或图片，然后将Texture拖放到Panel里，这样前面CameraTexture相机所看到的自转Cube就会显示（渲染）在这个Panel图片上。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 19][]

设置这个UI摄像机的Layer为UI，并且将CullingMask设置为UI；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 20][]

6.设置MainCamera的CullingMask属性去掉UI层，不然也能看到UI层，就会出现两个相机的两个UI层了；

**注意：区分 layer 和 sort order**

参考：[https://blog.csdn.net/qq\_42672770/article/details/119181828][https_blog.csdn.net_qq_42672770_article_details_119181828]

1，layer是对游戏中所有物体的分类别划分，如UIlayer, waterlayer, 3DModelLayer, smallAssetsLayer, effectLayer等。将不同类的物体划分到不同的层，便于相机拣选，在相机的cullmask中可以选择渲染哪些层，不选择的层则不会渲染。还可以用于射线检测对象的拣选，可以指定只对某些层的对象进行射线检测。

![c4b5c9a806cb387b84d1976401f5ae55.png][]

2，canvas默认是屏幕空间的2D对象，在屏幕空间时仅具有sort order属性，当把它设置为世界空间时，sort order属性消失了，变成另外两个属性: sorting layer, order in layer。

当把画布设置为worldspace后，画布及画布上的UI对象在世界空间默认也是靠Z值来决定渲染顺序的，离相机远的先渲染。当设置了sorting layer后，渲染的次序就由sorting layer来确定了

参考链接：https://blog.csdn.net/qq\_33446100/article/details/106286864

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70]: /images/20220829/1d617f64797244909496b714ece88fc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 1]: /images/20220829/d01ac1b9487e48d980bbb3d748551701.png
[2021072717033965.png]: /images/20220829/d1f85e09353a4f4ea8632a84b2249f50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 2]: /images/20220829/fe537999ed244d23aa49efe652281dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 3]: /images/20220829/5d0c49051c6f4dff9b3374fe56bb09c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 4]: /images/20220829/584481375b954e609dce2b61f0761370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 5]: /images/20220829/7549ab1ad6724c0787c81c02d93a0cfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 6]: /images/20220829/72c5ff6dd2794dc4858fe7579f3adcef.png
[20200522172215863.png]: /images/20220829/e86925a0261c4130955357e0870c00e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 7]: /images/20220829/cc224625544c49eb95bdbd9a21d6cfae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 8]: /images/20220829/ec3c46fdae114c51a5f7776de0846932.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 9]: /images/20220829/e8e31fc77499453591f9cf0874ad283b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 10]: /images/20220829/1fecf4b98943401c9a76243f5154bd3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 11]: /images/20220829/ceb6b597bf0f47cdb8c94a80b2da6cc7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 12]: /images/20220829/228e23c67c274191a569b3ac358fd112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 13]: /images/20220829/03bb8a0f943a4e1e8fc29ffd18820561.png
[20200522173855303.gif_pic_center]: /images/20220829/e3acd5032b404b189d41c21fef230e5e.png
[Center]: /images/20220829/562cdd0d9fa74cc49b74f9d7f95cb1b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 14]: /images/20220829/d37a0dccc1834adaaf106681eae16480.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 15]: /images/20220829/f724d352b02040c59ad518647d467889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 16]: /images/20220829/9961b11bec2a4ba3a36ca9a5472d5d55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 17]: /images/20220829/d85685aa0c5048c6a161f7e425152edd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 18]: /images/20220829/19473d1310a143c2b1d987e31a71cf14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 19]: /images/20220829/561bb778857b4787ba2db97c731d0472.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNjcyNzcw_size_16_color_FFFFFF_t_70 20]: /images/20220829/30525e01547e4c40afe2203bb9f970cd.png
[https_blog.csdn.net_qq_42672770_article_details_119181828]: https://blog.csdn.net/qq_42672770/article/details/119181828
[c4b5c9a806cb387b84d1976401f5ae55.png]: /images/20220829/50719ec7a39a445fb57cf63e6276d5ec.png