1 of 14

Motion Out!

Bringing Motion Capture Data to the Web

CS184 Summer 2020 Final Project

Kevin Mo

2 of 14

Motion Capture!

  • Realistic data-driven animations
    • Usually reserved for big studios and labs
  • This project is about the interpretation of motion capture data.
    • Making data portable by designing a web app that can accurately interpret + playback motion capture data

3 of 14

CMU Motion Capture DB

4 of 14

What does it do?

  • Parses .ASF/.AMC (Acclaim Motion Capture files) w/ visual tokenizer
    • Inspectors to analyze the raw motion capture data
  • Renders a skeleton on the scene that does the motion!
  • Bone Tree View & Editor
    • Similar to how 3D programs structure
  • Loads in character meshes
    • Models from MikuMikuDance or�other standard .obj/.fbx files work
  • Scene Tools
    • Change scenes to make it visually nice
    • Rotating camera!

5 of 14

Pose Menu

6 of 14

Animate Menu

7 of 14

Tweak Menu

8 of 14

Visual Results

9 of 14

10 of 14

11 of 14

Was it Ambitious?

  • Quite a bit!
    • There is a big challenge in translating motion capture data designed for one skeleton to another
  • Different Approaches
    • One-to-one relationship to each bone
    • Replace the skeleton!
    • Position + Rotations (Naive)
    • Rotations Only
  • Composite Solution
    • Apply per-bone transformations (manually adjusted position, rotation) before applying motion data
    • Localized editing tools in-browser

12 of 14

13 of 14

Future Plans & Cool Takeaways

  • Future work on translating skeletons
    • A file format (MOTL, Motion Out Translational FiLe) to make skeleton translation portable?
  • Got in a PR for three.js!
    • Fixed a bug in setting Quaternions from Euler angles, coming next release r120
    • https://github.com/mrdoob/three.js/pull/20042
  • Maybe another PR to make the parser an official loader for three.js?
  • More motion capture file formats!
    • Support loaders for FBX, BVH, etc. so Motion Out becomes a general mocap editor!
  • ~2000 SLOC total (excluding assets)
    • Much of it comes from the parser, editor logic, and state management
  • Other opportunities for portability!
    • Mocap chatbot that renders out GIFs of characters
    • Mocap video editor?

14 of 14

Try it out!

motionout.kevmo.xyz

Live Demo + Project Website + Github Link