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

114

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?

html html5-canvas webgl

— Ali Shakiba
sumber

5

Ngomong-ngomong: Meskipun Anda tidak dapat menggunakan API konteks 2d dan 3d pada kanvas yang sama, Anda masih dapat menggabungkannya dengan menggunakan beberapa kanvas. WebGL dapat menggunakan kanvas 2d sebagai tekstur dan kanvas 2d dapat menggunakan kanvas WebGL sebagai sumber untuk drawImage.

— Philipp

85

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.

— Algoritma Abstrak
sumber

@Abstrak, Dimana tutorial bagus untuk web GL dan berapa jam yang dibutuhkan?

— Pacerier

1

@Pacerier cukup google saja, beberapa hits pertama mungkin cukup bagus. Namun, akan membutuhkan waktu berminggu-minggu dan berbulan-bulan untuk menguasai webgl dan pemrograman grafis secara umum, dan bertahun-tahun untuk menjadi sangat baik. Bukan hanya beberapa "perpustakaan" acak yang Anda butuhkan untuk mempelajari API dan hanya itu.

— Algoritma Abstrak

@AbstractAlgorithm, maksud saya jika Anda adalah master dengan kanvas pemrograman, berapa jam yang dibutuhkan untuk beralih ke web GL?

— Pacerier

@Pacerier yang bergantung pada dev dan sebagaimana Abstrak sudah mengatakan keterampilan matematika dari dev yang terlibat. Sebenarnya tidak ada penghitungan yang bisa dibuat.

— scrappedcola

32

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.

Meja

— Prabindh
sumber

Re "beberapa implementasi GL memiliki ruang lingkup untuk membuang kotak tersembunyi" tetapi tidak bisakah Anda mendeteksi bagian yang diganti itu di JS dan dengan demikian tidak menggambar ulang apa yang tidak diperlukan?

— Pacerier

16

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.

— 16807
sumber

16

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.

— emackey
sumber

2

Jadi vs kanvas, apakah WebGL lebih atau kurang membebani OS?

— Pacerier

Saya ingin tahu apakah semua kanvas akhirnya menjadi webgl; jika menggunakan webgl kasus penggunaan umum yang telah dikompilasi sebelumnya, yang akan lebih efisien daripada webgl langsung; atau jika tidak berinteraksi dengan opengl dengan cara apa pun kecuali Anda menggunakan webgl.

— Dmitry

1

@Dmitry pertanyaan bagus, dan browser yang berbeda bebas untuk mengambil pendekatan berbeda untuk masalah itu. Namun, tidak peduli bagaimana mereka mempercepat Canvas 2D API, Canvas 2D API itu sendiri tidak menawarkan shader yang dapat diprogram atau buffer array vertex. Ini adalah API "cerewet" (satu panggilan JavaScript-ke-Native per elemen yang ditarik), sedangkan API WebGL memungkinkan pemuatan data massal dan pemrosesan kustom berbasis GPU.

— emackey

14

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.

— Xk0nSid
sumber

Terutama pada perangkat seperti tablet android di mana CPU menjadi kelebihan beban dengan cepat dalam javascript, alasan utama untuk menggunakan WebGL adalah untuk mentransfer beban rendering ke GPU.

— Curtis

1

@ Xk0n, Kembali "memberikan kemungkinan untuk mengkodekan shader, lighting dan zooming", Tapi bukankah itu menjadi tergantung pada GPU?

— Pacerier

Anda masih dapat memperbesar dengan setTransform dalam konteks kanvas 2D. Saya mengalami kesulitan dengan tekstur yang berdarah dalam kanvas 2D saat melakukan penskalaan dari sprite sheets, bagaimanapun, itulah sebabnya saya beralih ke WebGL. Saya melihat tutorial yang menghentikan pengambilan sampel tetangga terdekat agar tidak keluar dari sumber rect, yang seharusnya memperbaiki masalah tepi berdarah saya.

— Frank

7

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

— GameAlchemist
sumber

7

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.

— starmole
sumber

Btw Apakah WebGL multithread? Dapatkah Anda memiliki dua utas yang menggambar dua bagian layar secara bersamaan?

— Pacerier

Saya pikir jawabannya adalah "ya dan tidak," karena browser web pada dasarnya adalah single-threaded, jadi menyalin data untuk dirender ke GPU tidak multi-threaded. Namun, Anda menggunakan paralelisasi besar-besaran pada kartu grafis setelah shader mulai merender, yang pada dasarnya menggambar ke beberapa bagian layar sekaligus. Harap perbaiki saya jika saya salah, siapa pun.

— Kent Weigel

2

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?

— MayorMonty
sumber

2

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.

— pengguna185953
sumber