Lorsqu'il s'agit de décrire WebGL (et la technologie parente qu'est OpenGL), on dit souvent que c'est une technologie qui permet de dessiner des graphiques en 3D et d'appliquer des effets visuels (lumières, textures, ombres, etc) sur ces graphiques. Cela correspond probablement à l'usage principal qui en est fait.
En fait, WebGL est beaucoup plus vaste. C'est une API Web qui permet de communiquer directement avec les composants matériels graphiques : le GPU. Cette API est fournie avec son propre langage de programmation, GLSL et permet de tirer pleinement partie de la puissance de calcul de la carte graphique. On peut réaliser des graphiques 2D, 3D, traiter des images, utiliser des textures procédurales, générer des terrains, appliquer des effets visuels comme des réflexions, des réfractions, simuler des fumées, du feu, des fluides ou encore utiliser les fonctionnalités de calcul de la carte graphique pour des traitements non-graphiques. Les seules limites seront celles du matériel et de votre imagination.
Ces tutoriels visent à vous apporter les bases fondamentales du fonctionnement de WebGL pour comprendre comment il fonctionne, comment l'utiliser correctement et comment en tirer le meilleur parti.
Les bases
Nous vous conseillons de commencer par ici si vous ne connaissez pas OpenGL ou WebGL:
- Prérequis nécessaires :
- Commencer avec le Web – Dans ces tutoriels, vous verrez comment utiliser HTML et CSS simplement afin de mieux comprendre les bases de ces technologies.
- JavaScript – WebGL est une API JavaScript. Nous allons donc lire et écrire beaucoup de code JavaScript pour utiliser WebGL. Aussi, il est préférable que vous soyez à l'aise avec le langage qu'est JavaScript et notamment avec les fonctions, les tableaux et la gestion des événements. Comprendre le fonctionnement des fermetures, des objets, des constructeurs et de la chaîne de prototypes peut également aider.
- WebGL, par l'exemple
- Voici un ensemble d'exemples commentés, triés par catégories et niveaux de complexité. Cet article illustre ce qu'il est possible de réaliser grâce aux concepts WebGL. Il ne remplace pas le tutoriel.
- Tutoriel de la référence d'API
- Ce tutoriel WebGL est celui de la référence de l'API WebGL. Il est destiné aux personnes qui connaissent OpenGL et qui souhaitent apprendre à utiliser l'API JavaScript équivalente.
En profondeur
Une fois les bases conquises, il existe plein d'autres ressources à explorer :
- La référence de l'API WebGL
- Les pages de la référence WebGL contiennent des informations détaillées sur chaque interface, méthode, propriété et constante de l'API WebGL. Elle contient en plus des articles sur des sujets avancés, plus d'exemples et des conseils sur l'utilisation de WebGL.
- Un guide sur les technologies graphiques sur le Web
- Ce guide couvre les différentes technologies liées au graphisme sur le Web et notamment les autres API telles que SVG, Canvas et les vidéos.
- Le développement de jeux
- Cette section de MDN est consacrée aux techniques de développement de jeux vidéos. Elle contient des exemples d'interactions entre WebGL et les autres API et décrit les techniques que vous pouvez utiliser pour construire un jeu prenant que vous pourrez ensuite distribuer.