WebGL Error - Fehler: WebGL: bindBuffer: Puffer enthält bereits Elementdaten

Question

Ich versuche, einen einfachen Kreis mit WebGL zu zeichnen, bekomme aber ein paar Fehler. Ich bin sehr neu beim Schreiben von WebGL-Code und würde mich freuen, wenn mir das jemand erklären könnte und was das Problem ist.

Ich kann ein einfaches Quadrat mit dem gleichen Code aber mit 5 Vertices erstellen und das funktioniert perfekt. Aber wenn ich versuche, ein Array mit dieser Methode zu erstellen, scheint es nicht zu mögen. Es tut mir leid, wenn es ein trivialer Fehler ist, aber eine Erklärung wäre sehr hilfreich.

Vielen Dank im Voraus.

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

Diese werden in der Konsole angezeigt. Hier ist der Code, den ich verwende.

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

Das Problem ist, diese Linie

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer); 

Es gibt 2 Arten von Puffern in WebGL.

• ELEMENT_ARRAY_BUFFER Puffer

  Diese Puffer halten Indizes für gl.drawElements

• ARRAY_BUFFER Puffer.

  Diese Puffer halten Attributdaten (Positionen, Normalen, texcoords, etc)

Wenn Sie einen Puffer mit gl.createBuffer schaffen es kein Puffer noch nicht haben geben. Das erste Mal, wenn Sie diesen Puffer mit gl.bindBuffer binden, wird es zu dem Typ von Puffer, an den Sie ihn gebunden haben. Wenn Sie es an ARRAY_BUFFER binden, ist es jetzt ein ARRAY_BUFFER Puffer. Wenn Sie es an ELEMENT_ARRAY_BUFFER binden, ist es jetzt ein ELEMENT_ARRAY_BUFFER Puffer. Sobald es einen dieser Typen gibt, können Sie nicht ändern, es ist Typ oder verwenden Sie es für den anderen Typ.

in Ihrem Code Also, Sie tun dies

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleVertexBuffer); 

Welche circleVertexBuffer einen ELEMENT_ARRAY_BUFFER Puffer macht. Aber dann in draw Sie haben diesen

gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); 

Der Puffer nicht beiden Typen sein kann. Ändern Sie die erste in setupBuffers zu

gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); 

Vielleicht finden Sie diese Antwort hilfreich https://stackoverflow.com/a/27164577/128511