Introduction to Shaders & GLSL

A shader is a small program that runs on the GPU as part of the graphics (or compute) pipeline.

1.1 What is a shader?

A shader is a small program that runs on the GPU as part of the graphics (or compute) pipeline. Shaders run massively in parallel: a vertex shader runs once per vertex, a fragment shader once per pixel sample — millions of invocations per frame.

1.2 What is GLSL?

GLSL (OpenGL Shading Language) is a C-like, strongly typed language for writing shaders. It is used by:

OpenGL (desktop) — GLSL 1.10 → 4.60.

OpenGL ES / WebGL — GLSL ES 1.00 (WebGL 1), 3.00 (WebGL 2), 3.10/3.20 (ES 3.1/3.2).

Vulkan — GLSL compiled to SPIR-V (via glslang/shaderc).

Tools & platforms: Shadertoy, TouchDesigner, Three.js, Babylon.js, Godot (GLSL-like), Unity (via cross-compilation), Blender, game engines, creative coding (Processing/p5.js, openFrameworks).

1.3 Key characteristics

C syntax with built-in vector and matrix types (vec3, mat4).

Swizzling (color.rgb, pos.xzy).

Rich built-in math library (dot, cross, normalize, mix, smoothstep, reflect).

No pointers, no recursion, no dynamic memory allocation, no strings.

Each invocation is independent; communication between invocations is limited (except in compute shaders).

1.4 History

OpenGL ES 2.0 / WebGL 1 (2011) OpenGL 3.0–3.2 (core profile, geometry shaders) OpenGL 3.3 / 4.0 (tessellation)

OpenGL 4.2 / 4.3 (image load/store, compute shaders, SSBOs) OpenGL ES 3.0 / WebGL 2 (2017) 4.40, 4.50; GLSL ES 3.10 OpenGL 4.4/4.5, ES 3.1 (compute) Vulkan GLSL (GL_KHR_vulkan_glsl)

OpenGL 4.6 (SPIR-V ingestion) — the final desktop GLSL version ray tracing (GL_EXT_ray_tracing), mesh shaders (GL_EXT_mesh_shader), subgroups

The web is moving to WebGPU with WGSL, and many engines use HLSL — but GLSL concepts transfer directly, and GLSL remains essential for OpenGL, WebGL, Vulkan, Shadertoy, and creative coding.