[WebGL入门]十九,遮挡剔除和深度測试

简介:

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上[lufy:],另外。鄙人webgl研究还不够深入,一些专业词语,假设翻译有误。欢迎大家指正。



本次的demo的执行结果


多边形的外側,内側和遮挡剔除

上次介绍了索引缓存。以及使用IBO来画图,使用索引缓存能够循环利用反复的顶点,能够提高画图效率。这之后的文章,假设没有特殊的原因的话。基本上都会使用索引缓存,通过drawElements来画图。


这次来说一下遮挡剔除和深度測试,这是两个重要的概念。内容并非那么难。
首先来看遮挡剔除,假设看过之前的文章,应该知道[遮挡剔除]的概念,之前的文章(六。顶点和多边形)中有过说明。
简单的说,遮挡剔除就是以多边形内外側为基准,推断是否绘制这个多边形。

而多边形的内側和外側的推断方法。在之前的文章中已经具体说明了。为了加深印象,这里再说一遍。
WebGL中,默认规定遮挡剔除是无效的。不管以如何的顺序来定义顶点都会绘制所有的多边形。

可是,遮挡剔除有效的时候,仅仅有满足特定的条件的多边形才会进行绘制。看不见的部分是不会绘制的,这样就会减弱坐标计算等负担。

为了设置WebGL中的遮挡剔除为有效,须要像enable函数中传入适当的參数,这个enable函数不光是用来控制遮挡剔除的,还有其它非常多各种各样的參数,依据指定的參数不同会把对应的功能设置为有效。

将遮挡剔除设置为有效的话,须要传入内置常量gl.CULL_FACE ,以下是代码举例。

>将遮挡剔除设置为有效的代码演示样例

gl.enable(gl.CULL_FACE);

相反的,将对应的功能设置为无效的话,使用disable函数,传入的參数和enable函数相同。

>>遮挡剔除的内側和外側切换的方法

多边形的内側和外側是依据顶点的连接顺序来推断的,而这个推断基准反过来的情况也是有的,形成多边形的顶点的连接顺序是顺时针的时候是外側。逆时针的时候为内側。想要反过来推断的话。顺时针就变成了内側。

顺时针统称为CW。由于[顺时针]的英语是ClockWise。CW就是它的头文字。

而逆时针统称为CCW,由于[逆时针]的英语为CounterClockWise。改变WebGL中遮挡剔除的内側和外側的推断标准的函数是frontFace,參数就是刚才提到的CW和CCW。

将顺时针设置为[外側]的代码:gl.frontFace(gl.CW);

将顺时针设置为[内側]的代码:gl.frontFace(gl.CCW);


深度測试

接着来说深度測试。

刚才提到的设置遮挡剔除的函数enable,也能够用来设置深度有效。将常量gl.DEPTH_TEST作为參数传给enable函数的话,就能够将深度測试设置为有效。相同的。使用disable函数能够将其设置为无效。

深度測试的默认值是无效的。那将深度測试设置为有效有什么用处呢,为什么要设置深度有效呢?

深度測试能够联想到[深度]这个词。三维空间中表示向里的方向时是不可缺少的一个元素。DirectX中叫做Z測试。要表示一个物体在你面前呢,还是向里一段距离呢,所以深度測试就是必须的了。

WebGL中发出画图命令的时候。是在一个模拟的三维空间中绘制模型的,这时候依据绘制的先后顺序,先绘制的东西会被后绘制的东西覆盖掉,这跟物体是在当前还是在里面是没关系的。

而实际上,在远处的物体应该被在近处的物体所覆盖。

将深度測试设置为有效的话。就是对模型的深度进行评价。评价合格的东西会绘制到画面上。不合格的东西就不会进行绘制了。

和刚才的遮挡剔除一样,将深度測试设置为有效或无效使用的是enable函数和disable函数。

>将深度測试设置为有效的代码演示样例

gl.enable(gl.DEPTH_TEST);

深度測试的评价函数为depthFunc,这个函数须要指定參数,通常是使用以下的常量作为參数。

>指定一般深度測试的评价方法

gl.depthFunc(gl.LEQUAL);

这里指定了内置常量gl.LEQUAL的话。就会把里側的东西隐藏。反过来想一下,基本上不会指定成其它情况了吧。


总结

这次。介绍了遮挡剔除和深度測试。不管那一个都是使用enable函数来设置有效,使用disable函数来设置无效。enable和disable这两个函数的參数是一致的,依据传入的參数不同,能够设定各种属性设置为有效或者无效。

