在 threejs 的日常开发中,我们经常会遇到关于深度、透明一些渲染问题。这里我们就来简单的做下讲解,希望能帮助大家绕开一些常见的坑。
深度
我们来了解下 webgl 中的深度到底是怎么回事儿,首先 webgl 中,深度会存储在 depth buffer 中,它和普通的颜色缓冲一样,只是存储的是深度值而已。深度值的精度一般有16位、24位和32位float,比较常用的深度精度为24位。
深度测试
片元在绘制过程中,会将像素的深度值与当前深度缓冲区中的值进行比较,如果大于等于深度缓冲区中值,则丢弃这部分;否则利用这个像素对应的深度值和颜色值,分别更新深度缓冲区和颜色缓冲区。这一过程称之为深度测试(Depth Testing)
early-Z
现在大部分的GPU都支持一项称为early depth testing(early-z)的特性,early depth testing允许在片元着色器执行之前进行深度测试,这样就可以避免那些根本看不到的片元进行片元着色,这样可以提高程序性能。但是,一旦使用了early depth testing,就不能再在片元着色器中写深度值。
除了深度测试,逐片元的测试在gl中还有一系列的测试,具体可以看下面这张图的描述
深度非线性
在 webgl 中,经过顶点着色器 mvp 矩阵变换过后,顶点变换到了裁剪空间,裁剪空间再经过归一化处理之后,把所有的点都处理到了 NDC(Normalized Device Coordinates) Space,最终传入片元着色器进行逐片元处理。注意这里裁剪空间到 ndc 的处