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。

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

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

3 个答案: