I. Contributions

Nous recherchons toujours des traducteurs pour finir ce projet de traduction des articles de NeHe. Votre aide serait appréciée ! Vous êtes intéressé ? Alors contactez-nous à l'adresse suivante : nehe@redaction-developpez.com .

II. Tutoriel

En se basant sur le code de la leçon précédente, nous allons enrichir la fonction DrawGLScene. Je vais entièrement réécrire le code la fonction ci-après. Si vous comptez modifier la dernière leçon, vous pouvez remplacer la fonction DrawGLScene() par le code suivant, ou juste rajouter les lignes de codes suivantes qui étaient absentes du précédent tutoriel.

Début de la fonction DrawGLScene
Sélectionnez
int DrawGLScene(GLvoid)                                // C'est ici que tous les tracés sont réalisés
{
   glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // efface l'écran et le buffer de profondeur
   glLoadIdentity();                                   // Réinitialisation de la matrice Current Modelview
   glTranslatef(-1.5f,0.0f,-6.0f);                     // Déplacement: gauche 1.5 , intérieur Six Unités
   glBegin(GL_TRIANGLES);                              // tracé des Triangles

Si vous vous souvenez de la leçon précédente, il s'agit là de la portion de code permettant de dessiner le triangle dans la moitié gauche de l'écran. Dans la ligne de code suivante, nous utilisons pour la première fois la commande glColor3f(r,g,b). Les 3 paramètres entre les parenthèses correspondent aux valeurs de l'intensité du rouge, du vert et du bleu. Ces paramètres ont un domaine de valeur variant de 0.0f à 1.0f. Cela fonctionne comme pour les valeurs de couleur utilisées lors de l'effacement de l'écran.

Nous règlons la couleur sur rouge (rouge complet, pas de composante verte ou bleue). La ligne de code qui suit va définir le premier sommet (angle supérieur du triangle) qui sera tracé en utilisant la couleur courante: le rouge. Tout ce qui sera tracé ensuite le sera en rouge, jusqu'à ce que nous changions de couleur.

Reglage de couleur et mis en place d'un point
Sélectionnez
      glColor3f(1.0f,0.0f,0.0f);        // Réglage de la couleur : rouge
      glVertex3f( 0.0f, 1.0f, 0.0f);    // Déplacement d'une unité vers le haut depuis le centre

Nous venons de définir le premier sommet sur l'écran en précisant sa couleur (rouge); Maintenant, et avant de définir le deuxième sommet, nous allons changer la couleur et prendre le vert. Ainsi, le second sommet qui sera le sommet gauche du triangle apparaitra en vert.

Reglage de couleur et mis en place d'un point
Sélectionnez
      glColor3f(0.0f,1.0f,0.0f);        // Réglage de la couleur : vert
      glVertex3f(-1.0f,-1.0f, 0.0f);    // Déplacement d'une unité vers le bas et la gauche

Au tour du troisième et dernier sommet. Avant de le tracer, nous changeons de couleur pour le bleu. Cela représentera le sommet de droite de notre triangle. Dès que la commande glEnd() aura été exécutée, le polygone sera rempli. Cependant, à cause de l'utilisation d'une couleur différente pour chaque sommet, au lieu d'obtenir un remplissage mono-couleur, chacune des couleurs va diffuser depuis son sommet, rencontrer les autres au centre et se mélanger. C'est la coloration par lissage.

Fin du dessin du triangle
Sélectionnez
      glColor3f(0.0f,0.0f,1.0f);          // Réglage de la couleur : bleu
      glVertex3f( 1.0f,-1.0f, 0.0f);       // Déplacement d'une unité vers la droite et en bas
   glEnd();                                // fin du tracé du Triangle
   glTranslatef(3.0f,0.0f,0.0f);           // depuis le point de droite, déplacement de 3 unités vers la droite

Maintenant, nous allons tracer un carré et le colorier uniformément en bleu. Il est important de se souvenir que tout ce qui est tracé après la définition d'une couleur le sera dans cette couleur. Chaque projet que vous créerez par la suite utilisera la coloration d'une manière ou d'une autre. Même dans les scènes où tout est à base de textures, glColor3f pourra quand même être utilisée pour modifier la couleur de ces textures. Nous aborderons ce point plus tard.

Revenons à notre carré d'une seule couleur. Tout ce que nous avons à faire est de déclarer la couleur (le bleu dans notre exemple), puis de tracer ce carré. La couleur bleue sera utilisée pour chaque sommet puisque nous n'aurons pas demandé à OpenGL le changement de couleur entre chaque sommet. Le résultat est... un carré tout bleu ! A nouveau, le carré (polygone) est dessiné dans le sens des aiguilles d'une montre, signifiant que nous avons commencé le tracé en regardant l'arrière du carré.

Dessin d'un carré bleu
Sélectionnez
   glColor3f(0.5f,0.5f,1.0f);         // unique définition de la couleur bleue
   glBegin(GL_QUADS);                 // début du tracé
      glVertex3f(-1.0f, 1.0f, 0.0f);  // à gauche et en haut d'une unité 
      glVertex3f( 1.0f, 1.0f, 0.0f);  // à droite et en haut d'une unité
      glVertex3f( 1.0f,-1.0f, 0.0f);  // à droite et en bas d'une unité
      glVertex3f(-1.0f,-1.0f, 0.0f);  // à gauche et en bas d'une unité
   glEnd();                           // le tracé est complet
   return TRUE;                       // on continue
}

Enfin, modification du code pour basculer du mode fenêtré vers le mode plein écran pour que le titre de la fenêtre soit correct.

Gestion du clavier
Sélectionnez
if (keys[VK_F1])            // Appui sur la touche F1 ?
   {
   keys[VK_F1]=FALSE;       // si oui, annulation de la touche enfoncée
   KillGLWindow();          // suppression de la fenêtre courante
   fullscreen=!fullscreen;  // bascule entre les mode plein écran et fenêtré
   
   // Re-création de notre fenêtre OpenGL ( Modifiée )
   if (!CreateGLWindow("Le Tutoriel sur la Couleur de NeHe",640,480,16,fullscreen))
      {
      return 0;             // Abandon si la fenêtre n'a pas été créée
      }
   }

Dans cette partie, j'ai essayé d'expliquer de façon détaillée, comment ajouter la coloration "à plat" ou par lissage aux polygones openGL. A vous d'expérimenter: essayez de changer les valeurs des composantes rouge, vert et bleu. Regardez quelles couleurs peuvent être obtenues. Si vous avez des commentaires ou des interrogations, merci de m'envoyer un mail. Si vous pensez qu'un commentaire est incorrect ou que certaines portions du code peuvent être améliorées, faites le moi savoir. Je désire produire le meilleur tutoriel possible sur OpenGL. Je suis donc intéressé par votre retour d'expérience.

Jeff Molofee ( NeHe )

III. Téléchargements

Compte tenu du nombre de versions de codes sources pour les tutoriels nehe, nous les laissons en anglais. En principe, si vous avez compris le code présenté dans ce tutoriel (et les tutoriels antérieurs), vous n'aurez pas de mal à le comprendre :

IV. Remerciements

Merci à MrDuChnok, à fearyourself et à wichtounet pour leur relecture.

V. Liens