Existe-t-il une raison d’utiliser WebGL au lieu de 2D Canvas pour les jeux et applications 2D?

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

En d’autres termes, quelles sont les fonctionnalités 2D offertes par WebGL qui ne sont pas réalisables 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 à leurs besoins
  • Coût
  • plus platfrom-independant

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


Les deux canevas et webGL sont des API JavaScript. Donc, ils sont à peu près les mêmes en ce qui concerne l’intégration (liaison). Ils ont tous deux un nombre de bibliothèques / moteurs qui pourraient accélérer votre codage. Différentes bibliothèques vous permettent d’organiser votre code de différentes manières, de sorte qu’il diffère de la manière dont vous structurez le code autour de l’API de dessin, mais cela rest à peu près la même chose (comment le rest du code se lie à lui).

Si vous utilisez une bibliothèque, la facilité d’écriture du code dépend de la bibliothèque elle-même.
Mais si vous écrivez du code à partir de zéro, l’API de canvas est beaucoup plus facile à apprendre et à comprendre, elle nécessite un minimum de connaissances en mathématiques. Le développement est rapide et simple. WebGL a besoin d’un développeur doté de solides compétences en mathématiques qui comprend parfaitement le pipeline de rendu et sache ce qu’il fait. Ces personnes sont plus difficiles à trouver, la production est plus lente (en raison de la taille du code et de la complexité de son intégration dans le rest) et, par conséquent, elle coûte plus cher.

WebGL est plus rapide et offre plus de fonctionnalités. Sans aucun doute ça. C’est une API 3D native qui vous donne un access complet au pipeline de rendu, et tout le code et les effets sont exécutés plus rapidement et plus facilement ajustables. Avec webGL, il n’y a vraiment aucune limite.

Les deux canevas et webGL sont des html5 goodies. Généralement, les périphériques prenant en charge l’un prend en charge et l’autre.

Pour résumer:

  • fusionner le code API de dessin et le rest (intégration): similar
  • facilité d’utilisation:
    • (avec bibliothèque) canvas = webGL
    • (à partir de zéro) webGL << canvas
  • speed: webGL> canvas
  • Capacités: webGL> canvas
  • coût: webGL est beaucoup plus cher
  • plate-forme: très similaire

J’espère que cela t’aides.

PS Ouvert à la discussion.

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

En ce qui concerne les comparaisons, comme il n’ya 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 pour être complet.

Table

Quelle capacité 2D WebGL offre-t-elle à la canvas 2D? Le plus gros IMHO est les shaders de fragment programmables sur le matériel graphique. Par exemple, dans WebGL, vous pouvez 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 travailleurs du Web. Ce n’est qu’un exemple, bien sûr, toutes sortes d’effets 2D intéressants peuvent être implémentés avec des shaders.

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

Eh bien, la performance serait l’une des principales raisons car lorsque vous codez un jeu, il doit être rapide. Mais il y a plusieurs autres raisons pour lesquelles vous pourriez vouloir choisir WebGL sur un canevas. Il offre la possibilité de coder des shaders, d’éclairer et de zoomer, ce qui est important si vous utilisez une application de jeu commerciale. En outre, canvas obtient un lag après 50 sprites ou plus.

Vous ne pouvez rien faire avec Canvas avec webGL: le canevas 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 un certain nombre de dessins, ainsi que des effets à 60 images par seconde, l’écart de performance est si élevé qu’il ne sera tout simplement pas possible avec la canvas, quand il fonctionnera correctement dans WebGL. La performance est une fonctionnalité racine.

Pourtant, webGL est assez compliqué à programmer: voyez si la canvas est suffisante pour vous ou cherchez une bibliothèque qui soulagera la douleur …
Autre inconvénient: il ne fonctionne pas sur IE (mais que fait-il?), 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 la canvas:

  • la couleur se transforme (comme clignoter un sprite)
  • répétition des images bitmap
  • cartes de mosaïque en rotation (sous la canvas, certaines implémentations créeront des coutures)
  • couches profondes (très dépendant de l’implémentation)
  • mélange multiplicatif ou additif

… mais bien sûr, vous avez un access aux pixels, vous pouvez donc faire quelque chose, y compris ce qui précède, manuellement. Mais cela peut être vraiment très lent. Vous pourriez emscripten Mesa openGl pour rendre à canvas en théorie.

Une autre grande raison d’utiliser WebGL est que le résultat est très facile à transférer ailleurs. Ce qui rend également la compétence plus précieuse.

Les raisons d’utiliser canvas sont qu’il est encore mieux supporté et si vous apprenez à faire des choses pixel par pixel, c’est également une leçon très utile.

WebGL étant une technologie particulièrement nouvelle et le canevas HTML5 plus établi, ce que vous voulez utiliser dépend de vos utilisateurs. Si vous pensez que vos utilisateurs utiliseront des appareils mobiles, alors je suggérerais le format HTML5 mais si vous voulez un meilleur rendu 2D, j’utiliserais WebGL. Donc, ce que vous pourriez faire, c’est si l’utilisation est sur le rendu mobile avec HTML5 si elles 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:
Moyen de détecter le support WebGL?
Quelle est la meilleure façon de détecter un appareil mobile dans jQuery?