title: WebGL: drawArrays: attribs not setup correctly
body: <p>Here's my vertex shader:</p>
  
  <pre><code>    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 &gt; 0.0) {
  
        } else {
  
        }
      }
  </code></pre>
  
  <p>What I want to do is pretty simple, just capture a float value named <code>type</code> and use it for logic operates.</p>
  
  <p>The problem is, when I try to use it in Javascript, the error comes:</p>
  
  <pre><code>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 
  </code></pre>
  
  <p>The output of <code>getAttribLocation</code> is meaningful, all of them are equal greater than 0.</p>
  
  <p><strong>================= UPDATE ===================</strong></p>
  
  <p>Here's my whole project code:</p>
  
  <p><a href="https://gist.github.com/royguo/5873503" rel="nofollow">https://gist.github.com/royguo/5873503</a></p>
  
  <p>Explanation:</p>
  
  <ul>
  <li>index.html Shaders script are here.</li>
  <li>main.js    Start the WebGL application and draw scene.</li>
  <li>shaders.js Load shaders and bind attributes.</li>
  <li>buffers.js Init vertex and color buffers.</li>
  <li>utils.js   Common used utils.</li>
  </ul>