-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathanimation.html
49 lines (32 loc) · 5.72 KB
/
animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gabor Makes Games</title>
<meta name="author" content="Gabor Szauer">
<link rel="stylesheet" type="text/css" href="css/shared.css"><link rel="stylesheet" type="text/css" href="css/navigation.css"><link rel="stylesheet" type="text/css" href="css/font-raleway.css"><link rel="stylesheet" type="text/css" href="css/font-oxygen.css"><link rel="stylesheet" type="text/css" href="css/font-worksans.css"><link rel="stylesheet" type="text/css" href="css/codepretty/skins/desert.css"><script type="text/javascript" src="js/codepretty/prettify.js"></script><script type="text/javascript" src="js/navigation.js"></script><!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-96941899-3"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-96941899-3');</script> <link rel="stylesheet" type="text/css" href="css/blog.css">
</head>
<body onload="MainNavOnLoad();PR.prettyPrint();"> <div class="nav"> <ul class="menu"> <li class="logo"><a href="https://gabormakesgames.com">Gabor Makes Games</a></li> <li class="item"><a id="main-nav-active" href="blog.html">Blog</a></li> <li class="item"><a href="books.html">Books</a></li> <li class="item"><a href="https://github.com/gszauer/">Github</a></li> <li class="item"><a href="https://twitter.com/gszauer">@gszauer</a></li> <li class="toggle"><a href="#">Open Menu</a></li> </ul></div>
<div id="blog">
<div id="sidebar"><a class="sidebar-item sidebar-first sidebar-gap" href="blog.html">Back to blog</a></li><a class="sidebar-item sidebar-first sidebar-active " href="animation.html">Introduction</a><a class="sidebar-item" href="blog_animation_curves.html">Curves</a><a class="sidebar-item" href="blog_animation_pose.html">Pose Generation</a><a class="sidebar-item sidebar-tab" href="blog_animation_frames.html">Frames</a><a class="sidebar-item sidebar-tab" href="blog_animation_tracks.html">Tracks</a><a class="sidebar-item sidebar-tab" href="blog_animation_transformtracks.html">Transform Track</a><a class="sidebar-item sidebar-tab" href="blog_animation_poses.html">Poses</a><a class="sidebar-item sidebar-tab" href="blog_animation_clips.html">Clips</a><a class="sidebar-item sidebar-tab" href="blog_animation_sample.html">Sample</a><a class="sidebar-item" href="blog_animation_skin.html">Skinning</a><a class="sidebar-item sidebar-tab" href="blog_animation_skinspace.html">Skin Space</a><a class="sidebar-item sidebar-tab" href="blog_animation_smoothskin.html">Smooth Skinning</a><a class="sidebar-item" href="blog_animation_blend.html">Pose Modification</a></div>
<div id="content">
<h1>Skinned Animation</h1>
<div style="width: 100%; overflow: auto;">
<img class="img-fluid floater" src="images/blog_animation_book.png" alt="Hands-On C++ Game Animation Programming">
<p>In this blog we will take a high level look at <i>some</i> of the content covered in chapters 8, 9 and 10 of the book. The book provides more in depth coverage of these topics, as well as advanced topics like <strong>Inverse Kinematics</strong>, <strong>Dual Quaternion Skinning</strong> and <strong>Crowd Rendering</strong>.</p>
<p>While this post does not follow the book, it's worth looking at the code for <a href="https://github.com/gszauer/GameAnimationProgramming/tree/master/Chapter10/Sample02">Chapter 10, Sample 02</a>, which contains a similar skinned character implementation.</p>
<p>This blog post mirrors the contents of the landing page for my new book, <a href="https://animationprogramming.com/">Hands-On C++ Game Animation Programming</a>.</p>
<p>Generally, game animation can be broken up into three distinct steps. These stages are: <strong>pose generation</strong>, <strong>pose modification</strong> and <strong>skinning</strong>. The stages are usually performed in order.</p>
</div>
<h2>Pose Generation</h2>
<p>When talking about humanoid animations, a pose refers to the skeleton. Specifically the skeleton posed to match a frame of animation. You would generate a pose by sampling an animation clip.</p>
<h2>Pose Modification</h2>
<p>Pose modification is exactly what it sounds like, modifying the pose before it is skinned. Blending two animation clips to hide a transition would be considered pose modification, so would an IK system that adjusts a leg to keep in on top of terrain. This site will cover animation blending, the book covers blending in more detail. The book also covers more advanced topics like IK.</p>
<h2>Skinning</h2>
<p>Given a mesh and a pose, skinning is the process of deforming the mesh so that is matches the given pose. The two most common skinning methods are matrix palette skinning and dual quaternion skinning. We will cover matrix palette skinning on this page, both are covered in the book.</p>
<h2>Math</h2>
<p>All of the math required to build an animation system is covered in the book. To follow along with this blog you should have be familiar with <a href="https://gabormakesgames.com/vectors.html">Vectors</a>, <a href="https://gabormakesgames.com/matrices.html">Matrices</a>, <a href="https://gabormakesgames.com/quaternions.html">Quaternions</a> and <a href="https://gabormakesgames.com/transforms.html">Transform hierarchies</a> which are all covered in my other blog posts.</p>
</div>
</div>
</body>
</html>