Сравнение библиотек для рисования

На прошлой неделе я углубилась в изучение существующих библиотек рисования графики. Их оказалось просто огромное количество под совершенно разные нужды. Например, PixiJS — очень мощный и популярный движок для создания игр, а Draw2d заточен под рисование диаграмм или графов.

Моя задача была понять, у какой библиотеки больше возможностей и фич, с какой удобнее работать и какая быстрее всего перерисовывает сцены с большим количеством элементов. Я выбрала три библиотеки (PixiJS, Two.js и Paper.js) и решила их сравнить.

Результат можно найти тут: benchmarks.slaylines.io
Код — здесь: github.com/slaylines/canvas-engines-comparison

Почему такой выбор? Нужна была библиотека, которая умела бы быстро перерисовывать весь экран, а значит, нужен был canvas (желательно с поддержкой webgl). PixiJS — очень популярная штука, вокруг которой есть большое комьюнити (это обычно безумно важно при разработке чего-то не одноразового). Two.js на первый взгляд показался очень симпатичным, простым и минималистичным. Paper.js приглянулся направленностью на работу с векторной графикой.

А выводы из сравнения у меня такие:

1. PixiJS — очень крутой и шустрый движок, который умеет без проседания fps рисовать тысячи элементов. При этом он довольно сложный, с огромным количеством всего. Не стала бы брать его на маленькие и простые проекты, но вот для больших и долгих он в самый раз.

2. Two.js умеет переключаться между webgl, canvas и svg. В режиме webgl может без заметных тормозов перерисовывать 5 тысяч элементов. Но первый раз рисует эти 5 тысяч очень долго.

3. У Paper.js нет поддержки webgl, поэтому даже 2 тысячи элементов начинают тормозить. Ещё там можно использовать специальный тип скриптов для быстрого создания сцены, хотя я этим не воспользовалась и писала всё в обычном JS коде.

#практика #canvas