2D oyunlar / uygulamalar için 2D Canvas yerine WebGL kullanmanın herhangi bir nedeni var mı?

2D oyunlar / uygulamalar için 2D -Canvas yerine WebGL kullanmak için performans dışında herhangi bir neden var mı ?

Başka bir deyişle, WebGL tarafından 2D-Canvas ile kolayca elde edilmesi mümkün olmayan hangi 2D işlevler sunulmaktadır?

Bu soruya başka bir açıdan bakıldığında:
Bir geliştirici, bir teknolojiyi diğerine göre nasıl seçer?

• zaten inşa edilmiş sistemlerine daha iyi entegre olur
• kullanımı daha kolay
• daha hızlı
• daha fazla yeteneğe sahip veya ihtiyaçlarına daha iyi uyuyor
• maliyet
• daha bağımsız

Bu nedenle, bu niteliklerle ilgili olarak canvas ve webGL API'leri arasındaki farkları tartışacağım.

Hem canvas hem de webGL JavaScript API'leridir. Entegrasyon (bağlayıcı) konusunda hemen hemen aynıdırlar. Her ikisi de kodlamanızı hızlandırabilecek bir dizi kitaplık tarafından desteklenir. Farklı kitaplıklar size kodunuzu düzenlemeniz için farklı yollar sunar, bu nedenle kitaplık seçimi çizim API'lerinizin nasıl yapılandırıldığını belirler, ancak yine de hemen hemen aynı şeydir (kodun geri kalanı onunla nasıl bağlandığı). Kitaplık kullanıyorsanız, kod yazma kolaylığı kitaplığın kendisine bağlıdır.

Sıfırdan kod yazarsanız, canvas API'sini öğrenmek ve anlamak çok daha kolaydır. Minimum matematik bilgisi gerektirir ve geliştirme hızlı ve kolaydır.

WebGL API ile çalışmak, güçlü matematik becerileri ve işleme hattının tam olarak anlaşılmasını gerektirir. Bu becerilere sahip kişileri bulmak daha zordur, üretim daha yavaştır (böyle bir kod tabanının boyutu ve karmaşıklığı nedeniyle) ve bu nedenle maliyeti daha yüksektir.

WebGL daha hızlıdır ve daha fazla özelliğe sahiptir. Şüphesiz. Bu, işleme hattına tam erişim sağlayan, kod ve efektler daha hızlı çalıştırılan ve daha 'ayarlanabilir' olan yerel bir 3B API'dir. WebGL ile gerçekten sınır yoktur.

Hem canvas hem de webGL html5 güzellikleridir. Genellikle birini destekleyen cihazlar diğerini destekler.

Yani özetlemek gerekirse:

• çizim API kodunu ve geri kalanını birleştirme (entegrasyon): benzer
• kullanım kolaylığı:
  • (kitaplık ile) canvas = webGL
  • (sıfırdan) webGL << canvas
• hız: webGL> canvas
• yetenekler: webGL> canvas
• maliyet: webGL çok daha pahalıdır
• platform: çok benzer

Bu yardımcı olur umarım.

PS Tartışmaya açık.

En büyük avantaj, ardışık düzenin programlanabilirliği ve performanstır. Örneğin, üst üste 2 kutu çizdiğinizi ve birinin gizli olduğunu varsayalım, bazı GL uygulamalarının gizli kutuyu atmak için kapsamı vardır.

Karşılaştırmalara gelince, Burada bir tablo oluşturmanın hızlı bir yolu olmadığından, aşağıdaki karşılaştırma tablosunun bir resmini yükledim. Yalnızca tamlık için Three.js eklendi.

Kendi uygulamalarımdaki deneyimlerimden bahsetmişken, WebGL için destek istememin tek ve tek nedeni grafik gölgelendiricileriydi. Her iki çerçeve de three.js ile soyutlanabildiğinden, kullanım kolaylığı benim için çok az etkiye sahiptir. Gölgelendiricilere ihtiyacım olmadığını varsayarak, tarayıcı / makine desteğini en üst düzeye çıkarmak için her iki çerçevenin kullanılmasına izin veriyorum.

WebGL, 2D tuvalin sunmadığı hangi 2D özelliği sunar? En büyüğü IMHO, grafik donanımındaki programlanabilir parça gölgelendiricileridir. Örneğin, WebGL'de, Conway'in Hayat Oyunu 3D donanımınız üzerinde bir gölgelendiricide uygulanabilir:

