Заметки ITшника обо всём

Вечерний selfhosted. 2.5D — параллакс в браузере.

Владение несколькими IG-аккаунтами, из которых только один реально активный-активный, позволяет выйти из информационного алгоритмического пузыря. Наткнулся на Web-дизайнера, делающего прикольные сайты — визитки. С точки зрения прикладного использования человека, познавшего grep и cat, это понятное дело, специфический изюм — сайт должен быть про быстроту поиска информации — в этом отношение условный tsukumo, вывалившийся прямиком из нулевых отправит в ноудаун все нынешние модные-и-красивые дизайнерские сайты, но иногда можно поиграться и в красивости.

Внимание привлёк Milkmaid
Цитирую:

Эффект строится из фотографии и карты глубины — изображения в оттенках серого, где яркость задаёт условное расстояние до камеры. Для новых фотографий карту оценивает нейросеть по одному кадру.

Фотография преобразуется в облако цветных точек. Каждая точка получает цвет исходного пикселя, положение по горизонтали и вертикали и смещение в глубину. При необходимости создаются дополнительные слои с небольшим отступом. Они добавляют плотность облаку, но не восстанавливают скрытые части объектов.

При повороте сцены ближние и дальние точки смещаются на экране по-разному. Этот параллакс создаёт ощущение объёма. У краёв изображения прозрачность точек постепенно уменьшается, поэтому фотография мягко растворяется в фоне.

Движение рассчитывается как система частиц: у каждой точки есть исходное положение и скорость. Виртуальная пружина возвращает её на место, затухание гасит колебания, а вихревое поле и воздействие курсора отклоняют от исходной позиции. Кнопка сборки убирает рассеивание, после чего облако восстанавливает изображение.

Python заранее готовит фотографию и карту глубины. Отрисовка и движение частиц выполняются на видеочипе устройства через WebGL 2. Получается интерактивная 2.5D-сцена: небольшой поворот выглядит объёмно, но посмотреть за предметы или увидеть их обратную сторону нельзя.

Selfhost demo в стилистике

Отправить
Поделиться
Твитнуть
Запинить