Programmation Graphique : TP séance 04

Rendu du TP sur Ametice :: Suivez les instructions pour le rendu du TP en mettant le bon numéro de séance dans le nom du répertoire.; N'oubliez pas de rendre votre travail à la fin de la séance comme indiqué, même si vous n'avez pas fini la planche de TP, puis de rendre la version finale (sans changer le nom du fichier) avant le début de la séance suivante.

Exercice 1. Fragment shader et souris

Le but est d'expérimenter le langage GLSL en modifiant un fragment shader.

Dans votre nouveau répertoire pgra-TP04-NOM1-NOM2, récupérer les fichiers suivants : le nouveau Makefile (qui compile avec stb_image), les fichiers de GLAD glad.c, glad.h, khrplatform.h, le module de calcul matriciel vmath.h, la librairie tout-en-un stb_image.h et le petit module C associé stb_image.c.

Enfin, récupérer l'exemple de départ fw42-mouse.cpp, le vertex shader vs01.glsl et le fragment shader fs05.glsl.

Vérifiez que vous pouvez compiler et exécuter l'exemple (au besoin, voir 3.1. Installation et compilation dans le CM 01).

Pour tester un fragment shader, exécutez le programme OpenGL en lui passant l'option -fs puis le nom du shader, par exemple :

./fw42-mouse -fs fs05.glsl

La touche a déclenche une animation, la touche p change le type de projection, c change le cube repère, h affiche l'aide pour les réglages de la projection. Nouveau : la touche U recharge les fichiers de shader.

Tout ce dont vous avez besoin de savoir en OpenGL core pour réaliser ce TP est expliqué dans le CM 04, section 7. Langage GLSL, en particulier dans la section 7.3.2. Position de la souris.

1.1. Distances

Copiez le fragment shader fs05.glsl sous un nouveau nom, puis remplacez le calcul de la distance euclidienne mémorisé dans d :

d = sqrt(dx*dx + dy*dy)

par chacune des distances suivantes :

la distance \(d_1 = |dx| + |dy|\),
la distance \(d_\infty = \max(|dx|, |dy|)\),
la distance \(d_1 + d_\infty\).

Observez le changement des courbes de niveaux obtenues en déplaçant la souris sur la fenêtre.

Pour le rendu, placez en commentaire chaque calcul et la forme obtenue dans le même fichier du fragment shader.

1.2. Courbes en couleur

Copiez le fragment shader fs05.glsl sous un nouveau nom, puis faites en sortes que les courbes de niveau obtenues, qui sont concentriques autour de la souris, soient telles que :

la première période soit en rouge,
la deuxième en vert,
la troisième en bleu,
la quatrième en jaune,
la cinquième en cyan,
la sixième en magenta,
la septième en rouge (on recommence le cycle), et ainsi de suite.

Jouer sur l'étalement de la distance, en la divisant par exemple par 20.0 de manière à obtenir des bandes larges telles que sur la capture d'écran ci-contre.

1.3. Paramètre temps

Copiez le fragment shader fs05.glsl sous un nouveau nom. Déclarez une variable uniform float uTime, puis soustrayez uTime*10.0 à la valeur de d.

Dans le programme OpenGL, envoyez la variable uniform dans displayGL avec comme valeur le résultat de glfwGetTime(). Pensez à mémoriser la location de la variable dans initGL, mais également dans reload_program (comme pour mousePos).

Lorsque vous déplacez la souris, ou en mode animation (touche A), vous devriez voir les courbes de niveaux s'éloigner périodiquement.

Exercice 2. Textures sur un cube

Le but est d'expérimenter l'utilisation des textures, en dessinant un cube sur lequel on plaquera 6 textures différentes.

Récupérer l'exemple de départ fw43-texture.cpp, ainsi que les images : side1.png, side2.png, side3.png, side4.png, side5.png, side6.png.

Vérifiez que vous pouvez compiler et exécuter l'exemple (au besoin, voir 3.1. Installation et compilation dans le CM 01).

Tout ce dont vous avez besoin de savoir en OpenGL core pour réaliser ce TP est expliqué dans le CM 04, section 8. Textures, en particulier dans la section 8.5. Shaders pour texture.

2.1. Chargement des textures

Chargez les 6 images fournies et fabriquez autant de textures dans MyApp, dont les identifiants seront mémorisés dans un vector.

2.2. Création du cube

En vous inspirant des classes Triangles et WireCube dans le programme, créer une classe CubeTextures qui crée un cube avec les coordonnées de texture pour chacune des 6 faces, de manière à ce que l'image prenne chaque fois toute la face.

2.3. Affichage

Dans la méthode draw (de CubeTextures), qui recevra en paramètre le vector des identifiants de texture, afficher chacune des 6 faces avec la texture correspondante.

Instanciez CubeTextures dans MyApp et affichez-le à la place de l'instance de Triangles.