Tutorial 3: Animation

In this tutorial we are going to make things move, or animate. The goals are to be able to move the camera to look at things from different angles, and to make a part of the scene move as time progresses, and even interact with user input.

We will focus on transforming geometry so we abstract away the setup of vertex data and textures. We will import a 3D model from an .OBJ file (wavefront) instead of specifying the data manually.

Run the program, press mouse buttons and move the mouse around and see what happens. Then look through the code and make sure you understand it all so far.

mat4 M(a, e, i, m,
       b, f, j, n,
       c, g, k, o,
       d, h, l, p);

T[3] = vec4(tx, ty, tz, 1.0f);

// check keyboard state (which keys are still pressed)
const uint8_t *state = SDL_GetKeyboardState(nullptr);

// implement controls based on key states
const float speed = 10.f;
if (state[SDL_SCANCODE_UP]) {
	T[3] += speed * deltaTime * vec4(0.0f, 0.0f, 1.0f, 0.0f);
}
if (state[SDL_SCANCODE_DOWN]) { 
	T[3] -= speed * deltaTime * vec4(0.0f, 0.0f, 1.0f, 0.0f);
}
if (state[SDL_SCANCODE_LEFT]) {
	T[3] += speed * deltaTime * vec4(1.0f, 0.0f, 0.0f, 0.0f);
}
if (state[SDL_SCANCODE_RIGHT]) {
	T[3] -= speed * deltaTime * vec4(1.0f, 0.0f, 0.0f, 0.0f);
}

carModelMatrix = T;

const float rotateSpeed = 2.f;
if (state[SDL_SCANCODE_LEFT]) {
	R[0] -= rotateSpeed * deltaTime * R[2];
}
if (state[SDL_SCANCODE_RIGHT]) {
	R[0] += rotateSpeed * deltaTime * R[2];
}

// Make R orthonormal again
R[0] = normalize(R[0]);
R[2] = vec4(cross(vec3(R[0]), vec3(R[1])),  0.0f)

carModelMatrix = R;

carModelMatrix = T * R;

Render the car another time (a second carModel->render() call), with another model matrix, effectively reusing the car model and adding another car to our application. Make the model matrix of the second car such that it drives in a circle around your starting position. The position in the track should depend on the float variable currentTime. For this task, use glm's functions for transformations.

mat4 translate(vec3 t);

mat4 rotate(float radians, vec3 axis);

mat4 scale(vec3 scale);

if (event.button.button & SDL_BUTTON(SDL_BUTTON_LEFT)) {
	float rotationSpeed = 0.005f;
	mat4 yaw = rotate(rotationSpeed * -delta_x, worldUp);
	mat4 pitch = rotate(rotationSpeed * -delta_y, normalize(cross(cameraDirection, worldUp)));
	cameraDirection = vec3(pitch * yaw * vec4(cameraDirection, 0.0f));
}

mat4 viewMatrix = cameraRotation * translate(-cameraPosition);

// use camera direction as -z axis and compute the x (cameraRight) and y (cameraUp) base vectors
vec3 cameraRight = normalize(cross(cameraDirection, worldUp));
vec3 cameraUp = normalize(cross(cameraRight, cameraDirection));

mat3 cameraBaseVectorsWorldSpace(cameraRight, cameraUp, -cameraDirection);

mat4 cameraRotation = mat4(transpose(cameraBaseVectorsWorldSpace));
mat4 viewMatrix = cameraRotation * translate(-cameraPosition);

The third component of the modelViewProjection transform is the projection transform. We use the glm function perspective() to generate this matrix. Have a look at the arguments to this function and play around with them. You can do it interactively with the gui, which you can toggle by pressing G (you can also comment out the if surrounding the call to gui() in main()).

Now uncomment the drawGround() call in the display() function. Now you will see that in the middle of the scene there's a new flat square. You will also notice that it looks like it's broken, and when you rotate the camera it will look like the brokenness changes. This is what we call z-fighting.

Play around a bit with the values in the gui and try to find out which setting helps reduce or remove this effect.

Think about how games control the camera with W,A,S,D (or arrow keys) and the mouse. Try to implement something similar.

Suggestions: First person while driving the car. Third person while driving the car.

When done, show your result to one of the assistants. Have the finished program running and be prepared to explain what you have done.