在WebGL中渲染多网格对象时，背景（画布）颜色消失

Question

我目前正在学习WebGL，我尝试使用2个单独的网格物体（一个立方体和一个金字塔）渲染一个对象。 为了表示WebGL中的对象，我使用了这样的多维数组：

var V = [[-1, -1, -1,          // Vertices
           1, -1,  1,
           ...],               // Cube
         [-1, -1,  1,
           1, -1,  1,
           ...]                // Pyramid
        ];
var VBuffer = new Array();     // Vertex buffer for createBuffer()

var F = [[1, 5, 6,  1, 6, 2,   // Triangle facets
          2, 6, 7,  2, 7, 3,
          ...],                // Cube
         [0, 1, 4,  1, 2, 4,
          ...]                 // Pyramid
        ];

var NVF = [18, 12];            // Total no. of vertices in F

然后，为了在WebGL中初始化缓冲区，我有：

function initBuffers(idx) {
  VBuffer[idx] = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer[idx]);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(V[idx]), gl.STATIC_DRAW);
  ...
}

三角形的面以相同的方式初始化。 渲染对象：

function drawScene(idx) {
  ...
  gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer[idx]);
  gl.vertexAttribPointer(vertexPositionAttribute[idx], 3, gl.FLOAT, false, 0, 0);
  ...
  gl.drawElements(gl.TRIANGLES, NVF[idx], gl.UNSIGNED_SHORT, 0);

  ...
}

这些例程在HTML页面中的调用如下：

function setInt(f, i, interval) {                    // To animate the object
  setInterval(function() { f(i); }, interval);
}

function start() {
  ...
  if (gl) {
    gl.clearColor(0.2, 0.6, 0.8, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    for (i=0; i<2; i++) {
      initShaders(i);
      initBuffers(i);
    }

    orthoMatrix = makeOrtho(-4, 4, -3, 3, 0.1, 100.0);
    mvMatrix = Matrix.I(4);
    mvTranslate([0.0, 0.0, -7.0]);

    for (i=0; i<2; i++) {
      setInt(drawScene, i, 15);
    }
  }
}

渲染和动画有效，但是背景（画布）颜色为白色，而不是gl.clearColor（）中指定的颜色。 任何想法/建议如何解决此问题？

Answer 1

有两种可能性：

• 白色是画布的默认颜色，因为webGL上下文未正确初始化，所以它仍然存在。 检查控制台，如果init有一些错误，那么您会发现问题，如果不是这样，那么这是第二个选择
• 白色是在画布上绘制的，没有任何错误，如果着色器输出白色碎片并且放置了太大的对象，则可能会发生这种情况，因此您最终只能看到金字塔/立方体的一侧，而其他所有物体都将被遮挡，因为一侧。

期待反馈。

Answer 2

已经找到解决方案：gl.clearColor（）必须放在drawScene（）内，以便在setInt（drawScene，i，15）刷新drawScene（）时始终调用它。 还有一个建议使用requestAnimFrame（）而不是setInterval（），但是我没有尝试过。

Answer 3

我今天遇到了同样的问题。 我的解决方案是在调用gl.drawElements之前放置gl.clearColor和gl.clear。

在我的代码中，在图像onload事件中调用gl.drawElements，因此我需要这样做以保持画布背景颜色正确。