Библиотека 2D 2D-рендеринга [pixie.js vs three.js]

Существует несколько библиотек JavaScript, позволяющих рендеринг 2D-графики с использованием WebGL. Я выяснил, что наиболее популярными являются three.js и pixi.js. Оба они позволяют использовать WebGL или рендеринг холста (для устройств, не поддерживающих WebGL).

Я хочу спросить вас, какая из этих библиотек лучше под следующими терминами:

  • Я хочу, чтобы он использовался только с 2D-графикой, поэтому поддержка 3D полностью необязательна.
  • Производительность очень важна - множество элементов, текст, умение плавно масштабировать, переводить их и т.д. crutial.
  • Важен визуализатор canvas (когда устройство не поддерживает WebGl), и мне бы хотелось увидеть тот же (или очень похожий) результат с помощью обоих рендерингов.

Если есть другая библиотека, которую я должен учитывать в этой ситуации, не стесняйтесь сказать об этом:)

Ответы

Ответ 1

У меня есть тот же самый вариант использования и просто пробовал оба. Загрузка большого количества статических спрайтов (с одного и того же изображения) выполняется быстрее в three.js для 5000 спрайтов и выше, но анимация только нескольких из этих спрайтов дает лучшие частоты кадров в pixi (опять же, для 5000 спрайтов). (Это было протестировано на Chrome и IE9 на рабочем столе)

Самое большое различие было в рендерере Canvas, где pixy autodetect дает те же результаты, что и WebGL (если медленнее) для одного и того же кода, но three.js Canvas renderer не поддерживает тип Sprite, что означает получение портативного кода, который вы должны использовать Particles. Если вы не используете спрайты так много и в основном имеете квадратики или треугольники, это не будет проблемой.

Если доступность учебных пособий и т.д. вообще не проблема, три. js более установлены, поэтому там больше материала.

В противном случае, до примерно 2-3 тысяч элементов, отображаемых в одно и то же время, я бы пошел с pixi.