HTML canvas JavaScript kitaplıkları ve çerçevelerindeki son teknoloji nedir? [kapalı]

Şu anda yeni bir HTML 5 uygulamasında tuvalle çalışma seçeneklerini araştırıyorum ve HTML canvas JavaScript kitaplıklarında ve çerçevelerinde sanatın şu anki durumu nedir?

Özellikle, oyun geliştirme için gerekli olan şeyleri destekleyen çerçeveler var mı - karmaşık animasyon, sahne grafiklerini yönetme, olayları işleme ve kullanıcı etkileşimleri?

Ayrıca hem ticari hem de açık kaynaklı ürünleri değerlendirmeye istekli.

Olayları ve kullanıcı etkileşimlerini işleyerek tuval üzerindeki nesneleri işleyerek, tam olarak buna yardımcı olacak bir tuval kitaplığı olan fabric.js üzerinde çalışıyorum . Henüz yayınlanmadı, ancak basit bir önizleme demosuna bir göz atın .

Bunu , başlangıçta kendisi için yaratılmış olan bu tasarım düzenleyicide de iş başında görebilirsiniz.

Düzenleme: Proje artık github'da mevcut (MIT Lisansı altında açık kaynaklı)

Başlamak için şunlara göz atın:

• Demolar (basit ve karmaşık, nasıl yapıldığını gösteren kodla)
• FalsyValues'de Fabric.js sunumu (ve BK.js'de bir tane daha )
• Github'da Wiki ( SSS dahil )
• Dokümantasyon
• Google Grubu (orada herhangi bir soru sorun)
• Twitter'da Fabric.js (veya twitter üzerinden kısa sorular)
• Fabric.js'ye Giriş: Bölüm 1 (ScriptJunkie ile ilgili makale)
• Fabric.js'ye Giriş: Bölüm 2 (ScriptJunkie ile ilgili makale)

Fabric, diğer Javascript tuval kitaplıklarıyla karşılaştırıldığında nasıldır? İşte bir karşılaştırma tablosu .

Hiç kimsenin WebGL'den ve onun üzerine inşa edilen çerçevelerden bahsetmemesine şaşırdım . 3D GPU hızlandırmalı grafikler ve HTML canvas / javascript üzerindeki karmaşık animasyonlar için son teknoloji ürünü listede üst sıralarda yer alırdım.

WebGL, Belge Nesne Modeli arabirimleri olarak HTML5 Canvas öğesi aracılığıyla sergilenen, OpenGL ES 2.0 tabanlı düşük seviyeli bir 3D grafik API'si için çapraz platformlu, telifsiz bir web standardıdır. ...

WebGL, tarayıcıya doğrudan uygulanan eklentisiz 3B'yi web'e getirir. Başlıca tarayıcı satıcıları Apple (Safari), Google (Chrome), Mozilla (Firefox) ve Opera (Opera) WebGL Çalışma Grubu üyeleridir.

WebGL, GPU hızlandırmalı grafik desteğinde çok sağlamdır. Bu GLSL gölgelendirici demolarına göz atın . :-) Ve kullanıcı etkileşiminin bir örneği olarak ChemDoodle'a bakınız .

Sahne grafiğini yöneten ve oluşturma için WebGL'yi (eskiden kendi eklentisini kullanıyordu) kullanan Google'ın O3D çerçevesini kullanan bir uygulama üzerinde çalışıyorum . O3D, devam eden bir çalışmadır ve dokümantasyonu tamamen güncel değildir, ancak aktif geliştirme aşamasındadır ve orada bazı iyi demolar vardır . 3D Havuz en çok sokağınız olabilir. Google geliştiricileri, tartışma grubundaki sorulara çok duyarlıdır.

WebGL üzerine inşa edilmiş bir dizi başka çerçeve vardır; buraya bakın . Oyun geliştirme ve sahne grafiklerinden bahsedenler Copperlicht, SceneJS, X3DOM'u içerir.

WebGL, birkaç tarayıcının son geliştirme yapılarında çalışır , ancak IE'de çalışmaz. Firefox ("Minefield") ve Chromium'u iyi sonuçlarla kullanıyorum. Yukarıdaki demoları çalıştırmak için bunlardan birine ihtiyacınız olacak.

Bununla birlikte, gereksinimleriniz HTML 5 canvas / js dışında hiçbir bağımlılığı olmaması gerekiyorsa, WebGL doğru seçim olmayabilir. Görünüşe göre IE yakın zamanda bunu destekleyecek .

Güncelleme: Çok fazla direnç gösterdikten sonra MS , IE 11'de WebGL'yi desteklemeye karar verdi .

Three.js , yazan mr. Doob , skenograf (yazılım ve WebGL / donanım hem hızlandırılmış sürümleri), gölgeleme, parçacıklar, derili animasyon (Bence) ve aydınlatma efektleri içeren javascript için harika 3d motorudur. Şuna bakın, o süper yetenekli bir adam.

