javascript - WebGL:没有 VBO 绑定(bind)到启用的顶点。顶点索引需要 "vertexAttribPointer"吗？

Question

编辑:这不仅仅是 firefox 的错误，我在 chrome 中也遇到了同样的错误

我收到以下错误:

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

索引数组和顶点数组是正确的，因为它之前没有纹理就可以工作(尽管它只渲染了一半的顶点)。

我必须向着色器添加索引变量吗？

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 方法指定顶点属性的数据类型和位置，在当前绑定(bind)的 ARRAY_BUFFER 中。

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

您的代码应该看起来像这样:

绑定(bind) 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 );

绑定(bind) obj.texture Buffer 缓冲区并为 textureCoord Attribute 定义通用顶点属性数据，因为纹理坐标位于单独的缓冲区中:

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

这意味着您的代码应如下所示:

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 individual 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);