web-dev-qa-db-ja.com

WebGL drawElementsが範囲外ですか？

私はそれを学ぼうとして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;

そして、これが私の描画コードです

// 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);
javascriptwebgl
17
DankMemes

実際に私はそれを理解しました。私はWebGLの初心者なので、カラーバッファに各頂点のインデックスを追加するのを忘れることができました。私のシェーダーが各頂点に色を付ける必要があることは、まったく思い浮かびませんでした。 （ただし、WebGLが、属性0（頂点位置属性）ではなく、属性1（私の色属性）のエラーであると言っていたとしたら、それは良かったでしょう。

14
DankMemes

この問題は、次の場所に割り当てたbufferDataの場合にも発生する可能性があります。

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

短すぎます（2番目のパラメーターを参照）。

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

4
bernardn