OpenTK Tutorial 4: It's amazing the way you DRAW TWO THINGS

In this tutorial, we'll build on our cube by making a second one. Along the way, we'll be remaking some of the old code to be more object-oriented to fit our future needs.

(I'd like to thank an anonymous commenter on the last tutorial for inspiring this one, since originally I was going to do texturing or a camera first)



We'll be starting from the end of Tutorial 3, where we had one colorful cube, spinning. The first thing we'll be doing is making it object oriented. This will make adding more objects and different types of objects later much easier.

Make a new class, and call it Volume. This isn't volume as in loudness, but a volume as in space being taken up. Technically "volume rendering" is something else, but I couldn't think of a better name. We may end up changing it in some refactoring later, so don't get too attached to the name.

Volume is going to be different than our other classes. It's going to be an abstract class, since we can't say much for a generic concept of a shape. It wouldn't have any vertices, but we want to use it for polymorphism. This means we can have a list of Volumes (which are actually subtypes, like Cubes will be) and when we call GetVerts, it'll return the correct vertices, despite us not checking the type in our code (very useful).

Here we have our Volume class (make sure you add a using directive for OpenTK):

public abstract class Volume

    {

        public Vector3 Position = Vector3.Zero;
        public Vector3 Rotation = Vector3.Zero;
        public Vector3 Scale = Vector3.One;

        public int VertCount;
        public int IndiceCount;
        public int ColorDataCount;
        public Matrix4 ModelMatrix = Matrix4.Identity;
        public Matrix4 ViewProjectionMatrix = Matrix4.Identity;
        public Matrix4 ModelViewProjectionMatrix = Matrix4.Identity;

        public abstract Vector3[] GetVerts();
        public abstract int[] GetIndices(int offset = 0);
        public abstract Vector3[] GetColorData();
        public abstract void CalculateModelMatrix();
    }

What we're doing here is storing transformation information, in addition to providing methods to get our lists of vertices, indices, colors (since we aren't using textures yet), the lengths of these lists, a place to store our matrices, and a method to use our transformations to make a transformation matrix for the whole object.

By itself, this has no implemented code. We only have definitions for methods, so we'll need to define them in another class.

Make another new class, and call it Cube. In Cube, we'll be filling in these functions for a cube (and since our scale transformation is a Vector3, it can actually be any rectangular prism we want it to be).

First, set Cube to be a subclass of Volume:

public class Cube : Volume

Now, we can set values for VertCount, IndiceCount and ColorDataCount in its constructor:

        public Cube()
        {
            VertCount = 8;
            IndiceCount = 36;
            ColorDataCount = 8;
        }

The other methods are mostly moving code we had in the Game class, and moving them to other classes so we can use some object-oriented tricks to make the code more versatile.

GetVerts returns the same vertices we used for the cube before, but for a cube that's 1 unit in each dimension instead of 1.6:

        public override Vector3[] GetVerts()
        {
            return new Vector3[] {new Vector3(-0.5f, -0.5f,  -0.5f),
                new Vector3(0.5f, -0.5f,  -0.5f),
                new Vector3(0.5f, 0.5f,  -0.5f),
                new Vector3(-0.5f, 0.5f,  -0.5f),
                new Vector3(-0.5f, -0.5f,  0.5f),
                new Vector3(0.5f, -0.5f,  0.5f),
                new Vector3(0.5f, 0.5f,  0.5f),
                new Vector3(-0.5f, 0.5f,  0.5f),
            };
        }

Seems simple enough. Now we need to do the same for indices:

        public override int[] GetIndices(int offset = 0)
        {
            int[] inds = new int[] {
                //left
                0, 2, 1,
                0, 3, 2,
                //back
                1, 2, 6,
                6, 5, 1,
                //right
                4, 5, 6,
                6, 7, 4,
                //top
                2, 3, 6,
                6, 3, 7,
                //front
                0, 7, 3,
                0, 4, 7,
                //bottom
                0, 1, 5,
                0, 5, 4
            };



            if (offset != 0)
            {
                for (int i = 0; i < inds.Length; i++)
                {
                    inds[i] += offset;
                }
            }

            return inds;
        }

There's a big change to this code. As you may have noticed in the abstract class, this method takes a parameter, for "offset". Right now it's not that important, since every object being drawn is the same cube (the vertices are the same, even though we later apply a transformation), but when we have multiple types of objects, this reuse would become a disaster.

