0

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

4

3 回答 3

0

有两种可能：

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

期待反馈。

于 2013-08-28T10:53:36.033 回答
0

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

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

于 2013-12-18T08:08:11.020 回答
0

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

于 2013-08-29T01:42:21.643 回答