Qual è lo stato dell'arte delle librerie e dei framework JavaScript HTML canvas? [chiuso]

Attualmente sto esaminando le opzioni per lavorare con la tela in una nuova applicazione HTML 5 e mi chiedevo qual è lo stato attuale dell'arte nelle librerie e nei framework JavaScript della tela HTML?

In particolare, esistono framework che supportano il tipo di cose necessarie per lo sviluppo di giochi: animazioni complesse, gestione dei grafici delle scene, gestione degli eventi e interazioni dell'utente?

Anche disposto a considerare prodotti sia commerciali che open source.

Ho lavorato su fabric.js - una libreria di tele per aiutare esattamente in questo - manipolare oggetti su tela, gestendo eventi e interazioni dell'utente. Non è ancora stato rilasciato, ma dai un'occhiata a una semplice demo in anteprima .

Puoi anche vederlo in azione in questo editor di design , per il quale è stato originariamente creato.

Modifica: il progetto è ora disponibile su GitHub (open source con licenza MIT)

Per iniziare, controlla:

• Demo (semplici e complesse, con codice per mostrare come sono fatte)
• Presentazione Fabric.js a FalsyValues (e un'altra a BK.js )
• Wiki su GitHub (comprese le FAQ )
• Documentazione
• Gruppo Google (fai qualsiasi domanda lì)
• Fabric.js su Twitter (o brevi domande tramite Twitter)
• Introduzione a Fabric.js: parte 1 (articolo su ScriptJunkie)
• Introduzione a Fabric.js: parte 2 (articolo su ScriptJunkie)

Come si confronta Fabric con altre librerie di canvas Javascript? Ecco una tabella di confronto .

Sono sorpreso che nessuno abbia menzionato WebGL e framework basati su di esso. Lo considero in cima alla lista per lo stato dell'arte per la grafica 3D accelerata dalla GPU e l'animazione complessa su tela HTML / javascript.

WebGL è uno standard web multipiattaforma, esente da royalty per un'API di grafica 3D di basso livello basata su OpenGL ES 2.0, esposto attraverso l'elemento HTML5 Canvas come interfacce Document Object Model. ...

WebGL porta il 3D senza plug-in sul Web, implementato direttamente nel browser. I principali fornitori di browser Apple (Safari), Google (Chrome), Mozilla (Firefox) e Opera (Opera) sono membri del gruppo di lavoro WebGL.

WebGL è molto solido nel suo supporto per la grafica accelerata dalla GPU. Dai un'occhiata a queste demo di shader GLSL . :-) E vedi ChemDoodle come esempio di interazione con l'utente.

Ho lavorato su un'app che utilizza il framework O3D di Google , che gestisce il grafico della scena e utilizza WebGL per il rendering (utilizzava il proprio plug-in). O3D è un work in progress e la sua documentazione non è completamente aggiornata, ma è in fase di sviluppo attivo e ci sono alcune buone demo là fuori . Piscina 3D potrebbe essere la cosa migliore per te. Gli sviluppatori di Google sono molto reattivi alle domande nel gruppo di discussione.

Esistono numerosi altri framework basati su WebGL; vedere qui . Quelli che menzionano lo sviluppo del gioco e i grafici delle scene includono Copperlicht, SceneJS, X3DOM.

WebGL viene eseguito nelle build di sviluppo recenti di diversi browser , ma non in IE. Ho utilizzato Firefox ("Minefield") e Chromium con buoni risultati. Avrai bisogno di uno di questi per eseguire le demo di cui sopra.

Tuttavia, se le tue esigenze sono che non deve avere dipendenze oltre a HTML 5 canvas / js, WebGL potrebbe non essere la scelta giusta. Non sembra che IE lo supporterà presto.

Aggiornamento: dopo aver opposto molta resistenza, MS ha deciso di supportare WebGL in IE 11 .

three.js , di mr. doob , è un fantastico motore 3D per javascript che include scenegraph (versioni accelerate sia software che WebGL / hardware), ombreggiatura, particelle, animazione con skin (credo) ed effetti di luce. Dai un'occhiata, è un tipo super talentuoso.

Devo aggiungere che avrai bisogno del più recente Google Chrome o equivalente per visualizzare la maggior parte delle demo, uno dei miei preferiti è: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS è una libreria emergente che vanta la creazione e l'animazione di singoli "livelli" sulla tela per prestazioni elevate.

http://www.kineticjs.com/

CAKE.js non viene più mantenuto ma è un framework abbastanza potente - http://code.google.com/p/cakejs/

Demo qui - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Dai un'occhiata al framework processingjs . Anche l'imminente versione 2.0 di mootools ha il progetto artistico di lavorare con la tela

Raphael sembra una biblioteca di tele piuttosto buona; è basato su SVG (o su VML in Internet Explorer) e quindi supporta molti eventi di input dell'utente. È abbastanza piccolo (60kb gzip), quindi non è una dipendenza troppo grande.
Sembra avere anche un bel tweener: http://raphaeljs.com/reference.html#animate (vedi qui e qui per esempi).

Per un esempio di cosa può fare, dai un'occhiata a questa piccola demo intelligente .

Spero che questo ti aiuti!

Ho trovato due librerie estremamente competitive e molto migliori di Fabric.

Kinetic.js e easel.js hanno entrambi un'ottima gestione degli eventi, raggruppamento e astrazione generale della forma. Troverai molto da amare in entrambi; il cavalletto sembra avere più orientamento all'immagine e filtraggio.

Il gestore degli eventi di Fabric è MOLTO peggiore di uno di questi - fondamentalmente tratta l'intera tela come un grande contenitore di eventi e ti dice quando è stato fatto clic su "Qualcosa". Non associa eventi a singole forme o gruppi di forme.

Esiste un'interessante libreria che mira a migliorare alcuni dei fondamenti del lavoro con l'API canvas chiamata canto.js di David Flanagan, autore di Javascript: The Definitive Guide .

Inoltre, il framework Javascript giovane, ma non male, e (animazione complessa, gestione dei grafici delle scene, gestione degli eventi e interazioni dell'utente) tutto su di esso - jCanvaScript . Può essere, tranne "gestione dei grafici delle scene".

Ho lavorato con bHive per produrre grafici e spostare le intestazioni dei siti, sembra impressionante e potente, a differenza degli altri sembra essere in fase di sviluppo. Anche Adobe Edge merita una visita anche se strettamente non Canvas.

http://www.bhivecanvas.com

e

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

Aves Engine è davvero fantastico: http://www.dextrose.com/en/projects/aves-engine

Inoltre, Akihabara sembra buono: http://www.kesiev.com/akihabara/

Se vuoi usare Javascript, Dojo è un ottimo modo per farlo. Ha un'API di grafica vettoriale compatta e multipiattaforma (SVG, VML, Canvas, Silverlight) molto potente. Puoi trovarlo in dojo.gfx e dojox.gfx.

Lo abbiamo utilizzato per creare un tutor interattivo di fisica che consente agli studenti di disegnare vettori, ellissi, ecc. (Persino aggiungere immagini) ed eseguire ogni tipo di trasformazione su di essi. Puoi vedere cosa abbiamo fatto su http://gideon.eas.asu.edu/web-UI/login.html - effettua il login con qualsiasi nome utente.

Ho dato un'occhiata a fabric.js e dojox.drawing fa molte delle stesse cose. Se guardi i test nel toolkit (una volta ottenuto il suo dojox / drawing / tests /) trovi esempi di tutto, dalla grafica vettoriale alle immagini alle ombre create a livello di programmazione.

Sono impressionato da Akihabara come motore di gioco. Ha una fantastica documentazione sotto forma di tutorial e API. Ho persino visto su alcune bacheche parlare di una versione di akihabara 2. Sfortunatamente, tutto questo discorso riguarda un anno o più. Spero davvero che questo motore sia ancora in fase di sviluppo.

Ho appena rilasciato la prima iterazione di una nuova libreria di disegno e interpolazione orientata a persone con un background di sviluppo AS3 / Flash. Anche se la mia libreria non supporta ancora percorsi di disegno o grafici complessi, spero che aiuti le persone a disegnare e animare rapidamente le primitive di base in modo familiare.

Feedback e commenti sono i benvenuti. http://www.quietless.com/kitchen/introducing-js3/