OpenGL Tutorial #2 – Shader Intro

So we set up to now, our program did not actually draw anything. All we did is set up the basics and filled up the colour buffer with the colour blue.

Let’s review that code again.

The function GL.ClearColor. Here is a tip when it comes to figuring out what these kinds of funcitons actually done. There is a lot of refs, Khronos has a lot (the creators of OpenGL), but also funnily enough so does Microsoft, you know the Direct X guys! I actually find Microsoft’s docs actually a little easier to navigate so here is a link to glClearColor:

You can now also use that to look up what GL.Clear does.

Can you see the naming convention? The C# OpenTK does GL.Clear whereas the C++ code uses glClear.

Like I said, nothing was actually drawn.

Now back when I was at Uni, we learned how to use Fixed Function stuff to render things (yeah in 08-12, little bit behind but oh well). However, this is 2018, and shaders are not new. Open GL itself can draw Primitives such as points, lines and triangles. If you know anything about 3D graphics, you know 3D models are made up of lots of triangles, i.e. primitives. Primitives like points, triangles and lines are made up of vertices. In order for stuff to be rendered we need to delve back into the world of vertex and fragment shaders.

You can, in theory, write a shader directly in code in a string array. I am not about that life.

Firstly, we need some boring boilerplate code. I have created 2 files. FileUtils and ShaderUtils.

Firstly FileUtils

This is a basic static class that Loads a Text file from the folders route.

Secondly, we have “ShaderUtils”

This is what actually creates our shaders from text input.

But hold up, I hear you say. What is a Vertex and Fragment Shader?

A vertex shader contains the vertex data, i.e. the geometry, which can alter the data of each individual vertex in the model if you so chose. After this has been done, the result is passed to the second step where a function outputs the colour at each vertex. The first step is known as the vertex shader and the second step is known as the fragment shader.

For more info, go check out the Unity shaders

A brief shader overview in Unity

Ok, all of that aside. The above code is loading a parsing the shader data to create something usable.

We are not going to do anything exciting with shaders in this post, we are literally gonna render a red dot.

Start a new class called RedPoint.cs.

This is the class we are gonna use the red dot. We firstly load up the vertex and frag shaders, then create the program.

You will notice an array called _vao. Otherwise known as the Vertex Array Object. A VAO is an OpenGL Object that stores all of the state needed to supply vertex data.

Although the MS docs are good, this time I found they were lacking. So back to Khronos for more info:

We use GL.GenVertexArrays to generate the names of each VAO (in our case there is one).

We then bind the object.

In our draw method, we use the program and use the draw array function to draw points (in this case one).

Basically, we are using this shader program on the points we draw in the primitives.

Cool, so we have how we bind and use the shader, but we actually need to write them.

Create some text files in the following folders:

Make sure the files are Copied to the Output Directory.

Let’s write the shader files.

The vertex shader here literally sets the point to the center of the screen

The out vec4 color part outputs the colour of the pixel. We set this color in the main function.

Add the RedPoint code into Main.cs

If you run the code now:

There is a red point.

Boom, we have loaded a super basic shader and rendered it.

Tutorial Introduction – Setting up Open TK

Image result for open gl

If you have been over to Humble Bundle recently, you would see there is a really good bundle with a load of programming books in it. 

Included is a book called “Computer Graphics Programming in Open GL with Java”. As Java and C#, and I like C# much better than Java or C#, I thought I would knock together a few tutorials on using OpenGL and C#. I thought I would also dig out my seasonal globe and try and redo it using C#, Open GL and OpenTK.

So, first thing is to update Visual Studio, fire it up and create a Windows Forms Project.

Using Nuget, grab Open TK and add it into your project.


Next up, delete the Form1.cs and add a new class called Main.cs, add the following OpenTK usings and make it inherit from GameWindow.


Secondly, let’s create a GameSettings.cs class that will contain our constants:

Alright, rather than me screenshotting the whole class here, let’s review it directly from GitHub:

Firstly, in the constructor, we see we are setting up the standard stuff such as the window size, title, what type of window we use. We are also saying we want to use Open GL 4. We have also said we are using the ForwardCompatible flag. Essentially, if something is deprecated, it will not support that functionality making it “forward compatible” when the deprecated function is removed.

We then override the OnResize. Basically, if a user resizes the window, our viewport will be reset.

We are overriding the Onload method and adding our own LoadContent method. I have purely done this for readability sake and also as someone who came from XNA/MonoGame.

I have done the same with the OnUpdateFrame and OnRenderFrame methods by adding the Update and Draw funcitons that we will actually implement rendering and game logic.

I also wrapped the SetBackColour, mainly because it felt neater.

Finally, Dispose is basically there to unload content.

If you have implemented all of that, then you will see that not everything is compiling.

Go into the Program.cs and add the following:

Here we are creating our Main window and then Running it at 60 FPS (the frame rate we set in Game Settings)

That is the first part done.

If you are totally new to programming, or a uni student etc here for a bit learning then what you should do next is head over to GitHub or Bitbucket, set up a repo and make sure everything is committed. There is a load of different software. I would recommend SourceTree, the GitHub client or TortoiseGit.