http://glslsandbox.com/e#207.3

Bu tür bir 2D ekran, 2D bir tuvalle GPU'da değil yalnızca CPU'da çalışır. Tüm hesaplamalar JavaScript'te uygulanacak ve web çalışanlarının yardımıyla bile GPU kadar paralel olmayacaktır. Bu elbette sadece bir örnektir, her türlü ilginç 2D efekt gölgelendiricilerle uygulanabilir.

Eh, performans en büyük nedenlerden biri olabilir çünkü bir oyunu kodlarken hızlı olması gerekir. Ancak, tuval yerine WebGL'yi seçmek isteyebileceğiniz birkaç başka neden daha var. Ticari bir oyun uygulaması yapıyorsanız önemli olan gölgelendiricileri kodlama, aydınlatma ve yakınlaştırma imkanı sunar. Ayrıca tuval 50 sprite sonra gecikiyor.

Canvas ile webGL ile yapamayacağınız hiçbir şey yoktur: tuval get / putImageData ile baytları ezmeye izin verir ve webGL ile programlı olarak çizgiler, daireler vb. Çizebilirsiniz.
Ancak epeyce çizimler ve ayrıca 60 fps'de bazı efektler yapmak istiyorsanız, performans açığı o kadar yüksektir ki, webGL'de düzgün çalışacağı zaman tuval ile mümkün olmayacaktır. Performans bir kök özelliktir.

Yine de webGL'nin programlanması oldukça karmaşıktır: tuvalin sizin için yeterince iyi olup olmadığına bakın veya acıyı hafifletecek bir kitaplık arayın ...
Diğer dezavantaj: IE'de ve bazı cep telefonlarında çalışmıyor (ama ne işe yarıyor?).
Uyumluluk için buraya bakın: http://caniuse.com/webgl

Özellikle tuval ile iyi çalışmayan bazı klasik 2D şeyler istediğiniz için:

• renk dönüşümleri (bir sprite'ın yanıp sönmesi gibi)
• yinelenen bitmap dolguları
• Haritaları rotasyon altında döşeme (tuval altında bazı uygulamalar dikişler oluşturacaktır)
• derin katmanlama (uygulamaya çok bağlıdır)
• çarpımsal veya eklemeli karıştırma

... ancak elbette piksel erişiminiz var, bu nedenle yukarıdakiler dahil her şeyi manuel olarak yapabilirsiniz. Ama bu gerçekten çok yavaş olabilir. Teoride tuvale dönüştürmek için Mesa openGl'yi emredebilirsiniz.

WebGL'yi kullanmanın bir başka büyük nedeni de sonucun başka herhangi bir yere taşınmasının çok kolay olmasıdır. Bu da beceriyi daha değerli kılar.

Tuvali kullanmanın nedenleri, hala daha iyi desteklenmesidir ve bir şeyleri piksel piksel yapmayı öğrenirseniz, bu da çok değerli bir derstir.

WebGL özellikle yeni bir teknoloji olduğundan ve HTML5 tuvali daha yerleşik olduğundan, kullanmak istediğiniz şey kullanıcılarınıza bağlıdır. Kullanıcılarınızın mobil cihazlar kullanacağını düşünüyorsanız, HTML5 canvas öneririm ancak daha iyi 2D render istiyorsanız WebGL kullanırım. Yani, kullanım HTML5 ile mobil render üzerindeyse, WebGL'yi destekleyen bir platformdaysa, yapabilecekleriniz.

Örneğin:

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

Kaynaklar:
WebGL desteğini tespit etmenin doğru yolu?
JQuery'de bir mobil cihazı algılamanın en iyi yolu nedir?

WebGL, GPU olmadan kullanılamaz.
Bu donanım bağımlılığı büyük bir sorun değil çünkü çoğu sistemde GPU'lar var, ancak GPU veya CPU mimarileri gelişirse, webgl içeriğini emülasyon yoluyla korumak zor olabilir. Eski (sanallaştırılmış) bilgisayarlarda çalıştırmak sorunludur.

Ancak "Canvas vs WebGL" ikili bir seçim olmak zorunda değildir. Aslında efektler için webgl kullanmayı tercih ediyorum ama gerisini tuvalde yapıyorum. Bir sanal makinede çalıştırdığımda, efektler olmadan hala güzel ve hızlı çalışıyor.