WebGL: drawArrays: attributes incorrectly configured

Question

Here is my vertex shader:

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 { } } 

What I want to do is pretty simple, just grab the float named type and use it to work with the logic.

The problem is that when I try to use it in Javascript, an error occurs:

 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 

The result of getAttribLocation makes sense, they are all equal to more than 0.

================== UPDATE =========================

Here is the whole project code:

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

Explanation:

• index.html The shaders of the script are here.
• main.js Launch a WebGL application and create a scene.
• shaders.js Download shaders and bind attributes.
• buffers.js Initiate vertex and color buffers.
• utils.js Common utilities used.

Answer 1

Below is the link where the files are updated to get the type attribute.

If you are looking for //ADDED CODE , you should be able to see all the changes I had to make to make it work.

In addition to including objectTypeAttribute you need to create an array buffer for each object you draw:

  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 this array buffer for each object before drawing 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 made a mistake somewhere along the way.