Knowledge Share

Key topics of my presentation:

Htopics:

• # Shape Keys

• # Javascript Animations: Gyroscopic, Instance Of, Transform, AnimationMixer()...

• # CSS Animations

• # VP9 webm

• # Armature

• # Inverse Kinematics

Animation using Shape Keys

Shape Keys feature is used to mathematically describe a variation of a certain mesh, it will generate a deforming animation between the variation and the main mesh. The transition key is an n value between 0 and 1. Inserting key frames on values will create a numeral transition of the shape allowing it to transform creating a smooth and natural looking morphing transition. Using this method I am able to combine multiple key shapes and change their values simultaneously at different rates which contributes to the randomness of the animation.

Animation using Inverse Kinematics and Armatures

The creation of an armature is used to store bone hierarchy, constraints and inverse kinematics. Rigging a skeleton and parenting it with a mesh. There are several methods on how and why this is done.

Key concepts:

Weight Maps indicate the strength and influence of one part on the mesh. This affects the transform of the mesh when animated. There are options such as automatic weights, empty weights and of course the possibility of customising and painting the weight map on Blender. While Inverse Kinematics are the links that influence the movement, direction and can hold constraints, which would carry limitations, chaining patterns and a variety of modifiers.

Why use armatures?

Generally speaking, it is useful for animating a character. A skeleton can be dynamic and adjustable, giving the possibility to export an animation and using it on other meshes.

Another use case, however it is a workaround

Bones can be used to adjust an offset, in this case using the drivers on Blender, I was able to program the offset using scripted expressions. I like to think of drivers as the back-end of the nodes where scripts can be passed. This is useful within Blender. Less of a use case for web since these values can be configured using Javascript.