WebGL Primer
A concise walkthrough of the WebGL pipeline — contexts, shaders, buffers, and draw calls — so you can reason about GPU-accelerated rendering in the browser.
1. The Canvas & Context
Every WebGL scene starts with a <canvas> element. Grab a webgl2 context — it gives you OpenGL ES 3.0 features like transform feedback and uniform buffer objects.
2. Shaders
Vertex shaders transform geometry; fragment shaders colour pixels. Compile them from GLSL source strings, link into a program, and extract attribute/uniform locations. A minimal pair is under 20 lines of GLSL each.
3. Buffers & Attributes
Upload vertex data (positions, normals, UVs) into GPU buffers with gl.bufferData. Bind them to attribute locations so the vertex shader can read per-vertex streams during each draw call.
4. Draw Calls
gl.drawArrays for unindexed geometry, gl.drawElements for indexed. Set uniforms (matrices, colours) before issuing the call. The GPU runs your shaders in parallel across every vertex and fragment.
5. The Render Loop
Use requestAnimationFrame to drive a loop: clear the colour/depth buffers, update uniforms, draw, and repeat. This keeps rendering synchronised with the display refresh rate — typically 60 Hz.
Next step: WebGL Textures — load images, generate mipmaps, and sample in fragment shaders.