WebGL：drawArrays：属性设置不正确

Question

这是我的顶点着色器：

    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;
    attribute float type;

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying vec4 vColor;

    void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vColor = aVertexColor;
      if(type > 0.0) {

      } else {

      }
    }

我想要做的很简单，只需捕获一个名为type 的浮点值并将其用于逻辑操作。

问题是，当我尝试在Javascript中使用它时，错误来了：

shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "type");
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);


WebGL: INVALID_OPERATION: drawArrays: attribs not setup correctly main.js:253
WebGL: INVALID_OPERATION: drawArrays: attribs not setup correctly main.js:267
WebGL: INVALID_OPERATION: drawElements: attribs not setup correctly 

getAttribLocation的输出是有意义的，都大于0。

================= 更新 ===================

这是我的整个项目代码：

https://gist.github.com/royguo/5873503

解释：

• index.html 着色器脚本在这里。
• main.js 启动 WebGL 应用程序并绘制场景。
• shaders.js 加载着色器并绑定属性。
• buffers.js 初始化顶点和颜色缓冲区。
• utils.js 常用工具。

Answer 1

这是一个link 的要点，其中包含我更新的文件以使type 属性正常工作。

如果您搜索 //ADDED CODE，您应该能够查看我为使其正常工作而必须进行的每项更改。

除了启用objectTypeAttribute，您还必须为您正在绘制的每个对象创建一个数组缓冲区：

  triangleObjectTypeBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleObjectTypeBuffer);
  objectTypes = [
    1.0, 1.0, 0.0
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(objectTypes), gl.STATIC_DRAW);
  triangleObjectTypeBuffer.itemSize = 1;
  triangleObjectTypeBuffer.numItems = 3;

并在绘制对象之前为每个对象绑定该数组缓冲区：

  gl.bindBuffer(gl.ARRAY_BUFFER, triangleObjectTypeBuffer);
  gl.vertexAttribPointer(shaderProgram.objectTypeAttribute, triangleObjectTypeBuffer.itemSize, gl.FLOAT, false, 0, 0);

您可能已经尝试过，但在途中不小心出错了。