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 Init顶点和颜色缓冲区。
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);

你可能已经尝试过了，并且在途中不小心出错了。

WebGL：drawArrays：attribs设置不正确

1 个答案: