Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PoC] Globe view #10784

Closed
mpulkki-mapbox opened this issue Jun 17, 2021 · 29 comments · Fixed by #11329
Closed

[PoC] Globe view #10784

mpulkki-mapbox opened this issue Jun 17, 2021 · 29 comments · Fixed by #11329
Assignees

Comments

@mpulkki-mapbox
Copy link
Contributor

mpulkki-mapbox commented Jun 17, 2021

Globe view

overview

Introduction

I spent few weeks working on a globe view proof-of-concept on gl-js where the goal was to get a rough idea what's required for rendering the 2D map wrapped around a globe. The implementation presented here is a "complete" in sense that it supports most of the layers present in the streets style and the globe can be navigated with simple mouse controls. Certain features such as terrain and fill extrusions have not been implemented yet.

The PoC is loosely based on the data reprojection idea introduced in the "map projections" feature. Reprojection logic is currently used mostly for symbol layers as majority of the map aligned 3D geometry is draped into a texture in order to avoid three dimensional data resampling. The set of reprojected geometry will increase as the remaining layers (such as circle and fill extrusion layers) are implemented.

Most of the remaining challenges are in the PoC are related to the design and interoperability between different features. For example pitch and bearing remains unlocked in the code but it might not make sense to modify those values freely as user might lose the sense of space and orientation. Behavior of sky and fog rendering with a globe projection have to be solved as well. Some of the new design related questions are that how should we fill holes on the poles as mercator projection covers the surface of the earth only up to ~85 degrees. Background space is also visible for the first time if the camera is placed far enough from the surface.

A working demo can be found in the branch https://github.com/mapbox/mapbox-gl-js/tree/mpulkki_globe_view_poc. Run yarn run start-debug and open the terrain-debug.html page. Globe view is enabled when the terrain toggle has been checked. The default 2D rendering mode of the map is broken in this branch. The code itself is quite messy as barely any effort has been made for any cleanup and proper integration of the feature.

flyto_helsinki_bondi.mp4

Technical details

Key concept of the approach is to convert local coordinate spaces of tiles from 2D to 3D. Previously all geometries of a tile were defined in a local coordinate space where the tile would cover a 8192x8192 unit area. Rendering was done by first transforming geometries from the local tile space into world space by using a specific tile matrix and then transformed to the screen by using projection matrix of the camera. In globe mode geometries are reprojected during loading space (or deferred to a later stage) to ECEF format (earth-centered, earth-fixed) where each tile is mapped to a unique patch on the sphere based on its id. Geometry such as points, lines and polygons arereprojected from a lat&lng presentation to the surface of a normalized sphere that is then rendered to the screen with globe-specific transform matrices. Reprojection is required only for items that are not draped.

All this means that the globe view in the PoC is just a client-side reprojection, a visual effect, that doesn't require any modifications to the original data. Most of the logic is still done in 2D mercator space including the original tiling scheme, camera transformation logic and label collision planes. Usage of globe-specific transform matrices has some implications though as the coordinate space is slightly different: all coordinate axes have been unified to pixel units leading to that all locations have to be defined in ECEF format, ie. in coordinates relative to the center of the globe. Is is still unknown how this should be exposed to e.g. custom layers.

Changes required to support the globe

  1. Reprojection of non-draped geometries
    Everything that is drawn to the screen have to reprojected into ECEF format either as part of the geometry loading process or in some later stage. This doesn't exclude the usage of 2D space for logic such as collision detection as the globe view is first and foremost a visual effect. Currently in the PoC only terrain patches and symbol anchor reprojection has been implemented. Anchors for line labels are finalized during the layout process.

  2. Updated symbol collision logic
    Symbol reprojection logic proved to be a bit more challenging task which was expected. Symbols with point placement can be reprojected once during the loading phase whereas reprojection of symbols placed on lines and other shapes have to be deferred to a later stage.

    Tile space geometry is still used for reprojecting line aligned labels to the screen as it simplifies the changes required. Collision of map aligned labels is done on the tangent plane of the map center on the globe.
    collision_debug

  3. Introduction of a set of globe transformation matrices
    Tile matrices have to be replaced with "globe matrices" for transforming tile contents from the local ECEF space to world space. In the current state of the PoC the projection matrix has also been modified to use pixel units for the z-axis instead of meters. This might require some changes when rendering custom geometry on the map with globe view enabled.

    globe_2d_comparison

  4. Updated controls

    globe_navigation.mp4
  5. Update of tile coverage logic
    The set of visible tiles on the screen is determined by traversing the tile quad tree depth-first and finding tiles intersecting with the camera frustum. Level of detail is determined by measuring tile distance from the camera. Most of this logic can be kept intact, but bounding boxes of tiles have to be placed on the globe. Some additional logic is also used for ignoring tiles that are behind the globe and facing away from the camera.

  6. Implementation of reprojection logic for missing layer types

