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
These input vertices are processed in a series of steps called a graphics pipeline that draws pixels on a 2D screen:
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.
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.