Coloration

Jeff Molofee (NeHe)

Traducteur

qi130

Dans la leçon précédente, je vous ai montré comment afficher des triangles ou des polygones à l'écran. Dans la présente leçon, nous verrons deux possibilités de coloration pour un triangle ou un polygone. La coloration « à plat » permettra au polygone d'être uniformément colorié. La coloration « par lissage » permettra de mêler, pour chaque point du triangle, les trois couleurs de base afin d'obtenir un harmonieux mélange de couleurs. ♪

- Titre : Coloration

- Auteur : Jeff Molofee (NeHe)

- Traducteur : qi130

- Parution : 23 mars 2007

- Mise à jour : 19 décembre 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2007 Nehe Gamedev.net. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Contributions

- II. Tutoriel

- III. Téléchargements

- IV. Remerciements

- V. Liens

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

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

Réglage de couleur et mise en place d'un point

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.

Réglage de couleur et mise en place d'un point

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 monocouleur, 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

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 ! À 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

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

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 modes plein écran et fenêtré

// Recré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. À 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 :

- ASM (Conversion par Foolman)

- BeOS (Conversion par Rene Manqueros)

- Borland C++ Builder 6 (Conversion par Christian Kindahl)

- C# (Conversion par Joachim Rohde)

- Code Warrior 5.3 (Conversion par Scott Lupton)

- CygWin (Conversion par Stephan Ferraro)

- D (Conversion par Familia Pineda Garcia)

- Delphi (Conversion par Michal Tucek)

- Dev C++ (Conversion par Dan)

- Euphoria (Conversion par Evan Marshall)

- Game GLUT (Conversion par Milikas Anastasios)

- GLUT (Conversion par Andy Restad)

- Irix (Conversion par Lakmal Gunasekara)

- Java (Conversion par Jeff Kirby)

- Java/SWT (Conversion par Victor Gonzalez)

- Jedi-SDL (Conversion par Dominique Louis)

- JOGL (Conversion par Kevin J. Duling)

- LCC Win32 (Conversion par Robert Wishlaw)

- Linux (Conversion par Richard Campbell)

- Linux GLX (Conversion par Mihael Vrbanec)

- Linux SDL (Conversion par Ti Leggett)

- LWJGL (Conversion par Mark Bernard)

- Mac OS (Conversion par Anthony Parker)

- Mac OS X/Cocoa (Conversion par Bryan Blackburn)

- MASM (Conversion par Nico (Scalp))

- Pelles C (Conversion par Pelle Orinius)

- Perl (Conversion par Cora Hussey)

- Power Basic (Conversion par Angus Law)

- Python (Conversion par John Ferguson)

- REALBasic (Conversion par Thomas J. Cunningham)

- Scheme (Conversion par Jon DuBois)

- Solaris (Conversion par Lakmal Gunasekara)

- VB.NET CsGL (Conversion par X)

- Visual Basic (Conversion par Ross Dawson)

- Visual Fortran (Conversion par Jean-Philippe Perois)

- Visual Studio

- Visual Studio NET (Conversion par Grant James)

IV - Remerciements

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

V - Liens

Sommaire

Tutoriel précédent : Premier triangle et quadrilatère

Tutoriel prochain : Rotations