Help with zoom to mouse point

[kochis]

Hi there,

First off, just wanted to say thanks for all the work put into this site, it has truly helped a ton with my understanding of 3D programming, in a way that’s finally starting to stick 😅

I’m experimenting with building a “map-like” experience, basically the ability to pan and zoom on geometries that are made up of latitude and longitude coordinates. I have a CodePen here: https://codepen.io/ckochis/pen/bGvBdEG

I have the “pan” part down, but the zoom isn’t quite working as expected (focus point doesn’t seem to correlate to the mouse position). Have been following this guide for the most: part https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-implement-zoom-from-mouse-in-2d-webgl.html

Most likely the math is probably off, but was wondering if something more obvious was the culprit. Open to any other general guidance on my application as well.

Any help here is greatly appreciated, thanks!

[kochis]

Demo: https://codepen.io/ckochis/pen/bGvBdEG

Just as a follow up, was able to get the zoom working, following the guidance from here.

zoom_working.mov

However, I'm running into an issue when a translation is also applied. It seems like it's still scaling based on the origin (ie. just the mouse position), not taking into account the translated world.

zoom_not_working.mov

[greggman]

I honestly don't know how to help. I tried doing some stuff with your example and I can't figure out what's wrong. Maybe it's too late at night.

Instead I made the original example pan and rotate as well as zoom. Maybe that's helpful

https://jsgist.org/?src=a8b3d2e69f4bc94bfc9db6127121674a

[kochis]

Ah cool, I'll take a look. Thanks!

[kochis]

Thanks again, I was able to get it working as expected following that example: https://codepen.io/ckochis/pen/bGvBdEG

The only thing I had to change was just using an identity matrix as the base for projection instead of the m3.projection 🤷

[kochis]

I added back in a default projection matrix, to account for the lat/lng to world projection: https://codepen.io/ckochis/pen/GRxWopN

let r = window.devicePixelRatio;
let projectionMat = [
   r, 0, 0,
   0, -r, 0,
  -1, 1, 1
];

Again, pan seem to be working, but the zoom offset appears to be off again 🤔

I'm probably just misunderstanding something about what the projection matrix is for / how it's working.