Apa keadaan seni saat ini di pustaka dan kerangka kerja JavaScript kanvas HTML? [Tutup]

Saat ini saya sedang menyelidiki opsi untuk bekerja dengan kanvas di aplikasi HTML 5 baru, dan bertanya-tanya apa yang terkini dalam perpustakaan dan kerangka kerja JavaScript kanvas HTML?

Secara khusus, apakah ada kerangka kerja yang mendukung hal-hal yang diperlukan untuk pengembangan game - animasi kompleks, mengelola grafik adegan, menangani peristiwa, dan interaksi pengguna?

Juga bersedia mempertimbangkan produk komersial dan open source.

Saya telah mengerjakan fabric.js - perpustakaan kanvas untuk membantu dengan hal itu - memanipulasi objek di kanvas, dengan menangani peristiwa dan interaksi pengguna. Ini belum dirilis, tapi lihat demo pratinjau sederhana .

Anda juga dapat melihatnya beraksi di editor desain ini , yang awalnya dibuat untuknya.

Sunting: Proyek ini sekarang tersedia di github (bersumber terbuka di bawah Lisensi MIT)

Untuk memulai, lihat:

• Demo (sederhana & kompleks, dengan kode untuk menunjukkan bagaimana penyelesaiannya)
• Presentasi Fabric.js di FalsyValues (dan satu lagi di BK.js )
• Wiki di github (termasuk FAQ )
• Dokumentasi
• Google Grup (tanyakan pertanyaan apa pun di sana)
• Fabric.js di twitter (atau pertanyaan singkat melalui twitter)
• Pengantar Fabric.js: Bagian 1 (artikel di ScriptJunkie)
• Pengantar Fabric.js: Bagian 2 (artikel di ScriptJunkie)

Bagaimana Fabric dibandingkan dengan pustaka kanvas Javascript lainnya? Berikut tabel perbandingannya .

Saya terkejut tidak ada yang menyebutkan WebGL , dan kerangka kerja dibangun di atasnya. Saya akan menganggapnya sebagai yang teratas dalam daftar state-of-the-art untuk grafik akselerasi GPU 3D dan animasi kompleks pada kanvas / javascript HTML.

WebGL adalah standar web lintas platform dan bebas royalti untuk API grafik 3D tingkat rendah berdasarkan OpenGL ES 2.0, yang diekspos melalui elemen Canvas HTML5 sebagai antarmuka Model Objek Dokumen. ...

WebGL menghadirkan 3D bebas plugin ke web, diterapkan langsung ke browser. Vendor peramban utama Apple (Safari), Google (Chrome), Mozilla (Firefox), dan Opera (Opera) adalah anggota Kelompok Kerja WebGL.

WebGL sangat solid dalam mendukung grafik berakselerasi GPU. Lihat demo shader GLSL ini . :-) Dan lihat ChemDoodle sebagai contoh interaksi pengguna.

Saya telah mengerjakan aplikasi menggunakan kerangka kerja O3D Google , yang mengelola grafik adegan, dan menggunakan WebGL untuk rendering (dulu menggunakan pluginnya sendiri). O3D sedang dalam proses, dan dokumentasinya belum sepenuhnya mutakhir, tetapi sedang dalam pengembangan aktif, dan ada beberapa demo bagus di luar sana . Pool 3D mungkin paling cocok untuk Anda. Pengembang Google sangat responsif terhadap pertanyaan di grup diskusi.

Ada sejumlah kerangka kerja lain yang dibangun di atas WebGL; lihat disini . Yang menyebutkan pengembangan game dan grafik adegan termasuk Copperlicht, SceneJS, X3DOM.

WebGL berjalan dalam versi pengembangan terkini dari beberapa browser , tetapi tidak di IE. Saya telah menggunakan Firefox ("Minefield") dan Chromium dengan hasil yang bagus. Anda akan membutuhkan salah satunya untuk menjalankan demo di atas.

Namun jika persyaratan Anda adalah tidak boleh memiliki dependensi di luar HTML 5 canvas / js, WebGL mungkin bukan pilihan yang tepat. Sepertinya IE tidak akan mendukungnya dalam waktu dekat.

Pembaruan: setelah melakukan banyak perlawanan, MS memutuskan untuk mendukung WebGL di IE 11 .

three.js , oleh mr. doob , adalah mesin 3d yang luar biasa untuk javascript yang mencakup skenario (versi akselerasi perangkat lunak dan WebGL / perangkat keras), bayangan, partikel, animasi berkulit (menurut saya), dan efek pencahayaan. Coba lihat, dia adalah orang yang sangat berbakat.

Saya harus menambahkan bahwa Anda akan memerlukan Google Chrome terbaru atau yang setara untuk melihat sebagian besar demo, salah satu favorit saya adalah: http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html

