Apakah ada alasan untuk menggunakan WebGL sebagai ganti Canvas 2D untuk game / aplikasi 2D?

Apakah ada alasan, kecuali kinerja, untuk menggunakan WebGL dan bukan 2D-Canvas untuk game / aplikasi 2D ?

Dengan kata lain, fungsi 2D apa yang ditawarkan oleh WebGL yang tidak mungkin dicapai dengan mudah dengan 2D-Canvas?

Melihat pertanyaan ini dari sisi lain:
bagaimana seorang pengembang memilih satu teknologi daripada yang lain?

• terintegrasi lebih baik dalam sistem yang sudah mereka bangun
• lebih mudah digunakan
• lebih cepat
• memiliki kemampuan lebih atau lebih sesuai dengan kebutuhan mereka
• biaya
• lebih banyak platfrom-independen

Jadi saya akan membahas perbedaan antara canvas dan webGL API terkait kualitas ini.

Baik kanvas dan webGL adalah API JavaScript. Mereka hampir sama tentang integrasi (mengikat). Keduanya didukung oleh sejumlah pustaka yang dapat mempercepat pengkodean Anda. Pustaka yang berbeda memberi Anda cara yang berbeda untuk mengatur kode Anda, jadi pilihan pustaka menentukan bagaimana API gambar Anda terstruktur, tetapi masih kurang lebih sama (bagaimana kode lainnya terikat bersama dengannya). Jika Anda menggunakan library, kemudahan penulisan kode bergantung pada library itu sendiri.

Jika Anda menulis kode dari nol, API kanvas jauh lebih mudah dipelajari dan dipahami. Ini membutuhkan pengetahuan matematika minimal, dan pengembangannya cepat dan mudah.

Bekerja dengan API WebGL membutuhkan keterampilan matematika yang kuat dan pemahaman penuh tentang pipeline rendering. Orang dengan keterampilan ini lebih sulit ditemukan, produksi lebih lambat (karena ukuran dan kompleksitas basis kode seperti itu), dan oleh karena itu biayanya lebih mahal.

WebGL lebih cepat dan memiliki lebih banyak kemampuan. Tidak diragukan lagi. Ini adalah API 3D asli yang memberi Anda akses penuh ke pipeline rendering, kode dan efek dijalankan lebih cepat dan lebih 'dapat diubah'. Dengan webGL sebenarnya tidak ada batasan.

Baik kanvas dan webGL adalah barang html5. Biasanya perangkat yang mendukung yang satu akan mendukung dan yang lainnya.

Jadi, untuk menyimpulkan:

• menggabungkan kode API gambar dan sisanya (integrasi): serupa
• kemudahan penggunaan:
  • (dengan perpustakaan) canvas = webGL
  • (dari awal) webGL << kanvas
• kecepatan: webGL> kanvas
• kemampuan: webGL> kanvas
• biaya: webGL jauh lebih mahal
• platform: sangat mirip

Semoga ini membantu.

PS Terbuka untuk diskusi.

Keuntungan terbesar adalah programabilitas pipa, dan kinerja. Misalnya, Anda menggambar 2 kotak satu di atas yang lain dan satu lagi tersembunyi, beberapa implementasi GL memiliki ruang lingkup untuk membuang kotak tersembunyi tersebut.

Sedangkan untuk perbandingan, Karena tidak ada cara cepat untuk membuat tabel di sini, saya baru saja mengunggah gambar tabel perbandingan di bawah ini. Menambahkan Three.js hanya untuk kelengkapan.

Berbicara dari pengalaman pada aplikasi saya sendiri , shader grafis telah menjadi satu-satunya alasan saya memerlukan dukungan untuk WebGL. Kemudahan penggunaan memiliki sedikit pengaruh bagi saya karena kedua kerangka kerja dapat disarikan dengan three.js. Dengan asumsi saya tidak membutuhkan shader, saya mengizinkan penggunaan salah satu kerangka kerja untuk memaksimalkan dukungan browser / mesin.

Kemampuan 2D apa yang ditawarkan WebGL sedangkan kanvas 2D tidak? IMHO terbesar adalah shader fragmen yang dapat diprogram pada perangkat keras grafis. Misalnya, di WebGL, seseorang dapat mengimplementasikan Game of Life Conway di shader pada perangkat keras 3D Anda:

http://glslsandbox.com/e#207.3

