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

【问题标题】：Background (canvas) color disappears when rendering multi-mesh object in WebGL在 WebGL 中渲染多网格对象时背景（画布）颜色消失
【发布时间】：2013-08-31 07:45:49
【问题描述】：

我目前正在学习 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() 中指定的。任何想法/建议如何解决这个问题？

【问题讨论】：

标签： javascript webgl

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

已经找到解决方案：gl.clearColor() 必须放在 drawScene() 中，这样当 setInt(drawScene, i, 15) 刷新 drawScene() 时总是会调用它。还有另一个建议是使用 requestAnimFrame() 而不是 setInterval()，但我没有尝试过。

【讨论】：

【解决方案3】：

有两种可能：

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

期待反馈。

【讨论】：