How to calculate rotation from vertices movement

how can i calculate rotation from vertices movement

the exact scenario is get head rotation from landmarks

please help

There are too many unknowns for me to answer. Others may be more enlightened.

For example what vertices are moving?
What do they belong to?
How are they being moved?
Do they move individually or all have same movement?
Why does their movement alter rotation?
What is the reason for the ‘head’(?) to rotate?

Please describe your use case with more detail.

Hi, I am not a Babylon advanced user, you can take this example to ease your problem.
What you need to do is use “empty objects” in a 3D design program like blender3D and place them at those points, then search for those empty objects and get position / rotation in the world … In blender3D it is possible to position an object on a vertex, edge or face without having to do complex mathematical calculations.

I’m not entirely sure what you’re after either. Are you using bones, a shader or manually maving vertices around?
If you can somehow create x-, y- and z-axes of some known vertices, you can calculate a quaternion this way: Babylon.js Playground
I’ve used it to sync bones to a verlet ragdoll, but I have no idea what happens if the axes are off due to vertices moving unevenly.

We making an AR application and we got face landmarks as 3d positions we want to calculate the rotation,from those,points

All landmarks movement,is same like they belongs to,one mesh

In which case I believe @Raggar has given you the solution. If this does give you the solution it would be helpful if you would please mark his answers as such. If not please explain what else you need so we can provide further help.

I haven’t checked yet i m also thinking thats the solution i will try and get back to u guys thanks for the fast response thank you all

1 Like
yes i checked this example
but in this example we calculate using box.getWorldMatrix(); where box is rotating.
i know worldmatrix always change when there we change rotation.

i need same ouput calculating with spheres positions can anybody know how it possible (without using box.getWorldMatrix())

When you follow @Raggar’s code carefully you will see that the rotation of box2 does not use the world matrix but is calculated from some of its vertex points.

I think I now understand what you want and why you misunderstand Raggar’s solution.

Your need
A human face is being captured by a camera for the purpose of AR.
There are three landmarks positions marked on the face. As the human moves and turns the positions of these three points are recorded.
At a point in time the landmarks are captured as vertices and their rotation is calculated giving the rotation of the head.

Raggar’s solution is simulated. The box is rotated by code and box represents the head. Box2 is the internal representation of the head. As it is a simulation and no camera is used movement of box is achieved by rotating the box. The capture of the positions of the vertices of box2 is done using statements such as


So really the box.getWorldMatrix() is only acting as the camera.

Raggar has given you the tools to do what you want and to demonstrate that it works. However there is one slight issue. Raggar has used four points not three and they lie on the corners of a cube so the axis formed are of course orthogonal already.

This PG uses three points

The working parts to calculate the rotation given v0, v1, and v2, the positions of three non collinear vertices

const xAxis = new BABYLON.Vector3();
const yAxis = new BABYLON.Vector3();
const zAxis = new BABYLON.Vector3();

BABYLON.Vector3.CrossToRef(xAxis, yAxis, zAxis);


const rotationQuaternion = new BABYLON.Quaternion();
BABYLON.Quaternion.RotationQuaternionFromAxisToRef(xAxis,yAxis,zAxis, rotationQuaternion)

Should you find the rotation going the wrong way round swap the order of xAxis and yAxis in the Cross product.


you understand my requirement very well. thanks for the help. i followed you code but not working

can you inspect above playground thank you

In your PG

Main issue

var v1 = vertices[0];
var v2 = vertices[3];
var v3 = vertices[1];

vertices[0], vertices[1] and vertices[3] are the original not rotated positions from box and so as they are not moving box2 will not move.

It was these lines


that got the rotated values. ie the simulated rotation of the head.

You might find what is happening easier to follow in the PG

Secondary issue

v1.subtractToRef(v1, xAxis); //produces a zero vector
v2.subtractToRef(v1, yAxis);

This is not the pattern I gave. See my PG above for correction.

This section of my previous post

was just to show how to obtain the rotation given any three vertices. Here is a function to do it

I have not used the toRef method to make it clearer. The toRef method allows you to re-use variables and save on garbage collection.


Thank You so much You are the master it worked


@JohnK definitely is the master !!!

1 Like