Threejs 透明模型渲染嵌套以及深度测试解决共存问题
目录
透明模型渲染嵌套
透明模型渲染排序
renderOrder
现象
小球靠前
小球靠后
正常渲染方案
深度测试的一些应用场景
透明模型渲染嵌套
两个透明模型嵌套，里面的透明模型距离相机相对外面的模型更近，这种情况下，在透明模型从后往前渲染的过程中，里面的模型后渲染，经过深度测试，对应的片元像素会被舍弃，也就是说无法渲染出来。
如果想渲染出来里面的靠前的透明模型，可以禁用外面模型写入深度缓冲区，或者里面模型进制深度测试，效果是一样的，也可以通过 renderOrder 改变three.js透明模型默认的渲染顺序
透明模型渲染排序
所谓透明模型，就是材质设置 transparent = true 的模型，透明模型和不透明模型一样，渲染的时候就会根据距离相机来渲染，只不过排序方式是相反的，一组透明模型，组内渲染的顺序右后向前渲染，也就是距离相机远的先渲染，距离相机近的后渲染
renderOrder
three.js头明明模型和不透明模型分成两组渲染，在每一组内部，无论哪种模型，都可以通过 renderOrder 改变模型组内渲染顺序
- 不透明物体：距离相机近的先渲染
- 透明物体：距离相机远的先渲染
现象
小球靠前
如下图，mesh大球包裹在mesh2小球的外面，mesh2向z平移10，但热仍在大球内，此时小球就不会被看到
因为透明物体的渲染顺序是物体的世界坐标到相机距离的右远到近，远的大球被先渲染，近的小球后渲染，经过深度测试，其每个片元的z值都在大球内，则就不会被渲染
小球靠后
这种情况虽然小球能看到，但当旋转屏幕到后面就又看不到小球了，因为原本靠后的小球当场景旋转180度后，其相对相近的位置又是靠前的，那么就还不会被看到
效果
正常渲染方案
深度测试的一些应用场景
- 要让一个物体一直渲染在最前面：renderOrder设为最大值，关闭深度测试
- 三个面片共存在一个位置，要能看到每个面（每个面大小不一样）并且不能存在深度冲突：关闭三个面的深度测试，先渲染最大的面，再依次渲染小面
- 透明不透明物体共存：不透明模型先渲染，透明模型后渲染，意味着透明模型如果禁止深度测试，不透明后面的透明模型仍然可以被渲染出来
