Каково текущее состояние библиотек и фреймворков JavaScript холста HTML? [закрыто]

В настоящее время я изучаю варианты работы с холстом в новом приложении HTML 5, и мне было интересно, каково текущее состояние библиотек и фреймворков JavaScript холста HTML?

В частности, существуют ли фреймворки, которые поддерживают то, что необходимо для разработки игр - сложную анимацию, управление графами сцены, обработку событий и взаимодействие с пользователем?

Также готовы рассмотреть как коммерческие продукты, так и продукты с открытым исходным кодом.

Я работал над fabric.js - библиотекой холста, которая помогает именно в этом - манипулирую объектами на холсте, обрабатывая события и взаимодействия с пользователем. Он еще не выпущен, но взгляните на простую предварительную демонстрацию .

Вы также можете увидеть его в действии в этом редакторе дизайна , для которого он был изначально создан.

Изменить: проект теперь доступен на github (с открытым исходным кодом под лицензией MIT)

Для начала ознакомьтесь с:

• Демонстрации (простые и сложные, с кодом, показывающим, как они сделаны)
• Презентация Fabric.js на FalsyValues (и еще одна на BK.js )
• Wiki на github (включая FAQ )
• Документация
• Группа Google (задайте там любой вопрос)
• Fabric.js в твиттере (или короткие вопросы в твиттере)
• Введение в Fabric.js: Часть 1 (статья на ScriptJunkie)
• Введение в Fabric.js: Часть 2 (статья на ScriptJunkie)

Как Fabric сравнивается с другими библиотеками холста Javascript? Вот сравнительная таблица .

Я удивлен, что никто не упомянул WebGL и фреймворки, построенные на нем. Я бы счел его одним из самых современных достижений в области 3D-графики с ускорением на GPU и сложной анимации на HTML-холсте / javascript.

WebGL - это кроссплатформенный бесплатный веб-стандарт для низкоуровневого API трехмерной графики на основе OpenGL ES 2.0, предоставляемый через элемент HTML5 Canvas как интерфейсы объектной модели документа. ...

WebGL предлагает 3D без подключаемых модулей в Интернете, реализованный прямо в браузере. Основные поставщики браузеров Apple (Safari), Google (Chrome), Mozilla (Firefox) и Opera (Opera) являются членами рабочей группы WebGL.

WebGL очень надежен в поддержке графики с ускорением на GPU. Посмотрите эти демонстрации шейдеров GLSL . :-) И посмотрите ChemDoodle как пример взаимодействия с пользователем.

Я работал над приложением, используя Google платформу O3D , которая управляет графом сцены и использует WebGL для рендеринга (раньше он использовал собственный плагин). O3D находится в стадии разработки, и его документация не обновлена ​​полностью, но он находится в активной разработке, и есть несколько хороших демонстраций . Возможно, вам больше всего понравится 3D-бассейн . Разработчики Google очень отзывчивы на вопросы в группе обсуждения.

Существует ряд других фреймворков, построенных на WebGL; см. здесь . Графики разработки игр и сцен упоминают Copperlicht, SceneJS, X3DOM.

WebGL работает в последних разработках нескольких браузеров , но не в IE. Я использую Firefox («Минное поле») и Chromium с хорошими результатами. Вам понадобится один из них для запуска вышеуказанных демонстраций.

Однако, если ваши требования заключаются в том, что он не должен иметь никаких зависимостей, кроме HTML 5 canvas / js, WebGL может быть неправильным выбором. Это не похож на IE будет поддерживать его в ближайшее время.

Обновление: после большого сопротивления MS решила поддерживать WebGL в IE 11 .

three.js , автор: mr. doob - это фантастический 3D-движок для javascript, который включает в себя граф сцены (версии с программным и аппаратным ускорением WebGL), затенение, частицы, анимацию со скинами (я думаю) и световые эффекты. Посмотри, он суперталантливый парень.

Я должен добавить, что вам понадобится новейший Google Chrome или эквивалент для просмотра большинства демонстраций, один из моих любимых: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS - это многообещающая библиотека, которая может создавать и анимировать отдельные «слои» на холсте для обеспечения высокой производительности.