遮挡剔除设置为有效的话,内側的多边形就不会描画了,这样就减轻了画图的负担。深度測试在模拟有深度概念的三维空间时有着非常关键的数据。指定为正确的评价方法的话,就能像现实世界一样。近处的物体会将远处的物体遮挡住。

这次做的demo,能够自由切换遮挡剔除的有效和无效,并且能够自由指定多边形的内測和外側,demo页面的单选框选中或者不选。能够切换对应的状态,而深度測试也时能够自由切换有效或是无效的,能够通过实际操作来观察一下,深入理解一下遮挡剔除和深度測试。


demo的内容补充

demo中绘制了四个角的多边形,一共绘制了两个四边形。一个是沿着X轴旋转,还有一个是沿着Y轴旋转。并且这两个四边形都绕着原点进行着旋转移动,将深度測试设置为有效的话,里面的四边形就会被外面的四边形遮住了。

细致看demo的代码的话,就应该能知道,这两个四边形都各自是一个面向里側。一个面向外側的三角形组成的。这种话。将遮挡剔除设置为有效的话,多边形的上下部分就仅仅能绘制一个了。


顶点的连接顺序,看一下定义的索引缓存的数组的话。就明确了,以下是代码。

>定义索引的数组的代码

// 保存顶点属性的数组
var position = [
     0.0,  1.0,  0.0,
     1.0,  0.0,  0.0,
    -1.0,  0.0,  0.0,
     0.0, -1.0,  0.0
];

// 保存顶点的索引的数组
var index = [
    0, 1, 2,
    1, 2, 3
];

看一下上面的图和代码。然后比較一下。就明确是定义了面向内側和外側两个三角形来生成四边形了。这是为了測试遮挡剔除而专门这么定义的。正常来说。制作3D模型的时候。是不会像这样将里側和外側混在一起定义的,否则用遮挡剔除的话。模型就会出现穿孔了。

这次的demo能够通过以下的链接来測试。

遮挡剔除和深度測试的demo

http://wgld.org/s/sample_007/



转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5244094.html,如需转载请自行联系原作者

相关文章
|
6天前
|
数据可视化 测试技术 持续交付
自动化测试神器:Python之Pytest库入门使用
自动化测试神器:Python之Pytest库入门使用
106 4
|
7月前
|
安全 测试技术 网络安全
软件测试|测试平台开发-Flask 入门:URL组成部分详解
软件测试|测试平台开发-Flask 入门:URL组成部分详解
34 0
|
7月前
|
安全 网络协议 Shell
渗透测试工具用法技巧入门到进阶
零基础网盘 百度网盘-19****394的分享 新手入门过程 看完 后面有进阶过程 简单工具
177 0
|
8月前
|
消息中间件 Java 测试技术
深聊性能测试,从入门到放弃之:Locust性能自动化(一)初识Locust
深聊性能测试,从入门到放弃之:Locust性能自动化(一)初识Locust
183 1
|
5月前
|
JSON 测试技术 API
『Postman入门万字长文』| 从工具简介、环境部署、脚本应用、Collections使用到接口自动化测试详细过程
『Postman入门万字长文』| 从工具简介、环境部署、脚本应用、Collections使用到接口自动化测试详细过程
83 3
|
6天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
14 0
|
6天前
|
测试技术 数据库 开发者
Django自动化测试入门:单元测试与集成测试
【4月更文挑战第15天】本文介绍了Django的自动化测试,包括单元测试和集成测试。单元测试专注于单个视图、模型等组件的正确性,而集成测试则测试组件间的交互。Django测试框架提供`TestCase`和`Client`进行单元和集成测试。通过编写测试,开发者能确保代码质量、稳定性和应用的正确协同工作。运行测试使用`python manage.py test`命令,建议将其纳入日常开发流程。
|
6天前
|
存储 Android开发 C++
【Android 从入门到出门】第五章:使用DataStore存储数据和测试
【Android 从入门到出门】第五章:使用DataStore存储数据和测试
53 3
|
6天前
|
存储 SQL 数据库
【Android 从入门到出门】第六章:使用Room数据库并测试
【Android 从入门到出门】第六章:使用Room数据库并测试
39 4
|
8月前
|
存储 关系型数据库 MySQL
深聊性能测试,从入门到放弃之:性能测试技术栈,看完这篇,保证刷新你对性能测试的认知~~
深聊性能测试,从入门到放弃之:性能测试技术栈,看完这篇,保证刷新你对性能测试的认知~~
160 1

热门文章

最新文章