Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

WebGL par l'exemple

WebGL par l'exemple est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les shaders, les textures, la géométrie et l'interaction avec les utilisateurs.

Les exemples, par catégorie

Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.

Plutôt que de manipuler des shaders, optimiser des géométrie et gérer la mémoire GPU dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.

Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.

Apprendre à connaître le contexte de rendu

Détecter WebGL
Dans cet exemple, on montre comment détecter un contexte de rendu WebGL et l'afficher pour l'utilisateur.
Appliquer des couleurs
Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.
Appliquer une couleur à la souris
Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).
Créer une animation colorée
Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.
Avoir un masque de couleur
Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.
Appliquer des découpes simples
Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (scissoring).
La taille du canevas et WebGL
Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément canvas associé.
Modèle 1
Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.
Créer une animation avec du découpage et de l'applique
Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.
Une pluie de rectangle
On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.

Les bases de la programmation avec les shaders

Hello GLSL
Un programme de manipulation des shaders simple qui dessine un carré.
Introduction aux attributs de vertex
Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.
Générer des textures avec du code
Une démonstration simple sur l'utilisation des shaders et des textures procédurales.

Divers exemples avancés

Les textures vidéos
Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,