PhotoDome: FOV Zoom to Cursor

Questions
1

What I’d like to do is to have a PhotoDome that can zoom to the mouse location.
E.g. like Google Photosphere Zoom example
When you point the mouse e.g. to the bike at the right top and use the mouse-wheel, the camera will change the FOV and the camera rotation.

So the basic idea is this:

  • get the point on the dome where the mouse is (before we zoom) origDomePoint
  • then change the FOV of the camera by some delta (e.g. 0.2)
  • the mouse pointer will still be at the same canvas xy-coordinates, but since we have changed the FOV it will now point to a different domePoint: newDomePoint
  • now we want to rotate the camera so that the origDomePoint is approximately at the mouse-pointer position again (the camera radius should stay the same)
  • This is where I am stuck. How can I calculate alpha and beta for the camera from the two dome-points?

This is my playground example, where the calculation is missing (see comments)

2

cc @sebavan

3

I think the best answer is let the framework do it for you. It is a very messy job. Something I have found best avoiding.

The important thing is if you know the final position the camera, then move it there. X,Y,Z positioning works for an ArcRotateCamera. Think there might be something else to call afterward, as well. The weather too good for me to check today, but I’ll bookmark this for Monday to check, if this is still open.

4

Let me add @RaananW to the thread as I guess @RaananW might have tricks for the fov ?

5

Thanks for the reply.
Note, that we do not want to move the camera around in the dome. The target of the camera should always remain at the centre of the dome and the radius should also remain the same. We only want to change the FOV and the camera rotation.

6

Hi, @TmTron , Not sure I fully understand your needs but this playground may help you :
@sam | Babylon.js Playground (babylonjs.com) (edited works better , edited 2 : not 100% accurate :thinking:)

2 Likes
7

Are you sure of this approach using the fov to zoom in on offseted target. Won’t it just always create a distorsion?

8

Also trying to fully understand what is missing :slight_smile:

Do you want to zoom to the mousepoint? i.e. - when using the wheelmouse the point under the mouse should not move and be the same as it was before adding the zoom factor?

9

That is amazing, thanks!

Not sure, what you mean.
I can set the cameraRadius to 0, but it does not seem to make much of a difference.
What would you recommend as alternative to FOV zoom?

10

Yes.
e.g. when I start to zoom, the mouse pointer is over e.g. a corner of 3 walls in the image.
Then we move the mouse-wheel and set the FOV.
I assume, that the mouse-pointer does not move during the zoom.
Now, we want to rotate the camera so that the mouse pointer is over the same corner again (or as near as possible).

11

As near as possible: Photo Dome FOV zoom to cursor | Babylon.js Playground (babylonjs.com) :slight_smile:

This is not taking the sphere wrapping into account. There is a missing compensation, but that will take a little longer to implement. The idea is - fov is in radians, so use the fov delta to compute the right delta (in radians as well). But again - this assumes a 2d space, so within certain zoom you will see that it drifts.

3 Likes
12

Thanks, that sound reasonable. But I’m afraid I’m running out of geometry/math skills :slight_smile:
For now I can live with samuelgirardins approximation.
But it would be great if the PhotoDome class could provide a good implementation for this feature.

13

Nice. Already works better than I thought it would. There’s a lot less distorsion this way but I guess it’s still a compromise of some sort. Still looks like something useable to me (until we get better :wink: :stuck_out_tongue_winking_eye: ). GJ, :smiley:

14

Hi @TmTron , you can try this one, much better than my previous one :
@sam | Babylon.js Playground (babylonjs.com)

When the pointer is on the edges, alpha & beta are a bit more weight, to increase camera rotation. If you want something more precise remove ratioX & ratioY from code.

1 Like
15

This logic sometimes “jumps” when we zoom in:
2023-05-26_09h50_35

16

@TmTron, maybe try this one :
mouse fov to cursor @sam | Babylon.js Playground (babylonjs.com)
I add this line : camera.inputs.remove(camera.inputs.attached.mousewheel);
I suppose when you over wheel/zoom the camera radius change even if you use big value with camera.wheelPrecision. So now by removing mousewheel from inputs could fix the bug.

17

The issue still persists in the new version.
I can reproduce it in this playground example.
When the cavas size is 829x744 (x/y) and I zoom in on the sphere, the zoom “jumps”

Here’s the log-output when the issue occurs:

alpha:-30.274996128222067
beta:1.3916165571002383
canvasHeight:829
canvasWidth: 744
canvasX: 71
canvasY: 141
x: 0.06642403707581886
y: 2.2082720139290495
z: -9.752903288754396
18

ok I think I find :
const y = yaw - yawA;
const y = pitch- pitchA;
were not normalized betwen -pi and pi. Can you try this new one :

4 Likes