Enable immediate mode rendering for custom layer in globe view

[akoylasar]

This is a POC to enable immediate rendering for custom layer when globe view is enabled. We can use this PR as a discussion panel to decide what needs to be exposed and in what way. Previously a POC for draped rendering of custom layers was introduced in https://github.com/mapbox/mapbox-gl-js/pull/11996.

https://user-images.githubusercontent.com/67509069/183460308-fb1424a4-1d31-4d5d-863c-e5888528d4e5.mov

cc @astojilj

Launch Checklist

• [x] briefly describe the changes in this PR
• [ ] include before/after visuals or gifs if this PR includes visual changes
• [ ] write tests for all new functionality
• [ ] document any changes to public APIs
• [ ] post benchmark scores
• [ ] manually test the debug page
• [ ] tagged @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes
• [ ] tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• [x] apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• [ ] add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog></changelog>

[mpulkki-mapbox]

We have solved this internally in gl-native by providing a helper function that automatically converts any (well defined) model matrix into a one suitable to be used with the globe. In practice this is done by pre-multiplying the given model matrix with a coordinate frame matrix (scale & orientation) that describes tangent plane at the given location on the surface of the globe. Additionally some minor modifications are done for representing translation part of the matrix.

This has some benefits as we don't need to expose any implementation details to the application. This also means that users don't need to do anything to support the transition between globe and mercator.

[mpulkki-mapbox]

We have solved this internally in gl-native by providing a helper function that automatically converts any (well defined) model matrix into a one suitable to be used with the globe. In practice this is done by pre-multiplying the given model matrix with a coordinate frame matrix (scale & orientation) that describes tangent plane at the given location on the surface of the globe. Additionally some minor modifications are done for representing translation part of the matrix.

This has some benefits as we don't need to expose any implementation details to the application. This also means that users don't need to do anything to support the transition between globe and mercator.

...although we might want to expose more advanced controls/tools to users as in your POC. Some visualizations such as trajectories might be easier to render directly in pixel coordinates unless the data is defined in mercator projection.

[akoylasar]

I think it all depends what we want to do but I am also preparing a different demo and refactor what I have already exposed.

[beifeizhou]

Hi team,

This feature looks very useful. Do you think it is possible to load a 3D model (for instance iss satellite model), by setting up the coordinates and the altitude?

Currently I am only able to use mapbox to add 3d model on a flat map, but not in the globe view.

[akoylasar]

closing this one since it's already implemented via https://github.com/mapbox/mapbox-gl-js/pull/12182