Почему тормозит svg анимация?

Question

[londhor]

На моем сайте (перейти на сайт) есть простая svg анимация на весь экран.
Странно, но она почему-то довольно не плохо подлагивает. Хотелось бы решить этот вопрос, но увы, не получаеться самому.

Сократил к-во PATH внутри svg, кажется стало меньше лагать, но при этом пострадал общий вид "слайдера".

Пожалуйста, посоветуйте что-то, или бросьте ссылку на статью, спасибо!

Answer 1

[Александр Таратин]

Анимации в svg не имеют аппаратного ускорения.
Выход - переписать на webgl
По сути шейдер будет не очень сложный.

Сначала отрисовываем первый фон в виде 2-х треугольников заполняющих весь вьюпорт.
Потом отрисовываем анимированные треугольники, где в качестве текстурных координат используем координаты вершин в пространстве вьюпорта.

Дабы анимация вершин происходила тоже на GPU. Вершины треугольников нужно представить как координаты центра треугольника и отдельно смещение относительно центра.
Тогда в шейдер будет достаточно передавать только текущий скейл треугольников относительно времени анимации.

Comments

[londhor]

Спасибо, за ответ! К сожалению не работал с webGL... Возможно ли как-то по другому решить эту проблему?

Answer 2

[Олег]

Вроде нормально все работает. Смотрел в лисе.
попробуйте почистить кэш