THREE.js 关于Material基类下的depthTest 和 depthWrite的理解

depWrite 深度写入

https://threejs.org/docs/?q=GridHelper#Material.depthWrite 官方文档是这样解释的(机翻):

.depthWrite : boolean
  渲染此材质是否会对 深度缓冲产生任何影响。
  绘制 2D 叠加层时，禁用深度写入功能可以方便地将多个对象分层放置，而不会产生 z-index 伪影。
  默认值为true。

深度缓冲(Depth Buffer) 是什么?

1. 和屏幕分辨率一样大的二维数组 屏幕: 1920 * 1080 深度缓冲: 1920 * 1080 每个像素一个 depth值
2. depth值代表什么? 表示这个屏幕像素位置中, 已经画过的内容中, 离摄像机最近的是谁

---

换成人话来说: depthBuffer就是 像素点渲染内容的备忘录, 记录的是渲染内容距离摄像机有多远 如果将值指定为false 那么在渲染物体像素的时候, 则不会将这个距离, 记录到备忘录中

depthTest 深度测试

https://threejs.org/docs/?q=GridHelper#Material.depthTest 官方文档是这样解释的:

.depthTest : boolean
  是否在渲染此材质时启用深度测试。如果禁用深度测试，深度写入功能也会被隐式禁用。
  默认值为true。

上面我们说过了, 在渲染物体像素的时候, 默认会将物体像素距离摄像的位置记录到备忘录(depth Buffer)中 而depthTest 的作用, 就是决定渲染物体像素的时候, 要不要去depth buffer中判断远近

举例说明:

1. 当前场景中已经有物体A, 记录了物体像素的depth为0.6, 即距离相机有0.6的距离
2. 现在要画物体B, 物体B的形状与物体A完全相同, 只是画的位置, 要比物体更靠后, 他的depth 是0.8
3. 那么在物体B 去Depth Buffer中比对的时候, 会发现当前位置已经被物体A占了 并且物体A距离摄像机更近 这个物体B就不画了, 这就是视觉上的遮盖的效果

上面的举例只是帮助理解, 实际记录会将顶点拆分成一个个像素片元

3D 顶点
 → 投影到屏幕
 → 拆成一堆像素片元（fragment）
 → 对每一个片元做深度测试

深度缓冲里存的是:

"屏幕 (x, y) 这个像素，现在最前面是谁"

因为并不是将Mesh作为一个整体存的, 所以会出现这种现象:

• 同一个物体:
  • 一部分挡住别人
  • 一部分被别人挡住
• 两个物体互相"咬"在一起 这都是 片元级比较 的结果