Computer Graphics Lab 4

OSHERIFF
3 min readJul 30, 2019

--

OpenGL, hello world

Let’s start off by creating a simple window that we can draw some graphics on. We’re going to use OpenGL, so we need to tell the operating system to create a window with an OpenGL context. This is necessary for the operating system to understand why we need this window and what capabilities this window must have and so on … To make the job easier on us, we will use a library called Glfw. This library helps us creating a window with OpenGL context.

Now that we have a window with an OpenGL context, we have the right to use OpenGL to interface with the GPU properly.
Let’s create a new triangle geometry and draw that on the screen …

Ok, so we have defined 3 vertices, 3 points.
Each point is formed of X, Y. For now we will draw a 2D triangle ..
We also defined indices array, 3 indices, each refering to the index of each point defined in the vertices array ….

So, in order to display that triangle on the screen, we need to upload this geometry data to the VRAM, remember ? Let’s do exactly that …
We will create something called Vertex Buffer Objects which are simply buffers that will contain the geometry data.
And we wrap multiple VBOs (Vertex Buffer Objects) with a single VAO (Vertex Array Buffer).
Okay, let me exaplain …
OpenGL helps us upload data from the main RAM to the VRAM, but once it is uploaded to the VRAM, we won’t have direct access to the data, instead, OpenGL will be responsible to coordinate with the GPU on behalf of us.
This means we will upload the data to the VRAM and OpenGL will give us an unsigned integer (GLuint) that refers to the ID of the buffer we uploaded. So the value inside that GLuint refers to the ID of the buffer we loaded to the VRAM. Anytime we want to refer to that VBO we give OpenGL the value of that GLuint and it understands which buffer we’re talking about ….

We wrap multiple VBOs with a single VAO to make it easier to point out to a bunch of VBOs at once using the value of the GLuint refering to that VAO only instead of passing multiple VBOs GLuint values to refer to them …. Which is cool 😎

There is also Element Array Buffer which is simply an array that is responsible for indexing the vertices from the vertices array to reuse some vertices in case we draw larger geometry but you can eye ball this for now 😉

I know that may be confusing at first, once we finish drawing our first triangle on screen you can then play around with the variables and arrays to understand more how things work if you want … Let’s just draw something on the screen 🤓

Now shaders … In order to draw something on the screen, we need to tell the GPU how is it going to draw the geometry refered by these VBOs …
This is where shaders come to play. Shaders are programs executed on the GPU. Since we have our geometry data already on the GPU now, we need to write a simple shader program to process each vertex and position it on the screen, then paint each pixel or fragment of that geometry with colors …

First, we need to upload the shader program code to OpenGL so that it gets compiled, linked and then we get a GLuint refering to that shader program.

Again, you may not understand who everything works for the first time, that’s normal, don’t worry, I didn’t talk about shaders and how to write them or anything yet, we will get to that later on …

Now we’re ready to run our first OpenGL program and see a triangle rendered on the screen !

The full source code is on Github so that you can downlaod it and run it on your machine if you want ..

Next time I stop by the details I just glanced over here, I know there is a lot more to be explained than this, cheers !

--

--