Как анимировать такой фон?

Question

[Iana S]

1) где я могу взять подобную картинку? сгенерировать? может есть кто знает хорошие сервисы? Aİ leonardo не помог
2) как лучше сделать анимацию? canvas? gsap?

пока не могу даже понять в какую сторону двигаться

Comments

[Вадим]

> canvas
Да.
Ну или просто фоновое видео.

[Михаил Р.]

Фон что, анимированный? Ссылку в студию!

Answer 1

[Ivan Bogachev]

Неоднородные плавные искривления никак не получится сделать в рамках CSS или SVG. Плюс волна трехмерная, поэтому изобретать что-то в 2d-канвасе будет непрактично и скорее всего сложно в плане производительности. Поэтому использование WebGL - это естественный выбор. Конкретные библиотеки/фреймворки не имеют значения, в конечном счете все такие волны сводятся к простой схеме:

1. Берем плоскость
   
2. На плоскость накладываем какую-нибудь красивую текстуру
   
3. Добавляем вершин побольше
   
4. В вершинном шейдере делаем какой-то генератор шума и используем значения из него чтобы двигать вершины туда-сюда в направлении, перпендикулярном плоскости
   
5. Опционально там же рассчитываем нормали для освещения
   
6. Играемся с коэффициентами до посинения, пока результат не начнет нравиться
   

Answer 2

[Олег]

Я бы сделал с wave shader
Как основу, можешь взять https://github.com/rarietta/WebGL