Introduction to Drawing the Frame

This section will demonstrate how to use all of the objects that have been initialised in the previous section to render a triangle on screen.

As previously mentioned, the example application regularly redraws the frame and makes use of double-buffering. These will both be shown in the example.

The general steps followed in this example are shown below.

Rendering the frame

  1. Update the triangle's angle of rotation.
  2. Clear all of the pixels of the colour buffer to a pre-defined colour. This ensures there is no data left in the buffer from the previous frame when starting to render a new frame.
    Important: This is particularly important for PowerVR architecture which makes use of fast on-chip memory with tile-based rendering. In tile-based rendering the frame is split into many small tiles which are rendered individually. If the buffer is not cleared before rendering each tile, the application will attempt to load the pixel data of the previous frame from the main memory. This wastes valuable memory bandwidth as the data has to be transferred between the main memory and the on-chip memory. Clearing the buffer is therefore very important for ensuring application performance.
  3. Create the projection matrix to transform the triangle's vertices from object space to screen space.
    Note: In this application the glm library is used to handle matrices and vectors. This includes calculating the orientation of the triangle's vertices based on the angle of rotation and calculating the projection matrix.
  4. Set the attributes of each vertex in the vertex data. For example, the number of dimensions at each vertex (x,y,z), the data size of each vertex in the buffer, and so on.
  5. Set the attributes of the texture coordinates at each vertex. A texture is 2D so it has two coordinates at each vertex (u,v).
  6. Draw the triangle.
  7. Tell OpenGL ES that this frame buffer can be discarded as its data will not be needed when rendering the next frame. Similar to clearing the frame buffer at the start of the frame, these operations ensure that bandwidth is not wasted transferring frame buffer data to system memory.
  8. Swap the back and front buffers to present the rendered frame buffer to the display. (Swapping the Buffers)
  9. Go to step 1.

Most of these steps are contained in the renderFrame() function except swapping the front and back buffers which is handled in swapEGLBuffers().