WebGL drawElements aralık dışında mı?

Question

Ben WebGL bunu öğrenmeye çalışıyorum etrafında oynuyorum, bu yüzden bir webgl eğitimde bazı kod aldı ve kendi satırları ekleyin çalıştı, ama bunu her çalıştırdığınızda, bana bu hata veriyor:

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

Not: öznitelik 0 benim köşe tampon

benim tampon başlatma kodu (hiçbir tanım varsa tabii ki küresel değişkenler varsayalım)

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; 

Ve işte benim çizim kodu edilir

Answer 1

Aslında bunu çözdüm. WebGL newb olduğum için, renk arabamda her köşe için dizinleri eklemeyi unutmayı başardım. Gölgelerimin her köşede bir renk olmasını gerektirdiğini hiç düşünmedim. (WebGL, öznitelikte 1 (renk özniteliğimde) bir hata olduğunu ve 0 (benim vertex position özniteliğimde) öznitelik olmadığını söylemiş olsaydı, güzel olurdu.

Answer 2

Sorun, ayrıca, ayırdığınız bufferData da oluşabilir. içinde:

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

çok kısa (ikinci parametre bakınız) köşeler oluşturulması programlı gerçekleşmesi halinde

gerçekleşebilir en azından, bu kadar başıma yolu

...