triangleOpenGL is an specification which defines an API multi language and multi platform to build applications in 2D and 3D. In this first blog entry I'll build a example will show first a dot in a window and the, a triangle.



 In order to do that we will need several components on our system:

  • OpenGL library
  • GLUT (Graphics library utility) which is able to manage a window system.
  • GLEW which is able to determine at run-time the OpenGL extensions supported.

All the graphics we see are represented by using vertices. A vertex is an element defined by three components on the plane x, y and z. In this way, when we paint something on the screen for each point we need to define its position on the scene.


OpenGL functions

The OpenGL functions we are gonna use for the two examples are the following:

  • glClearColor: cleans the image with the specified color
  • glGenBuffers: generates n video buffer objects. Creates the vertex buffer that later will be used to draw
  • glBindBuffer: bind the video buffer object to a type (array buffer)
  • glBufferData: set vertex array data to the video buffer object
  • glClear: cleans the color buffer
  • glEnableVertexAttribArray: activates the first array
  • glBindBuffer: binds the render to a GL vertex buffer object
  • glVertexAttribPointer: specifies the kind of vertex (int, flioat), the number of vertex and the offset
  • glDrawArrays: draws the point or triangels on the double buffer
  • glDisableVertexAttribArray: disables the array


OpenGL objects

  • GLuint: to reference our video buffer object
  • Vertex Array: to store the float vertices


GLUT functions

  • glutSwapBuffers: swaps the back buffer, the drawn one, to the front. It makes you see the new image. It is call on the renderer function.
  • glutInit: to be called before any other GLUT function
  • glutInitDisplayMode: initializes the display.Double buffering to swap front scene, the one your are watching, to the new drawn.
  • glutInitWindowSize: window size
  • glutInitWindowPosition: window position
  • glutCreateWindow: creates the window with the specified parameters
  • glutDisplayFunc: register the render callback
  • glutMainLoop: initializes the glut loop


Defining the screen

The environment is a normalized environment where the X, Y and Z coordinates are in the range [-1,1]. This means that all the values of our vertex coordinates must be in that range. Later, the rasterizer will transform to the current resolution.

  • x [-1,1]: from left to right
  • y [-1,1]: from bottom to top
  • z [-1,1]: from front to back

Screen positions:

 -1,1 0,1 1,1
 -1,0 0,0 1,0
-1,-1  0,-1 1,-1


Understanding the flow when drawing a triangle

Set and build the window using GLUT functions

// Initialize library                                                                                                                         
glutInit(&argc, argv); 
// Setting double buffering + rgba colors
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA); 
// Set window dimensions, position and open it
glutInitWindowSize(1024, 768);
glutInitWindowPosition(100, 100);
glutCreateWindow("Tutorial 01"); 

 Clean the buffer frame and set the three vertex coordinates

vertex[0] = Vertex3f(-1.0f, -1.0f, 0.0f);                                                                                                     
vertex[1] = Vertex3f(1.0f, -1.0f, 1.0f);
vertex[2] = Vertex3f(0.0f, 1.0f, 0.0f);

 Generate a buffer object

glGenBuffers(1, &VBO);

 Bind the buffer object to an array buffer kind


 Set the buffer data to the buffer object

glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), vertex, GL_STATIC_DRAW);


Now the data is available on the OpenGL layer, so we need to render the scene through GLUT loop


which basically calls to function registered before where all the magic happens. Here we reference our buffer object in order to display the vertex defined before for each paint event.

// Cleans the color buffer                                                                                                                    
glColor3f(0.0, 0.0, 1.0); // Activates the first array glEnableVertexAttribArray(0); glBindBuffer(GL_ARRAY_BUFFER, VBO); glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0); // Draw triangle glDrawArrays(GL_TRIANGLES, 0, 3); glDisableVertexAttribArray(0); glutSwapBuffers();

 All code is available here.