Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

WebGL

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

Commencer avec WebGL

Mettre en place un contexte WebGL

Ajouter du contenu à 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.

Animer des objets avec WebGL

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.

L'éclairage dans WebGL

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.

Bonnes pratiques WebGL

Astuces et suggestions pour améliorer votre contenu WebGL.

Textures cross-domain

Informations sur le chargement des textures depuis un autre domaine que celui depuis lequel le contenu est chargé.

Utiliser des extensions

Comment utiliser des extensions qui sont disponibles dans WebGL.

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.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Chbok, teoli, fscholz, Bat, TimN
 Dernière mise à jour par : Chbok,