WebGL：没有绑定到启用顶点的VBO。我是否需要顶点索引的“vertexAttribPointer”？

Question

编辑：这不是一个Firefox的错误而已，我得到了镀铬同样的错误藏汉

我收到以下错误：

WebGL warning: drawElements: no VBO bound to enabled vertex attrib index 1u!

我看了看周围的网，它看起来像指数缓冲区需要一个“vertexAttribPointer”，但我找不到解释这个地方的地方，所以我仍然不确定。

，这是我的VBO功能渲染：

g.activeTexture(g.TEXTURE0); 
g.bindTexture(g.TEXTURE_2D, obj.texture); 
g.uniform1i(g.getUniformLocation(shaderProgram, 'uSampler'), 0); 
g.vertexAttribPointer(
    textureCoordAttribute, 2, g.FLOAT, g.FALSE, 0, 0); 

//vertices 
g.bindBuffer(g.ARRAY_BUFFER, obj.vertBuffer); 
g.vertexAttribPointer(
    positionAttribLocation, obj.vertSize, g.FLOAT, g.FALSE, 0, 0); 

//white color 
g.bindBuffer(g.ARRAY_BUFFER, whiteColorBuffer); 
g.vertexAttribPointer(
    colorAttribLocation, 4, g.FLOAT, g.FALSE, 0, 0); 

//Texture coords 
g.bindBuffer(g.ARRAY_BUFFER, obj.textureBuffer); 
g.vertexAttribPointer(
    textureCoordAttribute, 2, g.FLOAT, g.FALSE, 0, 0); 

//indices buffer 
g.bindBuffer(g.ELEMENT_ARRAY_BUFFER, obj.indexBuffer); 
setMatrixUniforms(); 

g.drawElements(g.TRIANGLES, obj.indexNumItems, g.UNSIGNED_SHORT, 0); 
g.bindTexture(g.TEXTURE_2D, null); 
g.bindBuffer(g.ARRAY_BUFFER, null); 
g.bindBuffer(g.ELEMENT_ARRAY_BUFFER, null); 

indices数组是正确的，顶点数组，因为它的工作没有之前的纹理（尽管它呈现的顶点的一半）。

我是否需要为着色器添加索引变量？

EDIT2：这是我目前getAttribLocations怎么样子：

positionAttribLocation = g.getAttribLocation(shaderProgram, "vertPosition"); 
colorAttribLocation = g.getAttribLocation(shaderProgram, "vertColor"); 
textureCoordAttribute = g.getAttribLocation(shaderProgram, "aTextureCoord"); 


g.vertexAttribPointer(
    positionAttribLocation, // attribute location 
    2, //number of elements per attribute 
    gl.FLOAT, // type of element 
    gl.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex 
    0//offset from the beginning of a single vertex to this attribute 
    ); 
g.vertexAttribPointer(
    colorAttribLocation, 
    3, 
    g.FLOAT, 
    g.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT, 
    2 * Float32Array.BYTES_PER_ELEMENT 
    ); 
g.vertexAttribPointer(
    textureCoordAttribute, 
    2, 
    g.FLOAT, 
    g.FALSE, 
    0, 
    0 
); 
g.enableVertexAttribArray(positionAttribLocation); 
g.enableVertexAttribArray(colorAttribLocation); 
g.enableVertexAttribArray(textureCoordAttribute); 

Answer 1

注意，vertexAttribPointer方法指定顶点属性的数据类型和位置，在当前绑定ARRAY_BUFFER。

在指定包含顶点属性的缓冲区的内存布局之前，您必须使用bindBuffer来绑定相应的缓冲区。
由于某些顶点属性位于不同的缓冲区中，因此在调用vertexAttribPointer之前，必须确保已绑定相应的缓冲区。

您的代码应以某种方式是这样的：

绑定obj.vertBuffer缓冲和定义一般的顶点属性数据 positionAttribLocation和colorAttribLocation，因为它们都位于同一缓冲区。

g.bindBuffer(g.ARRAY_BUFFER, obj.vertBuffer); 
g.vertexAttribPointer(positionAttribLocation, 
    2, gl.FLOAT, false, 5 * Float32Array.BYTES_PER_ELEMENT, 0); 
g.vertexAttribPointer(colorAttribLocation, 
    3, gl.FLOAT, false, 5 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT); 

绑定obj.texture Buffer缓冲和定义一般的顶点属性数据textureCoord Attribute，因为纹理坐标位于分离缓冲液：

g.bindBuffer(g.ARRAY_BUFFER, obj.textureBuffer); 
g.vertexAttribPointer(textureCoordAttribute, 2, g.FLOAT, false, 0, 0); 

这意味着你的代码应该llok这样的：

positionAttribLocation = g.getAttribLocation(shaderProgram, "vertPosition"); 
colorAttribLocation = g.getAttribLocation(shaderProgram, "vertColor"); 
textureCoordAttribute = g.getAttribLocation(shaderProgram, "aTextureCoord"); 

g.bindBuffer(g.ARRAY_BUFFER, obj.vertBuffer); // <---------------- 
g.vertexAttribPointer(
    positionAttribLocation, // attribute location 
    2, //number of elements per attribute 
    gl.FLOAT, // type of element 
    gl.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex 
    0//offset from the beginning of a single vertex to this attribute 
    ); 
g.vertexAttribPointer(
    colorAttribLocation, 
    3, 
    g.FLOAT, 
    g.FALSE, 
    5 * Float32Array.BYTES_PER_ELEMENT, 
    2 * Float32Array.BYTES_PER_ELEMENT 
    ); 

g.bindBuffer(g.ARRAY_BUFFER, obj.textureBuffer); // <---------------- 
g.vertexAttribPointer(
    textureCoordAttribute, 
    2, 
    g.FLOAT, 
    g.FALSE, 
    0, 
    0 
    ); 

g.enableVertexAttribArray(positionAttribLocation); 
g.enableVertexAttribArray(colorAttribLocation); 
g.enableVertexAttribArray(textureCoordAttribute);