Problem in applying colors to vertex in WebGL

Question

I have made a square using two triangles,then I assigned colors to vertex but every time it gives me black colored squared no matter what color I assigned to it.

Here's my script code:

    <script>

     var canvas = document.getElementById('my_Canvas');
     var gl = canvas.getContext('experimental-webgl');


     var vertices = [
        -0.5,0.5,0.0,
        -0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,-0.5,0.0,
        0.5,0.5,0.0,
        -0.5,0.5,0.0
     ];

     var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];

     var vertex_buffer = gl.createBuffer();

     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

     gl.bindBuffer(gl.ARRAY_BUFFER, null);


     var vertCode =
        'attribute vec3 coordinates;' +
        'attribute vec3 color;'+
        'varying vec3 vColor;'+

        'void main(void) {' +
           ' gl_Position = vec4(coordinates, 1.0);' +
           'vColor = color;'+
        '}';

     var vertShader = gl.createShader(gl.VERTEX_SHADER);

     gl.shaderSource(vertShader, vertCode);

     gl.compileShader(vertShader);

    var fragCode = 'precision mediump float;'+
        'varying vec3 vColor;'+
        'void main(void) {'+
            'gl_FragColor = vec4(vColor, 1.);'+
        '}';

     var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

     gl.shaderSource(fragShader, fragCode);

     gl.compileShader(fragShader);

     var shaderProgram = gl.createProgram();

     gl.attachShader(shaderProgram, vertShader); 

     gl.attachShader(shaderProgram, fragShader);

     gl.linkProgram(shaderProgram);

     gl.useProgram(shaderProgram);

     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

     var coord = gl.getAttribLocation(shaderProgram, "coordinates");

     gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

     gl.enableVertexAttribArray(coord);

     gl.clearColor(0.5, 0.5, 0.5, 0.9);

     gl.enable(gl.DEPTH_TEST); 

     gl.clear(gl.COLOR_BUFFER_BIT);

     gl.viewport(0,0,canvas.width,canvas.height);

     gl.drawArrays(gl.TRIANGLES, 0, 6);
  </script>

You can see fourth variable 'colors' is what I assigned to each vertex.

I also passed it to vertex shader and fragment shader but it is not giving me any color other than black.Am I passing wrong colors or there is problem in graphics pipeline?

Can anyone point out where the code is wrong? Please help.

Answer 1

You have to create a buffer for the colors, as you do it for the vertex coordinates. The number of color attributes has to be equal to the number of vertex attributes. Each color is associated one vertex coordinates:

var colors = [ 0,0,1, 1,0,0, 0,1,0, 0,1,0, 1,0,0, 0,0,1 ];

var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);  

And you have to define the array of generic vertex attribute data for the colors:

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color_index = gl.getAttribLocation(shaderProgram, "color"); 
gl.vertexAttribPointer(color_index, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_index);

See the example, base on your code:

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

var vertices = [
-0.5,0.5,0.0,   -0.5,-0.5,0.0,  0.5,-0.5,0.0,
  0.5,-0.5,0.0,   0.5,0.5,0.0,  -0.5,0.5,0.0
];

var colors = [ 0,0,1, 1,0,0, 0,1,0, 0,1,0, 1,0,0, 0,0,1, ];

var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var color_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

var vertCode =
  'attribute vec3 coordinates;' +
  'attribute vec3 color;'+
  'varying vec3 vColor;'+

  'void main(void) {' +
    ' gl_Position = vec4(coordinates, 1.0);' +
    'vColor = color;'+
  '}';

var vertShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertShader, vertCode);

gl.compileShader(vertShader);

var fragCode = 'precision mediump float;'+
  'varying vec3 vColor;'+
  'void main(void) {'+
      'gl_FragColor = vec4(vColor, 1.);'+
  '}';

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader); 
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color_index = gl.getAttribLocation(shaderProgram, "color"); 
gl.vertexAttribPointer(color_index, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_index);

gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.enable(gl.DEPTH_TEST); 
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 6);

<canvas id="my_Canvas" style="border: none;" width="512" height="512"></canvas>