Featured Posts

8. Bump Mapping in GLSL8. Bump Mapping in GLSL Introduction Bump mapping is essential in todays computer games, and computer graphics in general. Would you like to know the best thing about it? It is extremely simple to implement. Bump mapping works...

Read more

Swiftless GLSL Shader DeveloperSwiftless GLSL Shader Developer Swiftless GLSL Shader Developer   Version 0.1a Currently Swiftless GLSL Shader Developer is in it's first public release, and is currently in alpha status, meaning it is not complete and may contain...

Read more

Wordpress Optimization Wordpress Website Optimizations Introduction Wordpress itself is a fairly wonderful tool. Since switching to it, I find it is a lot quicker to make changes to my website and it is also quicker to get...

Read more

36. OpenGL Framebuffers36. OpenGL Framebuffers Introduction Frame buffers are one of those mythical things that we have all heard of, but many beginner OpenGL developers avoid because there is not much information about them, and they can be confusing...

Read more

1. Terrain Class1. Terrain Class Terrain is one of those things that so far, hasn't been perfectly recreated in computer graphics. But it is almost there! Looking over a beautiful landscape can be one of the most amazing feelings in the...

Read more

  • Prev
  • Next

3. GLSL Coloring

Posted on : 25-03-2010 | By : Swiftless | In : GLSL

Tags: , , , ,

0

Jump To:

main.cpp Source
shader.vert Source
shader.frag Source
Download

From now on, I won’t be listing the source code for the shader.h and shader.cpp files, as these will not be changing. We have everything we need in place to play with our shaders.

What we are trying to do in this tutorial is simulate our fixed function pipeline in GLSL. In standard OpenGL, we are used to coloring objects with their respective glColor3f or glColor4f methods.

This tutorial will allow us to use the values assigned as the color, inside our shader.

Main.CPP File:

Now this code, isn’t going to change at all, but the key line to focus on is:

    glColor4f(1.0, 0.0, 0.0, 1.0);

Changing this line will change the output colour of the fragment shader.

And I have also changed from using a wire cube, just to show the color of the shape more clearly.

    glutSolidCube(2);

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

  #if ( (defined(__MACH__)) && (defined(__APPLE__)) )   
#include <stdlib.h>
#include <OpenGL/gl.h>
#include <GLUT/glut.h>
#include <OpenGL/glext.h>
#else
#include <stdlib.h>
#include <GL/glew.h>
#include <GL/gl.h>
#include <GL/glut.h>
#include <GL/glext.h>
#endif

#include “shader.h”

Shader shader;

GLfloat angle = 0.0; //set the angle of rotation

void init(void) {
    glEnable(GL_DEPTH_TEST);
    glDepthFunc(GL_LESS);
    
    shader.init(“shader.vert”, “shader.frag”);
}

void cube (void) {
    glRotatef(angle, 1.0, 0.0, 0.0); //rotate on the x axis
    glRotatef(angle, 0.0, 1.0, 0.0); //rotate on the y axis
    glRotatef(angle, 0.0, 0.0, 1.0); //rotate on the z axis
    glColor4f(1.0, 0.0, 0.0, 1.0);
    glutSolidCube(2);
}

void display (void) {
    glClearColor (0.0,0.0,0.0,1.0);
    glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();  
    gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
    
    shader.bind();
    cube();
    shader.unbind();
    
    glutSwapBuffers();
    angle += 0.1f;
}

void reshape (int w, int h) {
    glViewport (0, 0, (GLsizei)w, (GLsizei)h);
    glMatrixMode (GL_PROJECTION);
    glLoadIdentity ();
    gluPerspective (60, (GLfloat)w / (GLfloat)h, 1.0, 100.0);
    glMatrixMode (GL_MODELVIEW);
}

int main (int argc, char **argv) {
    glutInit(&argc, argv);
    //set up
the double buffering
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA | GLUT_DEPTH;

    glutInitWindowSize(500, 500);
    glutInitWindowPosition(100, 100);
    glutCreateWindow(“A basic OpenGL Window“);
    
    glewInit();

    glutDisplayFunc(display);
    glutIdleFunc(display);
    
    glutReshapeFunc(reshape);
    
    init();
    
    glutMainLoop();
    
    return 0;
}

Vertex Shader Source:

Our change here, is going to be the introduction of a new line. This line will look like:

    gl_FrontColor = gl_Color;     

And what this means, is that we want the set the front face color for our objects, to that of the color entered in by the glColor3f and glColor4f functions.

If we have a shape with some back facing shapes, then we can also set gl_BackColor to the same value, and this will give us the same color for both front and back facing shapes. Or you could even change this value, so that the front of a shape has one color, and the back of a shape has another color.

1.
2.
3.
4.
5.		  void main() {     
    // Set the front color to the color passed through with glColor*f 
    gl_FrontColor = gl_Color;        
    // Set the position of the current vertex 
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
}

 

Fragment Shader Source:

The only difference here, is the replacement of our vec4(1.0) color value, with the value gl_Color.

*Note that the gl_Color read in by the vertex shader, is different to that of the gl_Color value read in by the fragment shader. The one in the fragment shader, refers to the gl_Color value we get from the vertex shader, whilst the gl_Color value in our vertex shader is read in from our application.*

And that is all there is to it. It is often handy to set the colours, lighting values, etc in regular OpenGL mode, so that if our shader fails on a certain system, we will still get a similar result. It just won’t look as pretty.

If you have any questions, please email me at swiftless@gmail.com

1.
2.
3.
4.		  void main() {
    // Set the output color of our current pixel
    gl_FragColor = gl_Color;
}

 

Download:

Download shader.h Source Code for this Tutorial

Download shader.cpp Source Code for this Tutorial

Download main.cpp Source Code for this Tutorial

Download shader.vert Source Code for this Tutorial

Download shader.frag Source Code for this Tutorial

VN:F [1.9.3_1094]
Please rate so I know where to improve the site. 1 means needs a lot of improvement, 10 means perfect. If you leave a low rating, please state why. I don't want people just coming to bash the site.
Rating: 7.0/10 (2 votes cast)
VN:F [1.9.3_1094]
Rating: 0 (from 0 votes)
3. GLSL Coloring, 7.0 out of 10 based on 2 ratings

Related posts:

  1. 5. GLSL Per Pixel Lighting
  2. 4. GLSL Lighting
  3. 6. GLSL Materials
  4. 7. Texturing in GLSL
  5. 1. GLSL Setup

Write a comment

Improve the web with Nofollow Reciprocity.