Looking for a light and quick way to animate people and animals

I started playing 3d graphics with a Spectrum … many years ago. I had to use the z80 assembler to build a rudimentary 3d engine … I spent the nights there.
There was also no multiplication and division in the machine instruction set.

Resource saving training has affected my way of imagining solutions. Resources are huge for me today. After a year of training with Babylon the scene around my first old steam locomotive has started to slow down … too many things, too many details … The old philosophy of saving has taken over.

Having to populate railways…
and surroundings, I started evaluating skeletons and blender editors. Too many triangles, very sophisticated moving vertex interpolations (blender), I need to animate many small meshes looking at them from afar … I have to save resources and go fast.

I took an alternative route trying a solution that allows me complete control. I am a fan of Chaos Theory and brainstorming … I am interested in hearing your considerations …

My little … people and animals

1 Like

@PatrickRyan and @PirateJC are our animation people so they might now some tricks for saving resources on animations :smiley:

AH! This seems like this could be an EXCELLENT candidate for the new Vertex Animation Textures coming with Babylon 5.0.

Adding @brunobg to this thread as he is the mastermind behind it and can tell us more about it.

Essentially (as I understand it) it allows you to store animation data in textures and give it entirely to the GPU to handle, saving valuable CPU cycles.

1 Like

As a child my mother sewed the shapes of my puppets and filled them with scraps of wool … A tailor applies a flat weave to his client model … A difficult job … Maintaining the relationship between the 3d vertices and those of the 2d texture involves a careful choice of the 3d vertices to be cloned at the seam points.
I had to build a small tool to keep under control the relationship between each 3d vertex and the corresponding one on the 2d texture.
Increasing the number of cloned seam vertices simplifies the work of texturing but weighs down the processing.
The silhouette of a humanoid or animals is as complex as its texturing work.
The way dolls and puppets are articulated suggested a simplification strategy to me.
Building elements separately, connecting kinships and animating them with … trigonometry …
Also due to the few triangles used, the joints are coarse but if we remain at a decent distance this takes a back seat.


The movie shows 17fps … too many things … In that context it is really useless to better define the sheep …

hello everyone and thanks for your availability. :alien:

You may try https://www.pixcap.com/ - a web-based editor to easily create 3D animations.

1 Like

Thanks labris for the tip.
I downloaded a female model from PixCap, very beautiful and detailed, the glb format takes up almost 10 Mb.
What do you want to expect from an old machine language programmer?
I’m kidding, of course …
I present to you a small video with Lara and some of her friends. Lara and her textures occupy 200 kb … a ratio of about 1: 50. Obviously they are two different things.

Lara & friends

Sorry for the menus partially in Italian, I should work on it a little
Greetings to all :alien:

1 Like

Let’s see what I can do to help here. The demo sometimes doesn’t load properly, by the way. It took a couple of reloads to get it working.

First, animations. If you are looking for characters animations, Mixamo is awesome. Free, tons of animations, easy to use. I never actually used with BabylonJS to be honest, but I think you can easily convert the exported models. I saw Pixcap a while ago too, and it’s really awesome for custom animations.

Second, meshes and skeletons. You should strive to reduce the number of polygons and make skeletons as simple as possible. At least your meshes are quite small and simple.

Third, optimizations. If your bottleneck is the CPU, Baked Texture Animations | Babylon.js Documentation can help you (these are the VATs @PirateJC mentioned). It’s essentially a way to pre-compute the animations and store them in textures, so it can all be done on the GPU later. Docs and examples should help you, though there’s a small open issue on some types of animations that I intend to finally do a proper fix one of these days. I still have to wrap my head around how to play the animation groups independently and frame by frame.

One thing you should take notice, coming from your Z80 background, is that bottlenecks changed considerably. For the “average scene”, memory isn’t an issue anymore. The number of polygons isn’t the usual bottleneck anymore either, like it was in the early 2000s. When working with JS the usual bottleneck is CPU, since browsers for some reason refuse to provide a decent multi-thread model. This is why VATs are interesting, you offload the mesh/bone computation, which is a sure bottleneck when you start having multiple models.


wow that’s great …
I had never arrived in this space before … I took a quick look at the discussions and I think I will have a lot to learn …
Thanks brunobg. :alien:


