3dmap
Мы разрабатываем много крутой интерактивной графики для браузера и в этой статье расскажем о нашем опыте визуализации объемных слоев на картах. По результатам тщательного анализа существующих решений и сбора референсов нам ничего не понравилось и мы сделали все по-своему с нуля.
3dmap — это модуль визуализации объемных данных полученных из сторонних источников на карте. Например, это могут быть данные о концентрации метана или углекислого газа за определенный исторический промежуток.
С помощью техники raymarching для каждого пикселя во фрагментном шейдере просчитывается видимость — по «направлению» пикселя пускается луч и для некоторого количества положений, на которых луч останавливается, проходя нужный объем, усредняются данные в этих положениях.
Помимо объемного слоя модуль позволяет отображать потоки ветра — визуализацию симуляции частиц, которые движутся в соответствии с данными скорости на карте, запеченными в текстуру.
Данные в формате grib запекаются в текстуру, возникает соответствие между пикселем текстуры и положением на карте, и для каждой итерации частица сдвигается в направлении, которое она получает из текстуры, и которое соответствует ее нынешнему положению.
Т. е. текстура представляет собой поле скоростей, и частица строит свой путь с помощью соответствующего дифференциального уравнения, где скорость частицы в момент t = значение поля скоростей в точке, в которой находится частица в момент t.
Вот такие чудеса творятся в нашем отделе дизайна. В следующей статье расскажем о нашем другом крутом модуле интерактивной визуализации транспортных потоков на картах в браузере. Stay tuned.