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(5) negative(0) views1838 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • JavaScript语言多编程范式简介

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

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

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

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

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...