我正在尝试使用WebGL绘制一个简单的圆圈,但遇到一些错误。我对编写WebGL代码非常陌生,如果有人可以向我解释一下这是什么问题,我会很乐意。
我可以使用相同的代码创建一个简单的正方形,但是有5个顶点,所以效果很好。但是,当我尝试使用此方法创建数组时,它似乎并不喜欢它。很抱歉,如果这是一个小错误,但作出解释将非常有帮助。
先感谢您。
错误:WebGL:bindBuffer:缓冲区已包含元素数据。
webgl-debug.js:232:20错误:WebGL:vertexAttribPointer:无效
元素大小webgl-debug.js:232:20 TypeError:值未定义
这些显示在控制台中。这是我正在使用的代码。
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);
}
最佳答案
问题是这条线
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer);
WebGL中有两种类型的缓冲区。
ELEMENT_ARRAY_BUFFER
缓冲区这些缓冲区保存
gl.drawElements
的索引ARRAY_BUFFER
缓冲区。这些缓冲区保存属性数据(位置,法线,texcoords等)
使用
gl.createBuffer
创建缓冲区时,它还没有缓冲区类型。第一次使用gl.bindBuffer
绑定该缓冲区时,它将变为绑定到该缓冲区的任何类型。如果将其绑定到ARRAY_BUFFER
,则它现在是ARRAY_BUFFER
缓冲区。如果将其绑定到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