1

这是我的顶点着色器：

    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 常用的 utils。
4

1 回答 1

1

这是一个要点的链接，其中包含我更新的文件以使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);

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

于 2013-06-27T05:52:23.203 回答