12th March 2015
Worksheets
Worksheets in pdf format
Work files and worksheet
All work files and worksheet pdf as zip
|
Triangle 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 |
 |
|
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. |
 |