Premier triangle et premier quadrilatère

Jeff Molofee (NeHe)

Traducteur

Mickaël Le Trocquer

Dans le premier tutoriel, je vous ai appris comment créer une fenêtre OpenGL. Dans ce tutoriel, je vais vous montrer comment créer des triangles et des rectangles. Nous allons dessiner un triangle en utilisant GL_TRIANGLES et un carré avec GL_QUADS. ♪

- Titre : Premier triangle et premier quadrilatère

- Auteur : Jeff Molofee (NeHe)

- Traducteur : Mickaël Le Trocquer

- 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

À partir du code du premier tutoriel, nous allons juste modifier la procédure DrawGLScene(). Je vais entièrement réécrire son code. Si vous vous basez sur la dernière leçon, vous pouvez remplacer la procédure DrawGLScene() par le code suivant, ou juste rajouter les lignes de codes qui n'existent pas dans le précédent tutoriel.

Début de la fonction DrawGLScene

int DrawGLScene(GLvoid)         // C'est ici que nous ferons tout le dessin
{
// Vide l'écran et le Z-Buffer (Depth Buffer : contient les informations de profondeur de chaque pixel )
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();         // Repositionne la caméra

Quand vous faites un appel à glLoadIdentity(), en fait vous revenez au centre de l'écran avec l'axe des X qui va de gauche à droite, l'axe des Y de haut en bas, et l'axe des Z qui va de l'intérieur vers l'extérieur de l'écran.

Le centre d'un écran défini par OpenGL est le point 0.0f sur les axes X et Y. À la gauche du centre, on trouvera les valeurs négatives. À la droite les valeurs positives. En allant vers le haut, ça sera positif, et en allant vers le bas ça sera négatif. En se dirigeant vers l'intérieur, c'est-à-dire en s'éloignant de l'observateur, il y aura les valeurs négatives, et en se rapprochant de l'observateur on rencontrera des valeurs positives.

glTranslatef(x, y, z) permet de bouger respectivement tout au long des axes X, Y et Z. La ligne de code ci-dessous permet de bouger de 1.5 unité sur l'axe des X vers la gauche. On ne bouge pas du tout sur l'axe des Y (0.0f), et on bouge vers l'intérieur de l'écran de 6.0 unités. Quand vous translatez, vous ne bougez pas à partir du centre de l'écran, mais bien à partir de là où vous êtes actuellement sur l'écran.

Translation

// Bouge de 1.5 unité vers la gauche et de 6.0 unités vers l'intérieur de l'écran
glTranslatef(-1.5f,0.0f,-6.0f);

Maintenant que nous avons bougé vers la moitié gauche de l'écran, et que nous avons bougé vers l'intérieur de l'écran de -6.0f, et que nous pouvons voir entièrement notre scène, nous allons créer le Triangle. glBegin(GL_TRIANGLES) signifie que nous voulons commencer à dessiner un triangle, et glEnd() indique à OpenGL que nous avons fini de créer le triangle. Si vous voulez trois points, utilisez GL_TRIANGLES (dessiner des triangles est assez rapide sur la plupart des cartes graphiques). Si vous voulez quatre points, utilisez GL_QUADS pour vous simplifier la vie. D'après ce que j'ai entendu, finalement, la plupart des cartes graphiques dessinent les objets sous forme de triangles de toute façon. Et si vous avez plus de quatre points, utilisez GL_POLYGON.

Dans notre petit programme, on dessine un seul triangle. Si nous voulions dessiner un second triangle, nous pourrions rajouter trois lignes de codes (correspondant à trois points) juste après nos trois premières lignes. Ainsi, nos six lignes de codes se trouveraient entre glBegin(GL_TRIANGLES) et glEnd(). Il n'y a aucune différence entre ce code et un code qui sépare le rendu des triangles avec les appels glBegin(GL_TRIANGLES) et glEnd() autour de chaque groupe de trois points. Ceci s'applique également pour les quadrilatères. Si vous savez que vous ne dessinez que des quadrilatères, vous pouvez inclure le second groupe de points juste après vos quatre premières lignes. Pour les polygones (GL_POLYGON), c'est différent, ils peuvent être composés d'autant de points que vous voulez, donc le nombre de lignes que vous avez entre glBegin(GL_POLYGON) et glEnd() n'a pas d'importance.

La première ligne après glBegin définit le premier point de notre polygone. Le premier nombre de la fonction glVertex est pour l'axe des X, le second nombre est pour l'axe des Y, et le troisième pour l'axe des Z. Donc dans notre première ligne de code, nous ne bougeons pas sur l'axe des X. Nous bougeons d'une unité sur l'axe des Y, et nous ne bougeons pas sur l'axe des Z. Ceci nous donne le point du haut de notre triangle. Le second glVertex bouge vers la gauche d'une unité sur l'axe des X, et d'une unité vers le bas sur l'axe des Y. Ceci nous donne le point en bas à gauche de notre triangle. Le troisième glVertex bouge vers la droite d'une unité, et vers le bas d'une unité. Ceci nous donne le point en bas à droite de notre triangle. glEnd() indique à OpenGL qu'il n'y a pas de point supplémentaire. Le triangle rempli va s'afficher.

Dessiner un triangle

glBegin(GL_TRIANGLES);        // Dessiner un Triangle
glVertex3f( 0.0f, 1.0f, 0.0f);    // Point du haut
glVertex3f(-1.0f,-1.0f, 0.0f);    // Point en bas à gauche
glVertex3f( 1.0f,-1.0f, 0.0f);    // Point en bas à droite
glEnd();                        // Le dessin du Triangle est fini

Maintenant que nous avons un triangle d'affiché sur la moitié gauche de l'écran, nous allons bouger vers la partie droite de l'écran pour afficher le carré. Pour ce faire nous allons encore utiliser la fonction glTranslate. Cette fois-ci, nous devons bouger vers la droite, donc X doit être une valeur positive. Comme nous avons déjà bougé à gauche de 1.5 unité, pour retourner au centre, nous devons nous déplacer de 1.5 unité vers la droite. Après avoir rejoint le centre, nous avons encore à bouger de 1.5 unité à droite du centre. Donc au total, nous devons faire un déplacement de 3.0 unités vers la droite.

Translation vers la droite

glTranslatef(3.0f,0.0f,0.0f);     // Bouge de 3.0f unités vers la droite

Maintenant nous allons créer le carré. Pour ce faire nous utiliserons GL_QUADS. Un quadrilatère est un polygone à quatre côtés. Parfait pour créer un carré. Le code pour créer un carré est très similaire au code pour dessiner un triangle. La seule différence est que l'on utilise GL_QUADS au lieu de GL_TRIANGLES, et que nous rajoutons un appel supplémentaire à glVertex3f pour le quatrième point du carré. Nous allons dessiner les points du carré dans l'ordre en haut à gauche, puis en haut à droite, ensuite en bas à droite, et enfin en bas à gauche (sens des aiguilles d'une montre). En dessinant dans ce sens, le carré sera dessiné comme une face arrière. Dans notre cas, cela voudra dire que nous verrons l'arrière de notre carré. Les objets dessinés dans le sens inverse des aiguilles d'une montre nous feront face. Pour l'instant ce n'est pas important, mais plus tard vous devez y faire attention.

Dessiner un quadrilatère

glBegin(GL_QUADS);            // Dessin d'un quadrilatère
glVertex3f(-1.0f, 1.0f, 0.0f);    // Haut Gauche
glVertex3f( 1.0f, 1.0f, 0.0f);    // Haut Droite
glVertex3f( 1.0f,-1.0f, 0.0f);    // Bas Droite
glVertex3f(-1.0f,-1.0f, 0.0f);    // Bas Gauche
glEnd();                // Fin du dessin du rectangle
return TRUE;                        // On sort de la fonction
}

Enfin, on change le code pour passer d'une application fenêtrée à une application plein écran de sorte que le titre en haut de la fenêtre soit le bon.

Pensez également à changer le titre sous // Créer votre fenêtre OpenGL (juste en dessous). Autrement le mode plein écran aura un titre différent du mode fenêtré.

Gestion du clavier

if (keys[VK_F1])            // Est ce que F1 a été pressé ?
{
keys[VK_F1]=FALSE;        // Si Oui, on le repositionne à False
KillGLWindow();            // On détruit notre fenêtre courante
fullscreen=!fullscreen;        // On change de mode

// Recréer votre fenêtre OpenGL ( Modifié )
if (!CreateGLWindow("Le premier tutoriel de NeHe sur les polygones",640,480,16,fullscreen))
{
return 0;        // On quitte si la fenêtre ne s'est pas créée
}
}

Markus Knauer ajoute: Dans le livre (« OpenGL Programming Guide: The Official Guide to Learning OpenGL, Release 1 », J. Neider, T. Davis, M. Woo, Addison-Wesley, 1993) le paragraphe suivant explique clairement ce que Nehe veut dire quand il fait référence aux unités pour les mouvements sous OpenGL.

[Je dis] pouces et millimètres - Est-ce que ceci à réellement à voir avec OpenGL ? La réponse est, en un mot, non. La projection et les autres transformations se font sans unité. Si vous voulez penser que le plan de devant ou du fond est situé à 1.0 et 20.0 mètres, pouces, kilomètres, c'est comme vous voulez. La seule chose qui compte c'est de vous y tenir en respectant les unités.

Dans ce tutoriel j'ai essayé de vous expliquer avec le plus de détails possible, chacune des étapes nécessaires pour dessiner des polygones et des quadrilatères à l'écran en utilisant OpenGL. Si vous avez des commentaires ou des questions, envoyez-moi un e-mail. Si vous pensez que j'ai mal commenté quelque chose ou que le code choisi pourrait être amélioré dans certaines parties, faites-le-moi savoir. Je veux faire les meilleurs tutoriels OpenGL que je peux. Je serai ravi de vos retours.

Enfin, voici une petite image de ce que vous devez voir :

Image de l'application

Jeff Molofee ( NeHe )

III - Téléchargements

Compte tenu du nombre de versions de codes source 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)

- 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 Travis Wells)

- QT/C++ (Conversion par Popeanga Marian)

- REALBasic (Conversion par Thomas J. Cunningham)

- Ruby (Conversion par Ben Goodspeed)

- Scheme (Conversion par Jon DuBois)

- Solaris (Conversion par Lakmal Gunasekara)

- Visual Fortran (Conversion par Jean-Philippe Perois)

- Visual Studio

- VB.NET CsGL (Conversion par X)

- Visual Studio NET (Conversion par Grant James)

IV - Remerciements

Merci à Laurent Gomila, khayyam90 et wichtounet pour leur relecture.

V - Liens

Sommaire

Tutoriel précédent : Introduction

Tutoriel prochain : Coloration