WebGL pas à pas

Séance 6 · Travaux pratiques

TP 6 · Scène 3D

Du cube qui tourne à une petite ville de caisses que l'on survole à la souris : profondeur, perspective, caméra et textures, avec les outils construits pendant tout le module.

Durée 1 h 30Dossier tp6/depart/Cours Passage à la 3D

Télécharger le code de départtp6-depart.zip · 14 Ko · à décompresser, puis ouvrir le dossier tp6/depart/ dans VS Code

Objectifs

  • Écrire des matrices 4 × 4 et les tester.
  • Constater puis corriger les problèmes de visibilité (profondeur, culling).
  • Mettre en place la chaîne projection · vue · modèle et une caméra lookAt.
  • Texturer des objets 3D.
tp6/depart/ ├── main.js votre code ├── m4.js matrices 4 × 4 : à compléter (translation, scaling) ├── tests.html les tests de m4.js ├── geometrie.js cube() : positions, couleurs, UV, normales, indices (24 sommets, 36 indices) ├── img/ caisse.png, dalle.png └── lib/gl-utils.js

Lisez geometrie.js : chaque face a sa couleur, et ses triangles sont dans le sens anti-horaire vus de l'extérieur. Au départ, un rectangle d'une seule couleur s'affiche : c'est une face du cube, vue de face, sans aucune transformation.

Un cube qui tourne

  • 1.1 Dans m4.js, écrivez translation et scaling (16 nombres, par colonnes). Les rotations et lookAt sont fournies. Vérifiez avec tests.html : 8 / 8.
  • 1.2 Dans image(), faites tourner le cube : modele = m4.mul(m4.rotationY(temps), m4.rotationX(0.7 * temps), m4.scaling(0.8, 0.8, 0.8)).
Vérification

Le cube tourne… mais c'est un désordre : des faces arrière apparaissent par-dessus des faces avant, l'image clignote.

Question 1

Expliquez ce que l'on voit. Dans quel ordre les faces sont-elles dessinées ? Pourquoi le cube paraît-il aussi étiré horizontalement ?

Profondeur et culling

  • Avant la boucle, activez gl.enable(gl.CULL_FACE) seul. Le résultat est-il correct ?
  • Activez ensuite gl.enable(gl.DEPTH_TEST) et ajoutez gl.DEPTH_BUFFER_BIT au gl.clear.
Vérification

Le cube est maintenant cohérent : on ne voit jamais plus de trois faces.

Question 2
  1. Pour un cube seul, le culling suffit-il ? Pourquoi garder quand même le test de profondeur ?
  2. Retirez gl.DEPTH_BUFFER_BIT du clear en gardant DEPTH_TEST. Que se passe-t-il, et pourquoi ?
  3. Dans geometrie.js, inversez l'ordre des indices d'une face (o, o + 2, o + 1, …). Que devient cette face ?

Perspective et vue

  • 3.1 et 3.2 Ajoutez les uniforms u_vue et u_projection et calculez gl_Position = u_projection * u_vue * u_modele * vec4(a_position, 1.0);
  • 3.3 Projection : m4.perspective(fov, canvas.width / canvas.height, 0.1, 100), avec le fov du curseur converti en radians.
  • 3.4 Vue : m4.translation(0, 0, -3). Envoyez les deux matrices avec gl.uniformMatrix4fv.
Vérification

Le cube apparaît en perspective, au centre, et n'est plus déformé quelle que soit la taille de la fenêtre. Le curseur de champ de vision fait un effet de zoom.

Question 3
  1. Pourquoi faut-il déplacer le cube vers les z négatifs pour le voir ?
  2. Mettez la vue à translation(0, 0, -0.5). Pourquoi le cube est-il coupé ? Quel paramètre de la perspective est en cause ?
  3. Diminuer le fov rapproche-t-il le cube ? Quelle différence avec le fait d'avancer la caméra ?

La caméra et la scène

On remplace la translation par une vraie caméra qui tourne autour de la scène. L'objet camera (angle, hauteur, distance) est déjà piloté par la souris.

  • 4.1 Calculez la position de l'œil en coordonnées sphériques : 
    const oeil = [
  camera.distance * Math.cos(camera.hauteur) * Math.sin(camera.angle),
  camera.distance * Math.sin(camera.hauteur),
  camera.distance * Math.cos(camera.hauteur) * Math.cos(camera.angle),
];
    et utilisez m4.lookAt(oeil, [0, 1, 0], [0, 1, 0]) comme matrice de vue.
  • 4.2 Dessinez le sol : le cube, mis à l'échelle en 24 × 0,5 × 24 et descendu de 0,25 (son dessus est alors en y = 0). Puis chaque élément de objets, qui est une pile de h caisses de 1,6 de côté : la caisse numéro k (en partant de 0) a pour échelle (1,6 ; 1,6 ; 1,6) et pour translation (x ; (k + 0,5) × 1,6 ; z). Remontez le cube coloré à y = 1,2 et agrandissez-le à 1,5.
Vérification

Des piles de cubes colorés sur un plateau, autour d'une place vide ; on tourne autour en glissant la souris, on zoome à la molette. Le cube central tourne toujours sur lui-même.

Question 4

Pourquoi l'ordre translation · scaling pour les caisses ? Que donnerait scaling · translation ? Quelle matrice change d'une caisse à l'autre, lesquelles restent identiques pendant toute une image ?

Les textures

  • 5.1 à 5.3 Ajoutez u_uvEchelle (vertex shader : v_uv = a_uv * u_uvEchelle), u_image et u_texture (fragment shader, avec mix), et leurs emplacements.
  • 5.4 Écrivez creerTexture(image) et chargez les deux images. Ici, on utilise UNPACK_FLIP_Y_WEBGL.
  • Écrivez une fonction dessinerCube(modele, texture, uvEchelle) qui règle les uniforms (avec u_texture à 0 si texture vaut null) et dessine. Les caisses utilisent texCaisse ; le sol texDalle répétée 24 fois ; le cube central garde ses couleurs.
Vérification

Des piles de caisses sur un sol dallé, et le cube multicolore au centre.

Question 5

Au TP 5, il ne fallait pas retourner l'image ; ici, si. Qu'est-ce qui a changé ? (Regardez le sens de l'axe y et les UV dans geometrie.js.)

Bonus

  • A. Brouillard. Transmettez au fragment shader la distance à la caméra (-(u_vue * u_modele * position).z) et mélangez la couleur avec celle du fond : mix(c, fond, smoothstep(12.0, 40.0, distance)).
  • B. Éclairage simple. geo.normales donne la normale de chaque sommet. Envoyez-la (attribut), tournez-la avec la matrice modèle (mat3(u_modele) * a_normale), et multipliez la couleur par max(dot(normalize(n), normalize(direction_lumiere)), 0.2).
  • C. Caméra libre. Remplacez l'orbite par un déplacement au clavier (ZQSD) dans la direction du regard, et l'orientation à la souris.