Pixi.js и ThreeJS для расширенного веб-интерфейса

Привет! Я и группа разработчиков создают графический интерфейс с открытым исходным кодом для интерактивного редактирования графиков.

Я хочу, чтобы этот интерфейс обрабатывал большое количество подключенных узлов, позволяя пользователю перемещать их, повторно подключаться, увеличивать/уменьшать и т.д. Каждый node мог бы иметь текст, кнопки, слайдеры и другие элементы управления поверх него. Дополнительно мы хотим создать довольно продвинутый, подключаемый графический интерфейс - каждая панель будет плагином - вы можете думать об этом как о веб-затмении. Панель может быть текстовым редактором, временной шкалой или 3D-окном.

Я хотел бы спросить вас, какая библиотека даст нам больше преимуществ - Pixi.js, ThreeJS или, возможно, другая? Может быть, мы должны их смешивать - создаем интерфейс в Pixi.js и некоторые из плагинов, которым нужна поддержка 3D в ThreeJS (мне лично не нравится эта идея из-за более низкой "согласованности" ).

Мы хотим, чтобы все работало в WebGL. Причиной этого является то, что мы хотим как можно лучше запустить редактор графа и учитывая тот факт, что редактор графов должен отображать те же элементы управления, что и другие части графического интерфейса, разумно сделать это в одной технологии.

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

Ответы

Ответ 1

но если вы хотите создать высокопроизводительный график node с масштабированием ввода/вывода и некоторыми причудливыми эффектами, которые могут обрабатывать тысячи узлов, я думаю, что гораздо лучшая производительность, которую мы получили бы с помощью canvas/webgl, не так ли?

Нет, я не могу согласиться.

HTML действительно очень хорош в node манипуляции и рендеринге. Но их слабость - это те фантастические эффекты, о которых вы говорите.

С другой стороны, webgl отлично подходит для причудливых эффектов, но имеет очень плохую манипуляцию node. Допустим, что при первой попытке вы создаете каждый node как один призыв к обратному вызову, 300 обратных вызовов, и вы можете сделать это. Вам придется думать и обманывать, думать и обманывать, чтобы избавиться от призывов к рисованию (вызовы webgl).

Пример, который я видел и так могу говорить. Cocos2d-js может быть более подходящим, чем Pixi.js или ThreeJS. Это очень хороший 2d бесплатный движок со свободной студией и мощным резервом на холсте. Существует также один базовый эффект, который вам может понадобиться, с девятью срезами. Но даже эта простая вещь из девяти срезов сделает 9 обратных вызовов, и вы можете быстро увидеть свою производительность. Я также сделал тесты производительности с cocos2d, и я могу сказать, что 400 наиболее простых спрайтов рядом друг с другом работают только 30 кадров в секунду.

Причина, по которой производительность настолько низкая, - это то, что движок (какой-либо движок) не имеет информации о том, чего именно вы пытаетесь достичь. Большинство двигателей предложит вам только один или два способа, как сделать что-то. И если я выбираю, я хочу, чтобы каждое отдельное изображение было одним спрайтом (один node), двигатель не сможет упростить его.

Если бы я был вами, я бы не использовал какой-либо движок и сделал бы это только с webgl. Но это означает, что вы должны знать webgl, и у вас нет резерва на холст. Задача представляется очень сложной, и снова некоторые демонстрации. У обоих трехъядерных процессоров и playcanvas есть бесплатный редактор в браузере. Playcanvas выпустила новую версию редактора всего 2 дня назад. И редакторы gui - это HTML, оба. Мы говорим о машинах webgl, которые предпочитают HTML gui. Также многие разработчики игр также предпочли HTML.

Итак, HTML - неплохой вариант, но если вам действительно нужно использовать webgl, вы должны быть готовы. Ваша задача может быть невозможна для двигателей.