TargetCamera randomly rotates around itself while animated

[logunov]

Good day, Sir. First, I want to say Thanks to everyone, who spent time to read this, I will be glad and happy to hear any advices or notes about this issue.
Here is a PG: https://www.babylonjs-playground.com/#AI1MQC#2
Please, hide the SetEnviroment(), getPointsArray() and cameraMoveAnimation() functions bodies to make code more readable, I specially out them from main code.

As you can see, there is 2 important lines: 82 and 83.

Each points from "points" array is a real data from real project, that is not random numbers. 
So, the camera should move from: point1 to point2, then point2 to point3, then point3 to point4,  and so on.
There is no problems in start points, it's moving smoothly, but at point7 to point8 (and some others) camera rotates around itself. (Playground setted by default to reproduce this).
It look like... flipping possible. I am using pivot method to create camera, and I can not use ArcRotateCamera in real project, because in some points it's broken because of gimbal look, for example, at point8 as I remember, it will dispose, and then appear, ArcRotateCamera was first, what I tried.

So, the question is: how to prevent camera flipping around itself? 

=====================
upd: I tested a little more, if I am using lookAt method without animation and just setting new quaternion, it reproduces the same problem, but I don't have any idea why it happens and why it's changing rotation angle.
=======================
upd2: I made additional example, which shows problem from outside: https://www.babylonjs-playground.com/#X66D1S#1
As you can see, big red sphere doing strange movement but if you change animation arguments in lines 82 and 83 from points[7], points[8] to points[6], points[7], sphere will do exactly what I needed, so what is it? Why it happens? How can I prevent this? 

[logunov]

https://www.babylonjs-playground.com/#X66D1S#2 here is additional demonstration, why I can not use ArcRotateСamera or Euler angles. 
In this example I changed method to use rotation instead of rotationQuaternion and when animation finishing camera immediately dying (I don't know how to call this phenomenon, gimbal lock probably

==========
Upd: https://www.babylonjs-playground.com/#X66D1S#6
I though problem was in pivot method, but when I changed method to position from quaternions (not effective, but better, than nothing), it's still flip in certain points. 

I have no idea why camera is flipping. 

=====
Upd:
Well, some time passed, so I need to say sorry for my manners of question. I hadn't time to make some etiquette. 

Thanks to everyone, who spent time to read this, I will be glad and happy to hear any advices or notes about this issue.
 

[Guest]

Hello and welcome!

So first of all I would highly recommend to provide simpler PG without all the noise (like removing unnecessary functions :))

I can see that you are doing a lot of custom maths so I guess the problem is in your math, correct? Can you describe your algorithm? What is the goal? Can you isolate just the problem itself?

 

[logunov]

Thank you, @Deltakosh, for the advice and answer. 
There is isolated code, and there is no custom math: 
good result: https://www.babylonjs-playground.com/#AI1MQC#7
bad result: https://www.babylonjs-playground.com/#AI1MQC#6
One method, but different arguments.
I added some comments and removed unnecessary code. 

1) Setting pivot
2) Setting camera parent to pivot
3) Pivot looks at startPoint on sphere surface
4) Cloning pivot, making clone lookAt end point
5) Passing pivot.RotationQuaternion and cloned pivot.RotatingQuaternion (after lookAt method) to animator
6) Getting camera rotation around itself

If I pas another two points on the same sphere, it works perfectly. 
I would be glad to use another points, but It is impossible in real code. 

More detail explanation: 
Points - is just a points on sphere surface, which I am moving my player, and camera should look perpendicular to tile under player. Camera moving from tile to tile, but follows player. 
It is turn-based game, so my player moving asynchronous to camera movement and camera moving on her own around sphere surface, but I can not use ArcRotateCamera, because it have gimbal lock and the same issue.

In this playground camera rotates around itself and change angle of view.  For example, camera was perpendicular to the player, and there was some stone behind him. 
When I moving through BABYLON.Animation, it rotates around itself and stone now in the upper part of screen. In the playground you can see it like light reflection drawing arcus, but if I change 

Again, thx everyone who spent time to read. 

[Guest]

I'm so sorry but what is wrong with 2nd playground? I see the camera rotating. Isn't it expected? what would you expect? (it is though to say as data points are kind of random :))

[logunov]

@Deltakosh maybe video will explain better, than words

After movement, starting on 0:20 to 0:23 camera changes angle of view, and there is much of this points on the sphere. 
I can't find a reason, why it happens. And I have no idea how to prevent this rotation.

 

 

[Guest]

Well why do you need to rotate the camera? In your example rotation the mesh should be perfect no?

i think the problem is coming from the way the camera is building its viewMatrix and its relation to upvector (the problem will really be visible when you are almost perpendicular to upVector):

https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/babylon.targetCamera.ts#L370

 

 

[logunov]

Thank you for the tip, I will try to figure out what's happening during linear transformations with camera.
About mesh rotation, the snake on the sphere surface is not a mesh but dynamically changing object, because of some game triggers, so there is no possibility to follow it with camera (in my view, maybe it is possible).
If I am trying to use pseudo-mesh, wich moves from points to points, that target camera or follow camera do not move around sphere surface, but in angle to it. ArcRotateCamera and ArcFollowCamera both dying in certain positions, maybe I did something wrong with it, I will check it better. 

[Guest]

ok make sense, can you try to repro on a simpler isolated data? So we can check the maths?