A simple demo of using Shaders with libGDX is available on LibGDX.info

Shaders in OpenGL are little programs written in a C-like language called GLSL that runs on the GPU and processes the data necessary to render things. A shader can simply be viewed as a processing stage on the GPU. It receives a set of inputs which you can do a set of operations on and finally sends them back out. Think of this like function parameters and return values. Typically, when rendering something in OpenGL ES 2.0 the data will be sent through the Vertex shader first and then through the Fragment shader.

As the name implies, Vertex shaders are responsible for performing operations on vertices. More specifically, each execution of the program operates on exactly one vertex. This is an important concept to understand. Everything you do in the vertex shader happens only on exactly one vertex.

Here’s a simple Vertex shader:

That doesn’t look too bad, now does it? First, you have a vertex attribute called a_position. This attribute is a vec4 which means it’s a vector with 4 dimensions. In this sample, it holds the position information of the vertex.

Next, you have the . This is a 4x4 matrix that holds the view and projection transform data. If those terms sound fuzzy to you I’d recommend reading up on those topics (Here: ). It’s incredibly useful to understand it.

Inside the main method, we execute the operations on the vertex. In this case, all the shader does is multiply the vertex position with the matrix and assigns it to gl_Position. gl_Position is a predefined keyword by OpenGL and can’t be used for anything else but passing through the processed vertex.

Let’s say a triangle covers an area of 300 pixels. The vertex shader for this triangle would be executed 3 times. The fragment shader though would be executed 300 times. So when writing shaders, keep this in mind. Everything done in the fragment shader will be exponentially more expensive!

Here’s a very basic fragment shader:

void main()
{
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

This fragment shader will simply render every fragment with solid red. gl_FragColor is another pre-defined keyword. It’s used to output the final color for the fragment. Notice how we use to define a vector inside the shader. In this case, the vector is used to define the color of the fragment.

Now that we have a basic understanding of what shaders do and how they work, let’s create one in libgdx. This is done with the ShaderProgram class. A ShaderProgram is made up of a vertex shader and a fragment shader. You can either load from a file or just pass in a string and keep the shader code inside your java files.

This is the shader setup will be working with:

This is fairly standard setup for a shader that uses a position attribute, a color attribute and a texture coordinate attribute. Notice the 2 varying. They are outputs that we pass through to the fragment shader.

In the fragment shader, we have a sampler2D; this is a special uniform used for textures. As you can see in the main function, we multiply the vertex color with the color from the texture lookup to produce the final output color.

• a_position
• a_normal
• a_color
• a_texCoord, requires a number at the end, i.e. a_texCoord0, a_texCoord1, etc…
• a_tangent
• a_binormal

To create the ShaderProgram we do the following:

You can ensure that the shader compiled properly via shader.isCompiled(). A compile log can be spit out using shader.getLog().

We also create a matching mesh and load the texture:

In the render method we then simply call shader.begin() and pass the uniforms in and then render the mesh with the shader:

shader.begin();
shader.setUniformMatrix("u_projTrans", matrix);
shader.setUniformi("u_texture", 0);
mesh.render(shader, GL20.GL_TRIANGLES);

And that’s it!

The good thing about shaders in OpenGL ES 2.0 is that you have a huge library of shaders available to you. Pretty much anything that’s done in WebGL can be easily ported over to run on mobiles. Go and experiment!

A simple demo of a ShockWave effect Shaders with libGDX is available on LibGDX.info