Create a Red Screen with GLSL: A Simple Four‑Line Fragment Shader Tutorial

Introduction

Recently I started learning glsl. While searching for open‑source examples I found a fragment shader that Elon Musk shared, which achieves an effect in only four lines. As a GLSL beginner I share what I learned, focusing on fragment shaders.

Effect Preview

Getting Started with GLSL

First, understand the differences between Canvas 2D drawing and GLSL fragment shading.

Canvas 2D drawing

Traditional painting: draw stroke by stroke.

Origin at top‑left (0,0), y‑axis points down.

Imperative API: moveTo(), lineTo(), fill().

Commands execute sequentially; later strokes overwrite earlier ones.

GLSL fragment shading

All pixels are computed in parallel.

Coordinate system usually centered at (0,0), y‑axis points up.

Functional style: given a coordinate, return a color.

All pixels are rendered “instantly”.

GLSL can feel like ancient movable‑type printing: every pixel is rendered simultaneously, and geometry must be expressed mathematically.

Basic Red Fragment Shader

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

gl_FragColor is the built‑in output variable of a fragment shader; it determines the final color of each pixel.

Core Concept of gl_FragColor

It is the “final answer” for every pixel, telling the GPU what color to display.

The four components of vec4 are:

r (Red): 0.0 – 1.0

g (Green): 0.0 – 1.0

b (Blue): 0.0 – 1.0

a (Alpha): 0.0 = transparent, 1.0 = opaque

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

Because r = 1.0, the shader renders a solid red fill.

How It Works

The GPU invokes the fragment shader once for every pixel on the screen.

Each invocation runs the main() function. gl_FragColor is set to red.

All pixels receive the same red value.

The final image is a uniformly red canvas.

More Examples

Horizontal Gradient (X coordinate)

void main() {
    vec2 pos = gl_FragCoord.xy / u_resolution.xy;
    gl_FragColor = vec4(pos.x, 0.0, 0.0, 1.0);
}

Vertical Gradient (Y coordinate)

void main() {
    vec2 pos = gl_FragCoord.xy / u_resolution.xy;
    gl_FragColor = vec4(pos.y, 0.0, 0.0, 1.0);
}

Radial Gradient

void main() {
    vec2 pos = gl_FragCoord.xy / u_resolution.xy;
    pos = pos * 2.0 - 1.0;
    float dist = length(pos);
    gl_FragColor = vec4(dist, dist, dist, 1.0);
}

Glowing Ring

void main() {
    vec2 pos = gl_FragCoord.xy / u_resolution.xy;
    pos = pos * 2.0 - 1.0;
    float dist = length(pos);
    float ring = abs(dist - 0.5);
    float brightness = 0.1 / ring;
    gl_FragColor = vec4(brightness, brightness, brightness, 1.0);
}

Diagonal Line Definition

The diagonal consists of points where x = y. For those points p.x - p.y = 0. Near the diagonal the expression 0.01 / (p.x - p.y) grows large, creating a bright line.

float line = 0.01 / (p.x - p.y);

Mathematical rule: the closer the denominator is to zero, the larger the result; this is why the ring glows brightest where the denominator is smallest.

Conclusion

GLSL fragment shaders are powerful yet challenging; experimenting with colors, gradients, and mathematical tricks quickly yields impressive visual effects.

References

Xor: www.shadertoy.com/user/Xor

The Book of Shaders: thebookofshaders.com/