Carl Bateman



  1. What is WebGL?
  2. What is a shader?
  3. A basic shader
  4. A custom shader THREE.js
  5. Vertex Shader - Vertex Displacement - A basic shader - SIMD
  6. Sphering the cube - animated
  7. Woozy cube - animated
  8. Fragment Shader - texture - vs Vertex Shader
  9. Image Processing
  10. Light

What is WebGL?

WebGL - OpenGL ES 2.0 for the Web

“WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces.
“It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content.
“It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers.”

What is WebGL?

Web standard
Combination of JavaScript API
and GLSL language

What is WebGL?

Canvas based
GPU access from browser
Control via shader programs
Rasteriser - 2D and 3D graphics
and more

How WebGL Works


Create Context/Canvas

Draw commands

Data control


Shader program

Vertex shader

   transform vertices

Fragment (pixel) shader

   transform pixels

How WebGL Works


Simple vertex shader


Simple fragment shader



Language features


Strongly typed

Optimised for geometry

Native support of vectors and matrices (no quaternions)

Built-in geometry functions e.g. cos, sin, dot, cross, reflect

Textures via sampler2D and texture2D (no 1D or 3D textures)


Vectors and Matrices

Vectors - vec2, vec3, vec4


vec3 v1, v2 = vec3(1.0, 2.0, 3.0);
v1[0] = v2.r;    // v1 == (1.0, 0.0, 0.0) = v2.rgb; // v1 == (1.0, 2.0, 3.0)
v1.zyx = v2.bbb; // v1 == (2.0, 2.0, 2.0)

Square matrices - mat2, mat3, mat4

Usual operations:

vec4 v3 = vec4((v1 + v2), 1.0); // v3 == (3.0, 4.0, 5.0)
v3 *= 2.0// v3 == (6.0, 8.0, 10.0)


Uniform, varying, attribute

Uniform - constant for shader program

Varying - passed from vertex shader to fragmen shader, usally interpolated

Attribute - passed per vertex to vertex shader

WebGL Workshop

Online Shader Editors (transitions)


glsl sandbox



Pixel Shader (on-line book)

WebGL Workshop

In-browser Shader Editors

Mozilla FireFox

WebGL Inspector

shdr (Chrome Web Store)

Shader Editor (Chrome Web Store)