How to Animate 3D Object with WebGL – BabylonJS Series part 7

BabylonJS Series by David Catuhe (@DeltaKosh):

• Part 1 – Build a 3D Sphere with WebGL
• Part 2 – 3D Elements with HTML5 and WebGL
• Part 3 – Rotating and Scaling 3D Objects in HTML5
• Part 4 – 3D Objects with Textures using HTML5
• Part 5 – Using a Camera in a 3D WebGL World
• Part 6 – Light in a 3D WebGL World
• Part 7 – How to Animate 3D Object with WebGL

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

What you could expect

Your scene is beginning to look great, but it is very static. To put dynamic in it, we are going to learn how to move your meshes as you decide.

Final result

How can I do this ?

There is two different ways of doing animations in your scene. The first possibility is to define a collection of keys and saying your object situation at each key. The second one is for more complex animations, when you change animation code at run time.

1 – Basic animation

The animation is based on objects called Animation (!!). An Animation is defined by various properties and a collection of keys. Every key represents the value of the Animation at a given time. To achieve our today’s scene, we begin by creating our environment:

function createSceneTuto(engine) {
    //Basic scene
    //As usual: [scene, light, camera]

    //Creation of sphere
    var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
    box1.position.x = -20;

Our goal: move this “box1”. First, create our Animation object:

var animationBox = new BABYLON.Animation(
"tutoAnimation",
"scaling.x",
30,
BABYLON.Animation.ANIMATIONTYPE_FLOAT,
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

Many information are in the parameters:

1. Name of this animation, nothing more.
2. The property concerned. This can be any mesh property, depending of what you want to change. Here we want to scale an object on X axis, so it will be “scaling.x”.
3. Frame per second requested: highest FPS possible in this animation
4. Type of this change. Here you say what kind of value will be modified: is it a float (e.g. a translation), a vector (e.g. a direction), or a quaternion. Exact values are:

• BABYLON.Animation.ANIMATIONTYPE_FLOAT
• BABYLON.Animation.ANIMATIONTYPE_VECTOR3
• BABYLON.Animation.ANIMATIONTYPE_QUATERNION

5.Finally, you have to advise what kind of behavior this animation will take at their upper limit:

• Use previous values and increment it: BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
• Restart from initial value: BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
• Keep their final value: BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Now that we have our Animation object, it is time to say how those values will be modified. In our case, we want to scale our box, but not in a linear way: it must be faster when it became larger, and slower when it became thinner. So:

// An array with all animation keys
var keys = [];  

   //At the animation key 0, the value of scaling is "1"
    keys.push({
        frame: 0,
        value: 1
    });

    //At the animation key 20, the value of scaling is "0.2"
    keys.push({
        frame: 20,
        value: 0.2
    });

    //At the animation key 100, the value of scaling is "1"
    keys.push({
        frame: 100,
        value: 1
    });

Next, two important step:

• Adding the animation array to the animation object:

animationBox.setKeys(keys);

• Link this animation to our box:

box1.animations.push(animationBox);

Finally, you can launch your animation in one line of code, at any time in your application:

scene.beginAnimation(box, 0, 100, true);

You can also choose to only play a part of the animation (here from 0 to 100), and choose to loop this animation (here is true).

And you are done! Don’t hesitate to combine many animation for one object by pushing different transformation 😉

2 – Complex animation

The complex animation let you choose everything at each frame of the animation (each tick). The code computed at run time must be located in this function:

scene.registerBeforeRender(function () {
	//Your code here
});

This function can be very useful for complex animation like games, where characters have to move depending on many parameters.

Don’t hesitate to combine those two types of animations: if well done it’s very powerful.

Related Posts