Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
WebGL permet au contenu web d'utiliser une API basée sur OpenGL ES 2.0 pour effectuer des rendus 3D dans un <canvas> HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.
Ce tutoriel décrit comment utiliser l'élément <canvas> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.
L'utilisation de l'élément <canvas> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'HTML et du JavaScript. L'élément <canvas> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.
Comment mettre en place un contexte WebGL.
Ajouter du contenu à WebGLComment faire un rendu simple de figures planes avec WebGL.
Ajouter des couleurs avec les nuanceursDémontre comment ajouter de la couleur aux formes avec des nuanceurs.
Animer des objets avec WebGLMontre comment tourner et déplacer des objets pour créer des animations simples.
Créer des objets 3D avec WebGLMontre comment créer et animer un objet 3D (dans ce cas, un cube).
Utilisation des textures en WebGLDémontrer comment appliquer des textures sur les faces d'un objet.
Éclairage en WebGLComment simuler des effets d'illumination dans votre contexte WebGL.
Animation de textures en WebGLMontre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.
Cette page a été modifiée le 17 déc. 2024 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.