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

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

Merged
merged 37 commits into from
Jun 20, 2024
Merged

Conversation

Pheonor
Copy link
Contributor

@Pheonor Pheonor commented Apr 20, 2024

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.

Capture d’écran 2024-04-20 à 09 48 45
  • 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
Copy link
Member

HarelM commented Apr 20, 2024

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

@Pheonor
Copy link
Contributor Author

Pheonor commented Apr 20, 2024

I resolve conflict. I will add some tests.

@codecov-commenter
Copy link

codecov-commenter commented Apr 20, 2024

Codecov Report

Attention: Patch coverage is 84.66667% with 46 lines in your changes missing coverage. Please review.

Project coverage is 87.78%. Comparing base (a25074d) to head (b1c8dc9).

Files Patch % Lines
src/style/style.ts 38.88% 22 Missing ⚠️
src/geo/projection/mercator.ts 67.85% 9 Missing ⚠️
src/ui/map.ts 20.00% 8 Missing ⚠️
src/style/sky.ts 89.85% 3 Missing and 4 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##            globe    #4020      +/-   ##
==========================================
- Coverage   87.92%   87.78%   -0.15%     
==========================================
  Files         250      254       +4     
  Lines       34910    35186     +276     
  Branches     2262     2446     +184     
==========================================
+ Hits        30694    30887     +193     
- Misses       3211     3297      +86     
+ Partials     1005     1002       -3     

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

@Pheonor
Copy link
Contributor Author

Pheonor commented Apr 21, 2024

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

@HarelM
Copy link
Member

HarelM commented Apr 21, 2024

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

@kubapelc
Copy link
Contributor

kubapelc commented Apr 22, 2024

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
Copy link
Contributor Author

Pheonor commented Apr 22, 2024

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
Copy link
Member

HarelM commented May 30, 2024

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
Copy link
Contributor Author

Pheonor commented May 30, 2024

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
Copy link
Contributor Author

Pheonor commented Jun 3, 2024

@HarelM I update with the new style definition and I use the sky/atmosphere-blend parameter to decide if the atmosphere should be visible or not. The default value of 0.8 add an atmosphere to any project even if not required. Do you think a default value of 0.0 could be used to ensure no atmosphere is displayed until required ?

src/style/light.ts Outdated Show resolved Hide resolved
src/ui/map.ts Outdated Show resolved Hide resolved
@Pheonor
Copy link
Contributor Author

Pheonor commented Jun 19, 2024

@HarelM I did not understand why a test is in time out. Could you help me please ?

@kubapelc
Copy link
Contributor

If it is a render test, then a timeout is usually an error in the json, like a missing comma, wrong property somewhere, etc... No idea how to debug them efficiently,I usually just remove parts of the json until it starts working to find where the error roughly is :D

@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

Render test are ran in the browser, you can open the browser and see what went wrong usually by changing the headless to false.

src/style/style.ts Outdated Show resolved Hide resolved
@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

There are still two open comments above which I don't know if they are resolved or not.
@kubapelc can you check them as you have started the conversation around them?

Other than that, I believe this is in a good shape.
@Pheonor what about incorporating the sky PR into this PR? have you thought about it? Do you want me to try and push the sky PR into main and then try and merge this into the globe branch? Let me know how you want to tackle this.

@kubapelc
Copy link
Contributor

I might have found a bug, there is a weird black edge around the atmosphere. It is visible when enabling globe on a maptiler map (with no other style changes). This might just be weird default values in the style, or maybe a bug with alpha blending?

Globe with atmosphere on a white background with a weird black edge

Also atmosphere doesn't respect large fill extrusions. But honestly I don't think this needs addressing, at least not right now. I doubt that it would be a frequent use-case and fixing it would probably be hard or cost a lot of performance.

Fill extrusion with atmosphere

@kubapelc
Copy link
Contributor

I'm not sure what two comments @HarelM means, but what I would like to see addressed are default style values and performance. I'll post about performance shortly, but I think atmosphere can be enabled by default from a perfromance point of view, as current state is much better!

Style defaults

As seen in the screenshots in the previous post, current default atmosphere seems to obscure the map by darkening it. I think having a default that obscures vision is not good. I also think that changing the default sun position to make the visible planet be lit would not help, since the map would just be tinted blue instead of gray.

I suggest adding a new feature to atmosphere, some kind of blending approach, where the globe center would have atmosphere blended out entirely, thus preserving visibility, but atmosphere would still be present on the horizons, where most of the pretty colors happen.

Alternatively the default atmosphere can just be made more subtle in general, which would also solve this problem and probably be much easier.

@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

The two open review comments:
#4020 (comment)
#4020 (comment)

