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

* `WebGLRenderingContext`
* `WebGL2RenderingContext`
* `WebGLActiveInfo` (en-US)
* `WebGLBuffer`
* `WebGLContextEvent` (en-US)
* `WebGLFramebuffer`
* `WebGLProgram`
* `WebGLQuery` (en-US)
* `WebGLRenderbuffer` (en-US)
* `WebGLSampler` (en-US)
* `WebGLShader`
* `WebGLShaderPrecisionFormat` (en-US)
* `WebGLSync` (en-US)
* `WebGLTexture`
* `WebGLTransformFeedback` (en-US)
* `WebGLUniformLocation` (en-US)
* `WebGLVertexArrayObject` (en-US)
### Extensions

* `ANGLE_instanced_arrays` (en-US)
* `EXT_blend_minmax` (en-US)
* `EXT_color_buffer_float` (en-US)
* `EXT_color_buffer_half_float` (en-US)
* `EXT_disjoint_timer_query` (en-US)
* `EXT_float_blend` (en-US)
* `EXT_frag_depth` (en-US)
* `EXT_shader_texture_lod` (en-US)
* `EXT_sRGB` (en-US)
* `EXT_texture_compression_bptc` (en-US)
* `EXT_texture_compression_rgtc` (en-US)
* `EXT_texture_filter_anisotropic` (en-US)
* `EXT_texture_norm16` (en-US)
* `KHR_parallel_shader_compile` (en-US)
* `OES_element_index_uint` (en-US)
* `OES_fbo_render_mipmap` (en-US)
* `OES_standard_derivatives` (en-US)
* `OES_texture_float` (en-US)
* `OES_texture_float_linear` (en-US)
* `OES_texture_half_float` (en-US)
* `OES_texture_half_float_linear` (en-US)
* `OES_vertex_array_object` (en-US)
* `OVR_multiview2` (en-US)
* `WEBGL_color_buffer_float` (en-US)
* `WEBGL_compressed_texture_astc` (en-US)
* `WEBGL_compressed_texture_etc` (en-US)
* `WEBGL_compressed_texture_etc1` (en-US)
* `WEBGL_compressed_texture_pvrtc` (en-US)
* `WEBGL_compressed_texture_s3tc` (en-US)
* `WEBGL_compressed_texture_s3tc_srgb` (en-US)
* `WEBGL_debug_renderer_info` (en-US)
* `WEBGL_debug_shaders` (en-US)
* `WEBGL_depth_texture` (en-US)
* `WEBGL_draw_buffers` (en-US)
* `WEBGL_lose_context` (en-US)
* `WEBGL_multi_draw` (en-US)
### Évènements

* `webglcontextlost` (en-US)
* `webglcontextrestored` (en-US)
* `webglcontextcreationerror` (en-US)
### Types et constantes

* Constantes WebGL (en-US)
* Types WebGL
### 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 :

* Textures 3D (en-US),
* Objets d'échantillonnage des textures (`WebGLSampler`) (en-US),
* Objets de tampon uniformes,
* Objets de synchronisation (`WebGLSync`) (en-US),
* Objets de requête (`WebGLQuery`) (en-US),
* Objets de retour de transformation (`WebGLTransformFeedback`) (en-US),
* Les extensions ayant été promues et qui font partie de WebGL 2 :
    + Objets pour les tableaux de sommets (en-US),
    + Instanciation (en-US),
    + Cibles de rendu multiples (en-US),
    + Profondeur de fragment (en-US).

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 (en-US)

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

Utiliser les extensions (en-US)

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 (en-US)

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 (en-US)

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 (en-US)

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
----------

* Site WebGL de Khronos, le site principal du Khronos Group pour WebGL.
* *WebGL Fundamentals* (en anglais), un tutoriel pour apprendre les fondamentaux de WebGL.
* *Raw WebGL: An introduction to WebGL* (en anglais), une présentation de Nick Desaulniers qui introduit les bases de WebGL.
* Bac à sable WebGL, un outil en ligne pour créer et partager des projets WebGL, utile pour le prototypage et l'expérimentation.
* *WebGL Academy* (en anglais), un éditeur HTML/JavaScript avec des tutoriels pour apprendre les fondamentaux de la programmation WebGL.
* Stats WebGL, un site avec des statistiques quant aux fonctionnalités WebGL des navigateurs sur les différentes plateformes.
### 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 with JavaScript enabled. Enable JavaScript to view data.

### api.WebGL2RenderingContext

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### 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
----------

* L'API *Canvas*
* Informations de compatibilité à propos des extensions WebGL (en-US)