C'è qualche motivo per utilizzare WebGL invece di 2D Canvas per giochi / app 2D?

C'è qualche motivo, oltre alle prestazioni, per utilizzare WebGL invece di 2D-Canvas per giochi / app 2D ?

In altre parole, quali funzionalità 2D sono offerte da WebGL che non è possibile ottenere facilmente con 2D-Canvas?

Guardando questa domanda da un altro lato:
come fa uno sviluppatore a scegliere una tecnologia rispetto a un'altra?

• si integra meglio nel loro sistema già costruito
• è più facile da usare
• è più veloce
• ha più capacità o meglio si adatta alle loro esigenze
• costo
• più indipendente dalla piattaforma

Quindi discuterò le differenze tra le API canvas e webGL riguardo a queste qualità.

Sia canvas che webGL sono API JavaScript. Sono più o meno gli stessi per quanto riguarda l'integrazione (associazione). Sono entrambi supportati da una serie di librerie che potrebbero velocizzare la codifica. Librerie diverse offrono modi diversi per organizzare il codice, quindi la scelta della libreria determina come sono strutturate le API di disegno, ma è ancora più o meno la stessa cosa (come il resto del codice si lega ad esso). Se usi la libreria, la facilità di scrittura del codice dipende dalla libreria stessa.

Se scrivi codice da zero, l'API canvas è molto più facile da imparare e capire. Richiede una conoscenza matematica minima e lo sviluppo è veloce e diretto.

Lavorare con l'API WebGL richiede solide competenze matematiche e una piena comprensione della pipeline di rendering. Le persone con queste competenze sono più difficili da trovare, la produzione è più lenta (a causa delle dimensioni e della complessità di tale base di codice) e quindi costa di più.

WebGL è più veloce e ha più capacità. Nessun dubbio a riguardo. È un'API 3D nativa che ti dà pieno accesso alla pipeline di rendering, il codice e gli effetti vengono eseguiti più velocemente e sono più "modificabili". Con webGL non ci sono limiti.

Sia canvas che webGL sono chicche html5. Di solito i dispositivi che supportano uno supporteranno l'altro.

Quindi, per riassumere:

• fusione del codice API del disegno e il resto (integrazione): simile
• facilità d'uso:
  • (con libreria) canvas = webGL
  • (da zero) webGL << canvas
• velocità: webGL> canvas
• capacità: webGL> canvas
• costo: webGL è molto più costoso
• piattaforma: molto simile

Spero che questo ti aiuti.

PS Aperto alla discussione.

Il vantaggio più grande è la programmabilità della pipeline e le prestazioni. Ad esempio, supponiamo che tu stia disegnando 2 scatole una sopra l'altra e una è nascosta, alcune implementazioni GL hanno la possibilità di scartare la scatola nascosta.

Per quanto riguarda i confronti, poiché non esiste un modo rapido per creare una tabella qui, ho appena caricato un'immagine della tabella di confronto qui sotto. Aggiunto Three.js solo per completezza.

Parlando per esperienza sulle mie applicazioni , gli shader grafici sono stati l'unico motivo per cui ho richiesto il supporto per WebGL. La facilità d'uso ha poca importanza per me poiché entrambi i framework possono essere astratti con three.js. Supponendo che non abbia bisogno di shader, consento l'uso di entrambi i framework per massimizzare il supporto del browser / macchina.

Quali funzionalità 2D offre WebGL rispetto a quelle 2D non disponibili? Il più grande IMHO sono gli shader di frammenti programmabili sull'hardware grafico. Ad esempio, in WebGL, è possibile implementare Game of Life di Conway in uno shader sul proprio hardware 3D:

http://glslsandbox.com/e#207.3

Questo tipo di visualizzazione 2D funzionerebbe solo sulla CPU, non sulla GPU, con una tela 2D. Tutti i calcoli sarebbero implementati in JavaScript e non sarebbero paralleli come la GPU anche con l'aiuto dei web worker. Questo è solo un esempio, ovviamente, tutti i tipi di effetti 2D interessanti possono essere implementati con gli shader.

Bene, le prestazioni sarebbero uno dei motivi principali perché quando si codifica un gioco, deve essere veloce. Ma ci sono un paio di altri motivi per cui potresti voler scegliere WebGL su tela. Offre la possibilità di codificare shader, illuminazione e zoom, il che è importante se stai facendo un'app di gioco commerciale. Anche la tela diventa lenta dopo 50 sprite o giù di lì.

Non c'è niente che puoi fare con Canvas che non puoi fare con webGL: il canvas permette di schiacciare i byte con get / putImageData, e potresti disegnare linee, cerchi, ... a livello di programmazione con webGL.
Ma se stai cercando di fare alcuni disegni e anche alcuni effetti a 60 fps, il divario di prestazioni è così alto che non sarà possibile con canvas, quando funzionerà bene in webGL. Le prestazioni sono una caratteristica fondamentale.

Eppure webGL è abbastanza complicato da programmare: vedi se canvas è abbastanza buono per te o cerca una libreria che allevi il dolore ...
Altro svantaggio: non funziona su IE (ma cosa fa?) E su alcuni cellulari.
Vedere qui per la compatibilità: http://caniuse.com/webgl

Dato che vuoi specificamente alcune cose classiche 2d che non funzionano bene con la tela:

• il colore si trasforma (come lampeggiare uno sprite)
• ripetizione di riempimenti bitmap
• mappe di piastrellatura in rotazione (sotto la tela alcune implementazioni creeranno cuciture)
• stratificazione profonda (molto dipendente dall'implementazione)
• miscelazione moltiplicativa o additiva

... ma ovviamente hai accesso ai pixel, quindi puoi fare davvero qualsiasi cosa, incluso quanto sopra, manualmente. Ma può essere davvero molto lento. Potresti emscripten Mesa openGl per renderizzare su tela in teoria.

Un altro grande motivo per utilizzare webGL sarebbe che il risultato è molto facile da portare in qualsiasi altro luogo. Il che rende anche l'abilità più preziosa.

Le ragioni per usare la tela sono che è ancora meglio supportata e se impari a fare le cose pixel per pixel, questa è anche una lezione molto preziosa.

Poiché WebGL è una tecnologia particolarmente nuova e la tela HTML5 è più consolidata, ciò che desideri utilizzare dipende dai tuoi utenti. Se pensi che i tuoi utenti utilizzeranno dispositivi mobili, suggerirei HTML5 canvas, ma se desideri un rendering 2D migliore, utilizzerei WebGL. Quindi quello che potresti fare è se l'uso è sul rendering mobile con HTML5 altrimenti se sono su una piattaforma che supporta WebGL.

Per esempio:

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

Fonti:
modo corretto per rilevare il supporto WebGL?
Qual è il modo migliore per rilevare un dispositivo mobile in jQuery?

WebGL è inutilizzabile senza una GPU.
Questa dipendenza dall'hardware non è un grosso problema perché la maggior parte dei sistemi ha GPU, ma se le architetture GPU o CPU si evolvono, preservare il contenuto webgl tramite l'emulazione potrebbe essere difficile. L'esecuzione su vecchi computer (virtualizzati) è problematico.

Ma "Canvas vs WebGL" non deve essere una scelta binaria. In realtà preferisco usare webgl per gli effetti, ma fare il resto in canvas. Quando lo eseguo in una VM, funziona ancora bene e velocemente, solo senza gli effetti.