Additive Blending Between Animations in Three.js

When animating 3D characters or objects in Three.js, blending between animations can add depth and realism. While standard blending transitions smoothly from one animation to another, additive blending allows you to layer animations together. This technique is particularly useful for subtle enhancements, such as adding facial expressions, hand gestures, or other localized movements without disrupting the base animation.

This article explores additive blending in Three.js, its benefits, and how to implement it effectively.

What is Additive Blending?

In Three.js, additive blending enables you to apply animations on top of an existing base animation. Instead of completely transitioning from one state to another, additive blending modifies the current animation by adding deltas (differences) from a secondary animation. For example:

• Adding a waving hand gesture on top of a running animation.
• Applying a breathing motion to a character standing still.
• Overlaying a facial expression while walking.

This technique ensures the base motion remains intact while layering additional movements for more dynamic and responsive animations.

Setting Up Additive Blending in Three.js

Here’s how you can use additive blending with animations in Three.js:

1. Load and Setup Your Model

First, load your 3D model with animations. Use a loader like GLTFLoader to import your model, which should include multiple animation clips.

const loader = new THREE.GLTFLoader();

loader.load('model.glb', (gltf) => {
  const model = gltf.scene;
  scene.add(model);

  const animations = gltf.animations; // Array of animation clips
  setupAnimations(model, animations);
});

2. Setup Animation Mixer and Clips

Use an AnimationMixer to control animations. Extract the base and additive clips from the loaded animations.

let mixer;

function setupAnimations(model, animations) {
  mixer = new THREE.AnimationMixer(model);

  const baseClip = THREE.AnimationClip.findByName(animations, 'BaseAction');
  const additiveClip = THREE.AnimationClip.findByName(animations, 'AdditiveAction');

  const baseAction = mixer.clipAction(baseClip);
  const additiveAction = mixer.clipAction(additiveClip);

  // Enable additive blending
  additiveAction.setBlendMode(THREE.AdditiveAnimationBlendMode);

  // Start the base action
  baseAction.play();

  // Optionally play additive action
  additiveAction.play();
}

3. Normalize the Additive Animation

For additive blending to work correctly, the additive animation must be in a “neutral” pose (like a T-pose for characters) at its start. This ensures only the deltas are applied. You can normalize the animation in tools like Blender before exporting, or manually adjust in Three.js:

additiveClip.makeAnimationAdditive();

The makeAnimationAdditive function adjusts the animation to calculate deltas relative to its initial frame.

4. Control Additive Weights Dynamically

The strength of the additive animation is controlled by its weight. Adjust the weight to smoothly blend the additive animation with the base.

function updateWeights(additiveAction, weight) {
  additiveAction.setEffectiveWeight(weight);
}

// Example: Gradually increase weight
let weight = 0;

function animate() {
  requestAnimationFrame(animate);

  if (weight < 1) {
    weight += 0.01;
    updateWeights(additiveAction, weight);
  }

  mixer.update(clock.getDelta());
  renderer.render(scene, camera);
}

5. Blend Between Multiple Animations

You can combine multiple additive animations by adjusting their weights independently.

const additiveClip2 = THREE.AnimationClip.findByName(animations, 'SecondAdditiveAction');
const additiveAction2 = mixer.clipAction(additiveClip2);

additiveAction2.setBlendMode(THREE.AdditiveAnimationBlendMode);
additiveAction2.play();

// Control weights dynamically
updateWeights(additiveAction, 0.5);
updateWeights(additiveAction2, 0.7);

Benefits of Additive Blending

1. Layered Control: Allows precise adjustments by layering animations.
2. Resource Efficient: Reuses existing animations instead of creating entirely new ones for minor variations.
3. Dynamic Adjustments: Add or remove animation layers at runtime for interactivity, such as player-controlled gestures or expressions.
4. Smooth Transitions: Avoids abrupt changes in motion by blending instead of replacing animations.

Common Use Cases

• Character Animation: Add facial expressions, gestures, or emotional cues to a base animation.
• Dynamic Gameplay Actions: Overlay a shooting action on a running animation in games.
• Fine-tuned Movements: Introduce small, localized adjustments like breathing, blinking, or head tilting.
• Interactive Experiences: React dynamically to user input by blending context-specific animations.

Tips for Effective Additive Blending

1. Normalize Clips: Ensure additive clips start from a neutral pose to avoid abrupt movements.
2. Preprocess Additive Animations: Use tools like Blender to bake additive motion relative to a base pose before exporting.
3. Use Weights Gradually: Avoid setting weights abruptly; smooth transitions produce better results.
4. Combine with IK: Use inverse kinematics (IK) for more realistic interactions when blending animations for arms, legs, or other joints.

Conclusion

Additive blending in Three.js offers a flexible way to layer animations, adding depth and responsiveness to your 3D scenes. Whether you’re building immersive characters or dynamic objects, leveraging additive animations can significantly enhance realism and interactivity. By understanding and applying these techniques, you can create animations that stand out while keeping your workflow efficient and streamlined.