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.

μGL

It can be helpful to use a library such as μGL to make working with the WebGL API less tedious. Throughout this tutorial series, there will be examples that demonstrate how to do something with μGL after it is demonstrated with vanilla WebGL. The entrypoint to μGL is a Context, which is similar in function to a WebGL2RenderingContext.

const canvas = document.querySelector("canvas");
const gl = Context.get(canvas);

The next article is about shaders.