Y a-t-il une raison d'utiliser WebGL au lieu de 2D Canvas pour les jeux / applications 2D?

Existe-t-il une raison, à l'exception des performances, d'utiliser WebGL au lieu de 2D-Canvas pour les jeux / applications 2D ?

En d'autres termes, quelles sont les fonctionnalités 2D offertes par WebGL qu'il n'est pas possible de réaliser facilement avec 2D-Canvas?

En regardant cette question d'un autre côté:
comment un développeur choisit-il une technologie plutôt qu'une autre?

• s'intègre mieux dans leur système déjà construit
• est plus facile à utiliser
• est plus rapide
• a plus de capacités ou répond mieux à ses besoins
• Coût
• plus de platfrom-indépendant

Je vais donc discuter des différences entre les API canvas et webGL concernant ces qualités.

Canvas et webGL sont des API JavaScript. Ils sont à peu près les mêmes en ce qui concerne l'intégration (liaison). Ils sont tous deux pris en charge par un certain nombre de bibliothèques qui pourraient accélérer votre codage. Différentes bibliothèques vous donnent différentes façons d'organiser votre code, donc le choix de la bibliothèque dicte la façon dont vos API de dessin sont structurées, mais c'est toujours à peu près la même chose (comment le reste du code se lie avec lui). Si vous utilisez une bibliothèque, la facilité d'écriture du code dépend de la bibliothèque elle-même.

Si vous écrivez du code à partir de zéro, l'API canvas est beaucoup plus facile à apprendre et à comprendre. Il nécessite des connaissances mathématiques minimales et le développement est rapide et simple.

Travailler avec l'API WebGL nécessite de solides compétences en mathématiques et une compréhension complète du pipeline de rendu. Les personnes possédant ces compétences sont plus difficiles à trouver, la production est plus lente (en raison de la taille et de la complexité d'une telle base de code), et donc elle coûte plus cher.

WebGL est plus rapide et offre plus de fonctionnalités. Aucun doute à ce sujet. C'est une API 3D native qui vous donne un accès complet au pipeline de rendu, le code et les effets sont exécutés plus rapidement et sont plus `` modifiables ''. Avec webGL, il n'y a vraiment aucune limite.

Canvas et webGL sont tous deux des goodies html5. Habituellement, les appareils qui prennent en charge l'un prendront en charge l'autre.

Pour résumer:

• fusion du code API de dessin et du reste (intégration): similaire
• facilité d'utilisation:
  • (avec bibliothèque) canvas = webGL
  • (à partir de zéro) webGL << canevas
• vitesse: webGL> canevas
• fonctionnalités: webGL> canevas
• coût: webGL est beaucoup plus cher
• plateforme: très similaire

J'espère que cela t'aides.

PS Ouvert à la discussion.

Le plus grand avantage est la programmabilité du pipeline et les performances. Par exemple, disons que vous dessinez 2 boîtes l'une au-dessus de l'autre et l'une est masquée, certaines implémentations GL ont la possibilité de supprimer la boîte masquée.

En ce qui concerne les comparaisons, comme il n'y a pas de moyen rapide de créer un tableau ici, je viens de télécharger une image du tableau de comparaison ci-dessous. Ajout de Three.js par souci d'exhaustivité uniquement.

Parlant d'expérience sur mes propres applications , les shaders graphiques ont été la seule et unique raison pour laquelle j'ai besoin de la prise en charge de WebGL. La facilité d'utilisation a peu d'importance pour moi puisque les deux frameworks peuvent être abstraits avec three.js. En supposant que je n'ai pas besoin de shaders, j'autorise l'utilisation de l'un ou l'autre framework pour maximiser la prise en charge du navigateur / machine.

Quelle capacité 2D WebGL offre-t-il que le canevas 2D n'offre pas? Le plus grand IMHO est les shaders de fragments programmables sur le matériel graphique. Par exemple, dans WebGL, on peut implémenter Game of Life de Conway dans un shader sur votre matériel 3D:

