WebGL场景中多相机拍摄的原理和意义

一般而言，3D场景的渲染只需要一个相机，不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。

3D相机渲染的基本原理是依靠颜色缓存和深度缓存区，颜色缓存用来成像，深度缓存用来剔除不可见对象。相机每一帧渲染时，一般都会清除这两个缓冲区，否则就会出现重影现象。

多个相机渲染时，有先后次序，这个次序叫相机深度，类似于网页编程CSS样式中的z-index，值越大渲染次序越靠后（也就是缓冲区的写入顺序）。我们可以通过有意的操控是否清除某相机特定缓存来叠加或影响渲染数据。

比如对于游戏场景中出现的UI层，通常比较好的做法是，是把用户界面放到不同的层，然后用一个独立相机单独渲染UI层。为了使UI显示在其他相机视角的顶部，你还需要设置清除标记为“只清除深度缓冲区“，并确保UI相机的深度比其他相机高。

现在让我们通过一个有两个摄像机的小例子来说明这个问题。

　　· 蓝色摄像机

　　清除标记: ” 迁移到天空盒缓冲区并清除“

　　剔除遮罩: 默认层, 蓝色层

　　深度: 0

　　上面的截图是蓝色摄像机会看到的内容。

　　· 红色摄像机

　　清除标记: ”不清除“

　　剔除遮罩：红色层

　　深度: 1

　　上面的截图是红色摄像机会看到的内容。

　　这里面还有一个新的参数：深度。深度限定了摄像机渲染的顺序。深度数值较小的摄像机将会比深度数值较大的摄像机先进行渲染。

1. 对于蓝色相机：

颜色缓冲区的内容被清理到天空盒里面并清空颜色缓冲区

深度缓冲区被清空

平面（属于默认层的物体）和蓝色的球体（属于蓝色层的物体）都将被渲染出来

2. 对于红色相机：

没有缓冲区被清空，也就是颜色缓冲区和深度缓冲区的内容都保持不变

红色的球体（属于红色层的物体）将被渲染出来

　　所得到的结果就是你会得到一个场景。就像是只用一台单独的摄像机进行渲染的一样：

　　现在开始，我们做一些改变，让我们把红色摄像机的清除标记从“不清除”切换成“只清除深度缓冲区”：

        由于深度缓冲区已经被清除，红色的球不知道它在屏幕上渲染的像素会被其他像素遮挡，所以它就像没有被遮挡一样渲染出来了。这意味着清除深度缓冲区会将待渲染的物体渲染在前面。如前所述，当我们想渲染三维的用户交互元素（3D UI）的时候，这个功能是很有用的。

        相机分离还有一个好处是我们可以对特定层施加特定效果。比如让我们尝试对蓝色摄像机使用模糊效果，就像下面的截图所示的这样：