Qual é o estado da arte atual em bibliotecas e estruturas de JavaScript de canvas HTML? [fechadas]

No momento, estou investigando opções para trabalhar com o canvas em um novo aplicativo HTML 5 e gostaria de saber qual é o estado da arte atual em bibliotecas e estruturas de JavaScript de canvas HTML?

Em particular, existem estruturas que suportam o tipo de coisas necessárias para o desenvolvimento de jogos - animação complexa, gerenciamento de gráficos de cena, manipulação de eventos e interações do usuário?

Também está disposto a considerar produtos comerciais e de código aberto.

Tenho trabalhado em fabric.js - uma biblioteca de telas para ajudar exatamente nisso - manipulando objetos na tela, manipulando eventos e interações do usuário. Ainda não foi lançado, mas dê uma olhada em uma demonstração de visualização simples .

Você também pode vê-lo em ação neste editor de design , para o qual foi originalmente criado.

Editar: o projeto agora está disponível no github (código aberto sob licença MIT)

Para começar, verifique:

• Demonstrações (simples e complexas, com código para mostrar como são feitas)
• Apresentação do Fabric.js em FalsyValues (e outra em BK.js )
• Wiki no github (incluindo FAQ )
• Documentação
• Grupo do Google (faça qualquer pergunta lá)
• Fabric.js no twitter (ou perguntas curtas via twitter)
• Introdução ao Fabric.js: Parte 1 (artigo sobre ScriptJunkie)
• Introdução ao Fabric.js: Parte 2 (artigo sobre ScriptJunkie)

Como o Fabric se compara a outras bibliotecas de canvas Javascript? Aqui está uma tabela de comparação .

Estou surpreso que ninguém tenha mencionado WebGL e estruturas construídas sobre ele. Eu o consideraria no topo da lista de estado da arte para gráficos 3D acelerados por GPU e animações complexas em canvas / javascript HTML.

WebGL é uma plataforma cruzada, padrão da web livre de royalties para uma API de gráficos 3D de baixo nível baseada em OpenGL ES 2.0, exposta por meio do elemento HTML5 Canvas como interfaces de Document Object Model. ...

O WebGL traz 3D sem plug-in para a web, implementado diretamente no navegador. Os principais fornecedores de navegadores Apple (Safari), Google (Chrome), Mozilla (Firefox) e Opera (Opera) são membros do Grupo de Trabalho WebGL.

WebGL é muito sólido em seu suporte para gráficos acelerados por GPU. Confira essas demonstrações de shader GLSL . :-) E veja o ChemDoodle como um exemplo de interação do usuário.

Estou trabalhando em um aplicativo usando a estrutura O3D do Google , que gerencia o gráfico de cena e usa WebGL para renderização (costumava usar seu próprio plug-in). O3D é um trabalho em andamento e sua documentação não está totalmente atualizada, mas está em desenvolvimento ativo e há algumas boas demos por aí . O 3D Pool pode ser o seu destino. Os desenvolvedores do Google respondem muito bem às perguntas do grupo de discussão.

Existem várias outras estruturas construídas em WebGL; veja aqui . Os que mencionam o desenvolvimento de jogos e gráficos de cena incluem Copperlicht, SceneJS, X3DOM.

O WebGL é executado em compilações de desenvolvimento recentes de vários navegadores , mas não no IE. Tenho usado Firefox ("Minefield") e Chromium com bons resultados. Você precisará de um desses para executar as demos acima.

No entanto, se seus requisitos são que ele não deve ter dependências além do HTML 5 canvas / js, WebGL pode não ser a escolha certa. Não parece que o IE irá suportá-lo tão cedo.

Atualização: depois de oferecer muita resistência, a MS decidiu oferecer suporte ao WebGL no IE 11 .

three.js , por mr. doob , é um mecanismo 3D fantástico para javascript que inclui scenegraph (versões aceleradas de software e WebGL / hardware), sombreamento, partículas, animação skinned (eu acho) e efeitos de iluminação. Olha só, ele é um sujeito super talentoso.

Devo acrescentar que você vai precisar do mais recente Google Chrome ou equivalente para ver a maioria das demos, uma das minhas favoritas é: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS é uma biblioteca emergente que se orgulha de criar e animar "camadas" individuais na tela para alto desempenho.

