We walk through the WebGL 2 Fundamentals state diagram, an interactive tool that will help to demystify the OpenGL API. Nobody would ever accuse OpenGL of being intuitive or easy to use! We walk through an example that draws a colored triangle, truly the “Hello, world!” of graphics programs, and then try a more complex example that uses perspective projection, texture mapping, and diffuse lighting.
Notes/highlights:
- Here’s a link to the WebGL 2 Fundamentals state diagram tool: https://webgl2fundamentals.org/webgl/lessons/resources/webgl-state-diagram.html
- We say a lot of incorrect things. Here’s one from this session: contrary to what Jeff said, the three-cube example was in fact applying lighting to the decal texture.
- Beast Wars, a late 90s animated series based on Transformers: https://en.wikipedia.org/wiki/Beast_Wars:_Transformers
- The technique of applying images to surfaces of 3D geometry is called texture mapping: https://en.wikipedia.org/wiki/Texture_mapping
- In some settings, it’s useful to treat an image like a stream of numbers, or “signal”. Many examples exist in the world of compression methods based on discrete cosine transform, including the well-known JPEG format: https://en.wikipedia.org/wiki/Discrete_cosine_transform
- 3D graphics systems use the barycentric coordinate system to position things on triangles: https://en.wikipedia.org/wiki/Barycentric_coordinate_system#Barycentric_coordinates_on_triangles
- For a nice real-world example of the contrast between perspective-correct and affine interpolation for textures, see the “Doom on PSX: GPU” section of Fabien Sanglard’s article on the original PlayStation port of Doom: https://fabiensanglard.net/doom_psx/index.html
- Fabien Sanglard also wrote an analysis of the Doom PC source, including its novel techniques for representing 3D space on mid-90s consumer hardware: https://fabiensanglard.net/doomIphone/doomClassicRenderer.php
- Descent, one of the first 3D games to offer 6 degrees of freedom: https://en.wikipedia.org/wiki/Descent_(1995_video_game)
- Darwinia, an idiosyncratic, visually distinctive real-time strategy game from Introversion, makers of Uplink: https://en.wikipedia.org/wiki/Darwinia_%28video_game%29
- Essential Math for Games and Interactive Applications, one of the standard texts on 3D math, comes highly recommended, but is not always very beginner-friendly: http://www.essentialmath.com
- Planetary Annihilation, another RTS with striking aesthetics: https://en.wikipedia.org/wiki/Planetary_Annihilation
- Mipmaps, a curiously-named technique for getting more precise textures at different levels of detail: https://en.wikipedia.org/wiki/Mipmap