http://glslsandbox.com/e#207.3

Ce type d'affichage 2D ne fonctionnerait que sur le CPU, pas sur le GPU, avec un canevas 2D. Tous les calculs seraient implémentés en JavaScript et ne seraient pas aussi parallèles que le GPU, même avec l'aide de web workers. Ce n'est qu'un exemple bien sûr, toutes sortes d'effets 2D intéressants peuvent être implémentés avec des shaders.

Eh bien, la performance serait l'une des principales raisons car lorsque vous codez un jeu, il doit être rapide. Mais il y a quelques autres raisons pour lesquelles vous voudrez peut-être choisir WebGL plutôt que canevas. Il offre la possibilité de coder les shaders, l'éclairage et le zoom, ce qui est important si vous faites une application de jeu commerciale. De plus, la toile devient lente après environ 50 sprites.

Vous ne pouvez rien faire avec Canvas que vous ne pouvez pas faire avec webGL: le canvas permet d'écraser les octets avec get / putImageData, et vous pouvez dessiner des lignes, des cercles, ... par programmation avec webGL.
Mais si vous cherchez à faire pas mal de dessins, et aussi des effets à 60 ips, l'écart de performances est si élevé qu'il ne sera tout simplement pas possible avec canvas, quand il fonctionnera correctement dans webGL. La performance est une caractéristique fondamentale.

Pourtant, webGL est assez compliqué à programmer: voyez si canvas vous convient ou cherchez une librairie qui vous soulagera ...
Autre inconvénient: ça ne marche pas sur IE (mais qu'est-ce que ça fait?), Et sur certains mobiles.
Voir ici pour la compatibilité: http://caniuse.com/webgl

Comme vous voulez spécifiquement des choses 2d classiques qui ne fonctionnent pas bien avec canvas:

• la couleur se transforme (comme le clignotement d'un sprite)
• répétition des remplissages bitmap
• cartes de mosaïque en rotation (sous le canevas, certaines implémentations créeront des coutures)
• couches profondes (très dépendant de la mise en œuvre)
• mélange multiplicatif ou additif

... mais bien sûr, vous avez accès aux pixels, vous pouvez donc faire n'importe quoi, y compris ce qui précède, manuellement. Mais cela peut être vraiment très lent. Vous pouvez emscripten Mesa openGl pour effectuer un rendu sur toile en théorie.

Une autre grande raison d'utiliser webGL serait que le résultat est très facile à porter n'importe où ailleurs. Ce qui rend également la compétence plus précieuse.

Les raisons d'utiliser canvas sont qu'il est toujours mieux pris en charge et si vous apprenez à faire des choses pixel par pixel, c'est également une leçon très précieuse.

Comme WebGL est une technologie particulièrement nouvelle et que le canevas HTML5 est plus établi, ce que vous souhaitez utiliser dépend de vos utilisateurs. Si vous pensez que vos utilisateurs utiliseront des appareils mobiles, je suggérerais un canevas HTML5, mais si vous voulez un meilleur rendu 2D, j'utiliserais WebGL. Donc, ce que vous pouvez faire est si l'utilisation est sur le rendu mobile avec HTML5 sinon s'ils sont sur une plate-forme qui prend en charge WebGL.

Par exemple:

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

Sources:
Comment détecter correctement le support WebGL?
Quelle est la meilleure façon de détecter un appareil mobile dans jQuery?

WebGL est inutilisable sans GPU.
Cette dépendance matérielle n'est pas un gros problème car la plupart des systèmes ont des GPU, mais si les architectures GPU ou CPU évoluent toujours, la préservation du contenu webgl par émulation peut être difficile. L'exécuter sur d'anciens ordinateurs (virtualisés) est problématique.

Mais "Canvas vs WebGL" ne doit pas être un choix binaire. En fait, je préfère utiliser webgl pour les effets, mais faire le reste dans canvas. Quand je l'exécute dans une VM, cela fonctionne toujours bien et rapidement, juste sans les effets.