liminfo

GLSL Shader Reference

Free reference guide: GLSL Shader Reference

25 results

About GLSL Shader Reference

GLSL (OpenGL Shading Language) is the C-like language used to write vertex and fragment shaders that run directly on the GPU. This reference covers the full set of built-in types, qualifiers, mathematical functions, vector functions, texture sampling functions, and built-in variables used in both GLSL 1.00 (WebGL 1) and GLSL 3.00 ES (WebGL 2). Whether you are building real-time graphics effects, post-processing pipelines, or generative art in tools like Shadertoy, this reference has you covered.

Graphics programmers, game developers, and creative coders are the primary audience for this reference. The data is organized into six categories: Types (float, vec2, vec3, vec4, mat4, sampler2D, samplerCube, int, bool), Qualifiers (uniform, in/out, varying, attribute, const), Math Functions (sin/cos/tan, pow/sqrt/abs, min/max/clamp, mix, step/smoothstep), Vector Functions (length, normalize, dot, cross, reflect), Texture (texture2D/texture), and Built-in Variables (gl_Position, gl_FragColor, gl_FragCoord).

Each entry in the reference includes the exact syntax, a one-line description, and a concise working code example. The reference distinguishes between GLSL 1.00 idioms (attribute, varying, gl_FragColor) and modern GLSL 3.00 ES equivalents (in/out layout qualifiers, user-defined output variables), which is especially useful when porting shaders between WebGL versions or migrating legacy code.

Key Features

  • Complete GLSL type system: float, vec2, vec3, vec4, mat3, mat4, sampler2D, samplerCube, int, and bool
  • Qualifier reference covering uniform, in/out (GLSL 300 ES), varying and attribute (GLSL 100), and const
  • Full set of built-in math functions: trigonometric (sin, cos, tan), power/root (pow, sqrt, abs), range (min, max, clamp)
  • Interpolation functions: mix (linear interpolation/lerp), step, and smoothstep for smooth transitions
  • Vector math functions: length, normalize, dot product, cross product, and reflect
  • Texture sampling: texture2D (WebGL 1 / GLSL 100) and texture (WebGL 2 / GLSL 300 ES)
  • Built-in output variables: gl_Position (vertex shader output), gl_FragColor (fragment output in GLSL 100), and gl_FragCoord (screen-space coordinates)
  • Side-by-side GLSL 100 vs GLSL 300 ES code examples for easy version migration

Frequently Asked Questions

What is GLSL and why do I need a reference?

GLSL is the shading language used in OpenGL and WebGL to program the GPU pipeline. It has a unique set of built-in types (vec2, mat4) and functions (mix, smoothstep) not found in general-purpose languages, making a dedicated reference invaluable for day-to-day shader development.

What is the difference between GLSL 1.00 and GLSL 3.00 ES?

GLSL 1.00 is used with WebGL 1 and uses attribute/varying keywords plus gl_FragColor. GLSL 3.00 ES (WebGL 2) replaces these with in/out qualifiers and user-defined output variables. The reference clearly labels which version each syntax applies to.

How do I pass data from JavaScript to a GLSL shader?

Use uniform variables. Declare them in GLSL as "uniform float uTime;" and set them from JavaScript with gl.uniform1f(location, value). This reference covers the uniform qualifier and shows typical examples like uTime for animation and uTexture for sampler2D.

What is the difference between vec2, vec3, and vec4?

vec2 holds two floats (e.g., UV coordinates), vec3 holds three (RGB color or XYZ position), and vec4 holds four (RGBA color or homogeneous coordinates). You can access their components with .x/.y/.z/.w or swizzle them with .xy, .rgb, etc.

What does smoothstep do and when should I use it?

smoothstep(edge0, edge1, x) returns a smooth Hermite interpolation between 0 and 1. Unlike the sharp step() function, it produces a soft, gradual transition which is ideal for anti-aliasing edges, fading effects, and procedural textures.

How does texture2D differ from texture in GLSL?

texture2D is the GLSL 1.00 (WebGL 1) function for sampling a 2D texture. In GLSL 3.00 ES (WebGL 2), it is replaced by the overloaded texture() function which works with all sampler types. For portability, prefer texture() when targeting WebGL 2.

What is gl_FragCoord and how do I use it for screen effects?

gl_FragCoord.xy gives the window-space position of the current fragment in pixels. Dividing by the resolution uniform (e.g., vec2 uv = gl_FragCoord.xy / uResolution) gives normalized UV coordinates from 0.0 to 1.0, which is the standard approach for fullscreen post-processing shaders.

Can I use this reference for Shadertoy shaders?

Yes. Shadertoy uses GLSL ES with a fragment-shader-only model. The math, vector, and texture functions in this reference all apply directly. Note that Shadertoy uses iTime instead of uTime and provides iResolution as a built-in uniform, but the GLSL functions themselves are identical.