Add an Atmosphere layer for Globe (#3888) #4020

Pheonor · 2024-04-20T07:50:07Z

Launch Checklist

This PR add a realistic atmosphere layer to the Earth when using a globe projection.
Some options allows to change the zoom level to fade in and out the atmosphere.
By default, the sun position is computed based on current time.
An optionnal date and time allows to set the sun to any position.

Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
Briefly describe the changes in this PR.
Link to related issues.
Include before/after visuals or gifs if this PR includes visual changes.
Document any changes to public APIs.
Add an entry to CHANGELOG.md under the ## main section.

HarelM · 2024-04-20T11:41:48Z

Can you please add some render tests (and maybe unit test) and resolve conflict before I review this thoroughly?

Pheonor · 2024-04-20T20:50:21Z

I resolve conflict. I will add some tests.

codecov-commenter · 2024-04-20T20:51:20Z

Codecov Report

Attention: Patch coverage is 43.77510% with 140 lines in your changes are missing coverage. Please review.

Project coverage is 86.77%. Comparing base (518041f) to head (23a7af3).

Files	Patch %	Lines
src/render/draw_atmosphere.ts	10.34%	77 Missing and 1 partial ⚠️
src/geo/projection/globe.ts	58.92%	22 Missing and 1 partial ⚠️
src/render/program/atmosphere_program.ts	35.48%	18 Missing and 2 partials ⚠️
src/geo/projection/mercator.ts	29.41%	11 Missing and 1 partial ⚠️
src/render/painter.ts	82.60%	2 Missing and 2 partials ⚠️
src/ui/map.ts	86.36%	2 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            globe    #4020      +/-   ##
==========================================
- Coverage   86.97%   86.77%   -0.20%     
==========================================
  Files         250      253       +3     
  Lines       34872    35099     +227     
  Branches     2118     2136      +18     
==========================================
+ Hits        30329    30458     +129     
- Misses       3542     3621      +79     
- Partials     1001     1020      +19

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

kubapelc · 2024-04-21T06:45:00Z

src/geo/projection/globe.ts

+ private _globePosition: vec3 = [0, 0, 0];
+ private _globeRadiusPixels: number = 0.0;
+
+ private _projMatrix: mat4 = mat4.create();


I think the atmosphere math can be done with matrices that were already present.

The _globeProjMatrix matrix assumes the globe is a unit sphere located at (0,0,0), unrotated (so the null island is always at the unit sphere's +Z (0,0,1), see _angularCoordinatesToVector ) and projects it to screen. The already present cameraPosition property is the camera position relative to the unit-sphere globe.

The atmosphere math are performed into camera frame. I need the real globe position into the camera frame and to project each pixel as a ray into this frame also.
This is why I extract the projection matrix and compute the globe position.
The previously computed cameraPosition do not give me the expected value. I will try to reuse some other value to avoid a new computation.

I try to view if I could use cameraPositiondirectly, but this position include the projection effect. I need the globe position in the camera frame without the projection effect.

Maybe this shader could be helpful: https://github.com/maplibre/maplibre-gl-js/blob/globe/src/shaders/fill_extrusion.fragment.glsl

It computes ray-globe intersection for large fill-extrusions, which is very close to what atmopshere needs. The only part the linked shader doesn't do is getting the ray from a pixel, but your approach with the inverse matrix should work fine.

(The varying v_sphere_pos contains the current pixel's position on the globe, relative to the unit sphere, so a point on the surface would have distance 1 from 0,0,0, a point higher up would have greater distance. See the matching vertex shader for more details.)

kubapelc · 2024-04-21T06:56:40Z

src/render/program/projection_program.ts


 export type ProjectionPreludeUniformsType = {
 'u_projection_matrix': UniformMatrix4f;
 'u_projection_tile_mercator_coords': Uniform4f;
 'u_projection_clipping_plane': Uniform4f;
 'u_projection_transition': Uniform1f;
 'u_projection_fallback_matrix': UniformMatrix4f;
+ 'u_globe_position': Uniform3f;
+ 'u_globe_radius': Uniform1f;
+ 'u_inv_proj_matrix': UniformMatrix4f;


I think these new uniforms would be better suited for atmosphereUniformsType. ProjectionData and ProjectionPreludeUniformsType is passed to every single shader, but the uniforms added here are only used by atmosphere.

Ok, I will do like that.

Done.
To be clean, it could be better to centralize all the projection code from transform.tsinto mercator.ts.
But I propose to not do that in the frame of this PR and do this into a refactoring PR.

I would also like to do that, I already started looking at adapting interactions (map panning, etc.) and animations (easeTo, etc.) for globe, changing the transform and refactoring this will definitely be required. As for controls, I would like to have a "globe" and "flat" control scheme (as opposed to "mercator"), since the flat controls would likely get used by all projections except globe. As suggested at the end of this comment: maplibre/maplibre-style-spec#568 (comment)

… inv projection matrix.

Pheonor · 2024-04-21T08:49:07Z

I propose to wait the dicussion on maplibre/maplibre-style-spec#163 before adding some render test with the proposed style.

HarelM · 2024-04-21T19:21:22Z

Sure, that's a good idea.
I hope this discussion won't take too long...

kubapelc · 2024-04-22T08:22:45Z

I finally had the time to play with the example. It looks amazing!

I'm worried about performance though, I also tried to run it on my phone (Snapdragon 636, 1080x2280 pixel screen) and got framerate in the single digits, and the sunlight was missing for some reason.

Edit: also runs at low framerate on Intel HD 630.

Pheonor · 2024-04-22T19:37:27Z

I finally had the time to play with the example. It looks amazing!

I'm worried about performance though, I also tried to run it on my phone (Snapdragon 636, 1080x2280 pixel screen) and got framerate in the single digits, and the sunlight was missing for some reason.

Edit: also runs at low framerate on Intel HD 630.

Thank you :)
Effectively, I need to check if I could tune step parameters to improve performance.

HarelM · 2024-05-30T11:55:50Z

Can this PR be updated?
I think we have finalized (hopefully) the sky definitions, so I think this can be pushed forward, right?
I'll work on merging the style spec changes for both projection and sky so that the style spec package will be up to date with latest definitions.

Pheonor · 2024-05-30T20:56:03Z

Based on the updated atmosphere style spec, sure !
@HarelM How to retrieve the style spec update from maplibre-gl-js ? Do I need to wait a new release ?

Pheonor added 10 commits April 15, 2024 22:53

Port of PoC atmosphere layer.

c087428

Fix resize for draw_atmosphere

82ec89b

Add some options.

879cf5e

Allow to change sun date and time

1b93979

Fix import warning

b884187

Render atmosphere only when a Globe projection is selected

f5148c3

Add some comments

8b9c78f

Add some comments

c00844d

Change key

5d17da9

Update changelog

46214c9

Pheonor added 2 commits April 20, 2024 22:47

Merge remote-tracking branch 'upstream/globe' into atmosphere

4024626

Fix merge with globe branch

4260dc2

Pheonor added 2 commits April 20, 2024 23:23

Fix documentation and default background color.

1c96fe0

Use black clear color only when atmosphere is on

ffc1530

kubapelc reviewed Apr 21, 2024

View reviewed changes

Use atmosphere uniform for globe position, raidus in camera frame and…

e933a78

… inv projection matrix.

Pheonor added 2 commits May 31, 2024 22:44

Merge branch 'globe' into atmosphere

c2a4ab3

Remove unused project method

23a7af3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add an Atmosphere layer for Globe (#3888) #4020

Add an Atmosphere layer for Globe (#3888) #4020

Pheonor commented Apr 20, 2024

HarelM commented Apr 20, 2024

Pheonor commented Apr 20, 2024 •

edited

codecov-commenter commented Apr 20, 2024 •

edited

kubapelc Apr 21, 2024

Pheonor Apr 21, 2024

Pheonor Apr 21, 2024

kubapelc Apr 21, 2024

kubapelc Apr 21, 2024

Pheonor Apr 21, 2024

Pheonor Apr 21, 2024

kubapelc Apr 21, 2024

Pheonor commented Apr 21, 2024

HarelM commented Apr 21, 2024

kubapelc commented Apr 22, 2024 •

edited

Pheonor commented Apr 22, 2024

HarelM commented May 30, 2024

Pheonor commented May 30, 2024 •

edited

Add an Atmosphere layer for Globe (#3888) #4020

Are you sure you want to change the base?

Add an Atmosphere layer for Globe (#3888) #4020

Conversation

Pheonor commented Apr 20, 2024

Launch Checklist

HarelM commented Apr 20, 2024

Pheonor commented Apr 20, 2024 • edited

codecov-commenter commented Apr 20, 2024 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Pheonor commented Apr 21, 2024

HarelM commented Apr 21, 2024

kubapelc commented Apr 22, 2024 • edited

Pheonor commented Apr 22, 2024

HarelM commented May 30, 2024

Pheonor commented May 30, 2024 • edited

Pheonor commented Apr 20, 2024 •

edited

codecov-commenter commented Apr 20, 2024 •

edited

kubapelc commented Apr 22, 2024 •

edited

Pheonor commented May 30, 2024 •

edited