Support - Laboratoire d`informatique interactive de l`ENAC

Infographie 2D pour l’interaction
Introduction
Stéphane Conversy
ENAC - [email protected]
Éléments:
Nicolas Roussel, Projet InSitu, Université Paris-Sud
Qu’est ce que l’Informatique Graphique ?
Exemples d’applications
• Modélisation
• Affichage d’informations
– 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
–
–
–
–
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
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 pose ?
•
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
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
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 position du point
médian suivant (xi+1, yi+ 1/2), et décider du prochain pixel
à allumer
E
(xi+1,yi+ 1/2)
(xi,yi)
(xi+1,yi+ 1/2)
(xi,yi)
NE
(xi+1,yi+ 1/2)
(xi,yi)
Calculs préliminaires
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: di+1 = F(xi+2, yi+1/2) = di + a
incrE= a
si choix NE: di+1 = F(xi+2, yi+3/2) = di + a+b
incrNE=a+b
d0 = 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)
Algorithme du point médian
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 !
Tesselation
Exemple 2: tesselation d’une courbe de Bézier
Définie par 4 points:
P0 et P3 extrémités
P1 et P2 définissent les tangentes aux extrémités
-1 3 -3 1
3 -6 3 0
B(t) = [t3 t2 t 1] -3 3 0 0
1 0 0 0
•
P2
P0
P1
P2
P3
•
P1
x(t) = (-x0+3x1-3x2+x3) t3 + (3x0-6x1+3x2) t2 + (-3x0+3x1)t + x0
y(t) = (-y0+3y1-3y2+y3) t3 + (3y0-6y1+3y2) t2 + (-3y0+3y1)t + y0
ou
B(t) = (1- t)3P0 + 3t(1-t)2 P1 + 3t2(1-t)P2 + t3 P3
Polynômes de Bernstein
Rastérisation
– passage du continu au discret
– Ex: la ligne analytique -> ensemble de pixels
P0
Tesselation:
– Remplissage d’un plan par des formes qui
ne se superposent pas et sans trou
– Ex: passage d’une surface continue à une
représentation par parties
– Bezier - > segments de lignes
– « vectorisation »
P3
•
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)
fn+1 = fn + dfn
dfn = dfn-1 + d2fn-1
d2fn-1 = d2fn-2+d3fn-2
Optimisation 1: représentation de Horner d’un polynôme
f(t) = at3+bt2+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) = 3at2s+t(3as2+2bs)+as3+bs2+cs
Optimisation 2.5: Même technique avec df(t) et d2f(t):
d2f(t) = d(df(t)) = df(t+s)-df(t) = 6as2t+6as3+2bs2
d3f(t) = d(d2f(t)) =d2f(t+s)-d2f(t) = 6as3 = cte
Valeurs initiales:
f0=d
df0=as3+bs2+cs
d2f0=6as3+2bs2
d3f0=6as3
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
2ème méthode: subdivision
Subdivision d’une courbe de Bezier
Par subdivision: P = Q + T
On subdivise jusqu’à une « précision suffisante »
P2
8000
4400
2420
1331
P0
P1
P2
P3
D0
D1
D2 = 1/8
D3
1331
0242
0044
0008
P0
P1
P2
P3
dessineBezier(courbe,e):
si rectiligne(courbe,e)
dessineSegment(courbe.P0,courbe.P3)
sinon
subdivise(courbe,gauche,droite)
dessineBezier(gauche,e)
dessineBezier(droite,e)
D2
P0
D1
G0
G3
D0
P1
G0
G1
G2 = 1/8
G3
G2
P3
G1
D3
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:
Remplissage de polygones
direct mode
glBegin(GL_LINES);
glVertex2i(x0,y0);
glVertex2i(x1,y1);
glEnd();
Triangles, polygones quelconques
Antialiasing
Clipping, culling
Enlever les parties non visibles
Gestion de la profondeur
Partitionnement spatial
BSP-tree, Quad-trees…
Avec SVG:
svgDoc.add(new SVGLine(x0,y0,x1,y1))
Retained mode
Depth Buffer
Tesselation des contours
Epaisseur de traits, pointillés, bevel/rounded
Vue d’ensemble
Description d’une scène
Photoshop,illustrator,
3DStudio
Graphe de scène (Scene graph)
Attributs de haut-niveau
SVG, Inventor, TkZinc
Images
Primitives graphiques
Java2D,GDI, MacOSX
Algorithmes fondamentaux
d’IG
OpenGL, DirectX
Représentation des images
bitmap
rgb packed
rgba
indexé
1000101001
0010100011
1001111100
0011001010
rgbrgbrgbrgbrgbrgb
rgbrgbrgbrgbrgbrgb
rgbrgbrgbrgbrgbrgb
rgbrgbrgbrgbrgbrgb
grayscale
rgb planar
rgbargbargbargbargbargb
rgbargbargbargbargbargb
rgbargbargbargbargbargb
rgbargbargbargbargbargb
iiiiiiiii
iiiiiiiii
iiiiiiiii
iiiiiiiii
0: rgb
1: rgb
palette
2: rgb
3: rgb
….
Rasterisation
Discrétisation
Clipping
Masking
Opérations sur les images
ggggggggg
ggggggggg
ggggggggg
ggggggggg
bbbbbb
gggggg
bbbbbb
rrrrrrrr
gggggg
bbbbbb
rrrrrrrr
gggggg
bbbbbb
rrrrrrrr
gggggg
rrrrrrrr
g sur 8,16,24 bits…
• Filtres
rrrrrrrrrrrrrrrrrrrrrrrrgggggg
ggggggggggggggggggbb
bbbb
bbbbbbbbbbbb
en
mémoire...
– 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é
ggggggggg
ggggggggg fff
ggggggggg fff
ggggggggg fff
imag
e
filtre
ggggggggg
fff
ggggggggg
fff
ggggggggg
fff
ggggggggg
hhhhhhhh
h
hhh
hi,j = fk-1,l-1*gi-1,j-1+fk,l-1*gi,j-1+… >convolution
Exemples de filtres
Opérations sur les images
• Histogramme
– Occurrence d’une couleur dans une image
• Box filter
– Filtre passe-bas
– Blur
111
1/9 x 111
111
nb
0
• Filtre de Sebel
– Filtre passe-haut
– Détection de contours
-1 -2 -1
0 0 0
1 2 1
256
nb
nb
g
sombre
Format des images
• 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
g
nb
g
claire
nb
g
contrastée
Tesselation du 8
g
peu contrastée
Tesselation du cercle
• 2D vs 3D
– 3D: qualité de rendu (réalisme)
– 2D: qualité de lecture (texte et forme)
Point médian pour le cercle
Remplissage par Scan-line
Arêtes actives
Scanline
Tesselation des polygones
Support du pixel LCD
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
AntiAliasing
AntiAliasing et Perception
• Améliorer la perception des formes
• Améliorer la qualité esthétique
Techniques d’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)
Sub-pixel anti-aliasing
SubPixel Antialiasing
Sub-pixel anti-aliasing et texte
• 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
• Evaluer la quantité de « matière colorée » ?
• Luminosité: perception de la luminance
• Quelle est l’influence de la surface sur la luminosité ?
• => expé
– Anti-aliasing
– Pixel: Diagonale
– Sous-pixel
Transformations affines géométriques
•
Exemples de transformations affines
–
–
–
–
–
–
•
Coordonnées homogènes
•
translation
homothétie (scale)
rotation
projection
cisaillement (shear)
toute composition de transformations affines
Un point en 2 dimensions est spécifié par 3 coordonnées
x
– V = y w=1 habituellement (sinon, diviser par w)
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
x
y
1
1 0 tx
0 1 ty
0 0 1
translation
x+tx
y+ty
1
x
y
1
sx 0 0
0 sy 0
0 0 1
x*sx
y*sy
1
homothétie
x
y
1
cosa sina 0
-sina cosa 0
0
0
1
x*cosa+y*sina
-x*sina+y*cosa
1
rotation
Programmation des transformations
• les compositions de transformations correspondent à
des produits de matrices: V’=M1M2…V
x
y
1
1 0 tx
0 1 ty
0 0 1
translation
sx 0 0
0 sy 0
0 0 1
homothétie
x’
y’
1
x
y
1
1 0 0
0 1 0
0 0 1
identité
x
y
1
• OpenGL gère une matrice de transformation
courante MMV
• On peut y appliquer des transformations en appelant
glLoadIdentity, glRotatef, glTranslatef, glScalef,
glLoadMatrix, glMultMatrix……
glLoadIdentity()
glRotatef(35,0,0,1)
glTranslatef(20,0)
glBegin(…)
glVertex(…)
MMV
MMV
MMV
V’
1 0 0
0 1 0
0 0 1
MMVxR
MMVxT
MMVxV=IRTxV
Ordre des transformations
Repère global fixe ou repère local transformé
Repère local transformé
Ordre d’application
(celui du code)
glLoadIdentity(…)
glTranslatef(…)
glRotatef(…)
glBegin(…)
glVertex2f(…)
translation puis rotation ?
ou
rotation puis translation ?!
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
Ordre d’application
(celui du code)
glLoadIdentity(…)
glRotatef(…)
glTranslatef(…)
glBegin(…)
glVertex2f(…)
translation
Ordre d’application
(inverse du code)
Grand repère global fixe
V’=IRTV
Repère global
rotation
rotation ?
glLoadIdentity(…)
glTranslatef(pos)
glTranslatef(bary)
glRotatef(…)
glTranslatef(-bary)
glBegin(…)
glVertex2f(…)
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 = snew/sold
Pour chaque P: P.x = (P.x-F.x) x ds + F.x
Correspond à TFS-dsT-F
« Zoom coordonnées »
Avec 2 opérations globales
glLoadIdentity(…)
glScalef(zoom,zoom)
glTranslatef(xpan, ypan)
drawScene()
•
•
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)
•
•
description
analytique
x=rcos(t)
y=rsin(t)
description
vectorisée
tesselation
description
pixelisée
rasterisation
Bien pour appliquer des rotation et translations globales
Marchent pas pour des épaisseur indépendantes du zoom
Picking
isInBezierBBox(cur.x, cur.y) ? Yes !
A
isInBezier(cur.x, cur.y) ? Euh…
• Déterminer sur quel objet a cliqué l’utilisateur
• Méthode analytique
A
A
isIn(cur.x, cur.y) ?
isInBoundingBox(cur.x, cur.y) ?
Rasterization
dans la zone
curseur
Picking OpenGL
Gestion intégrée du graphisme
Redisplay()
• 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
Rafraîchissement
VRAM
glLoadIdentity(…)
glTranslatef(pos)
glRotatef(…)
glTranslatef(-bary)
glBegin(…)
glVertex2f(…)
A
Redisplay()
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
Rafraîchissement
VRAM
Écran
Contrôleur
video
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
Écran
Contrôleur
video
Programme
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
Pour chaque objet:
répondre aux évts
et changer
ses propriétés
Graphe de scène
Graphe de scène
Pour chaque objet:
afficher l’objet
le mettre au
bon endroit
utiliser telle
couleur
et épaisseur
tesseler
rasterizer
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
•
Rôle
pos
color
pos
color
pos
color
pos
color
– Pour faciliter la vie du programmeur……………
– Retenir les objets graphiques
Arbre
Invaders
pos
color
• 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
pos Troopers
color
Alien première ligne
• Enter et Leave shape
• Timer
pos
pos
color color
Alien deuxième ligne
pos Mothership
color
Ordre d’affichage
Graphe (DAG)
flyweight
SVG
Invaders
pos
color
pos Troopers
color
Alien première ligne
pos
color
pos
color
pos
color
• Implicite: algorithme du peintre
Alien deuxième ligne
pos
color
pos
color
Modèle en couches
•
pos Mothership
color
pos
color
Jean-Daniel Fekete
Problème du mélange des représentations
graphiques
– Objet d’intérêt / Interaction (feedback)
– Optimisation difficiles
•
Modèle en couches superposé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
• 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
Modèle en couches : interaction
z=3
z=2
Type de graphe de scène: Tag
Ouchuis.com
Ouchuis.com
A31
A31
A6
A6
identity
Colorier en blanc ?
Dégrouper…
Ouchuis.com
transfoCoord)
A6
racine
A31
Algo peintre
groupe1
groupe2
Scale(zoom)
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
Autres graphes
• 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…
API facile, implémentation difficile