Exemples d applications. Qu est ce que l Informatique Graphique? Infographie 2D pour l interaction. Introduction

Transcription

1 Infographie 2D pour l interaction Stéphane Conversy ENAC - stephane.conversy@enac.fr Introduction Éléments: Nicolas Roussel, Projet InSitu, Université Paris-Sud Qu est ce que l Informatique Graphique? Exemples d applications Modélisation structures de données pour la représentations de scènes 2D ou 3D Rendu construction d images 2D à partir de modèles 2D ou 3D Affichage d informations cartographie données statistiques imagerie médicale visualisation scientifique (biologie, mécanique, etc.) Animation simulation de changements au cours du temps Interaction avec un ou plusieurs utilisateurs MillionVis, J-D Fekete & C. Plaisant, HCIL University of Maryland, 2002

2 Exemples d applications Exemples d applications Simulation et animation Conception poignées de portes voitures architecture VLSI CATIA (Prost Grand Prix) simulateurs de conduite, de vol, d assemblage dessins animés, films jeux (marché supérieur au cinéma) œuvres d art "Toy Story 2", Disney / Pixar, 1999 Flight simulator, Microsoft, 2002 "Star Wars Episode II", Lucasfilm, 2002 "Impressions of San Francisco» P. Litwinowicz, Apple Computer, SIGGRAPH 97 DataCAD Exemples d applications Quels sont les problèmes que l on se e? Que veut-on afficher? Primitives graphiques Formes, transparence, transformation, style Comment les afficher? Algorithmes Tracé, remplissage, transparence Comment s en servir? Outils, API Photoshop/Illustrator, opengl, svg Qu est-on capable d afficher pour l interaction? Services pour l interaction Performances

3 Exemple 1: discrétisation de ligne par point médian But: allumer les pixels les plus proches d une ligne passant par deux pixels donnés (discrétisation ou rasterisation) Exemples d algorithmes fondamentaux (x1,y1) 1er octant (x0,y0) Une première approche Point Médian y = ax+b a = (y1-y0)/(x1-x0) b = y0 Pour x = x0 à x1: y = arrondi(ax+b) allumerpixel(x,y) À chaque itération calculs en virgule flottante calculs d arrondi Points médians

4 Solution à base de point médian Equation implicite de la droite: F(x,y) = ax + by + c a = (y1-y0) b = (x0-x1) c = y0 Propriétés: F(xi,yi) > 0 : point (xi,yi) en dessous de la droite F(xi,yi) = 0 : point (xi,yi) appartient à la droite F(xi,yi) < 0 : point (xi,yi) au dessus de la droite Algorithme du point médian Après avoir choisi un pixel (xi,yi), calculer la ition du point médian suivant (xi+1, yi+ 1/2), et décider du prochain pixel à allumer (xi,yi) (xi+1,yi+ 1/2) (xi,yi) (xi+1,yi+ 1/2) E NE (xi+1,yi+ 1/2) (xi,yi) Calculs préliminaires Algorithme du point médian Position du point médian correspondant à (xi,yi): di = F(xi+1,yi+1/2) : «valeur de décision» Calcul incrémental : si choix E: d i+1 = F(xi+2, yi+1/2) = d i + a incre= a si choix NE: d i+1 = F(xi+2, yi+3/2) = d i + a+b incrne=a+b d 0 = F(x0+1,y0+1/2) = F(x0,y0)+a+b/2 = a+b/2 Choix E ou NE, test du signe d>0?! 2d>0 On recalcule les incréments: incre = 2a incrne = 2(a+b) a = y1-y0 b = x0-x1 d = 2a+b incre = 2a incrne = 2(a+b) x = x0 y = y0 Tant que x<=x1: allumerpixel(x,y) ++x si d <= 0: d += incre sinon: d+=incrne; ++y Calcul en entiers! Que des additions!

