3dmap

We develop a lot of cool interactive graphics for a browser, and in this article we’ll share our experience visualizing volumetric layers on maps. After a thorough analysis of existing solutions and gathering references, nothing appealed to us, so we built everything fr om scratch in our own way.

3dmap is a module for visualizing volumetric data obtained fr om external sources on a map. For example, this could be data on methane or carbon dioxide concentrations over a specific historical period.

Using raymarching, visibility is calculated for each pixel in the fragment shader — a ray is cast along the pixel’s direction, and for a set of positions wh ere the ray stops while passing through the desired volume, the data at these positions are averaged.

In addition to the volumetric layer, the module can display wind flows — a particle visualization wh ere particles move according to velocity data on the map, baked into a texture.

Data in GRIB format is baked into a texture, creating a correspondence between texture pixels and positions on the map. For each iteration, a particle moves in the direction obtained fr om the texture, corresponding to its current position.

That is, the texture represents a velocity field, and the particle traces its path using the corresponding differential equation, wh ere the particle’s velocity at a time equals the value of the velocity field at the point where the particle is located at the time.

These are the kinds of wonders happening in our design department. In the next article, we’ll cover another cool module for interactive visualization of transport flows on maps in the browser. Stay tuned.

Check out full overview