Understanding WebGL from Scratch: Fragment Shaders, Shape Drawing, and Distance Field Composition

Building on the previous WebGL introduction, this article first clarifies that the default canvas rendering relies on two triangles, a process known as triangulation. It then shifts focus to fragment shaders to demonstrate GPU-based drawing techniques.

The tutorial begins with basic single-color rendering and shows how to split the canvas using coordinate thresholds. Instead of conditional statements, it introduces the step function for efficient binary transitions:

#version 300 es
precision highp float;
out vec4 FragColor;
uniform vec2 resolution;
void main() {
vec2 st = gl_FragCoord.xy / resolution;
FragColor.rgb = step(0.5, st.x) * vec3(1.0);
FragColor.a = 1.0;
}

The step function is highly effective for generating geometric shapes, such as circles, by evaluating distances from a center point. However, direct usage often produces jagged edges. To achieve anti-aliasing, the smoothstep function is used to interpolate smoothly across boundaries.

By subtracting two smoothstep evaluations, developers can draw outlined shapes like rings. This pattern is encapsulated into a universal stroke function:

float stroke(float d, float d0, float w, float smth) {
float th = 0.5 * w;
smth = smth * w;
float start = d0 - th;
float end = d0 + th;
return smoothstep(start, start + smth, d) - smoothstep(end - smth, end, d);
}

This approach forms the foundation of distance field composition, where graphics are constructed through mathematical distance calculations rather than vertex arrays. The article concludes by challenging readers to apply these principles to render a multi-period sine wave.