Graphics Demos
Computer Graphics Demos
I use the following demos as a help in teaching a first course on Computer Graphics, that is based on old-school OpenGL. The demos are built in such a way to make easier teaching of graphics for beginners in OpenGL and WebGL. As such they are not optimal, not fast loading and not fast performing, and have many repetitions of redundant code that could be refactored extensively. There also some intentional errors, that are discussed during classes and the students have to find and fix them as part of their homework assignments.
You are free to use or link to the demos on this page for any purposes, but please include a link back and a reference to me as the original author of the main code, and to the respective authors of all additional code pieces. The code structure, ideas and techniques and all additional utility libraries are based on the code samples in the "OpenGL Super Bible" and "OpenGL Programming Guide", while the WebGL demos are based on code structure and ideas from Learning WebGL website.
WebGL Demos
OpenGL Demos
The demos build a scene with a room and 4 spiral staircases, gradually introducing 3D construction, lighting, textures, Bézier surfaces, blending, selection and feedback, shadows and reflection.
- Demo 01 - A basic 2D square in colours
- Demo 02 - 3D construction of a room with 4 staircases, no lighting, built based on relative 3D transformations
- Demo 03 - Lighting an Empty Room, the walls are made from grids of rectangles
- Demo 04 - Demo03 + the 4 staircase are back, with lighting and materials
- Demo 05 - Empty room, code for error detection and bitmap font
- Demo 06 - Demo04 + The stairs are made with Bézier surfaces
- Demo 07 - Demo06 + Textures (use keys [3] / [4] to rotate one of the textures)
- Demo 08 - Blending used to obtain transparency (keys [5] / [6] change alpha)
- Demo 09 - Selection and Feedback
- Demo 10 - Shadows and Reflection using a stencil buffer to improve visualization.