【Unity/UI】 多个摄像机的组合使用
1.2个Camera的位置不要重合,在不同的地方。
2.第一个Camera的ClearFlags->选择SkyBox/Solid Color,Depth的值小于第二个Camera。
3.第二个Camera的ClearFlags->选择Depth Only,Depth的值大于第一个Camera。
4.为什么选择Depth Only:
depth only就是表示当一帧新画面显示时,它会根据摄像机的深度信息来显示新画面与旧画面。理解这句话,或许不太明确,比如说有两个摄像机,一个摄像机照着大海,一个摄像机照着美女,大海的摄像机的深度是-1, 美女的摄像机的深度是0,根据深度来显示,就是先显示-1的内容,再显示0的内容。这样无论-1里的内容怎么变化,都是当作一个背景,0摄像机就可以设置为深度更新,这样就可以把美女与大海融合。
unity场景中需要双相机,其中3D相机专摄场景物体3D显示,2D相机则专用于显示屏幕的UI元素。
3D设置:
2D设置:(别忘了给Canvas拖一下相机路径)
注意相机的Clipping Planes数值域,需要和Canvas设置里PlaneDistance这里的数值匹配,也就是Canvas设置的深度肯定需要处于UI相机可见深度域里面
Unity 版本 2018.4.0f1
在UI设计的时候可能会遇到正射投影与透视投影组合的情况,这个时候就需要用到多个摄像机来实现。
一般3D
游戏项目,会创建至少两个摄像机,一个3D
摄像机(使用透视视角)和一个UI
摄像机(使用正交视角)。
例如明日方舟的主界面
右边这一块是可以根据手机的陀螺仪进行一定角度的3D转动的,而左上角的几个Button是固定的。
实例
使用unity自带的UI组件来完成一个简单的例子,不涉及C#脚本。
层级结构
如下
先创建两个摄像头
UICamera
以及3DCamera
,这两个摄像头的配置如下,均使用正射投影:
- 注意他俩的
Depth
属性均为-1
两个相机下各自创建一个Canvas
- 在UI
Camera
下创建一个Canvas,
用于盛装固定的UI,就简单添加一个Text
,这两者的配置如下:
然后在3DCamera
下创建一个Canvas
,用于盛装3D UI
,添加一个Scroll View
组件,这两者的配置如下:
注意这个Canvas
的Render Mode
使用World Space
,Event Camera
选择后面创建的透视投影摄像头,并且我们将这个Canvas
旋转一定的角度,这样看起来就有3D效果。
- 可以在
Scroll View
组件中添加一些文字,便于测试。
最后创建透视相机
- 最后在3D
Camera
下再创建一个摄像头,这个摄像头使用透视投影,配置如下:
- 注意这个摄像机的
Depth
为1,表示这个摄像机捕捉到的东西将会在前面两个摄像机之后渲染。
关于相机渲染Layer层级
UI摄像机和3D场景摄像机分别属于两个渲染层(Layer),所以它们之间的渲染互不干扰 , 将摄像机深度(depth)控制好 , 使得 UI摄像机高于场景摄像机 , UI永远位于场景上层 .
最后显示的画面如下:
结果
试着改变Sub Camera下的Camera的Rotation属性,
可以轻松的看到效果(如下GIF)
总结
至少两个摄像机
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的可见区域。
效果图:
制作过程:
1.创建四个Button,分别命名为设备1-4,这就形成了左边的四个按钮;
2.创建一个新的层,取名为UI层;
3.创建一个Texture
4、新建一个Camera取名 CameraTexture,并将Camera的Culling Mask的UI层取消,并且将它的TargetTexture设为刚刚新建的Texture,这样这个摄像机所看到的就呈现在这个texture上,比如随便在下面新建一个自旋转的Cube立方体;
立方体上挂上这个自转脚本
public class CubeGoRotate : MonoBehaviour
{
void Update()
{
//自身旋转
this.transform.Rotate(Vector3.up * (Time.deltaTime * 50));
}
}
5. 新建UI Camera, 这个Camera下新建一Panel或图片,然后将Texture拖放到Panel里,这样前面CameraTexture相机所看到的自转Cube就会显示(渲染)在这个Panel图片上。
设置这个UI摄像机的Layer为UI,并且将CullingMask设置为UI;
6.设置MainCamera的CullingMask属性去掉UI层,不然也能看到UI层,就会出现两个相机的两个UI层了;
注意:区分layer 和 sort order