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.