Tutoriel OpenGL ES 2 - Le copain du triangle

Bonjour à tous !

Pour ce deuxième tutoriel de la suite consacrée à OpenGL ES sur iPhone, nous allons apprendre à dessiner des carrés et à mettre sur un même écran un carré et un triangle côte à côte...

Tout d'abord, reprendre ces sources ici pour partir sur de bonnes bases : sources

1) Dessinons ce carré

  1. Qu'est-ce qu'un carré ?

Définissons tout d'abord notre carré :

const GLfloat squareVertices[] = {
        -1.0, 1.0, -5.0,            // Haut gauche
        -1.0, -1.0, -5.0,           // Bas gauche
        1.0, -1.0, -5.0,            // Bas droit
        1.0, 1.0, -5.0              // Haut droit
    };

(commentez le triangle)
Notez que l'on est toujours dans le sens anti-horaire.

  2. Dessinons

Voici ce que vous devez écrire :

   

/*************** Debut du nouveau code ******************/
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    glVertexPointer(3, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    
    /*************** Fin du nouveau code ********************/

glVertexPointer(3, GL_FLOAT, 0, squareVertices);

Pas de changement, si ce n'est que nous souhaitons maintenant faire appel au tableau du carré.

glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

Le premier argument a changé par rapport au tuto 1 :
Parlons de ces modes de dessin :

GL_POINTS
GL_LINES
GL_LINE_LOOP
GL_LINE_STRIP
GL_TRIANGLES
GL_TRIANGLE_STRIP
GL_TRIANGLE_FAN


GL_TRIANGLE

Juste au passage, vertex = sommet...

Pour ce mode, OpenGL va interpréter comme suit :
dans le tableau, il va prendre, le premier point, dire que c'est le premier sommet. Ensuite, le deuxième sommet, puis le troisième sommet du triangle. Ensuite, il continue à parcourir le tableau pour créer de nouveaux triangles.

GL_TRIANGLE_STRIP

Ici, OpenGL prend les deux premiers sommets. Ensuite, il prend le sommet suivant et en fait un triangle. Puis il dessine un triangle en prenant le sommet suivant, et les deux précédents et ainsi de suite.

Premier triangle :

Ensuite,

GL_TRIANGLE_FAN

Après les deux premiers sommets, pour chaque sommet successif, OpenGL va former un triangle en prenant  le sommet précédant et le premier sommet. Ici, pour le deuxième triangle, il sera formé de squareVertices[0], squareVertices[2] et squareVertices[3].

Build & go, nous avons un carré !

Notez que si l'on écrit :

- (void)drawView {
    
    const GLfloat squareVertices[] = {
        -1.0, -1.0, -5.0,            // Haut gauche
        1.0, -1.0, -5.0,           // Bas gauche
        -1.0, 1.0, -5.0,            // Bas droit
        1.0, 1.0, -5.0              // Haut droit
    };
    
    [EAGLContext setCurrentContext:context];    
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    
    /*************** Debut du nouveau code ******************/
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    glVertexPointer(3, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    
    /*************** Fin du nouveau code ********************/ 
    
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

Nous avons également un carré.

En premier :

Puis

sources partie 1

2) Ajoutons lui un copain

  1. Modifions nos rectangles et carré

    // Def de notre triangle
    const GLfloat triangleVertices[] = {
        0.0, 1.0, 0.0,                    // Haut du triangle
        -1.0, -1.0, 0.0,                  // bas gauche
        1.0, -1.0, 0.0                    // bas droit
    };
    
    // def du carre
    const GLfloat squareVertices[] = {
        -1.0, 1.0, 0.0,            // Haut gauche
        -1.0, -1.0, -0.0,           // Bas gauche
        1.0, -1.0, 0.0,            // Bas droit
        1.0, 1.0, 0.0              // Haut droit
    };

  2. Transformations ? hum...

Avec OpenGL, il y a trois types de transformations :

- translation
- rotation
- échelle

Rappelez-vous ces cours de maths ! Géométrie dans l'espace et cie !
Comme dit dans le premier tuto, en mettant 0.0 dans les coordonnées en Z de vos points, vous ne voyez rien. En effet, votre oeil, la "caméra" est à l'origine de votre repère, c'est à dire au point de coordonnées (0.0, 0.0, 0.0). Le plan (X,Y) pour Z = 0.0 est l'écran de votre iPhone.
Ici, je vous demande de dessiner vos objets comme si ils étaient sur l'écran de l'iPhone. Ceci dans le but d'aider à dessiner. En effet, il est plus facile de voir un carré comme étant composé des points :
(1.0, 1.0, 0.0), (-1.0, 1.0, 0.0), (-1.0, -1.0, 0.0), (1.0, -1.0, 0.0)

que

(56.0, 40.0, 34.5), (54.0, 40.0, 34.5), (-54.0, 38.0, 34.5), (56.0, 38.0.0, 34.5)

non ?

Ensuite, on réalise une translation, de l'objet. C'est ce que nous allons voir ici :

glTranslatef(GLfloat x, GLfloat y, GLfloat z);

le f veut dire que nous utilisons des flottants.

il y a aussi

glTranslatex(GLfixed x, GLfixed y, GLfixed z);

Mais comme le processeur de l'iPhone gère les flottants, utililisons glTranslatef()

Nous allons devoir dire à OpenGL ce que nous allons translater. Soit notre vue (le monde) GL_PROJECTION, soit un objet dans ce monde GL_MODELVIEW.

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    glMatrixMode(GL_MODELVIEW);

Rappelez-vous, Open GL est une machine à états. Elle reste donc dans l'état où on la laisse. Ici, il serait préférable de mettre cette ligne de code dans notre setupView.

Ajoutez ensuite ce bout de code :

glLoadIdentity();
    glTranslatef(-1.5, 0.0, -5.0);
    glVertexPointer(3, GL_FLOAT, 0, triangleVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLES, 0, 3);

glLoadIdentity();

Fais une sorte de reset (retour à l'état précédent). Essayez de commenter cette ligne, votre carré se déplacera au loin ! Marrant non ?
Ben oui, rappelez vous, tout est dynamique, deux buffers qui s'alternent et tout !

Mais tu as dit carré ? Bizarre, je croyais que c'était le triangle que je déplaçais... Réfléchissez 2s, c'est facile...

On translate donc notre objet de -1.5 sur X, et -5.0 sur Z.

On ne veut pas superposer le triangle et le carré... Bougeons notre carré. Au final :

/*************** Debut du nouveau code ******************/
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    glMatrixMode(GL_MODELVIEW);
    
    glLoadIdentity();
    glTranslatef(-1.5, 0.0, -5.0);
    glVertexPointer(3, GL_FLOAT, 0, triangleVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    glLoadIdentity();
    glTranslatef(1.5, 0.0, -5.0);
    glVertexPointer(3, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    
    /*************** Fin du nouveau code ********************/

Pour la rotation autour de l'axe Z d'un angle de 45° :

/*************** Debut du nouveau code ******************/
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    glMatrixMode(GL_MODELVIEW);
    
    glLoadIdentity();
    glTranslatef(-1.5, 0.0, -5.0);
    glRotatef(45.0, 0.0, 0.0, 1.0); // ajouter cette ligne
    glVertexPointer(3, GL_FLOAT, 0, triangleVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    

    glLoadIdentity();
    glTranslatef(1.5, 0.0, -5.0);
    glVertexPointer(3, GL_FLOAT, 0, squareVertices);
    glEnableClientState(GL_VERTEX_ARRAY);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

C'est tout pour le moment. Allez faire un tour du côté des exercices !

sources

Ipodishima