Your First Triangle

What this page does

It puts one green triangle on the screen. That is all it does, and it takes about fifty lines. By the end of this course you will draw a whole solar system in fewer lines than that. Both facts are worth holding at once.

Two programs, not one

The program you hand the graphics card comes in two halves. They run at different times and they have different jobs.

Both are written in a language called GLSL, not in JavaScript. That is why they sit in triangle.js as strings. The graphics card compiles them while the page is running.

precision mediump float;
uniform vec3 colour;

void main() {
    gl_FragColor = vec4(colour, 1.0);
}

A colour here is four numbers: red, green, blue, and alpha. Each one runs from 0.0 to 1.0. Not from 0 to 255, and not #4ade80. The toGl function in the file turns a hex colour into the three numbers WebGL wants, because hex is how the web writes colours and this is not the web any more.

Where things are

WebGL does not measure in pixels. It has its own coordinates, and they are the same on every canvas whatever size it is.

        (0, 1)
           |
(-1, 0) ---+--- (1, 0)
           |
        (0, -1)

• The middle of the canvas is 0, 0.
• The left edge is -1. The right edge is 1.
• Up is positive. On a 2D canvas, down is positive. This catches everybody once.

Getting numbers into a shader

A shader cannot see your JavaScript variables. There are two ways to hand it a number, and the difference between them is the whole model.

The corners live in a buffer, which is a block of memory on the graphics card. You copy your numbers into it once. The card reads them from there every time it draws, without asking JavaScript again.

When nothing appears

The only way to find out is to ask. That is what buildShader does in this file, every single time:

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    report.textContent = "Shader problem: " + gl.getShaderInfoLog(shader);
    return null;
}

Write that check before you write your first shader, not after your first blank canvas. Try it now: delete a semicolon inside fragmentShaderSource and run the page. It tells you the line.

The order it happens in

1. 1

   Ask the canvas for WebGL

   A canvas can hand out different drawing tools. "2d" is the one from the platformer course. "webgl" is the graphics card.

   var gl = canvas.getContext("webgl");

2. 2

   Compile both shaders

   Each one is compiled on its own, and each one can fail on its own.

3. 3

   Link them into a program

   A program is the two shaders joined together. The graphics card runs programs, not loose shaders.

   var program = gl.createProgram();
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   gl.linkProgram(program);
   gl.useProgram(program);

4. 4

   Put the corners in a buffer

   Six numbers, read two at a time as x and y. Then tell the vertex shader that its corner attribute is made of 2 floats at a time.

5. 5

   Wipe the canvas, then draw

   clear fills it with the background. drawArrays is the line that actually draws. Three corners, read as one triangle.

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