Computer Graphics · 2020

2D Shapes

Simple shapes: the first thing you draw in plain WebGL. Four flat shapes, each with its vertices in a buffer and a different way of joining them into triangles.

The shapes

  • Square 4 vertices in a strip (TRIANGLE_STRIP): two triangles.
  • Triangle 3 separate vertices (TRIANGLES).
  • Diamond another strip, of 5 vertices: the last one repeats the first.
  • Pacman a fan (TRIANGLE_FAN) from the center, with 27 points on the edge; the missing ones leave the mouth.

The trick

The GPU only knows how to paint triangles. The primitive tells it how to read the vertex list: three at a time, as a strip (each new vertex closes a triangle with the two before it) or as a fan (they all share the first one). With "Points" you see the vertices just as they are in the buffer.

Made with

WebGL with no 3D library: a vertex shader that projects each vertex with a 45° perspective, a fragment shader with one color per shape, and gl-matrix to move each shape into place.