web-dev-qa-db-fra.com

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

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

Dans Word, quelles sont les fonctionnalités 2D offertes par WebGL qu'il est impossible de réaliser facilement avec 2D-Canvas?

html5html5-canvaswebgl
91
Ali Shakiba

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 convient mieux à leurs besoins
  • coût
  • plus platfrom-independant

Je vais donc discuter des différences entre les API canvas et webGL en ce qui concerne ces qualités.

Canvas et webGL sont des API JavaScript. Donc, ils sont à peu près les mêmes en ce qui concerne l'intégration. Ils ont tous deux un certain nombre de bibliothèques/moteurs qui pourraient accélérer votre codage. Différentes bibliothèques vous proposent différentes manières d'organiser votre code; la structure de code est donc différente en fonction de l'API de dessin. Cependant, c'est à peu près la même chose (comment le reste du code est lié à celui-ci).

Si vous utilisez la 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 ayant de solides compétences en mathématiques, qui comprend parfaitement le pipeline de rendu et sait 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 reste) et donc - cela coûte plus cher.

WebGL est plus rapide et dispose de plus de fonctionnalités. Nul doute que. C'est une API 3d native qui vous donne un accès complet au pipeline de rendu. Tout le code et les effets sont exécutés plus rapidement et plus facilement. Avec WebGL, il n'y a vraiment pas de limite.

Canvas et webGL sont des goodies html5. Habituellement, les appareils prenant en charge l’un et l’autre.

Pour résumer:

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

J'espère que cela t'aides.

P. S. Ouvert à la discussion.

65
Abstract Algorithm

Le principal avantage réside dans la programmabilité du pipeline et ses performances. Par exemple, supposons que vous dessiniez deux boîtes superposées et que l'une soit masquée, certaines implémentations de GL) permettent de supprimer la boîte masquée.

En ce qui concerne les comparaisons, comme il n’existe pas de moyen rapide de créer un tableau ici, je viens de télécharger une photo du tableau de comparaison ci-dessous. Three.js ajouté pour la complétude seulement.

Table

30
Prabindh

Quelle fonctionnalité 2D WebGL offre-t-elle par rapport à la zone de dessin 2D? Le plus gros IMHO est les shaders de fragments 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.

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 Web. Ce n’est qu’un exemple bien entendu, toutes sortes d’effets 2D intéressants peuvent être implémentées avec des shaders.

15
emackey

Parlant d'expérience sur mes propres applications , les shaders graphiques sont la seule et unique raison pour laquelle j'ai besoin de la prise en charge de WebGL. La facilité d'utilisation a peu d'incidence pour moi puisque les deux cadres peuvent être résumés 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 optimiser la prise en charge du navigateur/de la machine.

12
16807

La performance est 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 pourriez vouloir choisir WebGL sur canvas. Il offre la possibilité de coder les shaders, l'éclairage et le zoom, ce qui est important si vous utilisez une application de jeu commerciale. La toile devient également lageuse après 50 sprites ou plus.

10
Xk0nSid

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

  • la couleur se transforme (comme le clignotement d'un Sprite)
  • répéter des remplissages bitmap
  • mosaïque des cartes en rotation (sous la toile, certaines implémentations créeront des coutures)
  • superposition profonde (très dépendant de l'implémentation)
  • mélange multiplicatif ou additif

... mais bien sûr, vous avez un accès pixel, 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 utiliser emscripten Mesa openGl pour le rendre à canvas en théorie.

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

L’utilisation de canevas est justifiée par le fait qu’elle est toujours mieux prise en charge et que, si vous apprenez à faire des choses pixel par pixel, c’est également une leçon très utile.

6
starmole

Il n'y a rien que vous puissiez faire avec Canvas avec webGL: la toile permet d'écraser les octets avec get/putImageData, et vous pouvez dessiner des lignes, des cercles, ... par programmation avec webGL.
Mais si vous voulez faire assez de dessins et d’effets à 60 ips, l’écart de performance est tellement grand qu’il ne sera tout simplement pas possible avec canvas, lorsqu’il fonctionnera correctement dans webGL. La performance est une fonctionnalité fondamentale.

Cependant, la programmation de WebGL est assez compliquée: voyez si la toile vous suffit ou cherchez une bibliothèque qui soulagera la douleur ...
Autre inconvénient: cela ne fonctionne pas sur IE (mais que fait-on?) Et sur certains mobiles.
Voir ici pour la compatibilité: http://caniuse.com/webgl

6
GameAlchemist

WebGL étant une technologie particulièrement nouvelle et le canevas HTML5 bien établi, ce que vous souhaitez utiliser dépend de vos utilisateurs. Si vous pensez que vos utilisateurs utiliseront des appareils mobiles, je vous suggérerais une toile HTML5, mais si vous souhaitez obtenir un meilleur rendu 2D, j'utilise WebGL. Donc, ce que vous pourriez faire, c’est que si vous utilisez le rendu mobile avec HTML5, s’ils sont sur une plate-forme prenant 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 correct de détecter le support WebGL?
Quel est le meilleur moyen de détecter un appareil mobile dans jQuery?

2
MayorMonty