Learn how to create a fade to black screen transition in Shadertoy using the GLSL programming language. Mix textures and use easing functions to create this classic screen transition effect.

Constants

Create a constant for the fade colour.

const vec4 FADE_COLOUR = vec4(0.0, 0.0, 0.0, 1.0);

Create a constant for the transition speed.

const float SPEED = 0.25;

Easing functions

Create two easing functions. One for the fade out, and one for the fade in. I’ve used the cubic version from here.

float EaseInCubic(float x)
{
    return x * x * x;
}

float EaseOutCubic(float x)
{
    return 1.0 - pow(1.0 - x, 3.0);
}

Texture coordinates

Calculate the normalised pixel coordinates (from 0 to 1), inside the main function.

vec2 uv = fragCoord / iResolution.xy;

Textures

Select two textures and get there colour values.

vec4 tex1 = texture(iChannel0, uv);
vec4 tex2 = texture(iChannel1, uv);

Progress

Calculate the progress value using time and the speed constant from earlier. The fract function will make the value loop in the 0 to 1 range.

float progress = fract(iTime * SPEED);

Easing

Use the easing functions.

float p1 = EaseOutCubic(progress);
float p2 = EaseInCubic(progress);

Mix

Finally mix together the two textures with the fade colour using the progress values.

vec4 a = mix(FADE_COLOUR, tex1, 1.0 - p1);
vec4 b = mix(FADE_COLOUR, tex2, p2);
fragColour = mix(a, b, progress);

Shadertoy

Full Shadertoy code and demo available here.

Conclusion

Thank you for reading this tutorial. Let me know in the comments section if you enjoyed it, or have any questions!