javascript - WebGL:无法将纹理应用于对象

我正在尝试将纹理应用于webGL中的对象，但是出现以下错误：


  WebGL警告：drawElements：启用了顶点属性数组0，但没有绑定缓冲区。


我无法在线找到任何信息。否则，将显示场景，但是需要纹理的对象将显示为平面正方形。

错误指向我的drawElements

  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.uniform1i(shaderProgram.samplerUniform, 0);

  gl.bindBuffer(gl.ARRAY_BUFFER, cubeNormalBuffer);
  gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, cubeNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);

  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
  setMatrixUniforms();
  gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

和我的纹理缓冲区

  cubeVertexTextureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
  const textureCoords = [
      // Front
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
      // Back
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
      // Top
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
      // Bottom
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
      // Right
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
      // Left
      0.0,  0.0,
      1.0,  0.0,
      1.0,  1.0,
      0.0,  1.0,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  cubeVertexTextureCoordBuffer.itemSize = 2;
  cubeVertexTextureCoordBuffer.numItems = 24;

和纹理代码

let texture;
function initTexture(){
    texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0,0,255,255]));
    const image = new Image();
    image.onload = function () {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        if(isPowerOf2(image.width) && isPowerOf2(image.height)){
            gl.generateMipmap(gl.TEXTURE_2D);
        }
        else{
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        }
        drawScene();
    };
    // image.src = "crate.gif";
    image.src = "WoodFine23_COL_3K.jpg";
}
function isPowerOf2(value) {
    return(value & (value - 1)) == 0;
}

否则，我的整个代码可以在这里找到https://pastebin.com/HaQBFEuL

另外，我遵循了以下教程
http://learningwebgl.com/blog/?p=1359，
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL，
和https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL

任何帮助将不胜感激。

最佳答案

在函数initShaders中，索引shaderProgram.vertexPositionAttribut，shaderProgram.vertexColorAttribute，shaderProgram.vertexNormalAttribute，
shaderProgram.textureCoordAttribute已启用，它们在您的代码中从未禁用。

但是在函数drawScene中，仅定义了索引shaderProgram.vertexPositionAttribut，shaderProgram.vertexNormalAttribute和shaderProgram.textureCoordAttribute的通用顶点属性数据的数组。
缺少shaderProgram.vertexColorAttribute，因为正在评论中。

错误消息


  WebGL警告：drawElements：启用了顶点属性数组0，但没有绑定缓冲区。


表示存在一个顶点属性索引，该索引属性索引已“启用”，但未定义任何数据。

在您的情况下，这是shaderProgram.textureCoordAttribute，已定义但未启用。

跳过启用索引为shaderProgram.vertexColoAttribute的vertex属性的操作，您的代码应正确运行。
当然，顶点属性可以在功能initShaders中启用，并在功能drawScene中定义。但是在功能shaderProgram.vertexNormalAttribute中也启用了顶点属性drawScene。不需要任何相同属性索引的gl.enableVertexAttribArray调用两次。