javascript WebGL drawElements 超出范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15751791/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WebGL drawElements out of range?
提问by DankMemes
I am playing around with WebGL trying to learn it, so I took some code from a webgl tutorial, and tried to add my own lines, but whenever I run it, it gives me this error:
我正在玩 WebGL 试图学习它，所以我从 webgl 教程中获取了一些代码，并尝试添加我自己的行，但是每当我运行它时，它都会给我这个错误：
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
Note: attribute 0 is my vertex buffer
注意：属性 0 是我的顶点缓冲区
My buffer initialization code is (obviously assume global vars if there is no definition)
我的缓冲区初始化代码是（如果没有定义，显然假设全局变量）
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;
And here's my drawing code
这是我的绘图代码
// 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);
采纳答案by DankMemes
Actually I figured it out. Being the WebGL newb that I am, I managed to forget to add the indexes for each vertex in my color buffer. It just never came across my mind that my shaders required each vertex to have a color. (It would have been nice though, if WebGL had said it was an error in attribute 1 (my color attribute) and not attribute 0 (my vertex position attribute).
其实我想通了。作为 WebGL 新手，我设法忘记为颜色缓冲区中的每个顶点添加索引。我从来没有想过我的着色器要求每个顶点都有一种颜色。（不过，如果 WebGL 说这是属性 1（我的颜色属性）而不是属性 0（我的顶点位置属性）中的错误，那就太好了。
回答by bernardn
The problem can also occur if the bufferData you have allocated in:
如果您分配的 bufferData 也可能出现此问题：
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(
cubeVertexIndices), gl.STATIC_DRAW);
is too short (See second parameter).
太短（见第二个参数）。
This can happen if the creation of vertices happen programmatically. At least, that's the way it happened to me.
如果以编程方式创建顶点，就会发生这种情况。至少，这就是它发生在我身上的方式。
