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