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

Background (canvas) color disappears when rendering multi-mesh object in WebGL

本文关键字：画布 背景 颜色 消失 WebGL 对象 网格      更新时间：2023-09-26

我目前正在学习WebGL，我尝试用两个独立的网格（一个立方体和一个金字塔）渲染一个对象。为了在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（）中指定的。有什么想法/建议如何解决这个问题吗？

有两种可能性：

  • 白色是画布的默认颜色，它仍然存在，因为webGL上下文没有正确初始化。检查控制台，如果init有一些错误，比您发现的问题要多，如果不是这样，那么这是第二个选项
  • 白色是在画布上绘制的，没有任何错误，如果着色器输出白色片段，并且放置了太大的对象，则可能会发生这种情况，因此您最终看到了棱锥体/立方体的一侧，而其他所有内容都因该一侧而被阻挡在视图之外

期待反馈。

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

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

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

相关文章：