Tutoriel WebGL

WebGL permet au contenu web d'utiliser un API basé sur OpenGL ES 2.0 pour performer des rendus 3D dans un <canvas> HTML dans des navigateurs qui le supportent sans avoir recours à des plug-ins. Les programmes WebGL consistent de code de contrôle rédigé en JavaScript et de code d'effets spéciaux (code shader) qui est exécuté sur le Processeur Graphique (GPU). 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 avec la base. Les exemples suivants devraient te donner des idées de ce que tu peux faire avec WebGL et va te fournir des bouts de code qui pourraient t'aider avec ton propre contenu.

Avant de commencer

L'usage de l'élément <canvas> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de HTML et de JavaScript. L'élément <canvas> et WebGL ne sont pas supportés par certaines anciennes versions de navigateurs, mais sont supportés par les versions récentes de tous les navigateurs les plus utilisés. Pour dessiner des graphiques sur le canvas on utilise un objet de contexte Javascript qui créé des graphiques sur le champs.

Dans ce tutoriel

Les premiers pas avec WebGL
Comment mettre en place un contexte WebGL.
Ajouter du contenu 2D à un contexte WebGL
Comment faire un rendu simple de figures planes avec WebGL.
Utiliser des shaders pour ajouter de la couleur avec WebGL
Démontre comment ajouter de la couleur aux figures avec des shaders.
Animer des objets avec WebGL
Montre comment faire des rotations et des translations d'objets pour créer des animations simples.
Créer des objets 3D avec WebGL
Montre comment créer et animer un objet 3D (dans ce cas, un cube).
Utiliser des textures dans WebGL
Démontrer comment appliquer des textures sur les faces d'un objet.
Ajouter de la lumière dans WebGL
Comment simuler des effets d'illumination dans ton contexte WebGL.
Animer des textures dans WebGL
Montre comment animer des textures; dans ce cas, en appliquant un vidéo Ogg sur les faces d'un cube faisant une rotation.

Étiquettes et contributeurs liés au document

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