threejs 物体根据相机位置显示_threejs中深度与透明

在 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 的处