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

107

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.

Toby Hede
fonte
Se você está usando gráficos de cena e gerenciando eventos, o SVG não é mais adequado às suas necessidades?
Joeri Sebrechts
Bem, essa é parte da razão pela qual pergunto. O Canvas definitivamente tem o ímpeto atm, então tente determinar o que é viável e o que não é. O SVG não é dimensionado muito bem quando se trata de animações complexas.
Toby Hede
Você está procurando especificamente por gráficos 3D, 2D ou qualquer um deles?
LarsH
Outra boa demonstração aqui: kevs3d.co.uk/dev/asteroids . Não tenho certeza se a biblioteca que eles criaram está disponível para todos usarem. Um bom exemplo de tela.
Castrohenge
jsfiddle.net/user/zlatnaspirala/fiddles experimente este framework visualJS.
Nikola Lukic

Respostas:

96

Captura de tela do Fabric.js

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:

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

kangax
fonte
O que isso faz no IE? ExplorerCanvas?
Sasha Chedygov
14
Esta é uma demonstração fenomenal, projeto extremamente impressionante
desmontado em
3
@musicfreak Sim, ExplorerCanvas. A propósito, ele passa em todos os ~ 900 testes no IE9 (4ª visualização), usando seu suporte nativo de canvas.
kangax
4
Existe uma página de projeto para fabric.js em algum lugar? Estou muito interessado em aprender mais sobre isso.
Arne Roomann-Kurrik de
Uau, exatamente o que eu preciso ... Na verdade, fiquei frustrado com a dificuldade de gerenciar funções que essa biblioteca lida com tanta perfeição!
Shouvik
17

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 .

LarsH
fonte
Three.js é executado em webgl
JqueryToAddNumbers
@nube: bom ponto. Three.js pode renderizar em telas WebGL, SVG ou simples (2D).
LarsH
15

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

Alteveer
fonte
1
Esta demonstração é ainda melhor: carvisualizer.plus360degrees.com/threejs
Pierre Henry
13

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

http://www.kineticjs.com/

Ericbowden
fonte
github.com/ericdrowell/KineticJS/#mothballed diz " Não vou mais manter este repo ou o site oficial do KineticJS porque mudei para outros empreendimentos e projetos " e o GitHub relata 147 questões abertas
xmojmr
6

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

Andreas Köberle
fonte
3
ProcessingJS é uma abordagem interessante para o problema, mas é essencialmente uma DSL procedural implementada em JavaScript, não tenho certeza se pode escalar para aplicativos não triviais. Irá verificar a opção MooTools.
Toby Hede
Sim, o Processing é uma linguagem de prototipagem data viz. O fato de haver uma porta Javascript é legal, mas dificilmente a torna uma estrutura HTML 5.
Peter Bailey
A questão era sobre um framework canvas, não html5, e isso é o que é o processingJS.
Andreas Köberle
Perdoe meu erro de semântica. O framework Canvas é o que eu queria chegar.
Peter Bailey
6

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!

Donald Harvey
fonte
10
SVG não é a mesma coisa que canvas
Toby Hede
4

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.

Dave Edelhart
fonte
2
FWIW, o Fabric agora permite que você anexe eventos diretamente a objetos e tem funcionalidade de grupo genérico.
kangax
3

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'.

Alex Savin
fonte
2

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.

ás
fonte
1

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.

Março
fonte
1

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/

Braitsch
fonte