5 Exemple 2: tesselation d une courbe de Bézier Tesselation Définie par 4 points: P0 et P3 extrémités P1 et P2 définissent les tangentes aux extrémités P0 P2 Rastérisation passage du continu au discret Ex: la ligne analytique -> ensemble de pixels P P1 B(t) = [t 3 t 2 t 1] P P3 x(t) = (-x0+3x1-3x2+x3) t 3 + (3x0-6x1+3x2) t 2 + (-3x0+3x1)t + x0 y(t) = (-y0+3y1-3y2+y3) t 3 + (3y0-6y1+3y2) t 2 + (-3y0+3y1)t + y0 ou B(t) = (1- t) 3 P0 + 3t(1-t) 2 P1 + 3t 2 (1-t)P2 + t 3 P3 Polynômes de Bernstein P1 P3 Tesselation: Remplissage d un plan par des formes qui ne se superent pas et sans trou Ex: passage d une surface continue à une représentation par parties Bezier - > segments de lignes «vectorisation» Analytique -> Tesselation -> Rastérisation 1ère Méthode: méthode itérative Algo itératif Principe: évaluation de x(t) et y(t) pour 0<=t<=1 5 mul et 3 add (init: 7 mul 6 add) Optimisation 1: représentation de Horner d un polynôme f(t) = at 3 +bt 2 +ct+d=(((at+b)t+c)t+d 3 mul et 3 add Optimisation 2: différence en avant avec dt constant, on réutilise le calcul précédent s= dt f(t+s) = f(t)+df(t) df(t) = 3at 2 s+t(3as 2 +2bs)+as 3 +bs 2 +cs Optimisation 2.5: Même technique avec df(t) et d2f(t): d 2 f(t) = d(df(t)) = df(t+s)-df(t) = 6as 2 t+6as 3 +2bs 2 d 3 f(t) = d(d 2 f(t)) =d 2 f(t+s)-d 2 f(t) = 6as 3 = cte f n+1 = f n + df n df n = df n-1 + d 2 f n-1 d 2 f n-1 = d 2 f n-2 +d 3 f n-2 Valeurs initiales: f 0 =d df 0 =as 3 +bs 2 +cs d2f 0 =6as 3 +2bs 2 d3f 0 =6as 3 dessinebezieriter(courbe,n): x=courbe.p0.x init() pour i=0 à n: x += dx dx += d2x d2x += d3x tracersegment(x,y) 6 add au lieu de 12 mul et 9 add Résultat dépendant de la forme

6 2ème méthode: subdivision Subdivision d une courbe de Bezier Par subdivision: P = Q + T On subdivise jusqu à une «précision suffisante» G0 G P P1 dessinebezier(courbe,e): si rectiligne(courbe,e) P0 P1 P2 P3 G0 G2 G1 G3 D1 D0 D2 D3 G2 = 1/ P2 G P3 D P0 D P1 D2 = 1/ P2 D P3 dessinesegment(courbe.p0,courbe.p3) sinon subdivise(courbe,gauche,droite) dessinebezier(gauche,e) dessinebezier(droite,e) Avantage: indépendant de la forme de la courbe Inconvénient: calcul du test de précision coûteux API de plus haut-niveau pour le tracé de ligne Autres algorithmes Avec OpenGL: direct mode glbegin(gl_lines); glvertex2i(x0,y0); glvertex2i(x1,y1); glend(); Avec SVG: svgdoc.add(new SVGLine(x0,y0,x1,y1)) Retained mode Remplissage de polygones Triangles, polygones quelconques Antialiasing Clipping, culling Enlever les parties non visibles Gestion de la profondeur Partitionnement spatial BSP-tree, Quad-trees Depth Buffer Tesselation des contours Epaisseur de traits, pointillés, bevel/rounded

7 Vue d ensemble Images Photoshop,illustrator, 3DStudio SVG, Inventor, TkZinc Java2D,GDI, MacOSX OpenGL, DirectX Description d une scène Graphe de scène (Scene graph) Attributs de haut-niveau Primitives graphiques Algorithmes fondamentaux d IG Rasterisation Discrétisation Clipping Masking Représentation des images Opérations sur les images bitmap rgb packed rgbrgbrgbrgbrgbrgb rgbrgbrgbrgbrgbrgb rgbrgbrgbrgbrgbrgb rgbrgbrgbrgbrgbrgb grayscale rgb planar ggggggggg ggggggggg ggggggggg ggggggggg bbbbbb gggggg bbbbbb rrrrrrrr gggggg bbbbbb rrrrrrrr gggggg bbbbbb rrrrrrrr gggggg rrrrrrrr g sur 8,16,24 bits rrrrrrrrrrrrrrrrrrrrrrrrgggggg ggggggggggggggggggbb bbbb bbbbbbbbbbbb en mémoire... Filtres Définition super générale: traitement mathématique des pixels d une image Généralement, opération impliquant les pixels voisins d un pixel donné rgba indexé rgbargbargbargbargbargb rgbargbargbargbargbargb rgbargbargbargbargbargb rgbargbargbargbargbargb iiiiiiiii iiiiiiiii iiiiiiiii iiiiiiiii 0: rgb 1: rgb 2: rgb 3: rgb. palette ggggggggg ggggggggg ggggggggg ggggggggg imag e fff fff fff filtre ggggggggg fff ggggggggg fff ggggggggg fff ggggggggg hhhhhhhh h hhh h i,j = f k-1,l-1 *g i-1,j-1 +f k,l-1 *g i,j >convolution

8 Exemples de filtres Opérations sur les images Box filter Filtre passe-bas Blur 1/9 x Histogramme Occurrence d une couleur dans une image nb Filtre de Sebel Filtre passe-haut Détection de contours nb g nb nb nb g sombre claire g g contrastée g peu contrastée Format des images Tesselation du 8 Sans perte: PNG format libre Indexé, grayscale, rgba, entrelacé Mng pour l animation Compressé à la zlib GIF Indexé, un index pour l opacité Gif animé Compressé à la zlib Avec perte: JPEG Transformée de Fourier et élimination des basses fréquences

9 2D vs 3D 3D: qualité de rendu (réalisme) 2D: qualité de lecture (texte et forme) Tesselation du cercle

10 Point médian pour le cercle Remplissage par Scan-line Arêtes actives Scanline Tesselation des polygones Support du pixel LCD

11 Sous-pixel Spécification des couleurs en sous pixel RVB RVB Halo blanc, trou noir, effet de relief Trou > taille d un pixel Mélange des sous pixels R et B -> luminosité accrue Comparaison deux à deux -> contraste perçu

12 AntiAliasing AntiAliasing et Perception Améliorer la perception des formes Améliorer la qualité esthétique Techniques d anti-aliasing Sub-pixel anti-aliasing Par primitive À chaque pixel à allumer, on calcule la luminosité des voisins selon des algos spécifiques aux primitives (ligne, cercle etc) Gupta-sproull Global FSAA: Full Scene Anti-Aliasing Supersample (voire Multisample)

13 SubPixel Antialiasing Sub-pixel anti-aliasing et texte

14 Ne marche qu avec des LCD Pas de rotation de l écran! Point médian pour le cercle Qualité de rendu illustrator, opengl (scanline vs vector) (image rond moche) Parler de freetype et du rendu de fonte Polygone -> courbe de bezier Polygone convexe vs concave Luminosité / surface Luminosité: perception de la luminance Quelle est l influence de la surface sur la luminosité? => expé Evaluer la quantité de «matière ée»? Anti-aliasing Pixel: Diagonale Sous-pixel

15 Transformations affines géométriques Coordonnées homogènes Exemples de transformations affines translation homothétie (scale) rotation projection cisaillement (shear) toute comition de transformations affines Un point en 2 dimensions est spécifié par 3 coordonnées x V = y w w=1 habituellement (sinon, diviser par w) les transformations s expriment par des matrices 4x4: V = MV Les transformations affines préservent la géométrie une ligne reste une ligne un polygone reste un polygone une quadrique reste une quadrique 1 0 tx 0 1 ty x y 1 x+tx y+ty 1 sx sy x y 1 x*sx y*sy 1 cosa sina 0 -sina cosa x y 1 x*cosa+y*sina -x*sina+y*cosa 1 translation homothétie rotation Programmation des transformations les comitions de transformations correspondent à des produits de matrices: V =M1M2 V x y 1 x y 1 OpenGL gère une matrice de transformation courante M MV On peut y appliquer des transformations en appelant glloadidentity, glrotatef, gltranslatef, glscalef, glloadmatrix, glmultmatrix 1 0 tx 0 1 ty sx sy x y translation homothétie identité x y 1 glloadidentity() glrotatef(35,0,0,1) gltranslatef(20,0) glbegin( ) glvertex( ) M MV M MV M MV M MV xr M MV xt V M MV xv=irtxv

16 Ordre des transformations Repère global fixe ou repère local transformé Repère local transformé Ordre d application (celui du code) translation puis rotation? ou rotation puis translation?! glloadidentity( ) gltranslatef( ) glrotatef( ) glbegin( ) glvertex2f( ) Ordre d application (inverse du code) Grand repère global fixe V =ITRV Repère global fixe ou repère local transformé Rotation centrée sur le barycentre Repère local transformé Repère local Grand repère global fixe V =IRTV glloadidentity( ) glrotatef( ) gltranslatef( ) glbegin( ) glvertex2f( ) Ordre d application (inverse du code) Ordre d application (celui du code) Repère global translation rotation rotation? glloadidentity( ) gltranslatef() gltranslatef(bary) glrotatef( ) gltranslatef(-bary) glbegin( ) glvertex2f( )

17 Zoom centré curseur Zoom centré curseur Zoom centré curseur Par mise à jour des coordonnées P P F = point de focus F Zoom: FP = FP x ds, avec ds = s new /s old Pour chaque P: P.x = (P.x-F.x) x ds + F.x Correspond à T F S -ds T -F «Zoom coordonnées»

18 Avec 2 opérations globales glloadidentity( ) glscalef(zoom,zoom) gltranslatef(xpan, ypan) drawscene() description analytique description vectorisée description pixelisée Zoom est contrôlé par la molette, que devient xpan quand la molette émet un événement? Propriété: en coordonnées écran, F =F (xf + xpan2) x s x ds = (xf + xpan) x s xpan2 = ((xf + xpan) / ds) - xf xpan2 = xpan + ((1-ds)/ds) (xpan+xf) Bien pour appliquer des rotation et translations globales Marchent pas pour des épaisseur indépendantes du zoom x=rcos(t) y=rsin(t) tesselation rasterisation Picking A isinbezierbbox(cur.x, cur.y)? Yes! Déterminer sur quel objet a cliqué l utilisateur Méthode analytique isinbezier(cur.x, cur.y)? Euh A A isin(cur.x, cur.y)? isinboundingbox(cur.x, cur.y)? Rasterization dans la zone curseur

19 Picking OpenGL Gestion intégrée du graphisme Redisplay() Rafraîchissement On affiche normalement la scène dans une toute petite fenêtre autour du curseur C est la définition du picking: à qui appartient le pixel sous le curseur? Programme glloadidentity( ) gltranslatef() glrotatef( ) gltranslatef(-bary) glbegin( ) glvertex2f( ) VRAM Contrôleur video Écran A Redisplay() Rafraîchissement Programme Pour chaque objet: répondre aux évts et changer ses propriétés afficher l objet le mettre au bon endroit utiliser telle couleur épaisseur tesseler rasterizer VRAM Contrôleur video Écran Pour chaque objet: répondre aux évts et changer ses propriétés afficher l objet le mettre au bon endroit utiliser telle couleur épaisseur tesseler rasterizer

20 Pour chaque objet: répondre aux évts et changer ses propriétés Pour chaque objet: afficher l objet le mettre au bon endroit utiliser telle couleur épaisseur tesseler rasterizer Programme Pour chaque objet: répondre aux évts et changer ses propriétés Graphe de scène Pour chaque objet: afficher l objet le mettre au bon endroit utiliser telle couleur et épaisseur tesseler rasterizer Graphe de scène Type de graphe de scène Liste (Display list) But: Déporter une partie du travail de gestion des scènes graphiques dans un module logiciel Pour faciliter la vie du programmeur Rôle Retenir les objets graphiques Création, modification géométrique et de style Gérer l affichage Savoir quand ré-afficher Optimisation Gérer le picking Générer des événements de haut niveau Enter et Leave shape Timer Arbre Troopers Invaders Alien première ligne Alien deuxième ligne Mothership

21 Ordre d affichage Graphe (DAG) flyweight SVG Troopers Invaders Alien première ligne Alien deuxième ligne Mothership Implicite: algorithme du peintre Explicite: x,y,z Pas forcément compatible avec le scene graph Tri en z, puis algo du peintre Ou utilisation du depth buffer z=1 z=0 z=3 z=2 Modèle en couches Jean-Daniel Fekete Modèle en couches : interaction Problème du mélange des représentations graphiques Objet d intérêt / Interaction (feedback) Optimisation difficiles Modèle en couches superées Spécialisées Fond, Grille, Principale, Sélection (handles), Manipulation directe (outline), Lasso de sélection, curseur Modèles Graphiques différents (XOR) Interaction Traversée des couches de haut en bas, jusqu à ce que l une d elles prenne en compte l événement Dessin Traduction du modèle Couche(Layer)/Piles(Stack), Extensions Optimisations: cache, XOR, transient, animée Curseur Manip. Directe Selection (poignées) Vue principale Grille Arrière-Plan

22 Type de graphe de scène: Tag Ouchuis.com A31 Ouchuis.com A31 A6 A6 Colorier en blanc? Dégrouper identity transfocoord) Scale(zoom) Ouchuis.com A6 A31 Algo peintre groupe1 racine groupe2 Type de graphe de scène: Tag Autres graphes Spatial data structure BSP tree, Quad tree, R-tree But: Déterminer rapidement ce qui est visible (culling) Déterminer rapidement ce qui est pické tag1 tag2 selected

23 Autres graphes API facile, implémentation difficile Display graph Scene graph: séparer code applicatif de la gestion du graphisme Display graph: isoler l API pour le programmeur du code applicatif et gérer un graphe optimisé pour l affichage Ex: GVT pour Batik Model graph Ex: hiérarchie de widgets Problème: synchronisation des graphes