Geek Answers Handbook

WebGL earth: how to make clouds

Problem

I would like to build a realistic view of the low-orbit earth (here ~ 300 km) using WebGL. That is, on the Internet, with all that it implies and moreover, on mobile devices. Do not stop reading here: to make it a little more difficult, the user can look everywhere, but not the pan, so the view only applies to a small area of ​​3000 km. But the look follows the satellite in a few minutes, the user returns to where he was before, with a slight shift of the Earth's rotation, etc. Thus, clouds cannot be in the same place all the time.

In fact, I still could not turn on the lights of the city, the radiance, lightning ... except for the clouds. I saw a lot of real-time demos creating passions and explorers, but not one of them had a nice realistic cloud layer. However, I am sure that I am the 100 (...) 00th person thinking about this, so please enlighten me.

Some questions are implied:

  • what contribution to use for clouds? Real-time weather data?
  • what are the visualization features? Shader modified cloud map layer? Multiple transparent layers to get a sense of volumetric rendering? But how to cast shadows to each other: then the only solution is to use the grid? Or can the shadows be computed and matched on the server every x minutes?

Several specifications

Here are some ideas summarizing what I haven't seen, sorted by importance:

  • Clouds cover 60% of the earth.

  • clouds scatter cities and bright lights, and at night raleys scatter.

  • At this distance, the parallax effect is visible and even quite huge with the smallest clouds.

enter image description here

As far as I’ve seen, even expensive real-time meteorological online resources are not useful: they target rainy or stormy clouds using UV and IR light waves, so they will not catch 100% of them and do not give a “normal” look, which we all we know. In addition, the rare good cloud textures, shot in visible light, hardly distinguishes the earth from the clouds: sometimes there is no 5000-km shore anywhere. The server can use these images to create improved textures.

When I look at these photos, I believe that in order for the expensive way to combine several nice cloud meshes from a database containing different models, then slightly transform those cells inside the shader while the user navigates. If he is still here, after 90 minutes, when he returns, regardless of whether the model has changed again. However, the hurricane cannot disappear.

What do you think about it?

+6
source share
1 answer

For such effects, there is probably only one way to do this correctly, and this is:

  • Voxel cards + volume rendering , possibly with Back-Ray-tracer rendering

    As your position is fixed, therefore, it should not be so rigid in relation to memory requirements. You need to implement both MIE and Rayleigh scattering . Scattering can be simplified and still look good.

    Voxel cards handle light gaps, shadows, and scattering are relatively easy, but require a lot of memory and processing power. All other 2D methods usually work painfully around what 3D voxel cards do with minimal effort. For instance:

  • Cloud Map Process Generators

    You need this for each type of cloud so that you have something to render. There are examples of libs / demos / examples:

+2
source

More articles:


All Articles