WebGL par l'exemple

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

Dans cet exemple, on montre comment détecter un contexte de rendu WebGL et l'afficher pour l'utilisateur.

Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.

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).

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.

Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.

Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (scissoring).

Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément canvas associé.

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.

Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.

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

Un programme de manipulation des shaders simple qui dessine un carré.

Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.

Une démonstration simple sur l'utilisation des shaders et des textures procédurales.

Divers exemples avancés

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

• Suivant