На моем сайте (перейти на сайт) есть простая svg анимация на весь экран.
Странно, но она почему-то довольно не плохо подлагивает. Хотелось бы решить этот вопрос, но увы, не получаеться самому.
Сократил к-во PATH внутри svg, кажется стало меньше лагать, но при этом пострадал общий вид "слайдера".
Пожалуйста, посоветуйте что-то, или бросьте ссылку на статью, спасибо!
Анимации в svg не имеют аппаратного ускорения.
Выход - переписать на webgl
По сути шейдер будет не очень сложный.
Сначала отрисовываем первый фон в виде 2-х треугольников заполняющих весь вьюпорт.
Потом отрисовываем анимированные треугольники, где в качестве текстурных координат используем координаты вершин в пространстве вьюпорта.
Дабы анимация вершин происходила тоже на GPU. Вершины треугольников нужно представить как координаты центра треугольника и отдельно смещение относительно центра.
Тогда в шейдер будет достаточно передавать только текущий скейл треугольников относительно времени анимации.
Простой