http://www.kineticjs.com/

CAKE.js não está mais sendo mantido, mas é uma estrutura bastante poderosa - http://code.google.com/p/cakejs/

Demonstrações aqui - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Dê uma olhada na estrutura processingjs . Além disso, a próxima mootools versão 2.0 tem o projeto de arte para trabalhar com tela

Raphael parece uma ótima biblioteca de telas; é baseado em SVG (ou baseado em VML no Internet Explorer) e, portanto, suporta muitos eventos de entrada do usuário. É bastante pequeno (60kb compactado com gzip), então não é uma dependência muito grande.
Parece ter um tweener legal também: http://raphaeljs.com/reference.html#animate (veja aqui e aqui para exemplos).

Para obter um exemplo do que ele pode fazer, dê uma olhada nesta pequena demonstração inteligente .

Espero que isto ajude!

Eu descobri que duas bibliotecas são extremamente competitivas e muito melhores do que o tecido.

Kinetic.js e easel.js têm excelente manipulação de eventos, agrupamento e abstração geral de formas. Você encontrará muito o que amar em ambos; cavalete parece ter mais orientação de imagem e filtragem.

Os manipuladores de evento do Fabric são MUITO piores do que qualquer um desses - basicamente ele trata toda a tela como um grande manipulador de eventos e avisa quando "Algo" foi clicado. Ele não anexa eventos a formas individuais ou grupos de formas.

Há uma biblioteca interessante que visa aprimorar alguns dos fundamentos do trabalho com a API do canvas chamada canto.js, de David Flanagan, autor de Javascript: The Definitive Guide .

Além disso, uma estrutura Javascript jovem, mas não ruim, e (animação complexa, gerenciamento de gráficos de cena, manipulação de eventos e interações do usuário) tudo sobre isso - jCanvaScript . Pode ser, exceto 'gerenciamento de gráficos de cena'.

Trabalhar com o bHive para produzir gráficos e mover cabeçalhos de sites, parece impressionante e poderoso, ao contrário dos outros parece estar em desenvolvimento. Adobe Edge também vale a pena dar uma olhada, embora estritamente não seja o Canvas.

http://www.bhivecanvas.com

e

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

Aves Engine é realmente ótimo: http://www.dextrose.com/en/projects/aves-engine

Além disso, Akihabara parece bom: http://www.kesiev.com/akihabara/

Se você deseja usar Javascript, o Dojo é uma ótima opção. Ele tem uma API de gráficos vetoriais compacta e multiplataforma (SVG, VML, Canvas, Silverlight) muito poderosa. Você pode encontrá-lo em dojo.gfx e dojox.gfx.

Usamos isso para construir um tutor de física interativo que permite aos alunos desenhar vetores, elipses, etc (até mesmo anexar imagens) e realizar todos os tipos de transformações neles. Você pode ver o que fizemos em http://gideon.eas.asu.edu/web-UI/login.html - apenas faça login com qualquer nome de usuário.

Dei uma olhada em fabric.js e dojox.drawing faz muitas das mesmas coisas. Se você olhar os testes no kit de ferramentas (assim que tiver seu dojox / desenho / testes /), você encontrará exemplos de tudo, desde gráficos vetoriais a imagens e sombras criadas programaticamente.

Estou impressionado com o Akihabara como motor de jogo. Ele tem uma documentação fantástica na forma de tutoriais e uma API. Eu até vi em alguns fóruns de discussão sobre o lançamento do akihabara 2. Infelizmente, toda essa conversa tem cerca de um ano ou mais. Eu realmente espero que este motor ainda esteja sendo desenvolvido.

Acabei de lançar a primeira iteração de uma nova biblioteca de desenho e interpolação voltada para pessoas com experiência em desenvolvimento AS3 / Flash. Embora minha biblioteca ainda não ofereça suporte a caminhos de desenho ou gráficos complexos, espero que ajude as pessoas a desenhar e animar primitivos básicos rapidamente de uma maneira familiar.

Feedback e comentários são bem-vindos. http://www.quietless.com/kitchen/introducing-js3/