Modern OpenGL tutorial Playing with color example

At first have a look screen shot of our program what we have going to build.

You have seen a triangle having different color at each vertex. In previous tutorials series we are just drawing the white triangle without color.

Download
All the code in this series of articles is available from github: https://github.com/smokindinesh/Modern-OpenGL-Series  You can download a zip of all the files from that page, or you can clone the repository if you are familiar with git.



 For color we have just pass the 3 vertex data into VBO just like below

// Put the three triangle verticies into the VBO
    GLfloat vertexData[] = {
        //  X     Y     Z 
         0.0f, 0.8f, 0.0f,
        -0.8f,-0.8f, 0.0f,
         0.8f,-0.8f, 0.0f,
    };

    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    // connect the xyz to the "vPosition" attribute of the vertex shader
    glEnableVertexAttribArray(program->attrib("vPosition"));
    glVertexAttribPointer(program->attrib("vPosition"), 3, GL_FLOAT, GL_FALSE, 0 , NULL);

Now here we are going to give a color  for every vertex for that we can pass the color data by creating and binding another VBO  or within same VBO with vertex data. Here we pass the color data with vertex and bind it in same VBO just like below.

// Put the three triangle verticies into the VBO
    GLfloat vertexData[] = {
        //  X     Y     Z   R    G     B    A
         0.0f, 0.8f, 0.0f,1.0f,0.0f,0.0f,1.0f,
        -0.8f,-0.8f, 0.0f,0.0f,1.0f,0.0f,1.0f,
         0.8f,-0.8f, 0.0f,0.0f,0.0f,1.0f,1.0f,
    };

    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    // connect the xyz to the "vPosition" attribute of the vertex shader
    glEnableVertexAttribArray(program->attrib("vPosition"));
    glVertexAttribPointer(program->attrib("vPosition"), 3, GL_FLOAT, GL_FALSE, 7*sizeof(GLfloat), NULL);
    // connect the RGBA to the "vColor" attribute of the vertex shader and passed to the fragment shader
    glVertexAttribPointer(program->attrib("vColor"), 4, GL_FLOAT, GL_FALSE, 7*sizeof(GLfloat),(const GLvoid*)(3*sizeof(GLfloat)));
    glEnableVertexAttribArray(program->attrib("vColor"));

You can see the differences what we have added. We have passed four color value where first three are for color (RGB) and fourth for Alpha(A). You can also see the differences in the call of glVertexAttriPointer, the most important change is last two argument. Second argument is 7*sizeof(GLfloat) which means how many bytes are in between start of one value and start next value.In our data there 7 GLfloat value for single vertex where 3 for xyz vertex value and 4 for RGBA color value.While connection xyz vertex with "vPosition" attribute variable of vertex shader in argument second we are passing "3" to read 3 data for xyz  single vertex but another vertex data start at 8th position after 4 color data so there is gap of 7*sizeof(GLfloat) bytes which we have to specify. Gap is always calculated in bytes not the number of value. For connection RGBA color data with "vColor" attribute variable of vertex shader which is further passed to fragment shader you can see the last argument of glVertexAttriPointer is (const GLvoid*)(3*sizeof(GLfloat))  which is offset argument which means how many bytes from the start is the first value. Our color data isn't in initial position it is after 3 bytes vertex data so we have to pass the offset value. In above while connection xyz vertex last argument offset value is NULL because the vertex data is in initial position.

Next Chapter: Texture Mapping.