Drawing Shapes

This lesson teaches you to

You should also read

After you define shapes to be drawn with OpenGL, you probably want to draw them. Drawing shapes
with the OpenGL ES 2.0 takes a bit more code than you might imagine, because the API provides a
great deal of control over the graphics rendering pipeline.

This lesson explains how to draw the shapes you defined in the previous lesson using the OpenGL
ES 2.0 API.

Initialize Shapes

Before you do any drawing, you must initialize and load the shapes you plan to draw. Unless the
structure (the original coordinates) of the shapes you use in your program change during the course
of execution, you should initialize them in the onSurfaceCreated() method of your renderer
for memory and processing efficiency.

Draw a Shape

Drawing a defined shape using OpenGL ES 2.0 requires a significant amount of code, because you
must provide a lot of details to the graphics rendering pipeline. Specifically, you must define the
following:

Fragment Shader - OpenGL ES code for rendering the face of a shape with colors or
textures.

Program - An OpenGL ES object that contains the shaders you want to use for drawing
one or more shapes.

You need at least one vertex shader to draw a shape and one fragment shader to color that shape.
These shaders must be complied and then added to an OpenGL ES program, which is then used to draw
the shape. Here is an example of how to define basic shaders you can use to draw a shape in the
Triangle class:

In order to draw your shape, you must compile the shader code, add them to a OpenGL ES program
object and then link the program. Do this in your drawn object’s constructor, so it is only done
once.

Note: Compiling OpenGL ES shaders and linking programs is expensive
in terms of CPU cycles and processing time, so you should avoid doing this more than once. If you do
not know the content of your shaders at runtime, you should build your code such that they only
get created once and then cached for later use.

At this point, you are ready to add the actual calls that draw your shape. Drawing shapes with
OpenGL ES requires that you specify several parameters to tell the rendering pipeline what you want
to draw and how to draw it. Since drawing options can vary by shape, it's a good idea to have your
shape classes contain their own drawing logic.

Create a draw() method for drawing the shape. This code sets the position and
color values to the shape’s vertex shader and fragment shader, and then executes the drawing
function.

Once you have all this code in place, drawing this object just requires a call to the
draw() method from within your renderer’s onDrawFrame() method:

public void onDrawFrame(GL10 unused) {
...
mTriangle.draw();
}

When you run the application, it should look something like this:

Figure 1. Triangle drawn without a projection or camera view.

There are a few problems with this code example. First of all, it is not going to impress your
friends. Secondly, the triangle is a bit squashed and changes shape when you change the screen
orientation of the device. The reason the shape is skewed is due to the fact that the object’s
vertices have not been corrected for the proportions of the screen area where the GLSurfaceView is displayed. You can fix that problem using a projection and camera
view in the next lesson.

Lastly, the triangle is stationary, which is a bit boring. In the Adding
Motion lesson, you make this shape rotate and make more interesting use of the OpenGL ES
graphics pipeline.