CS354 - Keyframing and Animation

Project 5

Project 5: Keyframing and Animation

A reference implementation of the virtual mannequin, showing a model in one sculpted pose.

In this project, you will implement keyframes that allow the user to capture a pose at a give timestamp within the animation scrubber then interpolate between those keyframes when in playback mode.

Starter Code

You will build off your previous assignment based on this starter code. You should fully complete the linear blend skinning portion of the assignment before starting this assignment. If you have not yet completed it, please use this time to finish the bone movement plus linear blend skinning.

Building the Starter Code

You will use the script make-skinning.py to invoke the tsc compiler on the TypeScript source files in src/. This does some post-processing to combine the Javascript files with static files necessary for the web site to function. The complete web package is installed in dist/. Do not directly edit the files in dist/. All development should take place in the source files in src/. Thus, to compile the code, simply run make-skinning.py from the folder that contains it (the project root folder), and check that your updated file structure is correct.

Running the Starter Code

To run the starter code, first, you must launch the HTTP server. From the project root directory (containing dist/), run:

http-server dist -c-1

If successful, you should get a confirmation message that the server is now running. You can then launch the app by pointing your browser to http://127.0.0.1:8080.

Required Features (100 points)

Keyframes

Add a keyframe to a list of keyframes when the 'k' key is pressed. You will likely want to create a Keyframe class to store the keyframe info (at minimum you'll need to store the time and the bone rotations from the current pos at the requested time). When deciding your approach, note that you'll want to reconstruct the bone end positions from the interpolated rotations between two key frames (rather than interpolating between the two key frames positions) for better results, but regardless of what you choose to store, you will need to be able to reconstruct the pose correctly from the data.
Ensure that the functions getNumKeyFrames() and getMaxTime() update correctly. These are mostly used for the UI, but getMaxTime() is also necessary for ending playback in incrementTime().

Playback

Create functionality to interpolate between two key frames. While it is possible to use a linear interpolation on the bone positions, you'll get better results if you perform a slerp on the rotations. The Quaternion library two functions that perform a spherical linear interpolation. Remember that there are two valid paths for any slerp, so slerpShort() will find the slerp with the shortest path.
Connect your keyframe playback to the draw() function in App.ts. You may notice that the starter code is already calculating deltaT for you in incrementTime(). You do not need to modify this code, nor do you need to modify anything about your blend skinning code in the shaders. You only need to include a way to update the skeleton pose based on the keyframes and all your earlier hard work will pay off!

Submission Instructions

Submit your project via GitLab and provide a link to it via Canvas. Make sure to keep your repository private and give access to me (thesharkcs) and the TA (TA GitLab usernames are posted to Announcements on Canvas). We will be grading based on a branch called a5-code-freeze, so please make sure you have a working final version of the project on that branch. You may also include missing features from your previous assignment in this project to receive some back credit on Project 4.

In addition to your complete source code, the project should include:

A README file including your name (and your partner's name), and if you made any modifications to the included libraries/build script.
A report explaining how you implemented the skeleton hierarchy, bone picking, and bone manipulation, as well as several screenshots of the final product. Please also include a section on issues you encountered, known bugs, and future work. This will help us understand where you ran into issues and better assess your work, even if we encounter issues while grading.

Grading

You'll be graded on how well you met the requirements of the assignment. D quality or below work has few or none of the features implemented/working. C quality work has implemented some or most of the features, but the features are built in a way that is not fully working and/or the logic is not well-considered. B quality work has implemented most or all of the features in a way that works but may have some issues and/or the logic is not fully considered. A quality work has implemented all of the features in robust, polished way that demonstrates your understanding of the assignment, the math, and the provided code base. Note that a well-written report can help us understand your thought process, which is a large part of what we are grading you on in these assignments.

You should not worry too much about performance or optimizing your code, but egregiously inefficient implementations of any of the features will be penalized.

Reminder about Collaboration Policy and Academic Honesty

You are free to talk to other students about the algorithms and theory involved in this assignment, or to get help debugging, but all code you submit (except for the starter code, and the external libraries included in the starter code) must be your own. Please see the syllabus for the complete collaboration policy.

Last modified: 01/02/23 by Sarah Abraham theshark@cs.utexas.edu