Challenges / open items

  1. Terrain support
    The PoC uses draping for wrapping tiles around the globe but elevation is currently ignored. There are some unknowns with adding the elevation support.

  2. Custom layer support
    Projection matrix is different when rendering the map on globe view. Custom layer rendering would need to be updated.

  3. Transition between 2D mode and globe view
    Map rendering could be reverted back to the default 2D mode when zoom value gets high enough and the earth curvature is barely visible anymore. Currently the PoC uses naive approach for rendering terrain patches which leads to precision issues from zoom level 16 and onwards.

  4. Fixing holes at the poles

    south_pole_hole.mp4
  5. Atmospheric effects
    sky

  6. Styling of the background space
    Background space is visible if camera is far enough from the surface of the globe. Some styling options are required for defining the color, image, etc.

flyto_satellite_helsinki.mp4

cc @mapbox/gl-js, @ivovandongen, @astojilj

@mpulkki-mapbox mpulkki-mapbox self-assigned this Jun 17, 2021
@mourner
Copy link
Member

mourner commented Jun 17, 2021

@mpulkki-mapbox this is really amazing, such awesome work! And it's really great to see this come together at the same time as non-Mercator projections support.

Regarding item 1 (terrain support), would it be solved by 3 (switching to 2D mode on higher zooms) since terrain isn't really visible until zoomed in really well? We're going to take a similar approach with non-Mercator projections (gradually transitioning from projected to Mercator across zoom levels ~4–7). #10715

@jingsam
Copy link
Contributor

jingsam commented Jun 18, 2021

@mpulkki-mapbox That's amazing. I suggest we should support both 2D and 3D global view, as 2D global view is useful on thematic mapping.

@mpulkki-mapbox
Copy link
Contributor Author

Regarding item 1 (terrain support), would it be solved by 3 (switching to 2D mode on higher zooms) since terrain isn't really visible until zoomed in really well? We're going to take a similar approach with non-Mercator projections (gradually transitioning from projected to Mercator across zoom levels ~4–7). #10715

I think smooth transition from globe to 2D between some zoom range would be the preferable approach although seeing elevated mountains on the globe would look cool. :)

@mpulkki-mapbox
Copy link
Contributor Author

Holes on polar regions can be filled with solid polygons by extrapolating styling information from adjacent tiles. It will have some visual artefacts with satellite styles but should be sufficient for now.

south_pole_satellite_hole_2
south_pole_satellite_cap_2

@mpulkki-mapbox
Copy link
Contributor Author

Possible styling options for the atmosphere:

styling_options

@runshotgun
Copy link

I've been looking forward to this for a while! Very happy to see it come together!

@qmartouzet
Copy link

Hi !

This is a really impressive and promising work. I was hoping to see something like this coming to mapboxgl.

I'm currently in the process of choosing a map engine for a web app my company is building, and the globe view is a strong criteria. If by any chance you have any idea of when this could be integrated in a release roadmap... I know this is still in very-early-stage, but who knows ? This would be a huge argument in favor of mapboxgl if I can tell my team when (roughly) it'll be available.

Anyway, thank you for this work !

@mpulkki-mapbox
Copy link
Contributor Author

Hi @qmartouzet, we're trying to make the globe view feature available this fall!

@baezf
Copy link

baezf commented Sep 11, 2021

Hi. Wondering on progress for such an amazing component!

@kilazi
Copy link

kilazi commented Sep 19, 2021

Hi! anticipating this very much, thanks for the great project all in all

@Jaswoo
Copy link

Jaswoo commented Oct 8, 2021

