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


114

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?


5
À propos: bien que vous ne puissiez pas utiliser les API de contexte 2D et 3D sur le même canevas, vous pouvez toujours les combiner en utilisant plusieurs toiles. WebGL peut utiliser des toiles 2d comme textures et les toiles 2d peuvent utiliser des toiles WebGL comme sources pour drawImage.
Philipp

Réponses:


85

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.


@Abstract, Où sont les bons tutoriels pour Web GL et combien d'heures cela prendra-t-il?
Pacerier

1
@Pacerier il suffit de google, les premiers résultats sont probablement assez bons. Cependant, il faudra des semaines et des mois pour devenir bon en programmation web et graphique en général, et des années pour être vraiment bon. Ce n'est pas juste une "bibliothèque" aléatoire pour laquelle vous devez apprendre l'API et c'est tout.
Algorithme abstrait

@AbstractAlgorithm, je veux dire si vous êtes déjà un maître en programmation de canevas, combien d'heures le passage au Web GL prendra-t-il?
Pacerier

@Pacerier qui dépend du développeur et comme Abstract l'a déjà dit les compétences mathématiques du développeur impliqué. Il n'y a vraiment pas de quantification qui puisse être faite.
scrappedcola

32

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.

Table


Re "certaines implémentations GL ont la possibilité de supprimer la boîte cachée" mais ne pouvez-vous pas détecter cette partie remplacée dans JS et ainsi ne pas redessiner ce qui n'est pas nécessaire?
Pacerier

16

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.


16

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.


2
Ainsi par rapport à canvas, WebGL est-il plus ou moins pénible sur l'OS?
Pacerier

Je suis curieux de savoir si toutes les toiles finissent par faire de toute façon webgl; s'il utilise un cas d'utilisation commun précompilé webgl, qui serait plus efficace que direct webgl; ou s'il n'interface avec opengl d'aucune façon, sauf si vous utilisez webgl.
Dmitry

1
@Dmitry est une excellente question, et différents navigateurs sont libres d'adopter différentes approches à ce problème. Mais, quelle que soit la façon dont ils accélèrent l'API Canvas 2D, l'API Canvas 2D elle-même n'offre pas de shaders programmables ni de tampons de matrice de sommets. C'est une API "bavarde" (un appel JavaScript vers natif par élément dessiné), tandis que l'API WebGL permet le chargement de données en masse et le traitement personnalisé basé sur le GPU.
emackey

14

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.


Surtout sur un appareil comme une tablette Android où le processeur est rapidement surchargé en javascript, la principale raison d'utiliser WebGL est de transférer la charge de rendu sur le GPU.
Curtis

1
@ Xk0n, Re "offre la possibilité de coder les shaders, l'éclairage et le zoom", mais cela ne devient-il pas dépendant du GPU?
Pacerier

Vous pouvez toujours zoomer avec setTransform dans un contexte de canevas 2D. Cependant, j'ai eu du mal avec le saignement de texture dans un canevas 2D lors de la mise à l'échelle à partir de feuilles de sprite, c'est pourquoi je me tourne vers WebGL. J'ai vu un tutoriel qui empêche l'échantillonnage du voisin le plus proche de sortir du rect source, ce qui devrait résoudre mon problème de pointe.
Frank le

7

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


7

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.


Btw WebGL est-il multithread? Pouvez-vous avoir deux fils dessinant deux parties de l'écran simultanément?
Pacerier

Je pense que la réponse est «oui et non», car les navigateurs Web sont intrinsèquement monotread, donc copier les données à rendre sur le GPU n'est pas multi-thread. Mais, vous utilisez la parallélisation massive de la carte graphique une fois que les shaders commencent le rendu, ce qui consiste essentiellement à dessiner plusieurs parties de l'écran à la fois. S'il vous plaît, corrigez-moi si je me trompe, n'importe qui.
Kent Weigel le

2

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?


2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.