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.

Avant que vous ne commenciez

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.

Dans ce tutoriel

Les premiers pas avec WebGL
Comment mettre en place un contexte WebGL.
Ajout de contenu 2D à un contexte WebGL
Comment faire un rendu simple de figures planes avec WebGL.
Utilisation des nuanceurs pour appliquer de la couleur dans WebGL
Démontre comment ajouter de la couleur aux formes avec des nuanceurs.
Animation des objets avec WebGL
Montre comment tourner et déplacer des objets pour créer des animations simples.
Création d'objets 3D en utilisant WebGL
Montre comment créer et animer un objet 3D (dans ce cas, un cube).
Utilisation des textures dans WebGL
Démontrer comment appliquer des textures sur les faces d'un objet.
 L'illumination dans WebGL
Comment simuler des effets d'illumination dans votre contexte WebGL.
Animation de textures dans WebGL
Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : NemoNobobyPersonne, frankymacster, teoli, fscholz
Dernière mise à jour par : NemoNobobyPersonne,