Shader Transition with libGDX

At the time of posting this, there is no concrete tutorial that shows exactly how to use shaders to create a transition effect in libgdx, unlike the many tutorials to do the same in Godot and Unity. This is the exception. This tutorial shows exactly how to get those fancy transition screen effects using only the shaders in libgdx. Example codes :

  • initialize the shader program

ShaderProgram.pedantic = false;
sp_transit = new ShaderProgram(roFile(shader_transit_vert), roFile(shader_transit_frag));

roFile() is a custom method for reading libGDX readonly files.

  • Update the shader

		sp_transit.setUniformf("cutoff", cutoff);
		sp_transit.setUniformf("smooth_size", smooth_size);

  • Draw the mask

if(drawCover) {
	begin(sp_transit, vp_screen);
	draw(image_default, region_default_shader, unitScreen);

begin(), draw(), end() are custom methods that call on libGDX SpriteBatch internally.
the image drawn here is the pattern for the transition.

  • Fragment shader logic

//my inputs
uniform float cutoff;
uniform float smooth_size;

void main()
    vec4 color = v_color * texture2D(u_texture, v_texCoords);
    float value = color.r;
    float alpha = smoothstep(
        cutoff + smooth_size, 
        value * (1.0f - smooth_size));
	gl_FragColor = vec4(color.rgb, alpha);

The is the shader code contained in the file referenced by shader_transit_frag.
This is the code that creates the transition effect. You do not need to change the code to
change the transition effect - the only thing that is changed is the texture/image mask.

Here is the link to the full working example. Download it and give it a try. I hope this helps out a lot.

Happy coding ;D !