Step‑by‑Step Guide to Rendering a Triangle with WebGL

This tutorial explains the entire process of rendering a simple triangle with WebGL, breaking the workflow into three main steps: placing data into a buffer, passing the buffer to shaders, and letting the shaders render the data on the GPU.

Create WebGL Context

First, obtain a WebGL rendering context from a

<canvas id=\"canvas-gl\" width=\"512\" height=\"512\></canvas>

element. Then set the viewport to match the canvas size using gl.viewport(0, 0, canvas.width, canvas.height) and clear the canvas with gl.clearColor(1.0, 1.0, 1.0, 1.0).

Create Shaders

WebGL uses a pair of shaders: a vertex shader and a fragment shader. A minimal vertex shader that passes the position directly to the GPU looks like:

attribute vec4 vPosition;
void main() {
  gl_Position = vPosition;
}

A simple fragment shader that outputs a solid red color is:

precision mediump float;
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

Create Shader Program

Compile each shader with gl.createShader, attach them to a program with gl.attachShader, link the program using gl.linkProgram, and then activate it with gl.useProgram(program). Helper functions can be used to streamline this process:

function createShader(gl, source, type) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    return shader;
  }
}

function createProgram(gl, vsSource, fsSource) {
  const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER);
  const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER);
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  return program;
}

Store Vertex Data in a Buffer

Create a vertex buffer object (VBO) with gl.createBuffer(), bind it using gl.bindBuffer(gl.ARRAY_BUFFER, buffer), and upload the triangle vertices:

const vertices = [
  -0.5, -0.5,
   0.0,  0.5,
   0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

Configure Vertex Attributes

Get the attribute location with gl.getAttribLocation(program, 'vPosition'), enable it, and describe the data layout:

const vPosLoc = gl.getAttribLocation(program, 'vPosition');
gl.enableVertexAttribArray(vPosLoc);
gl.vertexAttribPointer(vPosLoc, 2, gl.FLOAT, false, 0, 0);

Render the Triangle

Clear the color buffer and draw the three vertices as a triangle:

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

The article also discusses other drawing modes (POINTS, LINES, LINE_STRIP, LINE_LOOP, TRIANGLE_STRIP, TRIANGLE_FAN) and explains how attribute normalization works for different data types.

For further reading, references include the book "Interactive Computer Graphics – A Top‑Down Approach with WebGL" and MDN WebGL documentation.