maplibre-gl-js
maplibre-gl-js copied to clipboard
Shadow effect on globe to give it more of a 3d feel
User Story
As a user, I would like the globe to be visualized with more of a 3d feel. When I add sky/light properties today to accomplish this, my basemap will look overexposed on the light side, and with a very subtile shadow on the dark side. What I would like to accomplish is a globe shaded in a similar fashion as this. https://codepen.io/donovanh/pen/kdRROv
Rationale
This would make the globe presentation look better for users.
Impact
Not sure I know how to achieve this, but did you try to play with the light properties?
I played around with light and sky and managed to get something that was acceptable. It is still more of a shadow, setting light color to black does not work, that I'm trying to accomplish.
Is it possible to access the radius of the globe in pixels, and the pixel center of the globe. I tried to look into scale but realized that scale changes when I change the pitch or rotation of the globe. My idea here is to be able to draw different effects to directly to the canvas.
There are some calculation that your can do, but they aren't simple...
I managed to find: https://github.com/maplibre/maplibre-gl-js/blob/2f5a47a72fb9dfaa0cdcbf4a68beb34dbe50cb54/src/geo/projection/globe_utils.ts#L83
But then I realized that my scope had changed to that I wanted something similar to the default haze around the globe that globe.gl has. (Maybe with some properties to edit the strength.) https://github.com/vasturiano/globe.gl And that it would probably be better to do it directly in maplibre than trying to hack it by manually editing the canvas. But I'm guessing that this should be addressed in another issue.
I'm ok with closing this, since sky/light solves parts of the problem.