Use map.transform matrices to project lat/lon coordinates on a separate layer?

[thomcom]

Hey all! I'm working on a project that displays coordinates in a regl WebGL layer on top of a background map. I'm working on transitioning the map component to depend on maplibre, and I have a feeling I can use the various matrices that are attached to the map object to easily get the projection and view matrices that I need for WebGL.

I'm studying the APIs and examples and code, but I thought maybe someone here has already solved this problem and can just point me to the relevant solution.

I've got a large buffer of lon/lat coordinates. I'm looking at transforming them in the shader to mercator coordinates using

          position.x = (180.0 + position.x) / 360.0;
          position.y = (180.0 - (180.0 / PI * log(tan(PI * 0.25 + position.y * (PI / 360.0))))) / 360.0;

like in the maplibre source code. Then I'd love to be able to pull two matrices from the map.transform layer that can move those mercator coordinates to screen coordinates. Is this easily possible?

[thomcom]

I think I've figured this one out. There's one missing matrix, from screen coordinates into openGL clipspace that I had to create.

1. Given a point in lon/lat, first the point needs to be converted into web mercator coordinates using the above formulas.
2. Then one can multiply the point by map.transform.mercatorMatrix from maplibre's current mercator view.
3. Then multiply the result by map.transform.labelPlaneMatrix to get the current screen coordinates of the point.
4. Finally we need the screen to clip matrix, which is the projection from screen coordinates into WebGL's (default?) clip space arrangement: 0, 0 -> 0, 1, 0, height -> 0, 0, width, 0 -> 1, 1, and width, height -> 1, 0.