How to convert AnimationGroup to AnimationRange

Questions
1

Hi folks,

I found that AnimationRange run faster than the Animation Group! The following demo shows multi-character dancing in the same scene, it works perfect on my computer. It has about 200 dancers in a scene and remains 60fps, but when I use gltf format with AnimationGroup to drive the skeleton, it took more time than this demo. (around 10 times or more)
https://www.babylonjs.com/demos/dancers/

I use

container.instantiateModelsToScene()

to instanciate the character and set the animation to play. it led to a huge rise of execute time per frame, render time is okey. considering the bias between two methods, I have to ask for some advice on converting the AnimationGroup to AnimationRange or any suggestion for accelerating. also there are so many duplicated animation groups when instanciating the character(meshes,bones and animations)…

2

I don’t think your problem is AnimationRange vs Animation group, as the animation code itself is the same for both. Also, AnimationRange is simply a wrapper for the from/to values of an animation, it literally doesn’t do anything else. Here’s the whole class:

 export class AnimationRange {
    constructor(
        /**The name of the animation range**/
        public name: string,
        /**The starting frame of the animation */
        public from: number,
        /**The ending frame of the animation*/
        public to: number) {
    }

    public clone(): AnimationRange {
        return new AnimationRange(this.name, this.from, this.to);
    }
}

I think your problem lies elsewhere. When loading a gltf, you get PBR materials, whereas the dancer demo is using standard materials. PBR materials are more taxing on perf, so it might explain some differences.

In any case, you should monitor the performance using the Performance tab of your browser, for eg, to know where the time is spent in both cases.

2 Likes
3

Thank you for your kind reply. I may misconcept the AnimationRange to the skeleton animations. I found that when importing the .babylonjs file, the animations are attached to the bones while .glb file are usually grouped as AnimationGroups. AnimationGroups usually has multi-channel transfomation for every joints, such as position, rotation and scaling. The skeleton animations are rotation matrix, I wonder the difference between the two types of skeleton animations. If they are the same, why we need extra approach to animate the bones? Another question is that when we using cloned characters, in some cases like
https://playground.babylonjs.com/#IJ5DL6
animationGroups and skeletons are also need to be cloned, but obviously they are the same. So in some scenes with extremely a large number of cloned characters, is there any possibility that sharing the resources of animations and keeping the individual behavioir of every chracter at the same time? using single animation or skeleton to drive multiple clone units for example.

4

Having separate channels is how animations are defined in .glb file, that’s why it’s how it is working in Babylon. However, I don’t think it is different when the animation is coming from a .babylon file(?) The difference is that in gltf we animate transform nodes (bones are linked to transform nodes) and in .babylon file we directly animate the bones, but in the end it’s the same thing, we update a property (rotation, position, scaling) and the matrix of the transform node/bone will be recomputed from there.

Regarding sharing skeletons, GLTF Skeletons And Transform Nodes - #5 by bghgary may help, as well as Sharing skeletons between two skinned mesh · Issue #1285 · KhronosGroup/glTF · GitHub.

2 Likes