features

Animation of Objects


Animation

One way to animate things in BabylonJS is to change their properties within a scene.registerBeforeRender or scene.registerAfterRender loop. You will find many of the playground examples within the documentation using this method. However BabylonJS also provides animating methods based on a timed frame system. Given the right data BabylonJS calculates and draws a specific frame of the animation at a specific time independently of the scene rendering rate.

Ways of Animating

To help understand how BabylonJS goes about animating, consider a couple of different ways that animating is done, their similarities and differences. The designer of both has to consider, the action wanted, timing, the number of frames needed to produce the required fluidity and key points within the sequence.

The BabylonJS method is much closer to stop motion.

Animated Gif

Using an animated gif file a sequence of images, frames are combined to give the impression of movement.

Horse - Frames

Horse Animation from Wikimedia Commons

Each individual image is one frame of the animation.

Software used to create an animated gif often gives the opportunity to set a time for each frame to be displayed - 0.2 seconds in the example below.

Horse - Rate

Stop Motion Animation

This way takes a physical object which is photographed, changed slightly and then re-photographed. This is done repeatedly to form a series of images, each of which becomes one frame.

Lego Stop Motion from NYFA

During the design the creator will need to consider how long a sequence will take and how smooth it needs to be. The smoother the movement the more frames are required. This together with the timing of the sequence will give the frames per second. Also knowing the object's start position and end position and how many frames are required for this will give the object's movement per frame.

The BabylonJS Difference

For the animated gif the whole of each frame has to be drawn by the creator. In BabylonJS each frame is drawn from data provided by the creator.

In an animated gif the animation ties in: object being animated; the changes made each frame and the rapid display of the frames one after the other. In the above you think of the animation as the horse running.

In BabylonJS an animation is a specific javascript object not the overall finished piece. In the same way that a material is created which can then be applied to any mesh you create an animation which can be applied to any mesh, camera or light.

An animation in BabylonJS basically describes one change that will take place to one property.

Instead of giving the time for each frame to be displayed, in BabylonJS the number of frames per second in an animation is given. This should not be confused with the rendering speed of a scene, also measured in frames per second. The animation frames per second is specified in an animation.

The extent of the changes and when they take place are set in an array of key frames and values.

Terminology

The following terms will have the given meaning within the How_To about animating.

  • Performer an item that can be animated, could be a mesh, a light or camera for example.

  • Frame - an animation frame not a rendered frame of the scene.

  • Animation - similar to a play or film script but applies to just one property of a performer. It consists of

    • the property to be changed, for example, position, intensity or rotation
    • the rate of change of the property in frames per second,
    • the type of the property being changed, for example vector, floating point number or matrix,
    • looping conditions,
    • key values of the property at key frames.
  • Scripted Performer - The performer plus all the animations to be undertaken by the performer.

  • Performance - The scripted performer and the actions done by the performer following the script. In BabylonJS this is the animatable object.

  • Clip - The viewable result of a performance. In practice there are two types of clip a game clip and a movie clip. In a movie clip the user has no control over the camera and the clip is viewed according to the animation of the camera as set by the creator of the clip. In a game clip the user is able to move the camera as determined by the type of camera used in the scene. Unless it is likely to cause any confusion just the term clip will be used throught the guide when writing about animating.

  • Cartoon - A series of clips played at timed intervals.

Designing a Clip

The first step is to decide what you want to see in a clip, that is what is the performance to be. This gives the performer and its animation.

A very simple example

In this game clip a box, the performer is to slide between two places once every second. The box will be able to be viewed from any angle.

The first stage design is to sketch what is needed at key time points, a little like an animated gif design.

key frames

After one second the box should be in its new position and one second later in its start position. This sequence is then continually repeated.

In BabylonJS then animation is changing the position of the box along the x axis and its x position is a floating point number and

the animation should loop. In code the animation which slides an item in the x direction becomes

var frameRate = 10;

var xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

The key frames are at 0, 1 and 2 seconds. To find the frame number after t seconds multiply the time by the frame rate, i.e. t x frameRate. In this case the key frames are numbers, 0, 1 x frameRate and 2 x frame Rate.

Starting the box at x = 2 and sliding it to x = -2, gives the x positional values of the box after 0, 1 and 2 seconds as 2, -2 and 2 respectively.

The key frames are set into an array of Javascript objects with properties for frame (number) and value and added to the animation, as in

var keyFrames = []; 

keyFrames.push({
    frame: 0,
    value: 2
});

keyFrames.push({
    frame: frameRate,
    value: -2
});

keyFrames.push({
    frame: 2 * frameRate,
    value: 2
});

xSlide.setKeys(keyFrames);

The animation is now fully made and can be applied to the box resulting in a performance (animatable) by .

scene.beginDirectAnimation(box, [xSlide], 0, 2 * frameRate, true);

Playground Example for Above -


Functions and Parameters for Animating

Animation

new BABYLON.Animation(name, property, frames per second, property type, loop mode)

  • name - string, name of animation

  • property - string, a property of the object that the animation will be applied to. For example a Vector3 property such as position or a floating number propert such as position.x

  • frames per second - number, the number of animation frames per second (independent of the scene rendering frames per second)

  • property type - number, the property type of the property parameter. This can be set using the following constants

    BABYLON.Animation.ANIMATIONTYPE_COLOR3
    BABYLON.Animation.ANIMATIONTYPE_FLOAT
    BABYLON.Animation.ANIMATIONTYPE_MATRIX
    BABYLON.Animation.ANIMATIONTYPE_QUATERNION
    BABYLON.Animation.ANIMATIONTYPE_VECTOR2
    BABYLON.Animation.ANIMATIONTYPE_VECTOR3

  • loop mode - number optional, This can be set using the following Parameters

    BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE - Restart the animation from initial value
    BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT - Pause the animation at the final value
    BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE - Repeat the animation incrementing using key value gradients. In this way, for example, a clip showing a character's legs in a walking motion can be looped to show the character progressing across the scene.

beginDirectAnimation

scene.beginDirectAnimation(target, animations, start frame, end frame, loop);

  • target - BabylonJS Object, the BabylonJS object to be animated

  • animations - array, of all the animations to apply to the target

  • start frame - number, the frame at which to start the animation

  • end frame - number, the frame at which to end the animation

  • loop - boolean, true when loop mode of the animation is to be activated, false to run animation just once.

Further Reading

Basic - L1

Animation 101
Combining Animations

Mid Level - L2

A Sequence of Animations