WebGL:drawArrays:属性设置不正确 [英] WebGL: drawArrays: attribs not setup correctly

问题描述

这是我的顶点着色器:

    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的浮点值并将其用于逻辑运算即可.

What I want to do is pretty simple, just capture a float value named type and use it for logic operates.

问题是，当我尝试在Javascript中使用它时，就会出现错误:

The problem is, when I try to use it in Javascript, the error comes:

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.

The output of getAttribLocation is meaningful, all of them are equal greater than 0.

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

这是我的整个项目代码:

Here's my whole project code:

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

说明:

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

推荐答案

这是一个链接要更新我要使type属性正常工作的文件的要点.

Here is a link to a gist with the files I updated to get the type attribute working.

如果您搜索//ADDED CODE，则应该能够查看我为使其生效而必须进行的所有更改.

If you search for //ADDED CODE you should be able to view every change I had to make to get it working.

除了启用objectTypeAttribute之外，还必须为要绘制的每个对象创建一个数组缓冲区:

In addition to enabling the objectTypeAttribute you have to create an array buffer for each object you are drawing:

  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;

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

And bind that array buffer for each object before you draw the object:

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

您可能已经尝试过此方法，并且在途中某处意外出错.

You probably already tried this and accidentally went wrong somewhere along the way.

这篇关于WebGL:drawArrays:属性设置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！