Camera roll rotation

Questions
1

Short question: is there a way to roll the camera in BabylonJS, like so?

image

I’m specifically using ArcRotateCamera, without interfering with any other functionality. I.e., I’d like to activate the roll rotation while holding the SHIFT key. If anyone’s got any Playground examples, I’d be interested to see.

Cheers!

2

Lets add @PolygonalSun but there is a upVector on Camera you might be able to use to set up your use case.

4

I had initially tried this, but it seems that the roll rotation got a bit laggy at times instead of being smooth (especially when I’m zoomed up close to a shape), so I was wondering if someone had successfully achieved this before.

5

Wondering why this would not be smooth, can you share a repro in the playground ?

6

The upVector would be the easiest way to get the roll to work for the ArcRotateCamera. I’d be curious to see how you’ve implemented the roll. Also, just out of curiosity, any there any reason why you’re using the ArcRotateCamera?

7

Here’s the implementation (to trigger the camera roll, hold the CTRL key while clicking + dragging):

As you can see, the roll isn’t super smooth – it shakes a bit at times.

Another implementation that didn’t go very well:

In the second one, it seems that the camera doesn’t quite roll around its pointing axis. This can be observed by the fact that different sides of the cube are being revealed as you try to roll the camera, instead of simply rotating the frame.

8

Also, just out of curiosity, any there any reason why you’re using the ArcRotateCamera?

I started using the ArcRotateCamera and it’s been working quite well for my CAD-viewing app, so I’d rather not switch to another camera type just for this if possible.

9

Bumping in case anyone’s got any ideas for this. Thanks!

10

After playing around a bit with your PGs, it looks like you’re almost there with this first one. I think something might be incorrect with how you’re calculating the upVector though. When I tried to track how your upVectors were looking by drawing lines for them, it created more of rounded shape, rather than a circular plane.

image
image922×854 52.6 KB

Lemme play around a bit and see if I can get a better answer for you tomorrow.

11

Okay, for generating your upVectors, I’d recommend using something like camera.getDirection(BABYLON.Axis.Y) to get the up direction, with respect to how the camera is facing. From there, you should be able to rotate it around the forward vector.

12

Are you suggesting replacing

const newUpVector = initialUpVector.rotateByQuaternionToRef(
  BABYLON.Quaternion.RotationAxis(forward, accumulatedRoll),
  new BABYLON.Vector3()
);

with

const newUpVector = camera.getDirection(BABYLON.Axis.Y);

or something else? Because that doesn’t seem to work correctly.

13

Sorry, allow me to clarify, what I meant to say was that, for your initialUpVector, you should use camera.getDirection(BABYLON.Axis.Y) as that was the easiest way to get an upVector that you could rotate around. Looking back at this though, this may not actually be the best answer because this could effectively mess up your alpha and beta angle values.

I decided to just try to make something and here’s a basic implementation: Basic ArcRotateCamera Roll | Babylon.js Playground (babylonjs.com)

3 Likes