GLSL openGL Shader Language – How to use in LibGdx

Sharing is caring!

What is a Shader?

Shaders are small programs that are run on the GPU for every pixel. Each pixels data is computed by the GPU at the same time, unlike a single core CPU which computes a single set of instructions very fast. This allows the GPU to process the shader code very fast which is required considering on your standard 1920×1080 screen there are over 2 million pixels, each of which has to be computed 60 times per second. That’s over 120 million calculations per second. The shader will set the colour for every single pixel based on the code written in the shader. As this is done 120 million times per second just imagine adding a loop inside a shader that takes 0.01 seconds to complete. 0.01 seconds * 120 million is 1.2 million / 60 seconds / 60 minutes / 24 = 14.4. That would make this code take over 14 days to complete.

Why would I want to use a shader?

If you use openGL then you already use one. There is a default shader that is used to pass the data from within your application to the default shaders which just pass through the colour and position without altering them. The fun comes in when you start altering or replacing the data that would usually be passed through. So again, why use a shader? well, in short, they allow you to create cool effects very efficiently using the GPU.

How to add a shader to your LibGdx Game?

The first thing to do is to have a shader program which consists on a vertex shader and a fragment shader which work together to make a shader. Here is the vertex shader, save it as passthrough.vert:

And here is the fragment shader, save this one as passthrough.frag:

Now you have them saved you can place them in your assets folder like you would with any other resource you want in your project. I placed mine in their own folder under assets/shaders. Now you have your shaders in your project it’s time to load them inside your code. In order to do that you will need to use the LibGdx ShaderProgram which accepts 2 fileHandles or 2 strings but before we do that we will set our ShaderProgram to pedantic mode so that we don’t have to declare every attribute, uniform and varying in both files and can just define the ones we use.

We now have a shader created and ready to use… if it compiles and has no errors! so let’s check for compilation and errors before proceeding.

We’re sure now that we have a compiled and error free shader ready to use. To use it we have to tell our SpriteBatch that we have a shader that we want it to use instead of the default shader( which by the way you can view in the SpriteBatch source). To set our shader in the SpriteBatch simple call the setShader(shader) method.

And that’s it, your SpriteBatch will use your shader from now on until you replace it or user sb.setShader(null) to use the default SpriteBatch shader again.

Useful links to help you learn GLSL

GLSL Cheat sheet : This pdf shows all the openGL standard variables and functions.

bookofshaders.com : This site is great for learning how to program shaders with GLSL and has loads of cool maths that you will need for programming shaders with helpfule explanations.

Shadertoy : This site has loaads of already created shaders with live views.

Vertex and Fragment Shaders.

As you’ve seen the vertex shader is the first half of the shader program and is executed only once for every vertex. For 2D applications, these are usually the 4 corners of a texture. The fragment shader is used for every pixel which is why it’s sometimes called a pixel shader.

Attributes

Attributes are read-only data sent to the shaders by openGL or the  LibGdx SpriteBatch. These attributes are generally used to get data such as colours or coordinates which change based on which vertex|pixel is being modified.

Uniforms.

Uniforms are read-only data that is the same across all of the vertices|pixels such as the projection transform matrix (u_projTrans) which is used to transform coordinates to displayed in the right location. Uniforms are also used to pass data from your code into the shader such as the resolution, time, mouse position etc. You can pass any data you want as long as it can be placed into the defined variables available in GLSL.

Varying.

Varying is used to store data which you want to transform from your vertex shader to your fragment shader. They must be defined in both the vertex and fragment shader in order to be able to use them, they must also be of the same type so no sending a vec3 in your vertex shader and getting a vec4 in your fragment shader.

Passing in data to the shader.

In order to pass data into the shader you need to bind the shader then set the uniform using the setUniformf method. So for this example, we will add a new uniform to our shaders called u_resolution which will be a vec2 and store the current resolution of the screen.

In both your shaders add:

and in your render method add:

Now you can use the resolution values in your shaders to do whatever you want.

[embedyt] https://www.youtube.com/watch?v=RytJ537BlPo[/embedyt]

Shockwave Shader.

A shader I am currently using in BlockBreaker (Shown Above) is this shockwave shader which creates a shockwave from a point, which is from this website.

Vertex Shader:

Fragment Shader:

This requires 3 uniforms to be added to your shaders which are centre to contain the centre of the shockwave, time to allow progression of the shockwave and shockParams which define how the shockwave should appear.

 

If you know any cool shader sites, tutorials or resources feel free to add them in the comments below.

 

Sharing is caring!