WebGL : graphismes 2D et 3D pour le Web

WebGL (Web Graphics Library, qu'on pourrait traduire en « bibliothèque de graphismes pour le Web ») est une API JavaScript permettant le rendu de graphismes en 2D ou 3D avec de hautes performances, sans avoir à utiliser de plugin. WebGL introduit une API qui est conforme de près à OpenGL ES 2.0 et qui peut être utilisée sur les éléments HTML <canvas>. Cette conformité permet à l'API de tirer parti de l'accélération matérielle graphique fournie par l'appareil.

WebGL est pris en charge par Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, et Microsoft Edge build 10240+. Il est également nécessaire que le matériel de l'appareil utilisé prenne en charge ces fonctionnalités.

L'API WebGL 2 fournit la plupart des fonctionnalités de OpenGL ES 3.0. Elle est fournie via l'interface WebGL2RenderingContext.

L'élément <canvas> est également utilisé par l'API Canvas pour réaliser des graphismes en 2D sur des pages web.

Référence

Interfaces standard

Extensions

Évènements

Types et constantes

WebGL 2

WebGL 2 est une mise à jour majeure de WebGL et est fournie par l'interface WebGL2RenderingContext. Basée sur OpenGL ES 3.0, les nouvelles fonctionnalités incluent :

Voir aussi le billet "WebGL 2 lands in Firefox" (en anglais) et webglsamples.org/WebGL2Samples pour plusieurs démos.

Guides et tutoriels

Dans la section qui suit, vous trouverez un ensemble de guide pour apprendre les concepts WebGL et de tutoriels pour des exercices guidés pas à pas et des exemples.

Guides

Les données en WebGL

Un guide sur les variables, les tampons et autres types de données utilisées pour l'écriture de code WebGL.

Bonnes pratiques WebGL

Des conseils et suggestions pour vous aider à améliorer la qualité, la performance et la fiabilité de votre contenu WebGL.

Utiliser les extensions

Un guide sur l'utilisation des extensions WebGL.

Tutoriels

Tutoriel WebGL

Un guide pour commencer avec WebGL et découvrir les concepts principaux. Il s'agit d'un bon point de départ si vous n'avez jamais utilisé WebGL auparavant.

Exemples

Un exemple d'animation WebGL simple en 2D

Cet exemple illustre une animation simple d'une forme avec une couleur. Cet article aborde l'adaptation aux facteurs de forme, une fonction pour construire des shaders à partir de plusieurs shaders, ainsi que les bases du dessin en WebGL.

WebGL par l'exemple

Un ensemble d'exemples avec des explications concises qui montrent les concepts et possibilités offertes par WebGL. Les exemples sont triés selon le sujet et le niveau de difficulté. Cet article aborde le contexte de rendu WebGL, la programmation de shaders, les textures, la géométrie, les interactions avec l'utilisatrice ou l'utilisateur, etc.

Tutoriels avancés

Explications sur le modèle, la vue et la projection WebGL

Une explication détaillée sur les trois matrices principales généralement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.

Mathématiques matricielles pour le Web

Un guide expliquant la façon dont les matrices de transformation 3D fonctionnent et comment elles peuvent être utilisées sur le Web, pour les calculs WebGL ou les transformations CSS.

Ressources

Bibliothèques tierces

  • three.js est une bibliothèque 3D WebGL, riche en fonctionnalités et en source ouverte.
  • Babylon.js est un moteur de rendu 3D puissant, simple et en source ouverte, mis à disposition dans un framework JavaScript.
  • Pixi.js est un moteur de rendu WebGL 2D performant en source ouverte.
  • Phaser est un framework performant, gratuit en source ouverte pour créer des jeux fonctionnant sur l'API Canvas ou WebGL.
  • PlayCanvas est un moteur de jeu en source ouverte.
  • glMatrix est une bibliothèque JavaScript matricielle et vectorielle pour les applications WebGL à hautes performances.
  • twgl est une bibliothèque pour rendre WebGL moins verbeux.
  • RedGL est une bibliothèque 3D WebGL en source ouverte.
  • vtk.js est une bibliothèque JavaScript pour la visualisation scientifique dans le navigateur.
  • webgl-lint vous aidera à trouver des erreurs dans votre code WebGL et fournira des informations utiles.

Spécifications

Specification
WebGL Specification
# 5.14
WebGL 2.0 Specification
# 3.7

Compatibilité des navigateurs

api.WebGLRenderingContext

BCD tables only load in the browser

api.WebGL2RenderingContext

BCD tables only load in the browser

Notes de compatibilité

En plus du navigateur, il faut également que la carte graphique prenne en charge les fonctionnalités. Par exemple, la compression de texture S3 (S3TC) est uniquement disponible pour les tablettes basées sur Tegra. La plupart des navigateurs fournissent le contexte WebGL via webgl, mais les plus anciens utilisent experimental-webgl. WebGL 2 utilise quant à lui le nom de contexte webgl2.

Notes spécifiques à Gecko

Débogage et tests WebGL

Firefox fournit deux préférences pour contrôler les fonctionnalités de WebGL à des fins de tests :

webgl.min_capability_mode

Une propriété booléenne qui, lorsqu'elle vaut true, active un mode de compatibilité minimal. Dans ce mode, WebGL est configuré pour uniquement prendre en charge l'ensemble minimal de fonctionnalités requis par la spécification WebGL. Cela permet de s'assurer que le code WebGL fonctionnera sur n'importe quel appareil ou navigateur, quelles que soient ses capacités. Par défaut, elle vaut false.

webgl.disable_extensions

Une propriété booléenne qui, lorsqu'elle vaut true, désactive l'ensemble des extensions WebGL. Par défaut, elle vaut false.

Voir aussi