Skinning and Animation System for 3D Models

Summary

This project implements a skeleton animation system in WebGL, allowing users to interact with 3D model animation. Users can dynamically select and rotate bones, apply hierarchical transformations, and create smooth animations through a keyframe system. Key features include:

  • Bone Picking: Ray-cylinder intersection for selecting bones.

  • Bone Manipulation: Quaternion-based rotations with propagation to child bones.

  • Keyframe Animation: Interpolation between poses using spherical linear interpolation (SLERP).

Intentions

The goal was to create an interactive animation tool that demonstrates foundational 3D animation concepts, such as skinning, hierarchical transformations, and real-time user interaction.

Demo Video

Personal Contributions

  • Developed cylinder geometry and ray-cylinder intersection for precise bone picking, with adjustments for accurate alignment with bones.

  • Designed and implemented shaders for rendering skeletons and visualizing highlighted bones, integrated into the core rendering pipeline.

  • Built quaternion-based bone rotation functionality, ensuring smooth transformations propagated to child bones through a recursive hierarchy.

  • Designed the keyframe system for storing bone rotations and timestamps, enabling playback and smooth pose interpolation using SLERP.

  • Contributed to skeleton animation features, including dynamic bone selection, mouse-based interaction, and real-time updates to hierarchical transformations.

Lessons Learned

This project deepened my understanding of balancing usability and accuracy in interactive design, managing hierarchical transformations using quaternion and matrix math, and creating smooth, natural animations with keyframe systems. These insights strengthened my skills in real-time systems and interactive animation.

Installation

Run these commands in your terminal:

git clone https://gitlab.com/catherinegao7717/skinning-and-animation-system-for-3d-models.git

cd /path/to/the/folder

python make-skinning.py

http-server dist -c-1

Finally, make sure your browser is WebGL 2.0-supported, go to http://192.168.56.1:8080/.

Controls

Hover and drag to manipulate bones, press k to save keyframes, and p for playback.

Previous
Previous

Zenith - 3D Roguelike RTS Game

Next
Next

Petpanion - iOS App