Zooming on a 2D image

Questions
, , ,
1

Hi all,
I am using an Orthographic camera to display an image. I have created my own zooming & panning controls, but I am not content with the zooming. When I scroll forward I add 1 to the camera.zoom and when I scroll backwards I subtract 1 from camera.zoom. This all works fine it zooms in and out, but when you zoom in it starts out with what looks like bigger “steps” and slows down when zooming in furthur. So it takes alot of scrolls to get a close up of the image.

Something more visual.
No zoom, zoom level 0:

image
image1910×1046 209 KB

First scroll, zoom level 1:

image
image1908×1043 183 KB

It scrolls in a whole lot even though it only went forward by 1. Here’s how I do it:

this._camera.zoom += direction;

This code gets called every time the scroll event is triggered, and direction is -1 when scrolling backwards & 1 when scrolling forwards.

Here’s another example for when you’re close up to the image:
Zoom level 20:

image
image1905×1041 66.2 KB

Zoom level 21, one scroll forward:

image
image1902×1041 64.1 KB

It barely shows any zooming.
I am looking for a more consistant way of of zooming in & out of the image.
Anyone who might have an idea please let me know!

2

Start with default zoom = 1 (as in OrthographicCamera). Change zoom levels not by adding and subtracting, but by multiplying and dividing:

  • zoom = zoom * k
  • zoom = zoom / k

You may need to adjust the value for k, e.g. start with k=1.02. If k is closer to 1, the visual steps will be smaller.

1 Like
3

That worked! I’ve changed the line to:

this._camera.zoom = direction > 0 ? this._camera.zoom * 1.02 : this._camera.zoom / 1.02;

So when direction is greater than 0, it multiplies the current zoom value by 1.02 and applies it to the camera, and zooms in. And when direction is less than 0, it devides the current zoom value by 1.02 and applies it, zooming out. It’s perfectly consistant and gives me the result I was looking for!

Thank you!

1 Like