WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色缓存和深度缓存区,颜色缓存用来成像,深度缓存用来剔除不可见对象。相机每一帧渲染时,一般都会清除这两个缓冲区,否则就会出现重影现象。
多个相机渲染时,有先后次序,这个次序叫相机深度,类似于网页编程CSS样式中的z-index,值越大渲染次序越靠后(也就是缓冲区的写入顺序)。我们可以通过有意的操控是否清除某相机特定缓存来叠加或影响渲染数据。
比如对于游戏场景中出现的UI层,通常比较好的做法是,是把用户界面放到不同的层,然后用一个独立相机单独渲染UI层。为了使UI显示在其他相机视角的顶部,你还需要设置清除标记为“只清除深度缓冲区“,并确保UI相机的深度比其他相机高。
现在让我们通过一个有两个摄像机的小例子来说明这个问题。
· 蓝色摄像机
清除标记: ” 迁移到天空盒缓冲区并清除“
剔除遮罩: 默认层, 蓝色层
深度: 0
上面的截图是蓝色摄像机会看到的内容。
· 红色摄像机
清除标记: ”不清除“
剔除遮罩:红色层
深度: 1
上面的截图是红色摄像机会看到的内容。
这里面还有一个新的参数:深度。深度限定了摄像机渲染的顺序。深度数值较小的摄像机将会比深度数值较大的摄像机先进行渲染。
1. 对于蓝色相机:
颜色缓冲区的内容被清理到天空盒里面并清空颜色缓冲区
深度缓冲区被清空
平面(属于默认层的物体)和蓝色的球体(属于蓝色层的物体)都将被渲染出来
2. 对于红色相机:
没有缓冲区被清空,也就是颜色缓冲区和深度缓冲区的内容都保持不变
红色的球体(属于红色层的物体)将被渲染出来
所得到的结果就是你会得到一个场景。就像是只用一台单独的摄像机进行渲染的一样:
现在开始,我们做一些改变,让我们把红色摄像机的清除标记从“不清除”切换成“只清除深度缓冲区”:
由于深度缓冲区已经被清除,红色的球不知道它在屏幕上渲染的像素会被其他像素遮挡,所以它就像没有被遮挡一样渲染出来了。这意味着清除深度缓冲区会将待渲染的物体渲染在前面。如前所述,当我们想渲染三维的用户交互元素(3D UI)的时候,这个功能是很有用的。
相机分离还有一个好处是我们可以对特定层施加特定效果。比如让我们尝试对蓝色摄像机使用模糊效果,就像下面的截图所示的这样:
最新评论
- 相关文章
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
常见面试题JavaScript闭包(ES5语法)
JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存...
WebVR简介和常用资源链接
什么是WebVR这是一个实验性的JavaScript API,提供了在用户网页浏览器中访问虚拟现实设备的统一接口。当前主流VR设备如Oculus Rift DK2、谷歌的CardBoard、三星...
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
如何使用WebGL实现空气高温热变形动画特效
我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
更多...