OpenGL Shading Language Summary

WebGL 1.0 is compatible with OpenGL ES 2.0, and permits GPU programming in GLSL ES, the OpenGL Shading Language for Embedded Systems.

GLSL resembles C++. It's statically typed and lexically scoped with curly brace block structure and semicolon statement endings.

• Program Structure

  Every GLSL program includes two shaders, the vertex shader and the fragment shader.

  Every shader should configure its precision by including the following line near the top.

  precision mediump float;

  Both the vertex and fragment shaders begin executing in their main function.

  void main() {
    …
  }

  Every vertex shader should write a 4-vector to gl_Position and every fragment shader should write a 4-vector to gl_FragColor.

• Data Types and Operations

  In addition to the C++ types void, bool, int, float, GLSL provides vector types vec2, vec3, vec4, and matrix types mat2, mat3, mat4, useful for geometric calculation.

  mat4 M, A, B;	Declaration
  vec4 v;	Declaration
  vec4 u = vec4(0.0, 0.1, 0.2, 0.4);	Initialization
  u.x   = 2.0;	Vector element access
  u     = u + v;	Arithmetic
  u.xyz = v.zyx	Swizzling
  M[3][3] = 1.0;	Matrix element access
  M = A * B;	Matrix multiplication
  u = M * v;	Vector transformation

• Storage Qualifiers

  Storage qualifiers indicate how variables are used and where their values come from. A declaration with no qualifier is an ordinary variable. Here are some qualified examples.

  • const float pi = 3.141592;

    const declares a variable with a constant value.

  • uniform mat4 modelMatrix;

    uniform declares a variable whose value is set by the application using gl.uniform or gl.uniformMatrix. A uniform variable cannot be modified by the shader.

  • attribute vec4 vertexPosition;

    attribute declares a vertex shader variable whose value is provided by a vertex buffer object. This buffer association is configured by the application using gl.vertexAttribPointer. An attribute variable cannot be modified by the shader.

  • varying vec3 fragmentColor;

    varying declares a variable that acts an output from the vertex shader and an input to the fragment shader. A varying variable must be set by the vertex shader, and cannot be modified by the fragment shader.

• Flow Control

  Flow control constructs are identical to C++. Looping:

  for (int i = 0; i < 8; i++) {
      …
  }

  Conditional:

  if (a < b) {
      …
  } else {
      …
  }

  Function definition:

  vec3 midpoint(vec3 a, vec3 b) {
      return (a + b) / 2.0;
  }

• Function Library

  GLSL includes a large library of useful functions. Here are some of the more heavily-used ones.

  dot(u, v)	Compute the dot product of two vectors.
  cross(u, v)	Compute the cross product of two vectors.
  normalize(v)	Return the normalization of a vector.
  length(v)	Return the length of a vector.
  pow(x, y)	Raise $x$ to the power $y$.
  sqrt(x)	Compute the square root.
  abs(x)	Return the absolute value.
  floor(x)	Return largest integer less than or equal.
  ceil(x)	Return smallest integer greater than or equal.
  max(x, y)	Return the larger of two values.
  min(x, y)	Return the smaller of two values.
  mix(x, y, a)	Compute the linear interpolation of two values.
  step(x, y)	Return 1 if $x\geq y$ or 0 otherwise.
  radians(a)	Convert degrees to radians.
  degrees(a)	Convert radians to degrees.
  sin(a)	Compute the sine of an angle in radians.
  cos(a)	Compute the cosine of an angle in radians.
  asin(x)	Compute the inverse sine of an angle in radians.
  acos(x)	Compute the inverse cosine of an angle in radians.

  All scalar functions operate element-wise on vector arguments.