You know, that thing that draws teapots in your internet browser...

WebGL is
a rasterisation engine

It means I can draw these awesome things with it!

Rasterisation works
like this

vertices

fragments
(pixels)

Rasterisation needs two programs

vertex program
to define vertices

fragment program
to define pixel colors

0.6, 0.5

0.8, -0.45

-0.3, -0.5

black

white

gray

Wait a second...

rasterisation programs run on the GPU, but we can't run JavaScript there...

Hmmm...

I thought JS could run anywhere

What if?..

Nah, forget it.

Let's use
ARB assembly language

!!ARBvp1.0
TEMP vertexClip;
DP4 vertexClip.x, state.matrix.mvp.row[0], vertex.position;
DP4 vertexClip.y, state.matrix.mvp.row[1], vertex.position;
DP4 vertexClip.z, state.matrix.mvp.row[2], vertex.position;
DP4 vertexClip.w, state.matrix.mvp.row[3], vertex.position;
MOV result.position, vertexClip;
MOV result.color, vertex.color;
MOV result.texcoord[0], vertex.texcoord;
END

Okay, let's not use
assembly...

Let's use GLSL

(OpenGL Shading Language)

attribute vec4 a_Coords;

void main() {
  gl_Position = a_Coords;
}

This looks like C.
I don't know C, but
I can deal with it!

GLSL has many built-in features
for vectors and matrix transformations

It's awesome!

We still need JS though...

const gl = canvasEl.getContext('webgl');
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, ...);
gl.compileShader(vs);

GLSL

attribute vec4 a_Coords;

void main() {
  gl_Position = a_Coords;
}

JavaScript WebGL API

Now let's combine
JavaScript and GLSL
to form Megazord!!

No... let's just draw
a really sad triangle

Make web graphics great again!

WebGL

By Oleg Sklyanchuk

WebGL is a rasterisation engine