KineticJS adalah perpustakaan yang sedang naik daun yang menawarkan pembuatan dan animasi "lapisan" individu di atas kanvas untuk kinerja tinggi.

http://www.kineticjs.com/

CAKE.js tidak lagi dipertahankan tetapi merupakan kerangka kerja yang cukup kuat - http://code.google.com/p/cakejs/

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

Lihatlah kerangka processingjs . Juga mootools versi 2.0 yang akan datang memiliki proyek seni untuk bekerja dengan kanvas

Raphael tampaknya perpustakaan kanvas yang cukup bagus; itu berbasis SVG (atau berbasis VML di Internet Explorer), dan dengan demikian mendukung banyak peristiwa input pengguna. Ini cukup kecil (60kb gzip), jadi tidak terlalu besar ketergantungan.
Tampaknya ini juga memiliki tweener yang bagus: http://raphaeljs.com/reference.html#animate (lihat di sini dan di sini untuk contoh).

Untuk contoh apa yang dapat dilakukannya, lihat demo kecil yang cerdas ini .

Semoga ini membantu!

Saya telah menemukan dua perpustakaan menjadi sangat kompetitif dan jauh lebih baik daripada kain.

Kinetic.js dan easel.js keduanya memiliki penanganan acara, pengelompokan, dan abstraksi bentuk umum yang sangat baik. Anda akan menemukan banyak hal untuk dicintai dalam keduanya; kuda-kuda tampaknya lebih berorientasi pada gambar dan penyaringan.

Event handlins Fabric JAUH lebih buruk daripada salah satu dari ini - pada dasarnya ia memperlakukan seluruh kanvas sebagai satu event rrapper besar dan memberi tahu Anda ketika "Sesuatu" telah diklik. Itu tidak melampirkan acara ke bentuk individu atau kelompok bentuk.

Ada perpustakaan menarik yang bertujuan untuk meningkatkan beberapa dasar kerja dengan API kanvas yang disebut canto.js oleh David Flanagan, penulis Javascript: The Definitive Guide .

Juga, kerangka Javascript muda, tapi tidak buruk, dan itu (animasi kompleks, mengelola grafik adegan, menangani peristiwa dan interaksi pengguna) semuanya tentang itu - jCanvaScript . Mungkin, kecuali 'mengelola grafik adegan'.

Bekerja dengan bHive untuk menghasilkan grafik dan memindahkan header situs, tampak mengesankan dan kuat, tidak seperti yang lain tampaknya sedang dikembangkan. Adobe Edge juga patut dilihat meskipun bukan Canvas.

http://www.bhivecanvas.com

dan

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

Aves Engine benar-benar hebat: http://www.dextrose.com/en/projects/aves-engine

Juga, Akihabara tampaknya bagus: http://www.kesiev.com/akihabara/

Jika Anda ingin menggunakan Javascript, Dojo adalah cara yang tepat. Ini memiliki API grafik vektor lintas platform (SVG, VML, Canvas, Silverlight) yang kompak dan sangat kuat. Anda dapat menemukannya di dojo.gfx dan dojox.gfx.

Kami telah menggunakan ini untuk membangun tutor fisika interaktif yang memungkinkan siswa menggambar vektor, elipsis, dll (bahkan menambahkan gambar) dan melakukan segala macam transformasi padanya. Anda dapat melihat apa yang telah kami lakukan di http://gideon.eas.asu.edu/web-UI/login.html - cukup masuk dengan nama pengguna apa pun.

Saya telah melihat fabric.js dan dojox.drawing melakukan banyak hal yang sama. Jika Anda melihat tes di toolkit (setelah Anda mendapatkannya dojox / drawing / tests /) Anda menemukan contoh dari segala hal mulai dari grafik vektor hingga gambar hingga bayangan yang dibuat secara terprogram.

Saya terkesan dengan Akihabara sebagai mesin game. Ini memiliki dokumentasi yang fantastis dalam bentuk tutorial dan api. Saya bahkan pernah melihat di beberapa papan pesan berbicara tentang rilis akihabara 2. Sayangnya, semua pembicaraan itu berumur sekitar satu tahun atau lebih. Saya sangat berharap mesin ini terus dikembangkan.

Saya baru saja merilis iterasi pertama dari pustaka gambar & tweening baru yang ditujukan untuk orang-orang dengan latar belakang pengembangan AS3 / Flash. Sementara lib saya belum mendukung jalur gambar atau grafik yang kompleks, saya berharap ini akan membantu orang dengan cepat menggambar & menganimasikan primitif dasar dengan cara yang akrab.

Umpan balik dan komentar diterima. http://www.quietless.com/kitchen/introducing-js3/