javascript - WebGL 错误 - 错误 : WebGL: bindBuffer: buffer already contains element data

Question

我正在尝试使用 WebGL 绘制一个简单的圆圈，但遇到一些错误。我对编写 WebGL 代码非常陌生，如果有人能向我解释这一点以及问题所在，我会很高兴。

我可以使用相同的代码创建一个简单的正方形，但有 5 个顶点，效果非常好。但是当我尝试使用这种方法创建数组时，它似乎不喜欢它。如果这是一个微不足道的错误，我很抱歉，但解释会非常有帮助。

提前谢谢您。

Error: WebGL: bindBuffer: buffer already contains element data. webgl-debug.js:232:20 Error: WebGL: vertexAttribPointer: invalid element size webgl-debug.js:232:20 TypeError: value is undefined

这些显示在控制台中。这是我正在使用的代码。

function setupBuffers() {
  //Setup the circle vertices
  circleVertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer);
  var r = 0.2;
  var centre = 0;
  var circleVertices = [];
  var z = 0;
  theta = 178;
  circleVertices.push(centre);
  circleVertices.push(r);
  circleVertices.push(z);
  for(var i = 0; i<theta; i++){
    var rads2deg = i * (Math.PI/180);
    var x = r * Math.cos(rads2deg);
    var y = r * Math.sin(rads2deg);

    circleVertices.push(x);
    circleVertices.push(y);
    circleVertices.push(z);
  }
  circleVertices.push(centre);
  circleVertices.push(r);
  circleVertices.push(z);
  console.log(circleVertices);

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(circleVertices), gl.STATIC_DRAW);
  circleVertices.itemSize = 3;
  circleVertices.numberOfItems = circleVertices.length/circleVertices.itemSize;
}

function draw() {
  //set up a viewport that is the same as the canvas using function viewport  (int x, int y, sizei w, sizei h) where x and y give the x and y window coordinates of the viewports width and height.
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

  //fill the canvas with solid colour. Default is black. If other color is desiarible using function gl.clearColor (r,g,b,a)
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer);
  gl.vertexAttrib4f(shaderProgram.vertexColorAttribute, 1.0, 1.0, 1.0, 1.0);
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, circleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.drawArrays(gl.LINE_STRIP, 0, circleVertexBuffer.numberOfItems);
}

Answer 1

问题出在这一行

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer);

WebGL 中有两种类型的缓冲区。

• ELEMENT_ARRAY_BUFFER 缓冲区

  这些缓冲区保存 gl.drawElements

的索引

• ARRAY_BUFFER 缓冲区。

  这些缓冲区保存属性数据(位置、法线、纹理坐标等)

当您使用 gl.createBuffer 创建缓冲区时，它还没有缓冲区类型。第一次使用 gl.bindBuffer 绑定(bind)该缓冲区时，它会变成您绑定(bind)到的任何类型的缓冲区。如果将其绑定(bind)到 ARRAY_BUFFER，它现在是一个 ARRAY_BUFFER 缓冲区。如果将其绑定(bind)到 ELEMENT_ARRAY_BUFFER，它现在是一个 ELEMENT_ARRAY_BUFFER 缓冲区。一旦出现其中一种类型，您不能更改其类型或将其用于其他类型。

所以，在你的代码中你这样做

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer);

这使得circleVertexBuffer成为ELEMENT_ARRAY_BUFFER类型的缓冲区。但是在draw中你有这个

gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer);

缓冲区不能同时是这两种类型。将 setupBuffers 中的第一个更改为

gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer);

您可能会发现这个答案有帮助 https://stackoverflow.com/a/27164577/128511