Hello everyone…
It’s been a long time and I’ve probably got to the second point …
In my game I have gradually updated a tool that has helped me to proceed. An incomplete, perhaps creaky tool, an editor oriented to the relationship between the 3d vertices and the corresponding 2d points on the texture image. This seemed to me an essential knot. I rediscovered the work of the tailor who cuts and sews the fabric on his mannequin.
The model that I present to you has just over 200 vertices … my personal compromise for a small figurine. I chose a female model just to handle a few more bumps … ehehehe.
If you export the data.js file you will find all the skeleton data in it.
Position of the 3d vertices, Position of the corresponding 2d vertices on the texture, Indices of the triangles, Constitutive data of the bones.
The 2d vertices are not expressed in the inconvenient uvs format.
(0,0) is in the lower center; javascript takes care of translating them.

this is the link:


Fails to load the texture on the first try … need to repeat sometime … :alien:

Vertex color in edit context:
red: edit master
blue: cloned seams
green: mirror (X)
yellow: parent.

The first girl is called Penta because the pentagon is her geometric philosophy.

You will find several options disabled … due to work in progress …
research in progress …
I will need your help to move forward a little faster.

First question …
How to save my skeletons in babylon, in glTF …?
I tried … ko …
Then there will be more questions …

Greetings to all … :alien:


Mine too :wink:

Hello everyone !
To build Penta I manually proceeded to write in the Data.js file the coordinates of the vertices 3d, 2d, of the indexes and parameters of the bones. A rigorous order of queues was required to limit the risk of errors.
In life I would define myself as a toolmaker, with experience I have become a generic discreet repairer and I have often had to build ad hoc tools for myself.
In the case of Penta the little editing program has grown to limit the difficulties. Just think that even for a simple figure the need to insert or delete a vertex forces to rename the sequences of many triangles.
I would like to talk to you about the question of the four points.
In 3D geometry, two points in space identify a bundle of planes and the third point fixes a single plane. Only in 1 case out of infinite cases four points lie on a plane.
The 3d editing programs I have touched upon build quality images with thousands of triangles … thousands of small triangles …
In a complex figure, increasing the texture density causes the generic groups of four adjacent points to move closer to the plane.

In this case, give four points
it becomes quite indifferent to define triangles as
ABD - DCA or

If, on the other hand, the points are limited to defining the synthesis of vertices of convexity and concavity this is no longer true …
It is necessary to choose, case by case, the sequence of the two triangles referring to the four generic vertices …
This “little thing” implies that there cannot exist (never say never…eheheh :alien:) an automatic algorithm that defines the sequences of the indices …
Not only are the indices overturned in the two right and left sides, but there are strategic choices to define the relative convexity or concavity of some groups of four points very distant from the planarity.
The protrusion of the nose near the socket of the eyes, … Penta’s breasts and ass … sorry. :smiling_imp:

example : Penta -Bust vertex : 98, 105, 113, 114.

I’ll let you know … where the wind takes me … Greetings to all. :alien:

How many roads must a man walk down
Before you call him a man?
Yes, ‘n’ how many seas must a white dove sail
Before she sleeps in the sand?
Yes, ‘n’ how many times must the cannon balls fly
Before they’re forever banned?
The answer, my friend, is blowin’ in the wind,
The answer is blowin’ in the wind

Blowin’ in the wind :+1: :guitar:
Guitar Chords

The ability to export my skeletons in .babylon format forced me to restructure the data.
I want to proceed only with a text editor, without blender or other dedicated programs. My little program is oriented to modify the Data.js file in a visual way. The possibility to save the data in the browser localstorage has simplified the process of creating the skeletons. For now the animations are managed by the CPU. I will try
soon to use the animations managed by the GPU.
In my editor the red vertex is the current one,
The green vertex is its symmetrical left right.
The blue vertices are the seam clones
The cyan vertex is the center of current bone rotation.
The Bdt array define the bones data.
It is possible to export the data in a new Data.js file and the UV map with the superimposition of all the triangles of the texture.

Hello everybody…

As I continue to play with my mini skeleton editor, manual intervention on the Data.js file is reduced.
I am a Darwinian lover and I have learned that only as you walk the path do you encounter new choices. Sometimes, reaching a plateau hidden behind the rocks, one encounters new choices, never seen before. You may realize that new path choices are possible or that the path no longer allows you to proceed … Learn to accept the mistake, go back, change your choices, change your opinion.
This is the game …of life. Whoever adapts survives …
… continue…

1 Like