WebGL / Tutorials / Concepts

We’ll start coding soon in Tutorial #1: Triangle. Feel free to jump ahead. This info is here if you are feeling completely lost.

Basic WebGL Concepts

A WebGL program is setup and initiated from JavaScript code. Its input is a list of 3D coordinates called vertices (plural of vertex). Vertices can be drawn as individual points, lines between pairs of vertices, or triangles between groups of three vertices. Multiple triangles are connected to produce 3D surfaces.

These input vertices are processed in a series of steps called a graphics pipeline that draws pixels on a 2D screen:

input vertices (3D)
Vertex Shader
transformed vertices (3D)
pixel coordinates (2D)
Fragment Shader
color of each pixel

WebGL has two places in the graphics pipeline where we can insert a custom algorithm called a shader. The first one is a vertex shader. It takes the input vertices and transforms them. It can move, rotate, or deform objects.

The transformed vertices are then sent to the rasterizer. The vertices are interpreted as triangles (or lines or points) and projected onto a 2D grid via a process called rasterization. This process converts mathematical representations of shapes (like SVG) to a grid of pixels (like PNG). In WebGL it converts vertices to pixel coordinates. This step of the pipeline is automatic and can’t be customized.

Next, the second shader runs. It’s called a fragment shader. A fragment is effectively a pixel, so it’s also called a pixel shader. The shader runs on every pixel of a visible triangle (or line or point) as determined during rasterization. It converts 2D pixel coordinates to colors in RGBA format. Your computer draws these colors on the screen.

Shading Language

WebGL 2 shaders are written in the OpenGL ES Shading Language version 3, or “GLSL ES 3” for short. It’s an open standard for cross-platform 3D graphics managed by the non-profit Khronos Group. GL stands for “Graphics Library”. ES stands for Embedded Systems, like mobile devices, but it’s supported by desktop/laptop too for maximum compatibility.

Shading language programs run on the GPU. Compared to CPUs, GPUs have a smaller, more specialized set of operations available, like matrix multiplication. The GPU runs many more operations in parallel compared to a CPU. This is well suited for graphics-oriented tasks like calculating millions of pixels’ colors at 60 frames per second.

To run in parallel, shading language programs process each vertex or pixel coordinate in complete isolation. Vertex shader algorithms take a single vertex and output a single vertex. Fragment shader algorithms take a single pixel coordinate and output a single color. The algorithm doesn’t know what any of the other input values are and it can’t remember its previous output. These fundamental constraints make graphics algorithms significantly different from traditional programming languages.

In order to learn shading language, let’s use it! Start with Tutorial #1: Triangle.