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

iefreer 发表于 2018-08-13 13:35:58

标签: webgl, camera

- +

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

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

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


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


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


  · 蓝色摄像机


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


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


  深度: 0


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


  · 红色摄像机


  清除标记: ”不清除“


  剔除遮罩:红色层


  深度: 1


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


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


1. 对于蓝色相机:


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


深度缓冲区被清空


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


2. 对于红色相机:


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


红色的球体(属于红色层的物体)将被渲染出来


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

image.png


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

image.png


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

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

image.png

possitive(4) negative(0) views1104 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • CentOS6 Apache2.2用域名配置多虚拟机

    在CentOS下使用域名配置多虚拟机的步骤如下:
    1. 使用

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • JavaScript语言多编程范式简介

    和C++等语言类似,JS支持多范式(paradigms)编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式:命令式、面向对象和函数式。命令式(Imperative JavaScript)命令式就是简单的从上而下完成任务,流水账过程式编码风格:function

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 更多...