WebGL pas à pas

R5.A.06 · Programmation multimédia · BUT 3

WebGL pas à pas

Six séances de deux heures pour comprendre comment une carte graphique dessine une image, et pour programmer soi-même, en JavaScript et en GLSL, des scènes 2D animées puis une petite scène 3D.

Organisation

  • Chaque séance : environ 30 minutes de cours (la page « Cours », avec des démos à manipuler) puis 1 h 30 de TP (la page « TP »).
  • Les TP se suivent : chacun réutilise ce que vous avez écrit au précédent. Gardez votre code.
  • Matériel : un navigateur récent (Chrome, Firefox, Edge ou Safari), VS Code avec l'extension Live Server. Aucune installation de Node ou de bibliothèque n'est nécessaire.
  1. 1

    Le GPU et le pipeline graphique

    À quoi sert une carte graphique, le trajet d'un sommet jusqu'au pixel, les deux shaders, l'espace de découpage. On dessine un premier triangle, puis une maison.

    CoursTP 1 · Premier triangle
  2. 2

    Envoyer des données au GPU

    Attributs, uniforms, varyings et interpolation. Les primitives, les buffers entrelacés, les indices. On construit un disque coloré généré par programme.

    CoursTP 2 · Couleurs et formes
  3. 3

    Animation et boucle de jeu

    requestAnimationFrame, temps écoulé entre deux images, séparation mise à jour / rendu, pas de temps fixe, clavier. On programme un petit jeu d'esquive.

    CoursTP 3 · Mini-jeu
  4. 4

    Transformations 2D et matrices

    Translation, rotation, mise à l'échelle, coordonnées homogènes, ordre des transformations, repère en pixels, hiérarchie d'objets. On écrit sa bibliothèque m3 et on anime un système solaire.

    CoursTP 4 · Système solaire
  5. 5

    Textures et sprites

    Coordonnées UV, chargement d'image, filtrage, répétition, transparence, planches de sprites animées.

    CoursTP 5 · Sprites animés
  6. 6

    Passage à la 3D

    Matrices 4×4, cube, test de profondeur, élimination des faces arrière, projection perspective, caméra lookAt.

    CoursTP 6 · Scène 3D

Avant la première séance

  1. Installez VS Code et l'extension Live Server (Ritwick Dey).
  2. Au début de chaque TP, téléchargez son code de départ avec le bouton en haut de l'énoncé, et décompressez l'archive : vous obtenez un dossier tpN/depart/.
  3. Ouvrez le dossier d'un TP dans VS Code, clic droit sur index.html → Open with Live Server.
  4. Ouvrez la console du navigateur (F12) : c'est là que s'affichent les erreurs de vos shaders.
Pourquoi Live Server ?

Ouvrir index.html en double-cliquant (adresse file://…) ne fonctionne pas pour les TP : les navigateurs bloquent alors les modules JavaScript (import) et le chargement des images dans WebGL. Un petit serveur local règle le problème. Sans VS Code, la commande python3 -m http.server lancée dans le dossier fait la même chose.

Références utiles