OpenTK Tutorial 5: A Basic Camera

Now that we have many objects displayed, let's make a way to see them properly.

In this tutorial, we will be creating a simple camera with WASD controls and mouselook.

UPDATED 11-6-2018: New and improved input handling!

Part 1: The Camera Itself

Thinking about a camera, it has two basic variables that it needs to take into account: the position it's looking from, and the direction it's looking in. To simplify things for making a FPS-style camera, we'll think of the direction as rotation around its center (instead of the point it's looking at, which would also be possible). This camera will also be able to move and rotate from input, so we'll want to have variables for movement speeds and mouse sensitivity.

Start by creating a Camera class:

    class Camera
    {
        public Vector3 Position = Vector3.Zero;
        public Vector3 Orientation = new Vector3((float)Math.PI, 0f, 0f);
        public float MoveSpeed = 0.2f;
        public float MouseSensitivity = 0.0025f;
    }

Now, we need to use these variables. To make them useful, we'll need to create a function in the Camera class that makes a view matrix from the Position and Orientation variables:

        public Matrix4 GetViewMatrix()
        {
            Vector3 lookat = new Vector3();

            lookat.X = (float)(Math.Sin((float)Orientation.X) * Math.Cos((float)Orientation.Y));
            lookat.Y = (float)Math.Sin((float)Orientation.Y);
            lookat.Z = (float)(Math.Cos((float)Orientation.X) * Math.Cos((float)Orientation.Y));

            return Matrix4.LookAt(Position, Position + lookat, Vector3.UnitY);
        }

This code uses some trigonometry to create a vector in the direction that the camera is looking, and then uses the LookAt static function of the Matrix4 class to use that vector and the position to create a view matrix we can use to change where our scene is viewed from. The Vector3.UnitY is being assigned to the "up" parameter, which will keep our camera angle so that the right side is up.

We have two more functions to write before the Camera class is complete. It needs to be able to move and rotate based on our input. First, we'll write a Move function:

        public void Move(float x, float y, float z)
        {
            Vector3 offset = new Vector3();

            Vector3 forward = new Vector3((float)Math.Sin((float)Orientation.X), 0, (float)Math.Cos((float)Orientation.X));
            Vector3 right = new Vector3(-forward.Z, 0, forward.X);

            offset += x * right;
            offset += y * forward;
            offset.Y += z;

            offset.NormalizeFast();
            offset = Vector3.Multiply(offset, MoveSpeed);

            Position += offset;
        }

Seems a little more complex than you may have expected? When the camera moves, we don't want it to move relative to the world coordinates (like the XYZ space its position is in), but instead relative to the camera's view. Like the view angle, this requires a bit of trigonometry.

Rotation is much simpler:

        public void AddRotation(float x, float y)
        {
            x = x * MouseSensitivity;
            y = y * MouseSensitivity;

            Orientation.X = (Orientation.X + x) % ((float)Math.PI * 2.0f);
            Orientation.Y = Math.Max(Math.Min(Orientation.Y + y, (float)Math.PI / 2.0f - 0.1f), (float)-Math.PI / 2.0f + 0.1f);
        }

What are x and y? In this case, our rotation is due to mouse input, so it's based on the distances the mouse moved along each axis.


Now we have the complete Camera class.

Part 2: Using the Camera Class

The first thing we want to do is to add an instance of the Camera class to the Game class:

        Camera cam = new Camera();

Now we need to draw using it as a view matrix. Right now there is a line in the Game class, in OnUpdateFrame, which is:

                v.ViewProjectionMatrix = Matrix4.CreatePerspectiveFieldOfView(1.3f, ClientSize.Width / (float)ClientSize.Height, 1.0f, 40.0f);

We need to replace this with a version which determines it using our new camera's view matrix, instead of only a projection matrix:

                v.ViewProjectionMatrix = cam.GetViewMatrix() * Matrix4.CreatePerspectiveFieldOfView(1.3f, ClientSize.Width / (float)ClientSize.Height, 1.0f, 40.0f);

This will change the view to wherever we set the camera to be looking, but it isn't getting any input yet. 

Let's start by adding WASD input (feel free to change the keys if you want, hopefully a later tutorial will have a proper input manager) for translating the camera. 

To keep things organized, we should do this through a new method:

        private void ProcessInput()
        {

            if (Keyboard.GetState().IsKeyDown(Key.W))
            {
                cam.Move(0f, 0.1f, 0f);
            }

            if (Keyboard.GetState().IsKeyDown(Key.S))
            {
                cam.Move(0f, -0.1f, 0f);
            }

            if (Keyboard.GetState().IsKeyDown(Key.A))
            {
                cam.Move(-0.1f, 0f, 0f);
            }

            if (Keyboard.GetState().IsKeyDown(Key.D))
            {
                cam.Move(0.1f, 0f, 0f);
            }

            if (Keyboard.GetState().IsKeyDown(Key.Q))
            {
                cam.Move(0f, 0f, 0.1f);
            }

            if (Keyboard.GetState().IsKeyDown(Key.E))
            {
                cam.Move(0f, 0f, -0.1f);
            }
        }

Add a call to this method inside of OnUpdateFrame, after the call to base.OnUpdateFrame:

            ProcessInput();

Next up is the mouse input. 

To make this work, we need to store the last mouse position referred to in that code, in the Game class.

        Vector2 lastMousePos = new Vector2();

We need a way to center the mouse cursor in our window. Otherwise it leaves the window and the player's clicks cause them to leave the game, or their cursor hits the edge and stops. Fortunately, OpenTK makes this nice and easy for us. If we set the mouse cursor to not be visible, it actually changes its behavior beyond that, it becomes trapped in the window. Add the following to initProgram to hide the cursor:

            lastMousePos = new Vector2(OpenTK.Input.Mouse.GetState().X, OpenTK.Input.Mouse.GetState().Y);
            CursorVisible = false;

We have a problem, even before we're using the mouse to do anything. How do we exit the program now? Before we move on, add the following to ProcessInput so we can just hit the escape key to quit:

            if (Keyboard.GetState().IsKeyDown(Key.Escape))
            {
                Exit();
            }

Now that the cursor is hidden and OpenTK will keep it corralled in the window for us, we can find the distance the cursor moved and adjust the camera accordingly. In ProcessInput, add the following:

            if (Focused)
            {
                Vector2 delta = lastMousePos - new Vector2(OpenTK.Input.Mouse.GetState().X, OpenTK.Input.Mouse.GetState().Y);
                lastMousePos += delta;

                cam.AddRotation(delta.X, delta.Y);
                lastMousePos = new Vector2(OpenTK.Input.Mouse.GetState().X, OpenTK.Input.Mouse.GetState().Y);
            }

 This code will make the cursor move the camera while the window has focus. There's only one last bit of code we need to finish this tutorial. We need to override the OnFocusedChanged function to reset the cursor position when the window is switched to again if it lost focus (otherwise, alt-tabbing will cause the camera to suddenly spin when you switch back, it's a minor annoyance, but also an easy fix):

        protected override void OnFocusedChanged(EventArgs e)
        {
            base.OnFocusedChanged(e);
            lastMousePos = new Vector2(OpenTK.Input.Mouse.GetState().X, OpenTK.Input.Mouse.GetState().Y);
        }

Now, if you run the project, you'll find that you have a camera that you can move around with your mouse and the keyboard, letting you view anything from a new angle.

As a final note, this tutorial is using Euler angles to define the rotation of the camera. This is actually not necessarily the best method. A better method is to use quaternions, but they are something that would need to be handled in a later tutorial and the Euler angle method is usable enough for right now.