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.


Workshop 14 – Introduction to WebGL

Thursday, 12th March – Arrival from 6:15 for a 6:30 start
at The Skills Matter eXchange, London

Free, as usual

An introduction to WebGL and shaders (GLSL), for those who have no experience of WebGL. In this session we’ll cover the WebGL basics – set-up, basic interaction and simple animation.

The aim is to program a dice the user can “roll” with the mouse.

I’ll keep the maths to a minimum (no quaternions, honest).

The demo code from the first workshop should provide a good foundation, but there will be plenty of pretty (and hopefully informative) slides available… quite probably on-line “handouts”.

• A laptop with a browser that supports WebGL ( and an editor that can handle HTML and JavaScript.
• Some knowledge of HTML and programming, preferably JavaScript (or similar).
• Some features may require a server (e.g. image loading), although there are workarounds. ( and Visual Studio provide one, or you can use node.js or whatever you’re comfortable with.)

If you’re planning on attending please RSVP on our MeetUp site and register on the SkillsMatter site (