ArcRotateCamera Pan and Zoom sensitivity

Hi all,

I am having trouble getting pan and zoom under control using ArcRotateCamera.
Ideally, I’d like to have the same behaviour I can get with ThreeJS or Sketchfab.

I created the same scene in BabylonJS, ThreeJS and Sketchfab (links see below).
This screenscapture hopefully visualises the issue:

BabylonJS PG:
https://playground.babylonjs.com/#WGZLGJ#5803
ThreeJS:
https://jsfiddle.net/oliverxyz/0kLzmh29/1/
Sketchfab:
https://sketchfab.com/3d-models/venus-911e21e7518a4322886fb96b479b7be6

Pan:
ThreeJs and Sketchfab both seem to implement ‘screen space panning’.
Regardless of camera radius, the object is pretty much where the mouse is during pan.

Zoom:
Mousewheel sensitity seems to adjust based on camera radius.
I can get very close to the mesh in ThreeJS and Sketchfab without a problem.

What would be the best approach for the same behaviour in BabylonJS?
I was thinking using onAfterCameraRenderObservable to update panningSensibility and wheelPrecision based on camera radius, but maybe there is a working out-of-the-box method.

Thanks!

cc @PolygonalSun our input guru :slight_smile:

Thanks @sebavan!
so far, I got the mousewheel sensitivity under control with

camera.wheelDeltaPercentage = 0.01;
1 Like

Unfortunately, there is no out-of-the-box way to accomplish this in BJS but your idea to update based on radius would work. Here’s a quick example demonstrating this: Proportional Panning/Zoom Speed | Babylon.js Playground (babylonjs.com)

2 Likes

I love this community :smiley:
Thanks @PolygonalSun, this is the behaviour I am looking for. Controls feel really good. Will try it with different scene scales.

1 Like

Reporting back with more info on scene scale:
At a panningSensibility of around 7000 (small camera radius), panning gets sometimes stuck, or suddenly decelerates (Video and PG below).

Which brings me to the question if BabylonJS prefers large scenes and one should try to avoid small camera radiuses.

You can see the demo file’s scale in the screenshot. It is pretty much real-world scale at 1 BlenderUnit === 1 Meter.

You can see panning getting stuck in the video (when getting really close to the mesh), or try it in the PG:

I feel like a larger scale scene will play nicer with zooming and movement than a smaller scale one. There is something odd about that behavior though. Have you tried doing anything to adjust the camera’s inertia value?

I have not changed the cameras inertia.
In fact, the video above was taken from the PG I posted.

And in there, all adjustments to the ArcRotateCamera are:
.minZ .wheelPrecision .panningSensibility.

I tested the PG with Chrome and Firefox and both have the same issue

I agree it is a pitty that Babylon has no proper arcrotation camera like other engines since it is heavily used for product visualization, also it is used in the demos and the behavior on mobile devices is pretty weird.

@PolygonalSun Sry, just wanted to bounce on this and add my little piece to it. It looks to me like when you click to pan on the mesh, the speed of the panning is different from when you click on the root. It doesn’t seem to be related to FPS/performance. It’s as if when you pick/pan from the mesh or from the background the sensitivity of the camera panning is not the same?!

That’s a bit harsh I think. What other engines are you refering to? I agree it can still be improved but the handling of cameras has never been an ez task and I know of many apps and AAA games where this camera behavior is far from being what you would expect.

I was thinking not only about major offline engines like UE, but direct “competitors” like ThreeJS
Documentation and src three.js docs
Sample Hello, Three.js Orbit Controls! / Mike Bostock / Observable

Well, three.js is still the leader as of just now and BJS the challenger. But I’m confident that we’ll get there soon :smiley:

Would be more helpful to know what you consider missing on the Babylon ArcRotateCamera ?

Please don’t misunderstand me, I love Babylon!

I just feel that those controls are not up to par with the rest of the engine, especially on mobile devices.

The pinch zoom should work as it work in a photo meanwhile in Babylon in seems to depending on the distance to origin or something like that (and too fast by default), the same thing happens on panning it is not controlable and it is far away from being an smooth experience. Rotation is better but still not perfect. To test that controls you should use a mobile device.

ThreeJS sample is the ideal control including inertia and so, I’ll repeat again: I prefer Babylon, but the arcrotate camera is far away from being optimal.

Regards.

1 Like

I think we have all of those behaviors supported and some come down to preferences but I agree that default unusable speed and such does not show up good :frowning:

@PolygonalSun I wonder if we could have a tiny helper or a new camera type to include all the default working on mobile as well ?

1 Like

It’s definitely worth considering. I know that I have a list of things that I’d like to do to improve the camera experience, especially for ArcRotateCamera.

1 Like

Is there anything I can do for helping?

Yup if you could provide a playground with what you consider a nice default setup, it would be great !!!

thanks everyone for chiming in!
I cant bring much more to the table other than an observation (in addition to my first post) with one more webgl framework:
the project I am working on uses playcanvas. The arcRotateCamera equivalent is called orbitCamera. IMHO it works great and has great defaults.
Loading up the same model, side-by-side in the BabylonJS sandbox and the playcanvas gltf viewer makes the problem quite obvious: try to get close to the mesh and pan side to side.