Wyciągi WebGL poza zasięgiem?

Question

jestem zabawy z WebGL starając się go uczyć, więc wziąłem trochę kodu z samouczka WebGL, i starał się dodać własne wiersze, ale kiedy go uruchomić, to daje mi ten błąd:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0 

Uwaga: atrybut 0 jest mój bufor wierzchołków

Mój kod inicjalizacji bufora (oczywiście zakładamy globalnych vars jeśli nie ma definicji)

cubeVertexPositionBuffer = gl.createBuffer(); // create a buffer 
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); 

//for laziness 
var _f=1.0/3.0; 

vertices = [ // this is code from the tutorial 
// Front face 
-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 
// Back face 
-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 
// Top face 
-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 
// Bottom face 
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 
// Right face 
1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 
// Left face 
-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, 

// this is my own code 
-1.0+ _f, -1.0, 1.0, -1.0+ _f, -1.0, -1.0, 
-1.0+2*_f, -1.0, 1.0, -1.0+2*_f, -1.0, -1.0, 
-1.0+3*_f, -1.0, 1.0, -1.0+3*_f, -1.0, -1.0, 
-1.0+4*_f, -1.0, 1.0, -1.0+4*_f, -1.0, -1.0, 
-1.0+5*_f, -1.0, 1.0, -1.0+5*_f, -1.0, -1.0 


]; 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), 
     gl.STATIC_DRAW); 
cubeVertexPositionBuffer.itemSize = 3; 
cubeVertexPositionBuffer.numItems = 34; 

    // color buffer code is irrelevant because my color buffer is attribute 1 not 0 
    // plus it's all copied from the tutorial 

    // index buffer 
    // note I changed some code so the cube drawn is wireframe instead of solid 
    // I tested that without extra vertex or index buffer data and it worked 
    cubeVertexIndexBuffer = gl.createBuffer(); // this modified a bit from the tutorial 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); 
cubeVertexIndices = 
    [ 0, 1, 2, 3, 0, // Front face 
     4, 5, 6, 7, 4, // Back face 
     8, 9, 10, 11, 8, // Top face 
     12, 13, 14, 15, 12, // Bottom face 
     16, 17, 18, 19, 16, // Right face 
     20, 21, 22, 23, 20, // Left face 

     // this is my code 
     24, 25, 26, 27, 28, 29, 30, 31, 32, 33 
    ]; 
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
     cubeVertexIndices), gl.STATIC_DRAW); 
cubeVertexIndexBuffer.itemSize = 1; 
cubeVertexIndexBuffer.numItems = 40; 

A oto mój kod rysunek

// set up perspective and stuff 
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); 
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
     cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer); 
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, 
     cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); 

gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); // perspective matrix 
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); // model view matrix 

gl.lineWidth(1.0); 
gl.drawElements(gl.LINES, cubeVertexIndexBuffer.numItems, 
     gl.UNSIGNED_SHORT, 0); 

Answer 1

Właściwie to rozgryzłem. Będąc moim nowym WebGLem, zdążyłem zapomnieć o dodaniu indeksów dla każdego wierzchołka w moim buforze kolorów. Po prostu nigdy nie przyszło mi do głowy, że moje shadery wymagają, aby każdy wierzchołek miał kolor. (Byłoby jednak miło, gdyby WebGL powiedział, że to błąd w atrybucie 1 (mój atrybut koloru), a nie atrybut 0 (mój atrybut pozycji werteksa).

Answer 2

Problem może również wystąpić, jeśli przydzielone przez ciebie dane bufora w:

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
    cubeVertexIndices), gl.STATIC_DRAW); 

jest zbyt krótki (zobacz drugi parametr)

to może się zdarzyć, jeśli powstanie wierzchołków zdarzyć programowo przynajmniej tak właśnie zdarzyło mi

...