This example represents one of the simplest WebGL programs, with the simplest possible shader program with the simplest possible vertex and fragment shaders. It gives some idea of how long-winded WebGL can be to set up. However, WebGL does scale well, but in any case for the remainder of the workshop we will use Three.js. This will make life a lot easier by taking the grind out of scene management, asset creation, etc..

The vertex shader starts at line 8, it passes along any vertex data unchanged, so rendering in 2D.
The fragment shader starts at line 17, and simply sets the colour of the triangle to that specified in JavaScript, green.

The shaders are placed in script tags for easy access. The type "x-shader" has no special meaning. Shader source code (GLSL) can be also stored as strings or as seperate files and read via XHR.

The colour of the triangle can be altered by setting the appropriate RGBA value at line 84. RGBA components should be in the range [0, 1].

The triangle's vertex positions can be changed by setting the XYZ co-ordinates at lines 91-93. WebGL renders into a 2×2×2 clip volume, so any values oustide the range [-1, 1] will be clipped truncating the triangle.

The triangle can be scaled by multiplying or dividing at line 13. Note that the multiplier or divisor must be a float (e.g. 2.0 or 0.5). Using an int (e.g. 2) will cause a compilation error.

The file 01.Basic-WebGL-with-controls.html adds some interaction to this basic demo.