IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Premier triangle et premier quadrilatère

Image non disponible

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

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

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
Sélectionnez
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
Sélectionnez
    // 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
Sélectionnez
    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
Sélectionnez
    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
Sélectionnez
    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
Sélectionnez
    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
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 :

IV. Remerciements

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

V. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

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