WebGL drawElements가 범위를 벗어 났습니까?

Question

나는 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); 

Answer 1

사실 나는 그것을 알아 냈습니다. 나는 WebGL newb이기 때문에 색상 버퍼의 각 꼭지점에 대한 인덱스를 추가하는 것을 잊어 버렸습니다. 내 셰이더가 각 꼭지점에 색상이 있어야한다는 사실이 내 마음을 알지 못했습니다. (WebGL이 속성 1 (내 색상 속성)의 오류이고 속성 0 (내 꼭지점 위치 속성)이 아니라고 말하면 좋을 것입니다.

Answer 2

할당 된 bufferData 지역 :

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

이 너무 짧은 (두 번째 매개 변수를 참조하십시오) 정점의 생성이 프로그램 일 경우

이 일어날 수 있습니다 적어도, 그게 나에게 일어난 방법이다

...