Computer Graphics

Computer Graphics is a field used extensively in games, movies and applications. Even this text right here is drawn via an computer graphics algorithm executed in the GPU and sent to your screen. All the computer games you play and movies you watch nowadays use a lot of computer graphics. We can talk about realistic wet surface illumination and reflection; motion blur in a racing game; a large procedurally generated orc army in an epic movie etc.

We can also talk about computer generated art; CAD software in engineering; data visualization; or even simulations


Because computers understand math, we need to specify our graphics in the language of math. There are many levels of computer graphics software and API-s. On the most bottom level, we of course have some machine commands that the GPU executes. Because there are different GPU manufactures, the direct commands vary. Also programming at the most lowest level is very time consuming and no one does that. That is why we have middleware like WebGL, OpenGL and DirectX that expose and wrap the graphics related calls. There are even mode libraries built on top of those middleware API-s. The higher level libraries allow to easily use specific algorithms and methods that the GPU actually is not supposed to know. For example in a scene with a cube and a light source, GPU will have no idea how to calculate the light intensities on that cube. Thus GPU API-s like OpenGL should also not be responsible for doing that. Higher level libraries like THREE.js will have some common methods for doing it implemented though, so the programmer doesn't have to rewrite the most used methods.

We can also move to the most highest levels of 3D modelling software and game engines. There usually exists some renderer that already knows what algorithms to execute when you want the GPU to draw (render) some specific thing. Because there are a lot of algorithms, there are a lot of parameters and methods to use. Of course everything also depends on your input data (assets). For example you might want to have an approximation of a sphere with 3 layers of semi-transparent textures, a corresponding normal map for more a granular surface illusion and some curved movement of that sphere in time.



The are many ways to program graphics in a computer. As introduced previously, we can have different layers that utilize some graphics algorithms underneath. For example if we tell a Java application to draw a button, it will at some point tell the GPU the different colors and borderlines to draw. Even the text will be converted into lines and curves that are then converted to pixels on our screen.

In this course we will look at two approaches in two somewhat different environments.

C++ Program

Large number of computation heavy software uses C++ as a choice of language for the critical parts. That is because C++ is compiled into machine code and often optimized intensively in the process. Although C++ might not be the easiest or the fastest language for the actual implementation, it has imperative and object-oriented features. This means that knowing another imperative language, it is easy to follow the code execution of a C++ program. It is also a general purpose language so you can do pretty much anything with just C++.

For 2D graphics we will be using the Allegro game development library. Because graphics are usually an important part of games, Allegro is suited with different graphics programming features that allow easy implementation of graphic algorithms.

For 3D graphics OpenGL is a choice of middleware. Reasons here are the active use, development, popularity and extensive documentation of it. 

JavaScript Program

For some reasons it might be more beneficial to do graphics on a web page. This approach has been gaining popularity in the recent several years now with the rise of WebGL. Initially JavaScript was meant to provide a more dynamic web page without the need to interact with the web server all the time. Together with HTML, the server provided a JavaScript code that changed the web page according to user activity. Soon there came a need to render an image on the client's side based on some data sent from the server (or even the client itself). There were several ways how people tried to do this, but ultimately HTML5 provided a standardized canvas element for such purposes. HTML5 was officially released in 28th October 2014, but major browsers had implemented features of it for a long time before that.

We can implement 2D graphics by directly drawing on the canvas element with JavaScript.

For 3D graphics we can use WebGL, which is based on OpenGL ES 2.0 (Embedded Systems). There is also a library THREE.js built on top of that, which provides an higher level of functionality.