Почему canvas дико виснет?

Question

[WebforSelf]

Есть сайт - ссылка

На нем анимация сделанная на canvas ,

но проблема в том что на многих десктопах подвисает, а на мобилке просто покадрово... Как быть?
Это непосредственно код который организует канвас, используется библиотека fabric.js

Comments

[twobomb]

Ну возможно потому-что используется библиотека

[WebforSelf]

twobomb, странно но библиотека как подгружать может? мы берем из нее только необходимые функции нам

[twobomb]

WebforSelf, хах, вы берете из неё всё. И реализация этих функций там сделана неизвестно как, вы получаете удобство и простоту использования и платите производительностью

[WebforSelf]

twobomb, есть пример

Ссылка

Где 1000 шаров бьются в агонии, и фпс 45, почему у меня проседает до 15-17

[twobomb]

WebforSelf,
Удали

(function render() {
		canvas.renderAll();
		fabric.util.requestAnimFrame(render);
	})();

, мож фризит на прогрузке изображений?

[WebforSelf]

twobomb, убрал эту функцию вроде как +5 к FPS , но все равно низкий в пределах 30

[twobomb]

WebforSelf, чем фпс меряете?

[WebforSelf]

twobomb, установил расширение для хрома, в инспекторе не нашел где можно подключить

[twobomb]

WebforSelf, тут дело не в этой анимации, просто страница перенасыщена скриптами, изображениями и прочей сранью. Можете вынести скрипт на отдельную страницу и убедится что всё работает нормально, он может пожтормаживать только в начале на моменте загрузки изображений. Ну и можете просто удалить со страницы эту анимацию и даже библиотеку, и перезапустить и убедится что счетчик фпс не изменился

[RAX7]

WebforSelf, скорее всего проблема в использовании метода animate. Этот метод на каждый вызов вызывает отдельный requestAnimationFrame

spoiler

https://stackoverflow.com/questions/17103785/multi...
На странице с тестами производительности авторы библиотеки не используют метод animate

[WebforSelf]

twobomb, Удалял) фпс становится 60)
Вот ссылка на сайт где анимация без всего
ФПС 35-40, а тот сайт который
Ссылка на сайт
Он без скрипта все 60 и выдает как положено)

[twobomb]

WebforSelf, Посмотрел еще раз на ту ссылку где 1000 объектов, и там используют

fabric.util.requestAnimFrame(animate, canvas.getElement());
    canvas.renderAll();

в методе animate, по сути у них animate это основой и единственный цикл анимации, где они руками проводят всё просчеты, а библитеку используют только для отрисовки, что странно, нахрена тогда такая библиотека вообще нужна.
А у вас для каждого типа объектов вызывается метод obj.animate, который по идее создает отдельный свой луп для каждой анимации и по завершении анимации возвращает колбек через который вы опять вызываете animate. Хотя в вашем случае библиотека хотя-бы сама двигает объекты и рисует. Но у вас нет едениго цикла просчета и отрисовки, мне кажется метод obj.animate нужен для каких-то разовых случаев.
Крч вам нужно или переписать все на единый цикл и руками придется всё анимировать, в таком случае я бы вообще выкинул эту бибилотеку. Или может быть в библиотеке как-то можно указать анимацию движения объектов, но чтобы каждый шаг просчета и рендера всех возможных анимаций, всех объектов вызывался через один метод типаcanvas.renderAll(); ,чтобы в итоге у вас был один цикл для всех анимаций, а не десятки разрозненно запущенных анимаций где у каждой свой цикл