Part 1 - Setup a basic WebGL application
-
Create a HTML document with a 512x512 canvas element andwrite a script to create a WebGL
context. [Angel 2.8]
-
Setup a viewport and clear the canvas with the color cornflower blue (0.3921, 0.5843,
0.9294, 1.0). [Angel 2.5.1]
-
If not already done, move the script to a separate JavaScript file and include it in the
HTML document.
-
Setup the WebGL context using Angel’s “setupWebGL”. You can use the window.onload event
to initialize and setup the application. [Angel 2.8]
|
|
Part 2 - Shaders and buffers
-
Load and compile a shader program. Write a basic vertex shader and a constant color
fragment shader. [Angel 2.8.3 to 2.8.8]
-
Setup a vertex buffer with the corresponding attribute pointer. Add the coordinates and
draw three points of size 20 pixels [Angel 2.4, 2.8, and 2.5.3]
|
|
Part 3 - Triangles
-
Change the code in the previous example to draw triangles instead of points. [Angel
2.4.2]
-
Extend the application to include a second color buffer and draw the triangle with a
red, green and blue vertex color. [Angel 2.5.1 and 2.10]
|
|
Part 4 - A rotating square
-
Add a second triangle to the previous part such that you have a quadrilateral (which is
maybe even a square). [Angel 2.4]
-
Center your quad (short form of quadrilateral) and rotate it such that it has its
vertices on the coordinate axes.
-
Add a rotation so the quad rotates around its center. Animate the rotation angle over
time. Use requestAnimFrame to continuously call your render function. [Angel 3.1]
|
|
Part 5 - A fan of triangles
-
Create and draw a circle using the triangle fan drawing mode. [Angel 2.4.2]
-
Make the circle bounce up and down over time.
|
|