Jenis tampilan 2D ini hanya akan berjalan di CPU, bukan GPU, dengan kanvas 2D. Semua perhitungan akan diimplementasikan dalam JavaScript, dan tidak akan sejajar dengan GPU bahkan dengan bantuan web worker. Ini hanyalah salah satu contoh saja, semua jenis efek 2D yang menarik dapat diimplementasikan dengan shader.

Performa akan menjadi salah satu alasan terbesar karena saat Anda membuat kode game, itu harus cepat. Tetapi ada beberapa alasan lain yang Anda mungkin ingin memilih WebGL daripada kanvas. Ini menawarkan kemungkinan untuk mengkodekan shader, pencahayaan dan zoom, yang penting jika Anda membuat aplikasi game komersial. Kanvas juga menjadi lamban setelah 50 sprite atau lebih.

Tidak ada yang dapat Anda lakukan dengan Canvas yang tidak dapat Anda lakukan dengan webGL: kanvas memungkinkan untuk menghancurkan byte dengan get / putImageData, dan Anda dapat menggambar garis, lingkaran, ... secara terprogram dengan webGL.
Tetapi jika Anda ingin membuat beberapa gambar, dan juga beberapa efek pada 60 fps, celah kinerja sangat tinggi sehingga tidak mungkin dilakukan dengan kanvas, ketika akan berjalan dengan baik di webGL. Performa adalah fitur root.

Namun webGL cukup rumit untuk diprogram: lihat apakah kanvas cukup baik untuk Anda atau cari perpustakaan yang akan meringankan rasa sakit ...
Kelemahan lainnya: tidak berfungsi di IE (tapi apa fungsinya?), Dan di beberapa ponsel.
Lihat di sini untuk kompatibilitas: http://caniuse.com/webgl

Karena Anda secara khusus menginginkan beberapa hal 2d klasik yang tidak berfungsi dengan baik dengan kanvas:

• transformasi warna (seperti mengedipkan sprite)
• pengisian bitmap berulang
• ubin peta di bawah rotasi (di bawah kanvas beberapa implementasi akan membuat jahitan)
• lapisan dalam (sangat bergantung pada implementasi)
• pencampuran perkalian atau aditif

... tetapi tentu saja Anda memiliki akses piksel, sehingga Anda dapat melakukan apa saja, termasuk di atas, secara manual. Tapi itu bisa sangat, sangat lambat. Anda dapat meng-emscripten Mesa openGl untuk dirender ke kanvas dalam teori.

Alasan besar lainnya untuk menggunakan webGL adalah karena hasilnya sangat mudah untuk ditransfer ke tempat lain. Yang juga membuat keterampilan lebih berharga.

Alasan untuk menggunakan kanvas adalah karena itu masih didukung dengan lebih baik dan jika Anda belajar melakukan sesuatu piksel demi piksel itu juga merupakan pelajaran yang sangat berharga.

Karena WebGL adalah teknologi yang sangat baru dan kanvas HTML5 lebih mapan, apa yang ingin Anda gunakan bergantung pada pengguna Anda. Jika Anda berpikir bahwa pengguna Anda akan menggunakan perangkat seluler maka saya akan menyarankan kanvas HTML5 tetapi jika Anda ingin rendering 2D yang lebih baik, saya akan menggunakan WebGL. Jadi apa yang bisa Anda lakukan adalah jika digunakan pada render seluler dengan HTML5 jika mereka menggunakan platform yang mendukung WebGL.

Sebagai contoh:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

Sumber:
Cara yang tepat untuk mendeteksi dukungan WebGL?
Apa cara terbaik untuk mendeteksi perangkat seluler di jQuery?

WebGL tidak dapat digunakan tanpa GPU.
Ketergantungan perangkat keras ini bukanlah masalah besar karena sebagian besar sistem memiliki GPU, tetapi jika arsitektur GPU atau CPU pernah berkembang, mempertahankan konten webgl dengan emulasi mungkin menjadi tantangan. Menjalankannya di komputer lama (tervirtualisasi) bermasalah.

Tetapi "Canvas vs WebGL" tidak harus berupa pilihan biner. Saya sebenarnya lebih suka menggunakan webgl untuk efek, tetapi melakukan sisanya di kanvas. Saat saya menjalankannya di VM, ia masih berfungsi dengan baik dan cepat, hanya tanpa efek.