projects°•
The GPU is your friend. Treat it whith kindness.
<• back
Draw a triangle challenge 100% imposible

I learned graphics programming!

One of the coolest things you can do with a computer is to show things on the screen. In the past I have used Unity, Godot, and even SDL to do this kind of thing (to varying extents of success), but I have always wondered how does the process work at a lower level, so this summer I decided to finally start learning graphics programming.

Drawing things on your screen is not a simple process, and it gets worse due to the fact that not all GPUs work exactly the same. To solve this, some really smart people created the following system: The programmer uses an API, wich is a set of rules and function specifications. The API defines only what the functions must do, but the functions themselves are not implemented. Then, the graphics card vendors actually implement these functions, which are part of your drivers.

This means that in order to draw anything, you have to use a graphics programming API. Right now there are two main graphics APIs: OpenGL and Vulkan. Vulkan is kind of becoming the new industry standard due to being faster than OpenGL, but it works at a lower level, so its way harder. That's why I ended up choosing OpenGL, wich is a lot more begginer friendly, and you end up learning a lot about the rendering pipeline anyway.

If you are interested in learning OpenGl, the best way possible is the OpenGL bible: learnopengl. It starts from the very begginnig and slowly builds upon itself until you are doing cool stuff. It's kind of hard in the beggining, and you will need linear algebra, but its really fun.

After setting everything up and linking every library (literal hell on windows), the first step was to create a window with a triangle. This is like the "hello world" of graphics programming, but unlike "hello world", "hello triangle" introduces a lot of concepts about how everything works, so you have to go through it many times until you get the idea.

Then I was introduced to vertex and fragment shaders, wich are gpu programs that run once for each vertex (the vertex shader) and each pixel (the fragment shader). For example here I had a simple fragment shader that changed the color of two triangles using a sine function:

After doing some more 2d stuff like using textures, it was time to actually do something in 3d. It is at this point that math begins to appear. In order to represent vertex coordinates in convenient ways, you have different coordinates systems, and you have to use different transformation matrixes to transform vertex coordinates from one space to another in order to have everything renderer properly.

In our code what we do is to create these matrixes and send them to the vertex shader, wich then transform the vertex coordinates by multiplying them with the different matrixes.


- source -

This was my first 3d program, I was so happy :)

The rotation is created using a rotation matrix. A rotation matrix rotates around an axis our vertices φ radians (or degrees), so just by increasing φ as time passes your vertices will rotate in a continuous motion.

Then I rendered something more complex than a simple square, a cube! But something strange happened at first. It turn out you have to explicitly tell your GPU to make a depth test to show closer things over further things.

- Left: no depth testing || Right: depth testing -

Now we can "copy and paste" our cube to have multiple cubes.

- so much madohomu -

At this point we can create poligons, apply textures, and modify their location. There is only one thing left to have the tools to make a simple 3d game: moving the camera.

Moving the camera is something that I found pretty funny, because instead of moving the camera, you move everything else. For example, if I'm in a 3d space and I want to move the camera forwards, what actually happens is that the whole world moves backwards.

Camera movements are somewhat unintuitive, but following closely the tutorial, I was able to move around the scene using WASD and the mouse, and zoom with the mouse wheel.

With this last step done I had completed the getting started section of learnopengl! I'm so happy I managed to get to the end. I feel like I learned a lot. Now my next project will be to make a game without an engine, using OpenGL (it will be 2d tough).

Thanks for reading :)

^ Top ^