@mpulkki-mapbox hi, will this be launched by next month? Thanks!

@mpulkki-mapbox
Copy link
Contributor Author

Hi @Jaswoo! Globe view will not be part of the next release unfortunately. It is on our roadmap and we're actively working on it. Development branch for the feature is https://github.com/mapbox/mapbox-gl-js/tree/globe-view

@AliFlux
Copy link

AliFlux commented Nov 6, 2021

This is incredible! Supporting globe view opens up a whole bunch of possibilities.

@mourner mourner linked a pull request Dec 13, 2021 that will close this issue
@vprelovac
Copy link

Came here from the HN thread just to say amazing work!
https://news.ycombinator.com/item?id=29540619

@karimnaaji
Copy link
Contributor

Hello, we recently deployed v2.7.0-alpha.1 on npm: https://www.npmjs.com/package/mapbox-gl/v/2.7.0-alpha.1 that includes most of the changes that @mpulkki-mapbox mentioned in this ticket! Feel free to try it out and report any issue that you may encounter, this isn't production ready as of today but we'll deploy more builds to try as we get closer to launch :)

@stevage
Copy link
Contributor

stevage commented Feb 24, 2022

Not sure the right place to report this, but I tried out 2.8.0-alpha.1. After setting the globe projection, when I add a GeoJSON source, I weirdly get:

Error: terrain: terrain is missing required property "source"

It's weird because I didn't have terrain set. Is terrain required for globe?

Adding terrain (with a source) made the error go away.

@karimnaaji
Copy link
Contributor

karimnaaji commented Feb 25, 2022

@stevage definitely the right place, thanks for testing it out and reporting this!

I've opened #11553 to track this issue.

It's weird because I didn't have terrain set. Is terrain required for globe?

Globe leverages terrain for the draping (rendering to texture), but it's not required from the user to enable it, it's handled automatically in the library. The only thing required to enable globe is to either set projection: globe in the map constructor or map.setProjection('globe'). That's a bug on our end and we'll investigate.

@iamteemo
Copy link

Hello, I am testing the globe function and it works great! Really awesome work!

Not sure if I should post this here, but the only bug I can find is that the coordinates for placed markers seem to not work correctly. When you rotate the globe they move out of screen instead of rotating with the globe.

Steps on reproducing: Add a marker to the map and give it the lng lat of the clicked point.

Any ideas on how to fix this?

marker-rotate
marker-rotate-false

@karimnaaji
Copy link
Contributor

Hello @iamteemo , marker support is a work in progress in #11556 and will be coming soon! Feel free to check out the PR until then.

cc @SnailBones

@bumbeishvili
Copy link

I've just discovered one, globe view-related issue.

mouseenter event is not firing after certain zoom level (when zooming out). I am using 2.8.0-alpha.1 version (mac, chrome)

pickable.mp4

@karimnaaji
Copy link
Contributor

Hey @bumbeishvili , thanks for reporting this! If you encounter any other issue on the globe view topic let us know. I've captured what you mentioned in #11597.

@kongkbj
Copy link

kongkbj commented May 18, 2022

Hello, i want to use the globe view.
However, it seems that it is not available in the current version.
is there a way to use globe view in the current release version(2.8.2) instead of the pre-release version?

@SnailBones
Copy link
Contributor

Hi @kongkbj!

Globe view is in the last stages of development and testing and hasn't yet been released outside of the beta. You can expect it in v2.9.0 soon, and if you'd like to use it in advance you'll need to use the beta release, which you can install from npm.

@sofia373
Copy link

Hello, what's the status of Globe view? When can we expect to access it outside of the beta?

@mourner
Copy link
Member

mourner commented Aug 14, 2022

@sofia373 it's already released, available since v2.9.

@bjohare
Copy link

bjohare commented Aug 31, 2022

Hi, any thoughts on when custom layer support might be enabled for globe view?

@mourner
Copy link
Member

mourner commented Aug 31, 2022

@bjohare it's in progress, see #12182

@bjohare
Copy link

bjohare commented Sep 1, 2022

Thanks @mourner!

@joshdance
Copy link

Hello, what's the status of Globe view? When can we expect to access it outside of the beta?

https://docs.mapbox.com/mapbox-gl-js/guides/globe/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.