Color data is pretty straightforward:

        public override Vector3[] GetColorData()
        {
            return new Vector3[] {
                new Vector3( 1f, 0f, 0f),
                new Vector3( 0f, 0f, 1f),
                new Vector3( 0f, 1f, 0f),
                new Vector3( 1f, 0f, 0f),
                new Vector3( 0f, 0f, 1f),
                new Vector3( 0f, 1f, 0f),
                new Vector3( 1f, 0f, 0f),
                new Vector3( 0f, 0f, 1f)
            };
        }

It simply returns the colors we used for the cube before.

The model matrix is more complex, but it's just a more generic version of code from the last tutorial:

public override void CalculateModelMatrix()

        {
            ModelMatrix = Matrix4.Scale(Scale) * Matrix4.CreateRotationX(Rotation.X) * Matrix4.CreateRotationY(Rotation.Y) * Matrix4.CreateRotationZ(Rotation.Z) * Matrix4.CreateTranslation(Position);
        }

Now the Cube class is complete. We just need to change our Game class to use it instead and let us render more than one.

We won't be needing the mviewdata variable anymore, so delete that, and in its place add:

        List<Volume> objects = new List<Volume>();

This List will store everything we're going to draw, including what was previously in mviewdata. I used a List instead of an array to make the program more dynamic. If you're looking at Visual Studio's Error List right now, you'll probably see a lot of issues that just popped up. We'll be fixing those next.

In initProgram, we'll want to give it something to draw:

            objects.Add(new Cube());
            objects.Add(new Cube());

Right now, the OnLoad method is a mess of pre-defined values. We don't need those anymore, so it should look like this (feel free to change the title if you want):

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            initProgram();

            Title = "Hello OpenTK!";
            GL.ClearColor(Color.CornflowerBlue);
            GL.PointSize(5f);
        }

The next change is to OnRenderFrame. Right now it renders everything in the arrays given to the graphics card at once. We need to change our model-view-projection matrix for each object, so it can't just draw them all at once. To do this, we can use the GL.DrawRangeElements method, which can render a subset of the indices we have.

We'll also want to do this in a foreach loop, so we can use our list to the fullest. Replace the call to GL.DrawElements with the following:

            int indiceat = 0;
           
            foreach (Volume v in objects)
            {
                GL.UniformMatrix4(uniform_mview, false, ref v.ModelViewProjectionMatrix);
                GL.DrawElements(BeginMode.Triangles, v.IndiceCount, DrawElementsType.UnsignedInt, indiceat * sizeof(uint));
                indiceat += v.IndiceCount;
            }

This code iterates through the objects and draws each of them individually.

We have one last bit of code to fix the last of the errors our first change brought up. After the call to base.OnUpdateFrame, add this:

            List<Vector3> verts = new List<Vector3>();
            List<int> inds = new List<int>();
            List<Vector3> colors = new List<Vector3>();

           
            int vertcount = 0;
            
            foreach (Volume v in objects)
            {
                verts.AddRange(v.GetVerts().ToList());
                inds.AddRange(v.GetIndices(vertcount).ToList());
                colors.AddRange(v.GetColorData().ToList());
                vertcount += v.VertCount;
            }

            vertdata = verts.ToArray();
            indicedata = inds.ToArray();
            coldata = colors.ToArray();

In this code, we gather up all the values for the data we need to send to the graphics card.

After we add to the time variable, we have two lines which still refer to mviewdata (one updates it to new values, the other sends it to the graphics card with GL.UniformMatrix4). Replace them with the following:

            objects[0].Position = new Vector3(0.3f, -0.5f + (float) Math.Sin(time), -3.0f);
            objects[0].Rotation = new Vector3(0.55f * time, 0.25f * time, 0);
            objects[0].Scale = new Vector3(0.1f, 0.1f, 0.1f);

            objects[1].Position = new Vector3(-1f, 0.5f + (float)Math.Cos(time), -2.0f);
            objects[1].Rotation = new Vector3(-0.25f * time, -0.35f * time, 0);
            objects[1].Scale = new Vector3(0.25f, 0.25f, 0.25f);

            foreach (Volume v in objects)
            {
                v.CalculateModelMatrix();
                v.ViewProjectionMatrix = Matrix4.CreatePerspectiveFieldOfView(1.3f, ClientSize.Width / (float)ClientSize.Height, 1.0f, 40.0f);
                v.ModelViewProjectionMatrix = v.ModelMatrix * v.ViewProjectionMatrix;
            }

This code makes the cubes move around and spin, and also updates their model-view-projection matrices. With this code, you'll see the following output: