title: Webgl passing color variables to shaders
body: <p>I have been trying to <b>pass a color variable (vColor) from JavaScript to my shaders.</b> I have tried lots of different things in the JavaScript, but have not been able to pass the variable.</p>
  
  <p>I sort of understand how the vPosition variable in this code was passed. I tried doing the same thing for vColor, but got errors like </p>
  
  <p><i>Error: WebGL: enableVertexAttribArray: -1 is not a valid <code>index</code>. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.</i></p>
  
  <p><b>Will someone please help me understand this?</b></p>
  
  <p>Here are the shaders</p>
  
  <pre><code>&lt;script id="vertex-shader" type="x-shader/x-vertex"&gt;
  attribute vec4 vPosition;
  attribute vec4 vColor;
  varying vec4 fColor;
  void main()
  {
      fColor=vColor;
      gl_Position = vPosition;
  }
  &lt;/script&gt;
  
  &lt;script id="fragment-shader" type="x-shader/x-fragment"&gt;
  precision mediump float;
  uniform vec4 vColor;
  void main()
  {
      gl_FragColor = vColor;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the JavaScript</p>
  
  <pre><code>"use strict";
  var gl;
  var points;
  window.onload = function init()
  {
      var canvas = document.getElementById( "gl-canvas" );
  
      gl = WebGLUtils.setupWebGL( canvas );
      if ( !gl ) { alert( "WebGL isn't available" ); }
  
      // Four Vertices
  
      var vertices = [
        -0.5, -0.5,
        -0.5,  0.5,
        0.5, 0.5,
        0.5, -0.5
      ];
  
  
      //
      //  Configure WebGL
      //
      gl.viewport( 0, 0, canvas.width, canvas.height );
      gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
  
      //  Load shaders and initialize attribute buffers
  
      var program = initShaders( gl, "vertex-shader", "fragment-shader" );
      gl.useProgram( program );
  
      // Load the data into the GPU
  
      var bufferId = gl.createBuffer();
      gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
      gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
  
      // Associate out shader variables with our data buffer
  
      var vPosition = gl.getAttribLocation( program, "vPosition" );
      gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
      gl.enableVertexAttribArray( vPosition );
  
      render();
  };
  
  
  function render() {
      gl.clear( gl.COLOR_BUFFER_BIT );
      gl.drawArrays( gl.TRIANGLE_FAN, 0, 4 );
  }
  </code></pre>