Workshop 14 – Introduction to WebGL

12th March 2015

Worksheets in pdf format

Work files and worksheet
All work files and worksheet pdf as zip

Pretty much the simplest complete WebGL program possible:
+ a shader program (with vertex and fragment shaders)
+ a WebGL context is obtained and attached to a canvas
+ the variable locations within the shader are acquired
+ the scene is drawn

No transformation matrix is used, so WebGL is acting
as a two-dimensional renderer.

Triangle with some interaction
The addition of a dat.GUI control allows some control over the triangle’s colour and the position of one vertex.

In particular, changing the vertex position outside the volume (-1,-1,-1) – (1,1,1) will clip the triangle. Not really obvious in the x and y directions, but in z the triangle is clearly truncated.

Square with boilerplate
Writing WebGL code it quickly becomes obvious how repetitive and verbose the code can become.

This code simplifies the set-up of the WebGL context and shader program by using boilerplate.

Rotatable square
The square can rotated using mouse or touch.

Note: There is no perspective projection applied.

Rotatable cube (Monochrome)
The cube can rotated using mouse or touch.
All green and a bit bland.

Rotatable cube (Multicoloured)
Adding a bit of colour to each face for a bit of visual interest.

Rotatable dice (from local data)
Rotatable dice (from external data)
We have such sights to show you.