panning feature

[basti]

Hi Guys,

I recently started to work with Babylon and I was wondering if the behavior for the arcRotate Camera is expected or not or I'm just doing something wrong :). Maybe you can help me out with that.

I would like to pan in the scene like this example here(https://www.mapbox.com/help/studio-manual-tutorials/). Unfortunately if I try to do the same in Babylon the panning for X and Y axis is different(Given that alpha and beta are zero). Panning along the Z-axis(left and right) is easy while panning along the X-axis(up and down) is almost impossible. See https://playground.babylonjs.com/#K9MWF6#1

I hope this explanation was not too bad.

So my question is if it is wanted like this how can I change it to have a similar experience to the panning behavior in the Mapbox example.

Thanks in advance.

Basti

 

 

[aWeirdo]

Hi @basti 
Welcome to the forums.

Works fine if you use the right angles & panningAxis  

X(Left/right), Y(up/down), Z(depth)

https://playground.babylonjs.com/#K9MWF6#3

[basti]

Hi aWeirdo,

thanks for your answer. If I take your example and try to flip the map like here https://www.mapbox.com/help/studio-manual-tutorials/ I have the problem that the map moves up/down and not back and forward on panning. Like https://playground.babylonjs.com/#K9MWF6#4

Somehow it looks as if I need to update the  panningAxis Vector in depending of the change of beta?! But I think that wont be so easy...

 

[aWeirdo]

Hi @basti

I believe this is due to how the camera panning works internally..

I tried updating some old panning code i once made, but i'm having a bit of a hard time smoothing the movement out.
https://playground.babylonjs.com/#K9MWF6#5

[aWeirdo]

@basti

I got tired of messing around with it, so here's a slightly hacky solution that works properly.

I have updated the ArcRotateCamera._checkInputs and removed _transformedDirection code,
it now ignores the camera's angles and always pan directly on the panningAxis.

https://playground.babylonjs.com/#K9MWF6#6

[basti]

Hi @aWeirdo,

I tried your example and modified it a little bit(https://www.babylonjs-playground.com/#K9MWF6#7). I changed the Axis to use the rotation feature for Alpha on the right mouse button.  Now it works very well. Thank you very much for that. Unfortunately I noticed when I try to rotate the map around the center point at about 90 degrees(right mouse button) and use panning after this, x and y axis are interchanged for panning. Could it be because there is some kind of transformation missing?

Thanks again

[aWeirdo]

Hi @basti
If you mean this odd panning when changing the Alpha rotation; https://www.babylonjs-playground.com/#K9MWF6#9
Then yes, that is indeed because of the missing transformation. 

However, I thought you wanted a top-down view, (in which Z panning isn't working properly) https://www.babylonjs-playground.com/#K9MWF6#10 ( @ deltakosh Is this a bug?)

I believe the issue may be related to the camera transform matrix, when Beta is "top-down" or close to it, (value of 0), and used for multiplying it nulls the direction..
 

// In ArcRotateCamera checkInputs..
BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection);


// Vector3..
Vector3.TransformNormalToRef = function (vector, transformation, result) {
            var x = (vector.x * transformation.m[0]) + (vector.y * transformation.m[4]) + (vector.z * transformation.m[8]);
            var y = (vector.x * transformation.m[1]) + (vector.y * transformation.m[5]) + (vector.z * transformation.m[9]);
            var z = (vector.x * transformation.m[2]) + (vector.y * transformation.m[6]) + (vector.z * transformation.m[10]);
            result.x = x;
            result.y = y;
            result.z = z;
        };

Sorry, i confused lower and upper limits for a minute there..
but if you are planning on having 
upperBetaLimit = Math.PI / 3;

You can keep the transformation; https://www.babylonjs-playground.com/#K9MWF6#11

[basti]

Hi @aWeirdo,

1 hour ago, aWeirdo said:

If you mean this odd panning when changing the Alpha rotation; https://www.babylonjs-playground.com/#K9MWF6#9

yes thats what I meant.

1 hour ago, aWeirdo said:

However, I thought you wanted a top-down view, (in which Z panning isn't working properly) https://www.babylonjs-playground.com/#K9MWF6#10 ( @Deltakosh Is this a bug?)

I noticed I need to flip your example to make it possible to change alpha in order to rotate the map around the center point. Thats why I changed the panning axis from your examples.

I would like the top-down view and be able to change beta from 0 to Pi/2(maybe not that much but in this direction). Sorry for not making that point clear. I would like to be as close as possible to this map view. ( https://www.mapbox.com/help/studio-manual-tutorials/) where I have panning on the left button and on the right button rotation around a center point.

This one  https://www.babylonjs-playground.com/#K9MWF6#10 looks actually quite good except for the panning problem.

Hopefully @Deltakosh can say something about the panning behavior.

[aWeirdo]

@basti 

Fix here; https://www.babylonjs-playground.com/#K9MWF6#12

you'll need the TransformNormalToRef_forMapPanning function aswell as the updated _checkInputs function.

the bugged happend when the transformMatrix was being applied as if we were panning axis 1, 1, 0 (default) and not axis 1,0,1 (map panning)

@Deltakosh  Want me to PR this? Please check it over, it seems to work but i don't know if it was the root of the issue or just a post-root correction..( Apologies for the many pings  )

[basti]

3 minutes ago, aWeirdo said:

Fix here; https://www.babylonjs-playground.com/#K9MWF6#12

Awesome this is perfect. Thanks a lot.