Interpolating from UniversalCamera orientation to GLTF/GLB animated camera

Hi there:

First, I have not a PG at the moment. Maybe it’s not necessary.

In my scene, I have several locations and two cameras:

  1. a UniversalCamera I create by code (camInteractiva);
  2. an animated FreeCamera imported via GLTF/GLB (camAnimada).

scene

In order to “travel” from the current camInteractiva orientation to the camAnimada orientation (at the very first frame of animation), by means of:

BABYLON.Animation.CreateAndStartAnimation("animCameraMatching", camInteractiva, "rotation", 30, 60, currentRotationFromInteractiveCamera, rotationFirstFrameOfAnimatedCamera, 0, easeMatchingCameras);

…I guess I have to take into account the whole chain of transformations, namely: FILE_ANIM_0 > camAnimada > camAnimada.

Any advice on it?

Also, is it preferable to work on it with quaternions or Euler angles?

Thanks for your time.

quaternion despite being les intuitive will prevent weird gimbal locks behaviors :slight_smile:

Yup you would need the full transform chain with absoluteRotation and globalPosition if I remember correctly.

Hi, @sebavan:

First, let me thank you for your interest.

As you say, I’m already using quaternions in order to avoid the “famous” gimball lock issues.

Also, I’m using absoluteRotation in order to retrieve the complete chain of transformations in both., the interactive camera and the animated one.

Nevertheless, the case is that my implementation it’s not working the right way. That is, the interactive camera (UniversalCamera) works well by its own side (not complication at all here), and the same can be said about the animated (from GLTF/GLB file under AnimationGroups) camera. Is the (let’s name it) “matching” animation (interpolation if you prefer) between a random orientation of the aforementioned interactive camera and the first keyframe in the file of the animated one, where I can’t have it working as expected.

I’m very conscious about that it is very hard to help without a PG, so I’m trying to manage to assemble a trivial scene containing the same aspects failing in my real project.

I’ll come with such PG as soon as possible.

Best regards.

1 Like

Hi there, @sebavan:

As promised, I’m finally back with this PG, in the hope it can help to illustrate the malfunction I’m facing.

Actually, there are several “problems” involved. Let’s go step by step.

First, when trying to assign the last keyframe (position/orientation) of an animated camera from a GLTF/GLB data to a 100% interactive (in terms of free orientation) camera.

This way, after the camera animation is ended, I try to copy its position (camAnimated.globalPosition) and orientation (camAnimated.absoluteOrientation) but the first retrieve a non-correct value, manwhile tthe last is undefined.

Any help with it?

P.S. As I don’t want to bother you with an excessively wide question, only once I understand what is going wrong here, I’ll pass to a PG with the second issue I’m experimenting with this implementation, the one related to the interpolation (using CreateAndStartAnimation) between camInteractive and the first keyframe of a new camera animation coming from the GLTF/GLB.

You are using properties which do not exist in your pg: https://playground.babylonjs.com/#U3CZNA#7

1 Like

Hi there @sebavan:

Well, in order to understand the whole picture here, let me recap:

  1. camAnimated is initialized with the call to scene.getCameraByName("persp1");

  2. When the end of the animation (animation group indeed) of camAnimated is reached, I want to assign its value to the other camera, namely camInteractive

…but you say that this last step is only achievable through a clone of camAnimated.globalPosition;
and camAnimated.absoluteRotation. Isn’t it?

Can’t understand why is not possible to access that pair of values directly, cloning nothing at all?

Thanks for your time.

The error was you were not applying the fov and it is absoluteRotation not absoluteOrientation like in your playground.

The clone is just to be sure both cam do not reference the same object to prevent any confusion if one was changing somewhere else in the code.

Hi there, @sebavan:

Sorry, my fault! Certainly, I have been a bit “thick” in my previous answer. I see now the rotationQuaternion and absoluteRotation use of.

Anyway, rotationQuaternion could be a little tricky to identify. Lesson learned!

Also, I see a change in the clear color of the scene. How to preserve that value?

This said, I’m trying to incorporate all this new knowledge to the more wide problem I had, that involved also the use of `CreateAndStartAnimation, if you remember, and I’ll let you know whether is already working.

Best regards.

You also need https://playground.babylonjs.com/#U3CZNA#8 minz and maxz to get the cam range setup. basically you need to bring as many config as needed.

Hi there, @sebavan;

Yes, OK, I understand that pinhole camera model both intrinsic and extrinsic parameters must be copied between (in my case) camAnimated and camInteractive.

By the way, and related also to this same functionality where I jump from a camera to the other, Is it advisable in terms of performance, to detach from the canvas the free camera (camInteractive in my case) when I’m passing to the GLTF/GLB animated camera ("camAnimated), and re-attach it when I’m returning to it? In other words, may I let my camInteractive camera attached to canvas meanwhile is not the scene’s active camera or that have any bad implications?

Could be instead a more proper approach using only a unique camera and then detach/attach when passing from free movement to tied-to-baked-animation (the one from GLTF/GLB) one? Is that continuous attach/detach process code-efficient?

Best regards.

attach/detach does not cost and yes only keeping attached what you need would be better.

Keeping one camera will be the simplest so yup why not attach detach during animations :slight_smile:

Good evening (at least here in Spain), @sebavan:

Ok, I promise I’ll go with the one-and-only-real-camera as you recommend when I have a clear view of the whole picture here. Remember that the title of this question talks about “Interpolating from UniversalCamera orientation to GLTF/GLB animated camera”, let’s go finally with it.


To try to make it easier to understand the “mechanics” behind it, let me begin with a first-iteration implementation, at the level shown in this first PG.

Schematically: camInteractive at first position (—click on cube–>) camAnimated towards second position (–last frame reached–>) camInteractive at second position (—click on cube–>) camAnimated towards third position (–last frame reached–>) camInteractive at third position

The problem with this approach is that it suffers from noticeable “jumps”, produced when you’re freely looking at a certain direction, and then you click the cube, starting so the animation. Is in order to avoid that, is what I want to implement a “matching” pre-animation or interpolation (hence the title of this thread).


In order to fulfill all these requirements, a second PG, has been done, as an evolution of the previously referred. But It doesn’t work. I think the error comes from a misunderstanding of the CreateAndStartAnimation method. Could you help on this?

Thanks for your time.

P.S: Excuse me if this has been a too-long-thread-at-the-moment to arriving just to this last PG, but I hoped it would be not necessary to elaborate a complete PG. Anyway, all your answers have really helped me in the understanding of different aspects involved in the implementation. :face_with_monocle: