Rendering Primitives in OpenGL ES for Mobile

OpenGL ES (Embedded Systems) is a powerful graphics API designed for embedded devices like smartphones and tablets. Understanding how to render basic geometric primitives is fundamental to building any visual application. This tutorial explores the core concepts and methods for drawing points, lines, and triangles using OpenGL ES.

Understanding Primitives

In computer graphics, primitives are the basic building blocks used to construct more complex scenes. OpenGL ES supports three primary primitive types:

• Points: Represented by a single vertex.
• Lines: Defined by two vertices.
• Triangles: Defined by three vertices. Triangles are the most fundamental primitive in OpenGL ES, as any polygon can be tessellated into triangles.

Specifying Vertex Data

Before rendering, you need to provide vertex data. This data typically includes vertex coordinates (position) and can also include color, texture coordinates, and normals. In OpenGL ES, vertex data is often organized into arrays and passed to the graphics pipeline using vertex buffer objects (VBOs) for efficiency.

Vertex Attributes

Vertex attributes are properties associated with each vertex. Common attributes include:

• Position: The 2D or 3D coordinates of the vertex.
• Color: The color of the vertex (often RGBA).
• Texture Coordinates: UV coordinates for applying textures.

Drawing Functions

OpenGL ES provides several functions to draw primitives. The most common are `glDrawArrays` and `glDrawElements`.

`glDrawArrays`

This function draws a sequence of vertices directly from the currently bound arrays. You specify the type of primitive to draw and the range of vertices to use.

// Assume 'vertices' is an array of vertex positions (e.g., GLfloat[9] for 3 vertices, 3 components each)
// and 'vPosition' is the location of the vertex position attribute in your shader.

// Enable the vertex attribute array
glEnableVertexAttribArray(vPosition);

// Provide the vertex data
glVertexAttribPointer(vPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);

// Draw the primitives (one triangle)
glDrawArrays(GL_TRIANGLES, 0, 3);

// Disable the vertex attribute array
glDisableVertexAttribArray(vPosition);
                    

Key parameters for `glDrawArrays`:

• `mode`: The type of primitive to draw (e.g., `GL_POINTS`, `GL_LINES`, `GL_TRIANGLES`, `GL_TRIANGLE_STRIP`).
• `first`: The starting index of the vertex in the enabled arrays.
• `count`: The number of vertices to be rendered.

`glDrawElements`

This function is more flexible as it allows you to draw primitives using an array of indices. This is efficient when you have vertices that are shared among multiple primitives, reducing data redundancy.

// Assume 'vertices' contains vertex positions for a quad (4 vertices)
// Assume 'indices' contains indices to form two triangles (e.g., GLushort[6] = {0, 1, 2, 2, 1, 3})
// and 'vPosition' is the attribute location.

// Enable attribute array and set pointer for positions (similar to glDrawArrays)
glEnableVertexAttribArray(vPosition);
glVertexAttribPointer(vPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);

// Draw the primitives using indices
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

// Disable attribute array
glDisableVertexAttribArray(vPosition);
                    

Key parameters for `glDrawElements`:

• `mode`: The type of primitive to draw.
• `count`: The number of indices to be rendered.
• `type`: The data type of the indices (e.g., `GL_UNSIGNED_BYTE`, `GL_UNSIGNED_SHORT`, `GL_UNSIGNED_INT`).
• `indices`: A pointer to the array of indices.

Common Primitive Modes

Here are some of the most frequently used primitive modes:

• `GL_POINTS`: Draws individual points.
• `GL_LINES`: Draws a series of disconnected line segments. Each pair of vertices forms a line.
• `GL_LINE_STRIP`: Draws a connected sequence of line segments.
• `GL_TRIANGLES`: Draws a series of disconnected triangles. Each triplet of vertices forms a triangle.
• `GL_TRIANGLE_STRIP`: Draws a connected sequence of triangles. This mode is very efficient for rendering meshes.
• `GL_TRIANGLE_FAN`: Similar to `GL_TRIANGLE_STRIP`, but all triangles share the first vertex.

Example: Drawing a Colored Triangle

Let's outline the steps to draw a simple colored triangle. This involves setting up vertex data, attribute pointers, and using shaders.

1. Define Vertex and Color Data: Create arrays for vertex positions and their corresponding colors.
2. Create and Bind VBOs: Generate Vertex Buffer Objects and bind your vertex and color data to them.
3. Compile and Link Shaders: Create vertex and fragment shaders that process the position and color attributes.
4. Get Attribute Locations: Obtain the locations of your vertex attribute variables (e.g., `a_Position`, `a_Color`) from the shader program.
5. Set Up Vertex Attribute Pointers: Use `glVertexAttribPointer` to tell OpenGL ES how to interpret the data in your VBOs for each attribute.
6. Draw the Primitive: Call `glDrawArrays` or `glDrawElements` with `GL_TRIANGLES` mode.

// Vertex Shader
#version 100 // or 300 es
uniform mat4 u_MVPMatrix; // Model-View-Projection matrix
attribute vec4 a_Position; // Vertex position
attribute vec4 a_Color;    // Vertex color
varying vec4 v_Color;      // Pass color to fragment shader

void main() {
    gl_Position = u_MVPMatrix * a_Position;
    v_Color = a_Color;
}
                    

// Fragment Shader
#version 100 // or 300 es
precision mediump float;
varying vec4 v_Color;

void main() {
    gl_FragColor = v_Color;
}
                    

Mastering the rendering of these fundamental primitives is a crucial step in your journey with OpenGL ES development. Experiment with different primitive modes and vertex data to gain a deeper understanding of how graphics are constructed on mobile devices.