Question

我试图将纹理应用于webGL中的对象，但是我收到以下错误：

WebGL警告：drawElements：Vertex attrib数组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

非常感谢任何帮助。

Answer 1

在函数initShaders中，索引shaderProgram.vertexPositionAttribut，shaderProgram.vertexColorAttribute，shaderProgram.vertexNormalAttribute的通用顶点属性数组， shaderProgram.textureCoordAttribute已启用，您的代码中永远不会禁用它们。

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

错误消息

WebGL警告：drawElements：Vertex attrib数组0已启用，但没有缓冲区绑定。

表示有一个顶点属性索引，它是“已启用”，但没有为其定义数据。

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

使用索引shaderProgram.vertexColoAttribute跳过启用顶点属性，并且您的代码应正确运行。
当然，顶点属性可以在函数initShaders中启用，并在函数drawScene中定义。但是函数shaderProgram.vertexNormalAttribute中也启用了顶点attrbute drawScene。您不应该为同一属性索引调用gl.enableVertexAttribArray两次，而不需要。

WebGL：不能将纹理应用于对象

1 个答案: