webgl 奇怪的渲染工件

webgl strange rendering artifacts

更新: 我已经在网上发布了代码来演示这个问题: http://cutama.github.io/

要查看问题,请将鼠标放在红色矩形上,然后使用鼠标滚轮进行放大和缩小。过一会儿你会看到三角形在闪烁,然后用鼠标左键旋转。

控件:

鼠标左键单击&拖动:环绕,鼠标中键单击&拖动:平移,鼠标滚动:缩放

更新结束

我遇到了一个奇怪的 webgl 渲染问题。每当我四处移动相机时,一些三角形似乎随机丢失。见下图。 我一直在四处寻找,但找不到原因。知道是什么原因造成的吗?

这是几何体的正常渲染:

缺少三角形:

另一个缺失的三角形:

使用 webgl 检查器进行了一些调试。

GL 跟踪:

点击丢失的像素显示它正在深度剔除,但它前面没有任何东西...那么为什么它被剔除?

与正常未剔除像素的比较:

缓冲区内的顶点数据。三角形非常小。这是导致问题的原因吗?

我不知道是什么导致了这个错误。但是,我会列出您可能需要考虑的事项。

  • 检查您是否指定了正确的 PrimitiveTopology(在许多情况下应该是 gl.TRIANGLES)

  • 检查您渲染的是 gl.DrawElements 还是 gl.DrawArrays。 如果你正在使用索引缓冲区,你应该使用 gl.DrawElements

  • 检查您使用的剔除配置是否正确。

  • 检查你是否使用了正确的深度比较功能。(如果你没有使用深度测试,你不需要关心这个)

发现问题是由模型中不正确的三角形索引引起的。仍然不确定为什么会导致闪烁。