![Page 1: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/1.jpg)
Programmation des logiciels infographiques interactifs 2D et 3D,
et le OpenGL
![Page 2: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/2.jpg)
Images synthètiques de haute qualité
![Page 3: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/3.jpg)
Caustiques
![Page 4: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/4.jpg)
Image synthètique de haute qualité
![Page 5: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/5.jpg)
• Les images précédentes contiennent des ombres douces, reflets spéculaires et diffus, réfractions, etc.
• Ces images sont habituellement– générées avec du « backward rendering », par
exemple, le lancer de rayon (« ray tracing »), où on part de chaque pixel et on détermine la contribution des objets dans la scène à sa couleur
– générées entièrement sur le CPU, en traitant chaque pixel individuellement
– très couteuses, en temps, à générer
![Page 6: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/6.jpg)
Le « Forward Rendering »
• Des images de plus basse qualité peuvent être générées avec du « forward rendering », où on part des objets dans la scène et on détermine quels pixels ils recouvrent
• Cela est souvent plus rapide et, aujourd’hui, est supporté au niveau matériel par les GPUs
• Exemples …
![Page 7: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/7.jpg)
Fil de fer (« wireframe »)
![Page 8: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/8.jpg)
Maillage (« mesh ») de polygones
Fil de fer avec les « back faces »
Fil de fer sans les « back faces »
Polygones remplis
![Page 9: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/9.jpg)
Dans le « forward rendering » …Comment enlever les polygones cachés ?• 1. « clipping »: on ne dessine pas les polygones hors de la
vue de la caméra• 2. « backface culling »: on ne dessine pas les polygones
qui sont des « faces arrière »(face arrière = pas orienté vers la caméra)
• 3. on enlève les « faces avant » qui sont cachées par d’autres faces avant. Deux stratégies:– L’algorithme du peintre (« Painter’s algorithm »): on trie et on
dessine les polygones, en ordre de profondeur, de l’arrière vers l’avant
– Tampon de profondeur (« depth buffer » ou « z-buffer »)
À retenir!
![Page 10: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/10.jpg)
�⃑�=�⃑�12× �⃑�
23
𝑝𝐶
𝑣 23=𝑝3−𝑝2
𝑣12=𝑝2−𝑝1
𝑝3
𝑝2
𝑝1
𝑣𝐶
position et direction de la caméra
![Page 11: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/11.jpg)
�⃑�=�⃑�12× �⃑�
23
𝑣23
�⃑�𝑣12
𝑝𝐶
𝑣 23=𝑝3−𝑝2
𝑣12=𝑝2−𝑝1
𝑝3
𝑝2
𝑝1
𝑣𝐶
position et direction de la caméra
![Page 12: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/12.jpg)
�⃑�=�⃑�12× �⃑�
23
𝑣23
�⃑�𝑣12
𝑝𝐶
𝑣 23=𝑝3−𝑝2
𝑣12=𝑝2−𝑝1
𝑝3
𝑝2
𝑝1
face avant
face arrière
𝑣𝐶
�⃑�
position et direction de la caméra
𝑝𝐶𝑣𝐶
�⃑�
Règles approximatives :
Facearrière
Faceavant
![Page 13: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/13.jpg)
�⃑�=�⃑�12× �⃑�
23
𝑣23
�⃑�𝑣12
𝑝𝐶
𝑣 23=𝑝3−𝑝2
𝑣12=𝑝2−𝑝1
𝑝3
𝑝2
𝑝1
𝑣𝐶
�⃑�
position et direction de la caméra
𝑝𝐶 �⃑�
Règles exactes :
face avant
face arrière
(𝑝1−𝑝𝐶)
(𝑝1−𝑝𝐶)
Face arrière
Face avant
À retenir!
![Page 14: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/14.jpg)
Dans le « forward rendering » …Comment enlever les polygones cachés ?• 1. « clipping »: on ne dessine pas les polygones hors de la
vue de la caméra• 2. « backface culling »: on ne dessine pas les polygones
qui sont des « faces arrière »(face arrière = pas orienté vers la caméra)
• 3. on enlève les « faces avant » qui sont cachées par d’autres faces avant. Deux stratégies:– L’algorithme du peintre (« Painter’s algorithm »): on trie et on
dessine les polygones, en ordre de profondeur, de l’arrière vers l’avant
– Tampon de profondeur (« depth buffer » ou « z-buffer »)
![Page 15: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/15.jpg)
L’algorithme du peintre À retenir!
![Page 16: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/16.jpg)
Un problème pourl’algorithme du peintre:
![Page 17: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/17.jpg)
Une approche plus simple, mais plus couteuse en mémoire:
le tampon de profondeur(« depth buffer » ou « z-buffer »)
À retenir!
![Page 18: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/18.jpg)
![Page 19: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/19.jpg)
![Page 20: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/20.jpg)
![Page 21: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/21.jpg)
![Page 22: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/22.jpg)
![Page 23: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/23.jpg)
Silicon Graphics Inc.
![Page 24: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/24.jpg)
La série des machines IRIS de SGI
Indigo OnyxIndy
• IRIS = Integrated Raster Imaging System• Système d’exploitation: IRIX (IRIS UNIX)
![Page 25: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/25.jpg)
O2 Octane
![Page 26: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/26.jpg)
Tezro et Onyx4Visual Workstation
![Page 27: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/27.jpg)
OpenGL• Descendant de IRIS GL, de SGI• Permet d’accéder au matériel graphique et de
faire du « forward rendering » très rapide, enlevant du travail du CPU et le donnant au GPU
• Portable, contrairement auDirect X / Direct 3D de Microsoft
• Un API en C (et accessible depuis Java via JOGL)• Ne nécessite pas de matériel graphique
(exemple: la librarie Mesa implemente le API de OpenGL entièrement au niveau logiciel)
![Page 28: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/28.jpg)
OpenGL (suite)
• Comme le OpenGL est portable, on peut, par exemple, réaliser le rendu de toute notre interface (même les widgets) en l’utilisant
• Exemples: les libraries multi-plateformeGLOW, GLUI, et CEGUI
![Page 29: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/29.jpg)
GLOWhttp://glow.sourceforge.net/
![Page 30: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/30.jpg)
GLUI
http://www.cs.unc.edu/~rademach/glui/
![Page 31: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/31.jpg)
CEGUI - Crazy Eddie’s GUIPour les jeux vidéo
http://www.youtube.com/watch?v=iXsZh1owpBI
![Page 32: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/32.jpg)
OpenGL (suite)
• Certaines fonctionnalités de OpenGL dont on ne discutera pas:– Le lissage et l’éclairage (« shading » et « lighting »)– Les textures– Les « display lists »– Comment rendre des courbes– Les « vertex shaders » et « fragment shaders »
![Page 33: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/33.jpg)
Dessiner des triangles en OpenGL… setup camera view …
glBegin( GL_TRIANGLES );glColor3f( 1, 0, 0 );glVertex3f( 0, 0, 0 );glVertex3f( 0.5f, 0, 0 );glVertex3f( 0, 1, 0 );
glVertex3f( 0, 0, 0.1f );glVertex3f( 0.5f, 0, 0.1f );glVertex3f( 0, 1, 0.1f );
glColor3f( 0, 1, 0 );glVertex3f( 0, 0, 0.2f );glVertex3f( 0.5f, 0, 0.2f );glVertex3f( 0, 1, 0.2f );
glEnd();
2 triangles rouges
1 triangle vert
![Page 34: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/34.jpg)
Remarques
• Le préfixe "gl" au début des noms des routines (ou, parfois, "glu" ou "glut" pour les routines des libraries GLU et GLUT, qui sont souvent utilisées avec le OpenGL)
• Indentation de code entre les appels au glBegin() et glEnd() – ce n’est pas obligatoire, mais ça aide à rendre le code plus lisible
![Page 35: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/35.jpg)
Dessiner des triangles en OpenGL… setup camera view …
glBegin( GL_TRIANGLES );glColor3f( 1, 0, 0 );glVertex3f( 0, 0, 0 );glVertex3f( 0.5f, 0, 0 );glVertex3f( 0, 1, 0 );
glVertex3f( 0, 0, 0.1f );glVertex3f( 0.5f, 0, 0.1f );glVertex3f( 0, 1, 0.1f );
glColor3f( 0, 1, 0 );glVertex3f( 0, 0, 0.2f );glVertex3f( 0.5f, 0, 0.2f );glVertex3f( 0, 1, 0.2f );
glEnd();
![Page 36: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/36.jpg)
Remarques (suite)• Le OpenGL est une machine à états
– Chaque appel à glColor3f() a un effet sur la couleur utilisée dans les appels suivants à glVertex3f()
• Chaque appel à glBegin() doit être suivi d’un appel à glEnd() pour terminer le bloc.
• À l’intérieur des blocs glBegin()-glEnd(), il y a seulement certaines routines OpenGL qu’on peut appeler, comme glVertex*(), glColor*(), pour émettre des sommets.
• À l’extérieur des blocs glBegin()-glEnd(), il y a bien d’autres routines OpenGL qu’on peut appeler, pour effectuer des transformations, configuration des options de rendu, etc.
À retenir!
![Page 37: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/37.jpg)
En Java, avec JOGL …GL gl = ...;
… setup camera view …
gl.glBegin( GL.GL_TRIANGLES );gl.glColor3f( 1, 0, 0 );gl.glVertex3f( 0, 0, 0 );gl.glVertex3f( 0.5f, 0, 0 );gl.glVertex3f( 0, 1, 0 );
gl.glVertex3f( 0, 0, 0.1f );gl.glVertex3f( 0.5f, 0, 0.1f );gl.glVertex3f( 0, 1, 0.1f );
gl.glColor3f( 0, 1, 0 );gl.glVertex3f( 0, 0, 0.2f );gl.glVertex3f( 0.5f, 0, 0.2f );gl.glVertex3f( 0, 1, 0.2f );
gl.glEnd();
![Page 38: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/38.jpg)
Remarques (suite)
• L’argument passé à glBegin() identifie les primitives qu’on veut dessiner dans le bloc glBegin()-glEnd()
• Exemples:– glBegin( GL_TRIANGLES );– glBegin( GL_QUADS );– glBegin( GL_LINES );– …
À retenir!
![Page 39: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/39.jpg)
Primitives de rendu de OpenGL
![Page 40: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/40.jpg)
![Page 41: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/41.jpg)
Quelques suffixes …• 2f, 3f, 4f : pour passer 2, 3, ou 4 coordonnées• 3i, 3f, 3d : pour passer des entiers, float, ou
double• 3fv : pour passer un tableau de 3 coordonnées• Exemples:
glVertex3f(x,y,z);glVertex2d(x,y);glVertex3fv(floatArray);glVertex2iv(intArray);
À retenir!
![Page 42: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/42.jpg)
Dessiner des triangles en OpenGL… setup camera view …
glBegin( GL_TRIANGLES );glColor3f( 1, 0, 0 );glVertex3f( 0, 0, 0 );glVertex3f( 0.5f, 0, 0 );glVertex3f( 0, 1, 0 );
glVertex3f( 0, 0, 0.1f );glVertex3f( 0.5f, 0, 0.1f );glVertex3f( 0, 1, 0.1f );
glColor3f( 0, 1, 0 );glVertex3f( 0, 0, 0.2f );glVertex3f( 0.5f, 0, 0.2f );glVertex3f( 0, 1, 0.2f );
glEnd();
![Page 43: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/43.jpg)
(voir notes de cours pourla suite de la discussion)
![Page 44: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/44.jpg)
…
![Page 45: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/45.jpg)
L’exemple de SimpleModeller.java
![Page 46: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/46.jpg)
class ColoredBoxclass Scene Vector< ColoredBox > coloredBoxes = …; drawScene()class SceneViewer Scene scene = …; RadialMenuWidget radialMenu = …; display() mousePressed() mouseReleased() mouseMoved() mouseDragged()class SimpleModeller actionPerformed() createUI() main()
class CustomWidget pressEvent() releaseEvent() moveEvent() dragEvent() draw()
class RadialMenuWidget …
RadialMenuWidget.java
SimpleModeller.javaCustomWidget.java
![Page 47: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/47.jpg)
JMenuBar menuBar
JMenu("File")
JMenu("Help")
JMenuItem(“Delete All")
JMenuItem(“Quit")
JFrame frame
Container toolPanel SceneViewer sceneViewer
JButton(“Create Box”)
… JCheckBox(“Display World Axes")
RadialMenuWidgetJMenuItem(“About")
…
![Page 48: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/48.jpg)
Rendu dans le tampon de couleur
• À chaque fois qu’on veut mettre à jour l’image affichée (exemple: dessiner un nouveau « frame » dans une animation), si on efface le contenu du tampon de couleur et on le redessine, cela peut créer un effet de clignotement (« flicker »), surtout si le rendu prend longtemps, car la fenêtre affiche une image noire ou seulement partiellement dessinée pendant le redessinement.
À retenir!
![Page 49: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/49.jpg)
« Double buffered rendering »
• Normalement, on a assez de mémoire sur la carte graphique pour avoir deux tampons de couleur:– Tampon avant (« front buffer »)
• Stocke l’image en cours d’affichage– Tampon arrière (« back buffer »)
• Tampon de travail
À retenir!
![Page 50: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/50.jpg)
« Double buffered rendering » (suite)
• Lorsqu’on veut mettre à jour l’image, on efface le contenu du tampon arrière, on dessine dans le tampon arrière, et on effectue un échange (« swap ») des tampons qui est très rapide– glutSwapBuffers();
À retenir!
![Page 51: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/51.jpg)
glClear()
glClear()Pourcentage de frame rendu et visible
Temps
Frame 1 Frame 2 Frame 3 Frame 4
Pourcentage de frame rendu dans le tampon arrière
Temps
Frame 1 Frame 2 Frame 3 Frame 4
Pourcentage de frame visible dans le tampon avant
Temps
Frame 1 Frame 2 Frame 3
Un seul tampon :
Double buffered rendering :
swap
À retenir!
![Page 52: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/52.jpg)
Les tampons formantle « frame buffer »
• Tampon de couleur (« color buffer »)– Tampon avant (« front buffer »)
• Stocke l’image en cours d’affichage– Tampon arrière (« backbuffer »)
• Tampon de travail
• Tampon de profondeur (« depth buffer »)• « Stencil buffer »• « Accumulation buffer »• Etc.
![Page 53: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/53.jpg)
Esquisse de codeglMatrixMode( GL_PROJECTION );glLoadIdentity();… setup camera view …glMatrixMode( GL_MODELVIEW );glLoadIdentity();
glClear( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );glDepthFunc( GL_LEQUAL );glEnable( GL_DEPTH_TEST );glEnable( GL_CULL_FACE );glFrontFace( GL_CCW );glDisable( GL_LIGHTING );glShadeModel( GL_FLAT );
glBegin( GL_TRIANGLES ); glColor3f( 1, 0, 0 ); glVertex3f( 0, 0, 0 ); glVertex3f( 0.5f, 0, 0 ); glVertex3f( 0, 1, 0 );
glVertex3f( 0, 0, 1 ); glVertex3f( 0.5f, 0, 1 ); glVertex3f( 0, 1, 1 );
glColor3f( 0, 1, 0 ); glVertex3f( 0, 0, 2 ); glVertex3f( 0.5f, 0, 2 ); glVertex3f( 0, 1, 2 );glEnd();glBegin( ... ); ...glEnd();...glutSwapBuffers();
![Page 54: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/54.jpg)
Rendu stéréo: « Quad buffering »
• Dans ce cas, il y a quatre tampons de couleur:– Gauche, avant– Gauche, arrière– Droit, avant– Droit, arrière
• Question: est-ce que juste trois tampons de couleur seraient suffisant ?
À retenir!
![Page 55: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/55.jpg)
![Page 56: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/56.jpg)
x
y
x
y
x
y
drawFace()
rotate(45*radiansParDegre)translate(10,0)drawFace()
translate(10,0)rotate(45*radiansParDegre)drawFace()
![Page 57: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/57.jpg)
![Page 58: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/58.jpg)
Exemples de questionsde quiz ou d’examen
![Page 59: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/59.jpg)
À retenir!
Pour chacun des cubes A, B, et C, quelle méthode sert à enlever la partie cachée du cube dans le rendu final? (Supposez que les cubes sont opaques.)Réponses possibles: clipping, backface culling, tampon de profondeur, algorithme du peintre.
![Page 60: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/60.jpg)
Pourquoi utilise-t-on un tampon arrière ("backbuffer"), en plus d'un tampon avant, pour faire du rendu de polygones avec OpenGL ? a) Ça permet de redessiner la scène plus souvent et d’augmenter le nombre de "frames per second".b) Ça permet d'utiliser moins de mémoire.c) Ça permet de faire du rendu en stéréo.d) Ça élimine le clignotement lors du redessinement.e) Aucune de ces réponses
À retenir!
![Page 61: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/61.jpg)
class ... { int indexOfRectangleUnderMouse = -1; // -1 pour aucune ... Graphics myGraphics = null; ... // Cette méthode est appelée quand il faut redessiner la fenêtre. public void display( Graphics g ) { myGraphics = g; // pour s'en rappeler drawRectangles(); } private void drawRectangles() { // Dessine les rectangles, mettant en surbrilliance // le rectangle dont l'indice est "indexOfRectangleUnderMouse". // Utilise myGraphics pour choisir des couleurs et dessiner des rectangles. ... } // Cette méthode est appelée quand la souris est déplacée. // Version 1: public void mouseMoved( MouseEvent e ) { indexOfRectangleUnderMouse = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); drawRectangles(); // redessine immédiatement } // Version 2: public void mouseMoved( MouseEvent e ) { indexOfRectangleUnderMouse = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); repaint(); // demande la génération d'un événement de redessinement } // Version 3: public void mouseMoved( MouseEvent e ) { int newIndexOfRectangle = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); if ( newIndexOfRectangle != indexOfRectangleUnderMouse ) { indexOfRectangleUnderMouse = newIndexOfRectangle; repaint(); // demande la génération d'un événement de redessinement } } // Version 4: public void mouseMoved( MouseEvent e ) { int newIndexOfRectangle = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); if ( newIndexOfRectangle != indexOfRectangleUnderMouse ) { indexOfRectangleUnderMouse = newIndexOfRectangle; drawRectangles(); // redessine immédiatement } }}
Imaginez une scène 2D de rectangles où on veut dessiner le rectangle en dessous du curseur en surbrilliance ("highlighted"). La méthode mouseMoved() dans la classe ci-dessous doit mettre à jour cet effet de surbrillance. Parmi les quatre (4) versions de la méthode mouseMoved() données, laquelle est la meilleure ?
À retenir!
![Page 62: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/62.jpg)
... // Cette méthode est appelée quand la souris est déplacée. // Version 1: public void mouseMoved( MouseEvent e ) { indexOfRectangleUnderMouse = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); drawRectangles(); // redessine immédiatement } // Version 2: public void mouseMoved( MouseEvent e ) { indexOfRectangleUnderMouse = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); repaint(); // demande la génération d'un événement de redessinement } // Version 3: public void mouseMoved( MouseEvent e ) { int newIndexOfRectangle = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); if ( newIndexOfRectangle != indexOfRectangleUnderMouse ) { indexOfRectangleUnderMouse = newIndexOfRectangle; repaint(); // demande la génération d'un événement de redessinement } } // Version 4: public void mouseMoved( MouseEvent e ) { int newIndexOfRectangle = scene.getIndexOfRectangleContainingPoint( e.getX(), e.getY() ); if ( newIndexOfRectangle != indexOfRectangleUnderMouse ) { indexOfRectangleUnderMouse = newIndexOfRectangle; drawRectangles(); // redessine immédiatement } }
![Page 63: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/63.jpg)
Soit les trois sommets P1, P2, P3 d'un triangle, en ordre sens anti-horaire (c.-à-d. qu'un observateur qui regarde l'avant du triangle voit les sommets P1, P2, P3 former un cycle en sens anti-horaire). Quelle formule permet de trouver le vecteur normal «n» du triangle (vecteur perpendiculaire au plan du triangle)? Supposons que le vecteur «n» calculé n'a pas besoin d'être unitaire.
a) n = (P3-P1)|P2-P1|/|P3-P2|b) n = max( |P2-P1|, |P3-P2| )c) n = (P2-P1) • (P3-P2)d) n = (P2-P1) × (P3-P2)
À retenir!
![Page 64: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/64.jpg)
Soit le centre P=(P1+P2+P3)/3 du triangle, le centre C de la caméra, et le vecteur «v» de vue (orienté vers l'avant de la caméra). Quelle expression est vraie si le triangle est une face arrière ("back face")?
a) n • v > 0b) n • v = 0c) n × v > 0d) n × v = 0e) n • (P-C) > 0f) (n-v) • v > 0g) max(|n|,|v|) > |n-v|
À retenir!
![Page 65: Programmation des logiciels infographiques interactifs 2D et 3D, et le OpenGL](https://reader035.vdocuments.site/reader035/viewer/2022070423/5681673e550346895ddbf0a9/html5/thumbnails/65.jpg)
Transformez le point p avec les coordonnées homogènes (a,b,c,1) en utilisant la matrice M indiquée. Donnez les coordonnées homogènes du point p' qui en résulte. [1 0 0 k] M = [0 1 0 0] [0 0 1 k] [0 0 0 1] [1 0 0 k] [a]p' = M p = [0 1 0 0] [b] = [0 0 1 k] [c] [0 0 0 1] [1] La matrice M dans la question précédente est quelle sorte de matrice ?
À retenir!