WebGL est une spécification d'affichage 3D pour les navigateurs web, créée par le Khronos Group. Elle permet d'utiliser le standard OpenGL ES 2.0 au moyen de l'élement canvas du HTML5
WebGL est supporté sur les navigateurs suivants Firefox 4+, Google Chrome 9+, Opera 12+ and Safari 5.1+.
Articles pour développeur
Mettre en place un contexte WebGL
Apprendre à aficher des formes simples en utilisant le WebGL.
Ajouter des couleurs avec les shaders
Utiliser les shaders pour ajouter de la couleur à nos formes.
Les articles suivant ne sont pas disponible en français.
Shows how to rotate and translate objects to create simple animations.
Creating 3D objects using WebGL
Shows how to create and animate a 3D object (in this case, a cube).
Demonstrates how to map textures onto the faces of an object.
How to simulate lighting effects in your WebGL context.
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
Tips and suggestions to improve your WebGL content.
Information about loading textures from domains other than the one from which your content was loaded.
How to use extensions that are available in WebGL.
Ressources
- Spécification WebGL
- La spécification WebGL.
- Khronos WebGL site
- Le site principal du WebGL sur le Khronos Group.
- Learning WebGL
- Un site avec des tutoriels pour apprendre à utiliser le WebGL.
- Le livre de cuisine du WebGL
- Un site avec des astuces et des exemples de codes en WebGL.
- Planète WebGL
- Un agrégateur de contenus pour les personnes souhaitant faire de la veille technologique sur le WebGL.
- ewgl-matrices
- Une librairie rapide pour le calcul de matrice pour le WebGL
- glMatrix
- Une librairie JavaScript de matrice et vecteurs pour des applications WebGL de haute performance
- mjs
- Une librairie de maths sur les vecteurs et les matrices, optimizée pour le WebGL.
- Sylvester
- Une librairie pour manipuler les vecteurs et les matrices, Non optimizée pour le WebGL mais extrêmement robuste.
- WebGL playground
- Un outil en ligne pour créer et partager des projets WebGL. Pratique pour faire des expériences rapides.
Compatibilité des navigateurs
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 4.0 (2.0) | 9 | Pas de support | 12 | 5.1 |
| Context name | experimental-webgl |
experimental-webgl |
n/a | experimental-webgl |
experimental-webgl |
OES_texture_float |
6.0 (6.0) | ? | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | ? | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | ? | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | ? | ? | ? | ? |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | ? | ? | ? | ? |
| Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
| Context name | ? | ? | ? | ? | ? |
OES_texture_float |
6.0 (6.0) | ? | ? | ? | ? |
OES_standard_derivatives |
10.0 (10.0) | ? | ? | ? | ? |
EXT_texture_filter_anisotropic |
13.0 (13.0) | ? | ? | ? | ? |
WEBGL_compressed_texture_s3tc |
15.0 (15.0) | ? | ? | ? | ? |
drawingBufferWidth and drawingBufferHeight attributes |
9.0 (9.0) | ? | ? | ? | ? |
Notes de Gecko
Tester et débogger sur Gecko
A partir de Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), il existe deux options qui vous laissent contrôler les possibilités du WebGL :
-
webgl.min_capability_mode -
Un booléen qui, quand il est sur
true, active le mode minimum de possibilité. Quand ce mode est activé, WebGL est configuré pour seulement supporté le minimum de cas d'utilisation et de possibilité inscrit dans la spécification WebGL. Ceci vous permet de vérifier que votre code WebGL fonctionnera sur n'importe qu'elle appareil ou navigateur. La valeur est àfalsepar défaut. -
webgl.disable_extensions -
Un booléen qui, quand il est sur
true, désactive toute les extensions WebGL . La valeur est àfalsepar défaut.