浅谈threejs透明遮挡以及渲染问题

1,432 阅读2分钟

用threejs避免不了处理渲染问题在threejs中object3d有renderorder属性后面我就叫做渲染顺序,material(材质)的两个属性 depthtest(深度测试),depthwrite(深度写入)。threejs是webgl比较流行的一个库。深度测试使用了深度缓冲区(depth buffer)和颜色缓冲区(color buffer),一个记录当前像素的深度,一个记录当前像素的深度,深度值距离相机越近会越小。 我介绍两种情况可以在官网编辑器实验,比如两个不透明物体,一前一后,正常情况下前面的物体会遮挡住后面的物体,因为深度测试和深度写入默认都会开着,记录每一个像素点的颜色以及深度,后面的物体进行渲染时会对比深度进行颜色更新,深度值小就更新。所以对于两个不透明物体来说,近的会遮挡远的。但是渲染顺序也会影响遮挡关系, 1.当前面的物体优先渲染后面的物体关掉深度测试前面的的物体不会遮挡后面,因为前面的物体优先渲染,后面物体渲染时不需要进行深度检测,视觉效果就是透过前面的物体可以看到后面的物体,即前面的物体不会遮挡后面的物体 2.当后面的物体优先渲染不论它是否开启了深度测试,前面的物体都会挡住它,因为他优先渲染,当前面物体渲染时,前面物体进行检测,深度小于后面物体,像素的色值替换 在实验中我发现了一个奇怪的现象,在官网的编辑器中我发现,先加入的mesh或者model会优先渲染。于是我在vscode里验证了下,发现reactfiber的three会优先渲染你列表最底下的元素,但是你可以通过renderorder进行强制修改渲染顺序,另外在threejs中不透明的物体是优先渲染的。 下面说透明物体的遮挡 透明物体的渲染和不透明物体的类似,同样是深度检测。在我们生活中看来透明物体应该会看到后面的物体,但是再threejs中渲染顺序决定了他们的遮挡关系,由远及近的渲染方式会实现我们日常生活中的效果,即透明玻璃的效果夹杂颜色混合,深度测试参考不透明物体。 建议深度测试还是看下opengl,深入了解。