How to use GL Transitions

The GL Transitions project provides a very nice selection of custom-made transition shaders. Most of them are licensed under the permissive MIT license, so they can easily be integrated into one's project. As all of their shaders adhere to the GL Transition Specification v1, they can be used in libgdx-screenmanager without much hassle. The GLTransitionsShaderTransition class (excuse the verbose name) takes care of creating a vertex and a fragment shader and just needs to be given the GL Transitions code.

The following gif is an example using three of the transitions from the GL Transitions project (GlitchMemories, BowTieHorizontal and luminance_melt):

Some example code

Let's say you want to use the CircleCrop transition by fkuteken in your libGDX project. Before you can do so, there are a few things that have to be taken care of:

• The transition is using one uniform (bgcolor), which has to be set. This can be done programmatically (by using GLTransitionsShaderTransition#getProgram()#setUniform...) or by uncommenting the default value in the code itself (see line 5; this will not work in GLSL EL, i.e. on Web, Android, iOS).
• According to the spec, GL Transitions can use ratio as a contextual variable. As CircleCrop is doing so (see line 7), we have to provide a value for it. This can either be done by replacing every mention of ratio in the text with the current screen ratio or by simply adding a corresponding uniform (uniform float ratio;) to the shader code. Don't forget to update the uniform when the window is resized (GLTransitionsShaderTransition#getProgram()#setUniform...).
• On some platforms (in particular the mobile and web ones), there might be further restrictions to shaders. Those will be thrown as exception when the shader is compiled. For example, to get the CircleCrop shader working on some Android devices, global variable initializers must be constant expressions. This means that you need to move the lines 7 and 8 into the vec4 transition(vec2 p) { function block.

The complete example looks like this:

String circleCropText = "..."; // The shader code from https://gl-transitions.com/editor/CircleCrop with the changes to lines 7 and 8 as suggested above
float ratio = ...; // = width / height

GLTransitionsShaderTransition circleCropTransition = new GLTransitionsShaderTransition("uniform float ratio;\n" + circleCropText, 0.9F, Interpolation.smooth);

circleCropTransition.getProgram().bind(); // you need to bind the ShaderProgram before uniforms can be set
circleCropTransition.getProgram().setUniformf("ratio", ratio);
circleCropTransition.getProgram().setUniformf("bgcolor", 0.0F, 0.0F, 0.0F, 1.0F);

game.getScreenManager().pushScreen(myCoolScreen, circleCropTransition);