http://www.kineticjs.com/

CAKE.js больше не поддерживается, но представляет собой довольно мощный фреймворк - http://code.google.com/p/cakejs/

Демки здесь - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Взгляните на фреймворк processingjs . Также в грядущей версии mootools 2.0 есть арт-проект для работы с холстом.

Рафаэль кажется довольно хорошей библиотекой холстов; он основан на SVG (или на основе VML в Internet Explorer) и, таким образом, поддерживает множество событий пользовательского ввода. Он довольно маленький (60 КБ в сжатом виде), поэтому не слишком большая зависимость.
Кажется, у него тоже есть хороший аниматор: http://raphaeljs.com/reference.html#animate (см. Здесь и здесь для примеров).

Чтобы увидеть, что он умеет, посмотрите эту умную маленькую демонстрацию .

Надеюсь это поможет!

Я обнаружил, что две библиотеки чрезвычайно конкурентоспособны и намного лучше, чем ткань.

Kinetic.js и moodl.js имеют очень хорошую обработку событий, группировку и общую абстракцию форм. Вы найдете много за что полюбить в обоих из них; мольберт, кажется, больше ориентирован на изображение и фильтрует.

Обработчики событий Fabric НАМНОГО хуже, чем любой из них - в основном он обрабатывает весь холст как один большой обработчик событий и сообщает вам, когда был нажат «Something». Он не связывает события с отдельными фигурами или группами фигур.

Существует интересная библиотека, которая направлена ​​на улучшение некоторых основ работы с API-интерфейсом Canto, называется canto.js Дэвидом Фланаганом, автором Javascript: The Definitive Guide .

Кроме того, молодая, но неплохая среда Javascript и все это (сложная анимация, управление графами сцены, обработка событий и взаимодействия с пользователем) - jCanvaScript . Может быть, кроме «управления графами сцены».

Работал с bHive над созданием графиков и перемещением заголовков сайтов, кажется впечатляющим и мощным, в отличие от других, которые, похоже, разрабатываются. Adobe Edge тоже заслуживает внимания, но только не Canvas.

http://www.bhivecanvas.com

и

http://labs.adobe.com/technologies/edge/

Aves Engine действительно великолепен: http://www.dextrose.com/en/projects/aves-engine

Кроме того, Акихабара кажется хорошим: http://www.kesiev.com/akihabara/

Если вы хотите использовать Javascript, Dojo - отличный способ. Он имеет компактный, кроссплатформенный (SVG, VML, Canvas, Silverlight) API векторной графики, который очень мощный. Вы можете найти его в dojo.gfx и dojox.gfx.

Мы использовали это для создания интерактивного репетитора по физике, который позволяет студентам рисовать векторы, эллипсы и т. Д. (Даже добавлять изображения) и выполнять с ними всевозможные преобразования. Вы можете увидеть, что мы сделали, на http://gideon.eas.asu.edu/web-UI/login.html - просто войдите в систему с любым именем пользователя.

Я взглянул на fabric.js, и dojox.drawing делает то же самое. Если вы посмотрите тесты в наборе инструментов (как только вы получите его dojox / drawing / tests /), вы найдете примеры всего: от векторной графики до изображений и программно созданных теней.

Я впечатлен Акихабарой как игровым движком. У него фантастическая документация в виде руководств и api. Я даже видел на некоторых досках сообщений разговоры о выпуске Акихабара 2. К сожалению, все эти разговоры про год или больше. Я очень надеюсь, что этот движок все еще находится в стадии разработки.

Я только что выпустил первую итерацию новой библиотеки рисования и анимации, ориентированной на людей с опытом разработки AS3 / Flash. Хотя моя библиотека еще не поддерживает сложные пути рисования или графики, я надеюсь, что она поможет людям быстро рисовать и анимировать базовые примитивы знакомым способом.

Отзывы и комментарии приветствуются. http://www.quietless.com/kitchen/introduction-js3/