Demoların çoğunu görüntülemek için en yeni Google Chrome veya eşdeğerine ihtiyacınız olacağını eklemeliyim, favorilerimden biri: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS, yüksek performans için tuval üzerinde tek tek "katmanlar" oluşturmaya ve hareketlendirmeye sahip, gelecek vadeden bir kitaplıktır.

http://www.kineticjs.com/

CAKE.js artık korunmuyor ancak oldukça güçlü bir çerçeve - http://code.google.com/p/cakejs/

Demolar burada - http://glimr.rubyforge.org/cake/canvas.html , http://glimr.rubyforge.org/cake/missile_fleet.html

Processingjs çerçevesine bir göz atın . Ayrıca yaklaşan mootools sürüm 2.0, tuval ile çalışacak sanat projektine sahip

Raphael oldukça iyi bir tuval kütüphanesi gibi görünüyor; SVG tabanlıdır (veya Internet Explorer'da VML tabanlıdır) ve bu nedenle birçok kullanıcı girişi olayını destekler. Oldukça küçüktür (60kb gzip ile sıkıştırılmış), dolayısıyla çok büyük bir bağımlılık değildir.
Aynı zamanda hoş bir tweener'a sahip gibi görünüyor: http://raphaeljs.com/reference.html#animate ( örnekler için buraya ve buraya bakın).

Neler yapabileceğine dair bir örnek için, bu akıllı küçük gösteriye bir göz atın .

Bu yardımcı olur umarım!

Son derece rekabetçi ve kumaştan çok daha iyi iki kitaplık buldum.

Kinetic.js ve easel.js son derece iyi olay işleme, gruplama ve genel şekil soyutlamasına sahiptir. Bunların her ikisinde de seveceğiniz çok şey bulacaksınız; şövale daha fazla görüntü odaklı ve filtrelemeye sahip görünüyor.

Fabric'in etkinlik işleyicileri bunlardan ÇOK daha kötü - temelde tüm tuvali büyük bir etkinlik rapçisi olarak ele alıyor ve "Bir şey" e tıklandığında size haber veriyor. Olayları tek tek şekillere veya şekil gruplarına eklemez.

Bir yoktur ilginç kütüphane amaçları tuval API denilen çalışmanın temelleri bazı artırmak için canto.js David Flanagan, yazarı tarafından Kesin Kılavuzu: Javascript .

Ayrıca, genç ama fena olmayan Javascript çerçevesi ve bununla ilgili (karmaşık animasyon, sahne grafiklerini yönetme, olayları ve kullanıcı etkileşimlerini işleme) hepsi - jCanvaScript . 'Sahne grafiklerini yönetmek' dışında olabilir.

Grafikler ve hareketli site başlıkları üretmek için bHive ile çalışmak, diğerlerinin aksine geliştiriliyor gibi görünüyor, etkileyici ve güçlü görünüyor. Adobe Edge, Canvas olmasa da bir göz atmaya değer.

http://www.bhivecanvas.com

ve

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

Aves Engine gerçekten harika: http://www.dextrose.com/en/projects/aves-engine

Ayrıca Akihabara iyi görünüyor: http://www.kesiev.com/akihabara/

Javascript kullanmak istiyorsanız, Dojo gitmek için harika bir yoldur. Çok güçlü, kompakt, çapraz platform (SVG, VML, Canvas, Silverlight) vektör grafik API'sine sahiptir. Bunu dojo.gfx ve dojox.gfx'te bulabilirsiniz.

Bunu, öğrencilerin vektörler, elipsler, vb. Çizmelerine (hatta görüntüleri eklemelerine) ve üzerlerinde her türlü dönüşümü gerçekleştirmelerine olanak tanıyan etkileşimli bir fizik öğretmeni oluşturmak için kullandık. Ne yaptığımızı http://gideon.eas.asu.edu/web-UI/login.html adresinde görebilirsiniz. görebilirsiniz - sadece herhangi bir kullanıcı adıyla oturum açın.

Fabric.js'ye bir göz attım ve dojox.drawing aynı şeyi yapıyor. Araç setindeki testlere bakarsanız (dojox'u / çizimini / testleri / testini aldıktan sonra) vektör grafiklerinden görüntülere, programla oluşturulmuş gölgelere kadar her şeyin örneklerini bulacaksınız.

Oyun motoru olarak Akihabara'dan etkilendim. Öğreticiler ve bir API biçiminde harika belgelere sahiptir. Hatta bazı mesaj panolarında bir akihabara 2 sürümünden bahsettiğini bile gördüm. Ne yazık ki, tüm bu konuşmalar yaklaşık bir yıl veya daha eski. Umarım bu motor hala geliştirilmektedir.

AS3 / Flash geliştirme geçmişine sahip insanlara yönelik yeni bir çizim ve ara doldurma kitaplığının ilk yinelemesini yayınladım. Kitaplığım henüz karmaşık çizim yollarını veya grafikleri desteklemiyor olsa da, insanların basit ilkelleri tanıdık bir şekilde hızlıca çizmesine ve canlandırmasına yardımcı olacağını umuyorum.

Geri bildirim ve yorumlarınızı bekliyoruz. http://www.quietless.com/kitchen/introducing-js3/