OpenGL fragment shaders (LWJGL, raylib)

If you write a game or engine in Java with LWJGL, C with raylib, or any other OpenGL binding, you will load GLSL source like this. The export gives you a complete #version 330 core fragment shader and tells you which uniforms to send each frame.

Start the first lesson in OpenGL (LWJGL, raylib) Browse challenges

Things to know about GLSL

The export declares uniform float time; and uniform vec2 resolution;; set them every frame.
Draw one full-screen triangle or quad and the fragment shader does the rest.
LWJGL: glUniform1f(glGetUniformLocation(program, "time"), (float) glfwGetTime()).
raylib: use SetShaderValue with GetShaderLocation(shader, "time").

Cheat sheet

Idea	Write
Vectors	`vec2 vec3 vec4`
Declare a value	`float d = length(p);`
A function	`float circle(vec2 p, float r) { ... }`
Matrices	`mat2 mat3, multiply with M * v (this site writes v * M for lesson rotations)`
Blend	`mix(a, b, t)`
Fractional part	`fract(x)`
Clamp to 0..1	`clamp(x, 0.0, 1.0)`
Remainder	`mod(a, b) (always positive for positive b)`
Choose	`c ? a : b`
Angle of a vector	`atan(y, x)`
Time in seconds	`time`
Pixel position	`uv (0..1, bottom-left)`
Width / height	`aspect`
Entry point	`vec4 frag(vec2 uv) { return …; }`

Handy built-ins: sin cos abs sign floor ceil fract step smoothstep clamp min max pow exp sqrt length distance dot cross normalize reflect

Gotchas

Every pixel runs on its own, with no memory of other pixels.
Declare a function above the place you use it.
Prefer 2.0 over 2 in maths. This site fixes most cases for you; real engines may not.
Loops need a small fixed count: for (int i = 0; i < 5; i++).

Example: a glowing ring

The same shader as it is written for OpenGL (LWJGL, raylib):

vec4 frag(vec2 uv)
{
    vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
    float d = length(p);
    float m = 1.0 - smoothstep(0.0, 0.02, abs(d - 0.3));
    vec3 bg = vec3(0.08, 0.08, 0.12);
    vec3 fg = vec3(0.4, 0.9, 1.0);
    return vec4(mix(bg, fg, m), 1.0);
}

Exporting to OpenGL

Use it with any full-screen quad or triangle. Each frame, set the uniforms. LWJGL: glUniform1f(glGetUniformLocation(program, "time"), (float) glfwGetTime()); and glUniform2f(glGetUniformLocation(program, "resolution"), width, height). raylib: SetShaderValue with GetShaderLocation(shader, "time").

#version 330 core
// ShaderBattle: Glowing ring
uniform float time;        // seconds
uniform vec2 resolution;   // window size in pixels
#define aspect (resolution.x / resolution.y)
out vec4 fragColor;

vec4 frag(vec2 uv)
{
    vec2 p = (uv - 0.5) * vec2(aspect, 1.0);
    float d = length(p);
    float m = 1.0 - smoothstep(0.0, 0.02, abs(d - 0.3));
    vec3 bg = vec3(0.08, 0.08, 0.12);
    vec3 fg = vec3(0.4, 0.9, 1.0);
    return vec4(mix(bg, fg, m), 1.0);
}

void main()
{
    fragColor = frag(gl_FragCoord.xy / resolution);
}

Questions

Which OpenGL version does the export need?

OpenGL 3.3 core. It also runs on newer versions.

Other languages

Unity (Built-in) · Unity (URP) · Unreal · Shadertoy / WebGL · three.js · GameMaker · LÖVE (Lua) · Godot · Apple (iOS, macOS) · WebGPU / Bevy