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.
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.
Both the vertex and fragment shaders begin executing in theirmain
function.
Every vertex shader should write a 4-vector to gl_Position
and every fragment shader should write a 4-vector to gl_FragColor
.
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 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 constructs are identical to C++. Looping:
Conditional:
Function definition:
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.