WebGL drawElementsが範囲外ですか？

Question

私は、私はWebGLのチュートリアルからいくつかのコードを取って、自分の行を追加しようとしましたが、私はそれを実行するたびに、それは私にこのエラーを与え、それを学ぼうとWebGLので遊んでいます：

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

注意：属性0は

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; 

（何の定義が存在しない場合、明らかにグローバルVARSを想定して）私のバッファの初期化コード

私の頂点バッファされており、ここで私の描画コードは

01です

// 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

実際に私はそれを理解しました。私が気付いたWebGL newbであるので、カラーバッファ内の各頂点のインデックスを追加することを忘れてしまいました。私のシェイダーは各頂点に色を付ける必要があったということは決してありませんでした。 （WebGLが属性1（私の色属性）のエラーであり、属性0（私の頂点位置属性）ではないとWebGLが言っていればいいと思います。

Answer 2

割り当てられたbufferData中：

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

（第2パラメータを参照してください）短すぎる

頂点の作成はプログラムで起こる場合、これが発生する可能性があり、少なくとも、それはそれは私に起こった方法です

。。。