Introduction to WebGL

This article assumes that you have an advanced understanding of JavaScript, but assumes nothing about your prior knowledge of computer graphics.

Computers represent visual information in discrete units called pixels.

Computers understand all shapes as collections of points, lines, and triangles. Collectively, these are referred to as primitives.

The process of computing the mapping from scene geometry (primitives) to pixels (actually fragments, more in the next article) is called rasterization. Compared to other rendering techniques (such as ray tracing), rasterization is extremely fast and therefore best suited for use in real-time applications such as video games.

OpenGL is a specification for an API that can be used to render 3D scenes. WebGL is a specification that is based on OpenGL but is designed to work in the browser. The WebGL 2.0 specification (based on OpenGL ES 3.00) can be found here.

The WebGL API

The WebGL API allows developers to interface with WebGL via JavaScript. It can be accessed through the WebGL2RenderingContext class, which can be instantiated with the HTMLCanvasElement.getContext method.

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl2");

Documentation for the WebGL API can be found here.

It can be helpful to use a library such as μGL to make working with the WebGL API less tedious.

The next article is about shaders.