Color faces on a spehere from a picture of a planet.

[henriktorget]

I want to add colors to the faces on an icosphere to correspond to the RGB values from satellite imagery.
Is it possible to color individual faces like this?

It's important that the latitude/longitude coordinates on the sphere corresponds to what the color of earth is IRL.

I believe that simply adding a texture to a sphere with satellite imagery will not be very precise.
This instructional blog shows what I want to do - but this is made by creating a heatmap in python with plotly.

I will later use this to plot data precisely on the sphere. And create a globe with ocean depth (bathymetry).

Or am I looking to solve this in the wrong way?

Thank you very much for any help.

I work in an non profit organization that wants to help better the management of the worlds oceans.
We want to prevent over fishing and make ocean data more accessible to scientists.
I believe bevy + wasm could be a great visualization tool for our data, as long as I can get a proof of concept working.

/Henrik

[Sheepyhead]

I believe if you want to be able to do this on an arbitrary icosphere, you'd need to do the math to set the UV map correctly based on the shape and also the format of your satellite data. You could try using Blender to create a proof of concept icosphere to maybe get some ideas of what such an UV map should look like

[nicopap]

To accomplish "depth" you can go two ways about it. But I'd suggest the least technical and easiest to implement.

The idea is to use a vertex shader combined with a topological map of earth to move up/down vertices on a UV sphere, and use a classic 2d satellite world map to texture the sphere.

Regarding colors. I think your best bet is still to use a texture, textures are much more "precise" than a sphere with a large number of vertices. With vertex color, you can only have a single color per face, while with a texture, you can have as many pixel as necessary. So to have a 1000x1000 resolution image, with a texture, you may use about 100 vertices, while with vertex coloring, you would need a billion vertices (which will be very slow).

Make sure that your input texture and UV maps correspond well to earth longitude and latitude (I don't know how you'd do that, but, wouldn't vertex coloring be as difficult? since you need a source 2d image from which to generate the colors anyway.)

For depth, you'll need a height map, meaning: a greyscale image of earth's height, with the same coordinates as the satellite view. You will write a vertex shader (here is an example) to move each individual vertices of the sphere up or down based on the value of the height map.

Using a vertex shader like that requires a lot of vertices in your sphere, so make sure it has as many vertices as needed for the level of detail you want.

In your fragment shader, you will simply import and call the default bevy shader.

The much more technical alternative would be to implement a parallax mapping shader¹. This will allow much more depth precision with a minimal amount of vertices.

Maybe I don't understand what you are trying to do, are looking to zoom in to an arbitrary level in the style of google earth? Then this is a very hard problem, which I'd suggest you probably want to use Google Earth to solve, instead of reimplementing it from scratch.

Footnotes

1. parallax mapping is how paved roads look so detailed in video games, while the road model only has a single flat plane. ↩

[henriktorget]

Thank you very much for this information-dense answer. We often work with geoTIFF files, where each rgb/grayscale pixel references a geographical position. Which makes it very precise.

I don't necessarily need a very high resolution, which is why I thought I could get away with coloring the faces.

I need to wrap my head around how I can use textures in a precise manner.

[nicopap]

After your question, I decided to implement parallax mapping (because I've too much time on my hands apparently), You can check the implementation here, and run the examples.

• https://github.com/nicopap/bevy_mod_paramap/

Here is how it looks like in action:

parallax_mapping3-2022-09-09.mp4

[henriktorget]

Wow, I can't believe I missed this comment. I cant wait to look into this. Thank you so much for this. Really.