I don't mind changing the default, making atmosphere on is probably mainly for raster to mimic reality better, which is not the main usage for maplibre I believe, I might be wrong, I don't really have the relevant statistics.

There is a way to change the blending as you zoom in that can be defined in the style using expressions, it's just not the default.

@kubapelc
Copy link
Contributor

I think you can mark both of the linked comments as resolved.

@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

Done, thanks.

@Pheonor
Copy link
Contributor Author

Pheonor commented Jun 20, 2024

There are still two open comments above which I don't know if they are resolved or not. @kubapelc can you check them as you have started the conversation around them?

Other than that, I believe this is in a good shape. @Pheonor what about incorporating the sky PR into this PR? have you thought about it? Do you want me to try and push the sky PR into main and then try and merge this into the globe branch? Let me know how you want to tackle this.

* [Basic Sky Implementation working with actual codebase #3645](https://github.com/maplibre/maplibre-gl-js/pull/3645)

I could try to merge the Sky PR. I hope it will be Ok.

@Pheonor
Copy link
Contributor Author

Pheonor commented Jun 20, 2024

I might have found a bug, there is a weird black edge around the atmosphere. It is visible when enabling globe on a maptiler map (with no other style changes). This might just be weird default values in the style, or maybe a bug with alpha blending?

Globe with atmosphere on a white background with a weird black edge

Also atmosphere doesn't respect large fill extrusions. But honestly I don't think this needs addressing, at least not right now. I doubt that it would be a frequent use-case and fixing it would probably be hard or cost a lot of performance.

Fill extrusion with atmosphere

Effectively, the render is strange.
The atmosphere expects a black background to be real with real satellite raster data.
Perhaps a fake glow effect could be used for other aproach.
This could be the subject of another ticket :)

@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

Maybe we should do the sky in a different PR.
I'll do a final review in the next few days.
@kubapelc let me know if you think there are other stuff that should be fixed before we merge this.
The defaults are defined in the style spec package and should be changed in a different PR anyway...

src/geo/projection/globe.ts Outdated Show resolved Hide resolved
src/style/style.ts Outdated Show resolved Hide resolved
@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

I've added some last nit picking... overall I believe this is ready to be merged.

@kubapelc
Copy link
Contributor

kubapelc commented Jun 20, 2024

As for me, this can be merged, the black edge bug can be resolved with another PR.

I also did some more performance eyeballing, so I might as well post the results:

  • 1080p(120Hz) display with Nvidia GTX 1060 MaxQ 6gb: around 120 fps - ok! (also probably CPU bottlenecked anyway)
  • 4K(60Hz) display with Nvidia GTX 1060 MaxQ 6gb: solid 60 fps - ok!
  • 1080p(120Hz) display with Intel HD 630: around 80 fps, ok, but has a noticeable lag for some reason. I don't think we can do anything about that though.
  • 4K(60Hz) display with Intel HD 630: around 22 fps, unpleasant to look at, map interactions have very noticeable lag.
  • 1080x2408(60Hz) phone with Adreno 619: around 33 fps, suboptimal but usable.

Context: I'm looking at an atmosphere'd globe so that every screen pixel is covered by it and executed the atmosphere pixel shader, so that I get the worst case results. A globe without atmosphere runs at 60 fps (120 on the faster monitor) on all these GPUs. Right now the most powerful available integrated GPUs are roughly comparable to the GTX 1060 in performance (eg. AMD Radeon 780M, and excluding Apple chips).

My takeaway: disregard my previous comment about reducing sample counts not working all that well :) At least on current hardware, current status of performance is mostly fine. Performance on a phone looks somewhat suboptimal, but also usable. But atmosphere is not usable for people who pair a big screen with an old iGPU - but I'm not sure how large that group is.

But I think it is still worth it to pursue optimization for atmosphere before globe release - both to make it more pleasant on old/slow hardware, and to improve power consumption when using the map on any battery powered device.

I also have some gamedev-inspired ideas on how to improve the performance of atmosphere. I can make a PR about this later, or post the ideas here if you want. (I want to focus on other globe functionality first.)

@HarelM HarelM merged commit 3c5e958 into maplibre:globe Jun 20, 2024
13 checks passed
@HarelM
Copy link
Member

HarelM commented Jun 20, 2024

I've merged this.
I'm working on reviving the sky implementation here:

I'm looking into updating the code about the fog, horizon and sky colors and blending.
I'm in the final stages, so I might merge this into main soon and then merge it to the globe branch.
I'm not sure how this will work together, but feel free to review what I already did...

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

Successfully merging this pull request may close these issues.

None yet

4 participants