webgl 奇怪的渲染伪影

Question

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

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

控件：

鼠标左键拖动：环绕，鼠标中键拖动：平移，鼠标滚动：缩放

结束更新

我遇到了一个奇怪的 webgl 渲染问题。每当我移动相机时，一些三角形似乎随机丢失。请参阅下面的图片。 我一直在挖掘，但找不到原因。有什么想法可能导致这种情况吗？

这是几何体的正常渲染：

缺少三角形：

另一个缺失的三角形：

用 webgl 检查器做了一些调试。

总帐跟踪：

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

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

缓冲区内的顶点数据。三角形非常小。这是造成问题的原因吗？

Answer 1

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

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

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

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

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

Answer 2

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