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.


Unity Triple A – Characters looking at stuff via IK

I have been talking about doing this for ages, and as my interest for Triple A techniques increases and the blog was looking a little sparse, I thought I would do a few tutorials on more Triple-A techniques. In this article, I am going to talk about using Inverse Kinematics in Unity and in particular characters looking at each other.

If you have ever played games like Uncharted 4 or Final Fantasy XV, when characters talk to each other whilst the player is controlling them, you will see them physically look at each other. This to me is really cool and adds a level of immersion that you wouldn’t get if the characters “just” talked to each other. If you look at the gif above you can see a transform being moved around the environment and the characters head looking at it, whilst the rest of his body is still. That is the sort of thing we will be looking at in this article.

So firstly what is IK?

Well in simple game dev terms, it is an animation technique.

Most animation is produced using a technique called forward kinematics. This is where an animation is created by rotating the angles of joints in a skeleton to predetermined values. The position of a child joint changes according to the rotation of the parent and thus the end point of a chain of joints can be determined from the angles and relative positions of the individual joints it contains.

Inverse Kinematics is working backwards to forward kinematics (hence the name!). By taking a chosen point in game space, you work backwards and find a valid way of orientating the joints so the endpoint lands at that position.

In simple terms, it allows us to make characters do stuff like point at things, look at things, touch an object at a specific point, etc in a more dynamic way. Unity actually has this built into Mecanim, which is pretty sick.

In order to get IK working you need a “correctly configured avatar”. In order to get one easily, I grabbed the Ethan from the Standard Assets.

Then we go an make an animator controller with his idle animation and set it up for IK by clicking on the little settings icon and enabling IK pass.

Then make sure your animator controller is actually assigned to your character’s animator.

Setting up the character to look at stuff is super easy. Create a new script called IK Controller and add the following:

Add a sphere into the scene and set it up as your _lookObj. Set up the other references. Run the game and move the sphere around a bit and viola.

We have a system similar to what is shown above.

Now in conversations, you can do a distance check if the characters are close enough you can enable the IK look at.

There you go. Easy!

If you want a sample project all the code lives here: