OpenTK Tutorial 6 Part 3: Putting it all together

Now that we have TexturedCube, and a way to load shaders and textures, we can finally get to the good part, drawing some textured objects!

In this tutorial, we'll be wrapping up the texturing content. At the end, we'll have two cubes being rendered with different textures on them.
First, we'll make new shader files for textured objects. They're still really simple, but have some big changes.

Create vs_tex.glsl (and either tell your IDE to copy it to the output directory, copy it manually, or create it there) with:

#version 330

in  vec3 vPosition;
in vec2 texcoord;
out vec2 f_texcoord;

uniform mat4 modelview;

void
main()
{
    gl_Position = modelview * vec4(vPosition, 1.0);
    f_texcoord = texcoord;
}

This is more or less the same as our original vertex shader, but it now passes along a texture coordinate for each vertex instead of a color.

Create fs_tex.glsl (and either tell your IDE to copy it to the output directory, copy it manually, or create it there) with:

#version 330

in vec2 f_texcoord;
out vec4 outputColor;

uniform sampler2D maintexture;

void
main()
{
 vec2 flipped_texcoord = vec2(f_texcoord.x, 1.0 - f_texcoord.y);
    outputColor = texture(maintexture, flipped_texcoord);
}

This fragment shader introduces some new concepts, but they're not too complex. The first new concept is the sampler type. This is how we access a texture in our shader. Here we're using a sampler2D, but there are also 1D and 3D versions, for their respective dimensioned textures. The texture function allows us to get the color of a texture at a coordinate.

We have to flip the coordinates because OpenGL uses a coordinate system opposing our own on the Y-axis. There are other options (we could simply flip them when we load images, which would be better optimization-wise), but this also doubles as a demonstration of what we can do with texture coordinates.

These coordinates are normalized, meaning that they range from 0 to 1. Outside of this range, the behavior can be chosen by you. We can "clamp" the texture when it wraps, which makes it so the pixels on the edge of the texture stretch on forever. We can also tell the texture to "repeat", which makes it just loop again and again (for tiled textures). This behavior can be set for each dimension, so a texture can loop in one dimension and not in another.

While we're adding new files, download the following images (they should be named "opentksquare.png" and "opentksquare2.png":

Add these to your project as well. They'll be the textures we put on our cubes.

Now we need to modify Game.cs to use these new shaders.

First we'll add a variable to the class to store information about our texture coordinates, like we do vertices and colors:

        Vector2[] texcoorddata;

In initProgram(), we'll need to add code to add our new shader and textures. Replace the existing function with the following:

        void initProgram()
        {            
            lastMousePos = new Vector2(Mouse.X, Mouse.Y);
            
            GL.GenBuffers(1, out ibo_elements);
                
            shaders.Add("default", new ShaderProgram("vs.glsl", "fs.glsl", true));
            shaders.Add("textured", new ShaderProgram("vs_tex.glsl", "fs_tex.glsl", true));
            
            activeShader = "textured";

            textures.Add("opentksquare.png", loadImage("opentksquare.png"));
            textures.Add("opentksquare2.png", loadImage("opentksquare2.png"));

            TexturedCube tc = new TexturedCube();
            tc.TextureID = textures["opentksquare.png"];
            objects.Add(tc);

            TexturedCube tc2 = new TexturedCube();
            tc2.Position += new Vector3(1f, 1f, 1f);
            tc2.TextureID = textures["opentksquare2.png"];
            objects.Add(tc2);

            cam.Position += new Vector3(0f, 0f, 3f);
        }

The next change is in OnRenderFrame. Replace the existing loop over the Volumes in objects with the following:

            foreach (Volume v in objects)
            {
                GL.ActiveTexture(TextureUnit.Texture0);
                GL.BindTexture(TextureTarget.Texture2D, v.TextureID);
                GL.UniformMatrix4(shaders[activeShader].GetUniform("modelview"), false, ref v.ModelViewProjectionMatrix);

                if (shaders[activeShader].GetUniform("maintexture") != -1)
                {
                    GL.Uniform1(shaders[activeShader].GetUniform("maintexture"), 0);
                }

                GL.DrawElements(BeginMode.Triangles, v.IndiceCount, DrawElementsType.UnsignedInt, indiceat * sizeof(uint));
                indiceat += v.IndiceCount;
            }

This code checks if the shader accepts a texture and sends along the ID of the texture we've assigned to this object. We're using texture unit 0 for this (there are at least 8 available), but that's not really relevant when we're only using one texture per object.

Now we need to add texture coordinates to OnUpdateFrame.

First, after the definitions of verts, inds, and colors, we'll add another list for texture coordinates:

            List<Vector2> texcoords = new List<Vector2>();

Next, we'll add the texture coordinates with the other attributes in the the for loop over the Volumes in objects:

                texcoords.AddRange(v.GetTextureCoords());

After "coldata = colors.ToArray();" add:

            texcoorddata = texcoords.ToArray();

Finally, after the similar block of code for sending color values, add:

            if (shaders[activeShader].GetAttribute("texcoord") != -1)
            {
                GL.BindBuffer(BufferTarget.ArrayBuffer, shaders[activeShader].GetBuffer("texcoord"));
                GL.BufferData<Vector2>(BufferTarget.ArrayBuffer, (IntPtr)(texcoorddata.Length * Vector2.SizeInBytes), texcoorddata, BufferUsageHint.StaticDraw);
                GL.VertexAttribPointer(shaders[activeShader].GetAttribute("texcoord"), 2, VertexAttribPointerType.Float, true, 0, 0);
            }

Now, if you run the project you should have two floating cubes, each with their own texture.

 ____

Up next we'll be loading and displaying a simple obj file (that is, one object defined by vertices, not). I've modified the upcoming tutorials page slightly, since I decided that having a simple model viewer application as an example would be useful.