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.
Montre comment faire tourner et bouger des objets pour créer des animations simples.
Créer des objets 3D avec WebGL
Montre comment créer et animer un objet 3D (ici un cube).
Utiliser des textures dans WebGL
Explique comment appliquer une texture sur les faces d'un objet.
Comment simuler des effets de lumière dans votre contexte WebGL.
Animer des textures dans WebGL
Montre comment animer des textures ; ici en appliquant une vidéo Ogg sur les faces d'un cube qui tourne.
Astuces et suggestions pour améliorer votre contenu WebGL.
Informations sur le chargement des textures depuis un autre domaine que celui depuis lequel le contenu est chargé.
Comment utiliser des extensions qui sont disponibles dans 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
Fonctionnalité | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support basique | 4.0 (2.0) | 9 | Pas de support | 12 | 5.1 |
Nom du contexte | 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) | ? | ? | ? | ? |
Attriuts drawingBufferWidth et drawingBufferHeight |
9.0 (9.0) | ? | ? | ? | ? |
Fonctionnalité | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support Basique | ? | ? | ? | ? | ? |
Nom du contexte | ? | ? | ? | ? | ? |
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) | ? | ? | ? | ? |
Attriuts drawingBufferWidth et drawingBufferHeight |
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 àfalse
par défaut. webgl.disable_extensions
- Un booléen qui, quand il est sur
true
, désactive toute les extensions WebGL . La valeur est àfalse
par défaut.