javascript - 多次调用 WebGL drawElements 会导致渲染不正确

Question

我的问题是:为什么相同的示例 WebGL 代码会在不同平台/浏览器上产生不同的输出？

在 Windows 上的 Firefox 30.0(以及最新的 32)中，但在 Mac 上则不然，在渲染点时进行多个 drawElements 调用会导致渲染不正确:

左上:Firefox(不正确)。 右上:Chrome(正确)。

我通过复制和调整示例代码重新创建了这个问题(第一次在我无法共享的软件项目中遇到):

https://developer.mozilla.org/samples/webgl/sample5/index.html

然后，我修改了示例代码以实现最大程度的简单性，删除了所有动画，并渲染三个点而不是立方体，并调用了三次drawElements，并为每个点更改了统一的颜色。

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
  setMatrixUniforms();
  gl.uniform4f(colorUniformLoc,1.0,0.0,0.0,1.0);
  /*****
  gl.drawElements(gl.POINTS, 36, gl.UNSIGNED_SHORT, 0); //commented out, from original example.
  *****/
  gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 0);
  gl.uniform4f(colorUniformLoc,1.0,1.0,0.0,1.0);
  gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 2);
  gl.uniform4f(colorUniformLoc,0.0,0.0,1.0,1.0);
  gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 4);

渲染的三个点应该在一条直线上:

var vertices = [
// Front face
-1.0, -1.0,  1.0,
-1.5, -1.0,  1.0,
-2.0, -1.0,  1.0, //more verts not shown...

我已通过公共(public) google-drive 文件夹向任何希望提供帮助的人分享了完整的源代码:

https://drive.google.com/folderview?id=0B5OXnggcG9_7VlZHY003UzFYNGc&usp=sharing

遗憾的是，Firefox 30 是我们客户使用的平台(不可协商)，因此无法通过更改浏览器轻松修复。

感谢您的阅读!

Answer 1

This seems to be a bug in firefox 。我猜想除了在使用 Firefox 时不在 gl.drawElements 中使用偏移量之外，没有简单的解决方法。 :( 问题可能仅出在 POINTS 上，因此您可以使用四边形绘制点作为另一种解决方案。