Welcome back for the next exciting installment of my series on cutting away the apron strings and moving from XNA to libGDX. Today I’m sort of moving on from triangles to talk about Quads. Quads can be used for all kinds of things, including Sprite implementations, where textures are rendered onto the quad via the fragment shader.

Quads

The only primitives that can be rendered with OpenGL ES 2.0 are points, lines and triangles. “Hang on, but you said we were covering quads in this post!” I hear you cry. Alright, keep calm sweethearts, we can render quads by building up a couple of triangles as shown further down.

Triangle Strips

To do this in code, we can cheat a bit and use something called a Triangle Strip. With a triangle strip, we only need to supply 4 vertices instead of 6 (as would needed for 2 triangles) as OpenGL will share the common vertices. The following image depicts the shared vertices, which make up either end of the red dotted line:

Shared Vertices .

Code

Lets start be coding the vertices and then we’ll look at a pretty picture to describe what’s going down.

First we create our Mesh in the same way that we did in my previous tutorial. This time however, we are instructing the Mesh constructor that there will be a maximum of 4 vertices to draw.

Note that the shader code is exactly the same as for the previous tutorial.

quadMesh = new Mesh(true, 4, 0, 	new VertexAttribute(Usage.Position, 3, "a_position"),
	new VertexAttribute(Usage.ColorPacked, 4, "a_color"));

Next we define the vertices in the order we want to draw them. In this case we are drawing from left to right, with red for the left vertices and white for the right vertices.

quadMesh.setVertices(new float[] {
	-0.5f, -0.5f, 0, Color.toFloatBits(255, 0, 0, 255), 		// red bottom left
	0.5f, -0.5f, 0, Color.toFloatBits(255, 255, 255, 255), 		// white bottom right
	-0.5f, 0.5f, 0,  Color.toFloatBits(255, 0, 0, 255),		// red top left
	0.5f, 0.5f, 0,  Color.toFloatBits(255, 255, 255, 255) });	// white top right

Now we make a small change to our render() method, so that OpenGL treats the vertices as a triangle strip. You can see this on the highlighted line.

public void render() {
	Gdx.gl.glClearColor(0, 0, 0, 1);
	Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

	shader.begin();
	quadMesh.render(shader, GL20.GL_TRIANGLE_STRIP, 0, 4); // <-- Here be the change!
  shader.end();
}

The following image depicts what we have asked OpenGL to render for us.

Shared Vertices 1 .

When we run this code, we will see the following quad rendered:

Shared Vertices 1 .

Note that the color of the quad is interpolated horizontally from red at the left edge, to white at the right edge. This is a direct result of the order in which the vertices are drawn and the colours associated with them.

Note that the shared vertices (from 1 to 2) have no influence on the interpolation. It’s as if the line splitting the quad into two triangles doesn’t exist, which is great for us.

Say we wanted to have the colours interpolated vertically, from red at the top to white at the bottom, we could make the following code changes to achieve that.

quadMesh.setVertices(new float[] {
	-0.5f, -0.5f, 0, Color.toFloatBits(255, 255, 255, 255), // white bottom left
	0.5f, -0.5f, 0, Color.toFloatBits(255, 255, 255, 255), 	// white bottom right
	-0.5f, 0.5f, 0,  Color.toFloatBits(255, 0, 0, 255),	// red red top left
	0.5f, 0.5f, 0,  Color.toFloatBits(255, 0, 0, 255) });	// red top right

Here, we are asking OpenGL to render this:

Shared Vertices 2 .

If we re-run the program, we will see the following result.

Shared Vertices 1 .

Fax me if you are impressed!

Show/Hide juicy details

I have nothing

Coming up Next…

I think I’ll cover rendering a texture onto a quad via the shaders. Not to fear, as libGDX has sprite support, but it’s good to know a bit about what’s going on underneath, which will give you the knowledge and confidence to roll your own custom sprite shader should you want to do anything super fancy.