8TRD147: Animation et images par ordinateur

8TRD147: Animation et images par ordinateur Textures Y. Chiricota Département d informatique et de mathématique Université du Québec à Chicoutimi / Certaines des illustrations de ce document proviennent du livre rouge d OpenGL, des sites developer.apple.com ; opengl.org ; khronos.org ; nvidia.org 8TRD147 UQAC Y. Chiricota(2014) 1

Introduction Le placage de texture (texture mapping (Catmull 74)) est une des premières techniques de mapping. On utilise une image (bitmap) et on l applique à une surface. Cette technique augmente de beaucoup la qualité des images à peu de coût. En 1978, J. Blinn a introduit le bump mapping, une autre technique de mapping très intéressante qui permet de simuler une texture sur les surface à l aide d images. Depuis cette époque, l approche par «mapping» s est énormément développé. Elle est utilisée pour les réflexions, le calcul de lumières, d ombres, etc. 8TRD147 UQAC Y. Chiricota(2014) 2

Un mot sur la couleur... Il existe plusieurs méthodes pour encoder la couleur en informatique. Parmi celles-ci, l encodage par un vecteur RGBA est intégrée à la plupart des systèmes. Un vecteur RGBA est formé de quatre composantes (r, g, b, a) où r (respectivement g, b) représente la quantité de rouge (respectivement vert, bleu) dans la couleur. La composante a sert entre autres à simuler la transparence. Dans OpenGL, chaque composante est un nombre en point flottant appartenant à l intervalle [0, 1]. L encodage des couleurs RGBA en mémoire est effectuée à l aide de mots mémoire (pixels) de 16 ou 32 bits. Il existe une panoplie de format possibles. Un des formats pratique est le 8888 (8 bits par composantes). Ainsi une couleur est représentée par un mot mémoire de la forme 0xRRGGBBAA, où chaque lettre correspond à quatre bits. 8TRD147 UQAC Y. Chiricota(2014) 3

Images numériques. Une image bitmap" est un tableau rectangulaire de taille M N contenant des pixels. Les coordonnées (u,v) sur un bitmap sert à désigner les pixels (qu on pourrait associer à des régions carrées ou rectangulaire, mais qui sont en fait des points). 8TRD147 UQAC Y. Chiricota(2014) 4

Images numériques. Il est pratique de considérer qu une image bitmap correspond en réalité à une fonction [0, 1] [0, 1] : R 4 qu on peut écrire sous la forme C(u, v) = (r(u, v), g(u, v), b(u, v), a(u, v). Dans ce contexte, l image bitmap correspond à un échantillonnage de la fonction C(u, v) ; la couleur du pixel en position (i, j) dans le tableau est donnée par i C( M 1, j N 1 ), où i = 0, 1, 2,... M 1 et i = 0, 1, 2,... N 1. 8TRD147 UQAC Y. Chiricota(2014) 5

Approches directe et inverse de placage de textures. L approche directe (relativement à la direction du pipeline) consiste à trouver l image 1 (en terme de fonction) d un pixel texture (texel) dans le plan caméra. Dans OpenGL, on utilise l approche inverse. Plutôt que projeter un texel dans le viewport (dans l écran), on calcule la configuration d un pixel écran dans la texture. Important : dans cette analyse, on considère le pipeline comme étant une fonction au sens mathématique (à quelques nuances près). Cette fonction transforme l espace défini par le viewport dans l espace définit par l image qui sert de texture. C est une fonction de R 2 R 2. 1. Attention : le terme image a deux sens dans cette présentation. 8TRD147 UQAC Y. Chiricota(2014) 6

Approches directe et inverse de placage de textures. Il est plus naturel de travailler à partir des pixels de l image écran car ce calcul s intègre alors dans la rastérisation des triangles. D ailleurs, les cartes graphiques calculent les images finales pixel par pixel. Il est donc naturel de précéder de la sorte si on veux profiter du parallélisme intégré aux GPU. Un autre avantage de l approche inverse est la possibilité d intégrer l anticrénelage au processus (antialiasing). 8TRD147 UQAC Y. Chiricota(2014) 7

Le processus 8TRD147 UQAC Y. Chiricota(2014) 8

Placage par l approche inverse. 8TRD147 UQAC Y. Chiricota(2014) 9

Problème... 8TRD147 UQAC Y. Chiricota(2014) 10

Bref si on résume... Il faut attribuer une couleur au pixel écran en fonction de sa rétro-projection dans la texture utilisée pour colorer l objet dans la scène. La couleur C p du pixel peut se calculer avec C p = 1 C(u, v)dudv, R R où C(u, v) la couleur au point (u, v) et R est l aire de la région R. 8TRD147 UQAC Y. Chiricota(2014) 11

Version discrète de l échantillonnage. C p = 1 R t T t R A(t R)C t, où A est l aire d une région, T est la texture (un ensemble de texels) et t un texel. La formule précédente n est jamais utilisée en pratique à cause du coût de calcul et d implémentation. 8TRD147 UQAC Y. Chiricota(2014) 12

Il est préférable d utiliser des simplifications des approches précédentes, à partir de l image inverse du pixel à colorier. Note : Dans les figures qui suivent, la texture est à gauche et l image écran à droite. 8TRD147 UQAC Y. Chiricota(2014) 13

Sur-échantillonnage et sous-échantillonnage Si la taille des pixels et des texels est du même ordre, le résultat du placage de texture a de bonne chances d être optimal. Il peut toutefois y avoir des problèmes, comme nous le verrons. Si la taille de l image inverse des pixels est très grande p.r aux texels on parle de sur-échantillonnage. Si c est i inverse, on parlera de sous-échantillonnage. 8TRD147 UQAC Y. Chiricota(2014) 14

La méthode d échantillonnage demande une certaine circonspection. Voici deux cas problème. Il existe plusieurs façon de régler le problème. Les résultats obtenus varient d une méthode à l autre. 8TRD147 UQAC Y. Chiricota(2014) 15

Pixel le plus près. On calcule l image inverse et on colore avec le texel correspondant à l image inverse du pixel. Cette méthode ne permet pas de régler le problème précécent. 8TRD147 UQAC Y. Chiricota(2014) 16

Interpolation bi-linéaire. Dans cette figure, C i,j = C(u i, v j ), où C(u, v) est la couleur en (u, v). 8TRD147 UQAC Y. Chiricota(2014) 17

La couleur d un pixel écran correspondant aux coordonnées (u, v) est donné par C 0 = u u 1 u 0 u 1 C 00 + u u 0 u 1 u 0 C 10 C 1 = u u 1 u 0 u 1 C 01 + u u 0 u 1 u 0 C 11 C p = v v 1 v 0 v 1 C 0 + v v 0 v 1 v 0 C 1 Note : C j est l interpolant linéaire entre C 0j et C 1j. 8TRD147 UQAC Y. Chiricota(2014) 18

Interpolation quadratique et cubique. L interpolation bilinéaire est tout simplement la version bi-dimensionnelle de l interpolation linéaire usuelle entre deux valeurs d une fonction. À une dimension, pour une meilleure précision, il est possible d effectuer une interpolation à partir de trois valeurs. On parle alors d interpolation quadratique car le polynôme d interpolation obtenu est de degré deux. On peut aussi utiliser quatre points (on a alors affaire à l interpolation cubique). En deux dimensions, on a l équivalent, sauf que les points à utiliser forment une grille de 3 3 (interpolation quadratique) ou 4 4 (interpolation cubique). Évidemment, plus on utilisera de point, meilleur sera le résultat et plus il faudra de puissance de calcul... 8TRD147 UQAC Y. Chiricota(2014) 19

Échantillonnage par distance aux centres. Voici une méthode alternative pour déterminer la couleur d un pixel texturé". On fait la somme pondérée en utilisant la distance entre l image inverse du pixel et le centre des texels voisins. pose : L = longueur du coté d un texel carré ; On d = (2)L (longueur de la diagonale) ; a(w) = max(0, 1 w/d) ; Enfin C p = 1 2 (a(d 1)C1 + a(d 2 )C 2 + a(d 3 )C 3 + a(d 4 )C 4 ), où C i est la couleur du texel i et C p la couleur du pixel à colorer. 8TRD147 UQAC Y. Chiricota(2014) 20

Échantillonnage pondéré par l aire d intersection. Voici une autre méthode. La couleur du pixel sera la somme pondérée de la couleur des texels. Posons : A = aire du carré d échantillonnage ; A i = aire de l intersection du carré avec le texel i ; Enfin C p = 1 A (A 1C 1 + A 2 C 2 + A 3 C 3 + A 4 C 4 ). 8TRD147 UQAC Y. Chiricota(2014) 21

Exemple 8TRD147 UQAC Y. Chiricota(2014) 22

Mélange de couleur (blending) La couleur d un pixel déjà calculé dans le framebuffer peut être remplacée (écrasée) par la couleur calculée lors de l échantillonnage d une texture. Cette possibilité permet d implémenter des effets dont une simulation de la transparence. Notons que le mélange sert une opération générale qui s applique même lorsqu on travaille avec des couleurs pleines (sans texture). En effet, lors du calcul d une scène, les primitives (triangles) sont rendus les unes après les autres. Si deux triangles sont placés l un devant l autre (disons T 2 devant T 1) et qu on effectue le rendu de T 1 avant celui de T 2, mélanger les couleurs laissera paraître T 1 au travers de T 2. On peut aussi utiliser le blending" pour d autres effets (masques, etc.). Le mélange de couleur repose en grande partie sur la composante alpha des couleurs rgba (le a de rgba). 8TRD147 UQAC Y. Chiricota(2014) 23

Description mathématique Voici la formule générale pour mélanger deux couleurs rgba. Nous utiliserons la notation vectorielle. Soit C d = (r d, g d, b d, a d ) la couleur actuelle d un pixel calculé (dans le framebuffer) et C s = (r s, g s, b s, a s ) celle de la nouvelle couleur (d pour destination et s pour source). Posons U = (u r, u g, u b, u a ) et V = (v r, v g, v b, v a ), les facteurs de mélange. Le mélange des deux couleurs est donné par C p = U C s + V C d, où correspond au produit composante à composante des vecteurs. Étant donné ces vecteurs, OpenGL remplacera la couleur C d d un pixel de destination par C p. Par exemple, si U = V = ( 1 2, 1 2, 1 2, 1 2 ), C p sera le mélange des ces deux couleurs (celle d origine et la nouvelle) à parts égales. Notons que OpenGL comporte d autres formules de mélange. 8TRD147 UQAC Y. Chiricota(2014) 24

API OpenGL. OpenGL fournit une API pour déterminer comment se fera le mélange de couleurs d un pixel destination avec un fragment (pixel en cours de construction). Cette API permet de déterminer les valeurs de U et V de la formule précédente, ainsi que la formule utilisée pour le mélange. Il faut activer le blending avec la commande : glenable(gl_blend); Par la suite, on spécifie la fonction de mélange et la valeur de U et V. Par défaut, la formule de mélange est celle qu on vient de voir. Nous n utiliserons que celle-ci, pour plus de détails, reportez-vous au livre rouge de OpenGL. 8TRD147 UQAC Y. Chiricota(2014) 25

Fonction de mélange. Détermine la fonction de mélange : void glblendfunc(glenum srcfactor, GLenum destfactor); srcfactor : détermine le calcul du facteur de mélange de la couleur source. destfactor : idem pour la couleur destination. La page suivante donne les valeurs possible pour ces paramètres. On y voit que valeur de la composante a (A s et A d dans le livre rouge de OpenGL) est utilisée pour le mélange de plusieurs façons. Ce tableau est tiré du Livre rouge d OpenGL. 8TRD147 UQAC Y. Chiricota(2014) 26

8TRD147 UQAC Y. Chiricota(2014) 27

Application : billboarding Cette technique permet de représenter des objets aux formes complexes à l aide de textures. La technique consiste à créer une texture (par exemple l image d un arbre) telle que la valeur a de chaque chaque texel visible est 1.0, et vaut 0.0 pour les texels invisibles". On traitera ces objets à partir d un quad dans lequel on dessine la texture avec la fonction de mélange suivante : glblendfunc(gl_src_alpha, GL_ONE_MINUS_SRC_ALPHA); Les objets traités avec cette technique seront les derniers dessinés dans la scène. La composante a de la texture représente en quelque sorte un masque. 8TRD147 UQAC Y. Chiricota(2014) 28

Application : billboarding Voici ce qu on peut obtenir en utilisant deux quads pour représenter un arbre avec cette technique. 8TRD147 UQAC Y. Chiricota(2014) 29

Modèle d illumination de Phong. Le modèle d illumination de Phong permet de simuler la réflexion de la lumière sur les surfaces. Il repose sur l utilisation du vecteur normal à la surface en chaque point P de celle-ci. Dans la figure, L est le vecteur lumière (il pointe du point P vers la position de la source lumineuse), R le vecteur réfléchit et V le vecteur de visée (position de la caméra). L angle θ est l angle entre le vecteur normal N à la surface au point P et ρ est l angle entre le vecteur V et le vecteur réfléchit R. Tous les vecteurs sont normalisés. 8TRD147 UQAC Y. Chiricota(2014) 30

Modèle d illumination de Phong. Pour chaque composante de la couleur utilisée pour l éclairage, l intensité à utiliser est donnée par la formule suivante : I = k a I a + k d I d (L N) + k s (R V ) n, où I a est l intensité de la lumière ambiante (lumière dans laquelle baigne toute la scène), I d est l intensité de la source (lumière diffuse), k a est un coefficient qui détermine comment la lumière ambiante affecte la surface, k d fait la même chose pour la lumière diffuse. Remarquons que L N = cos(θ) et que R V = cos(ρ). L exposant n simule la réflectivité de la surface. Dans la formule suivant, le calcul du vecteur R est coûteux. On peut simplifier avec H = 1 2 (L + V ). 8TRD147 UQAC Y. Chiricota(2014) 31

Le bump mapping Cette méthode a été introduite par Blinn en 78. Pour créer une surface rugueuse (non lisse), on peut utiliser un maillage formé de petits triangles. Cependant, l ajout de plusieurs triangles occasionnera une perte de performance en ce qui concerne le temps de calcul. Le «bump mapping» permet de simuler la rugosité de surfaces, des plis, etc. avec un coût de calcul minime. Plutôt qu ajouter des triangles, nous allons voir comment tricher ( ;-) ) sur l orientation du vecteur normal associé à chaque pixel de la surface à dessiner. 8TRD147 UQAC Y. Chiricota(2014) 32

L idée est d interpréter le bump map" comme une fonction d élévation de la surface B(u, v). Pour illustrer, fixons une la coordonnée v. Ceci facilite l analyse car on travaille dans une dimension. Dans un premier temps, on analyse le problème dans le domaine du continu : Le rendu de la surface sera fait à partir du vecteur N (u, v) plutôt que du vrai" vecteur normal N(u, v). On calculera l éclairage de la surface S trichant. La surface S est appelée surface déplacée. 8TRD147 UQAC Y. Chiricota(2014) 33

Calcul des vecteurs N (u, v) S : [a, b]x[c, d] R 3, surface à laquelle on veut appliquer le bump map. B(u, v) : [a, b]x[c, d] R hauteur de déplacement au point (u, v). Remarquons que B correspond aussi à une une surface. La surface que l on désire (la surface déplacée) est définie par : S (u, v) = S(u, v) + N(u, v)b(u, v). 8TRD147 UQAC Y. Chiricota(2014) 34

Si F est une fonction qui dépend de deux variables u et v, F u et F v représentent les dérivées partielles p.r. à u et v respectivement. Le vecteur normal N (u, v) est définit par N = S u S v. Il faut calculer les dérivées partielles de la surface déplacée, on a : S u = (S(u, v) + B(u, v)n(u, v)) u = S u + B u N + N u B et S v = (S(u, v) + B(u, v)n(u, v)) v = S v + B v N + N v B 8TRD147 UQAC Y. Chiricota(2014) 35

Le calcul du produit vectoriel S uxs v = (S u + B u N + N u B)x(S v + B v N + N v B) s avère couteûx. On obtient une approximation acceptable en tenant compte du fait que la valeur de B(u, v) est généralement faible p.r. aux autres valeurs en cause, on pose : S u = S u + B u N et S v = S v + B v N On a alors (en utilisant les propriétés des produits scalaire et vectoriel) N = (Su + B u N) (S v + B v N) = S u S v + B u (N S v ) + B v (S u N) = N + B u (N S v ) B v (N S u ) Le calcul du vecteur normal de remplacement au point (u, v) demande donc la connaissance des vecteurs tangent et binormal de S ainsi que le calcul des dérivées partielles B u et B v. 8TRD147 UQAC Y. Chiricota(2014) 36

Implémentation La surface de déplacement B peut être définie analytiquement ou encore à l aide d une image bitmap. L avantage de l approche analytique est qu on peut calculer les dérivées directement. Le calcul de B u et B v pour un déplacement défini à partir d une image bitmap se fait à partir de formule d approximation obtenues des différences finies : et B u (u 0, v 0 ) = B(u 0 + h, v 0 ) B(u 0, v 0 ) h B v (u 0, v 0 ) = B(u 0, v 0 + h) B(u 0, v 0 ) h = B(u 0, v 0 ) B(u 0 h, v 0 ) h = B(u 0, v 0 ) B(u 0, v 0 h). h Il faut imaginer le bitmap comme étant une discrétisation d une fonction B(u, v). La valeur de h doit être proportionnelle à la taille du bitmap. Si h est plus petit de la taille d un pixel de B, la valeur de la dérivée sera toujours 0... 8TRD147 UQAC Y. Chiricota(2014) 37

Avantages : Réaliste ; Coût de calcul minime ; Textures procédurales : ex. bruit, etc. Limites : La rugosité est artificielle (impossible de créer des "replis" d une surface) ; L effet n est pas visible sur les silhouettes ; La hauteur du bump map ne peut être trop forte. 8TRD147 UQAC Y. Chiricota(2014) 38

Aproche procédurale. Le bump mapping peut lui aussi être implémenté par une fonction. 8TRD147 UQAC Y. Chiricota(2014) 39

Bump map précédent utilisé avec un cylindre. L approche par procédurale présente des avantages : Peu coûteux en mémoire ; Facile à implémenter avec un shader ; La texture est en "pleine" résolution ; Pas besoin d image ; On peut faire de l animation en faisant varier des paramètres ; etc. 8TRD147 UQAC Y. Chiricota(2014) 40

Il est possible d utiliser des fonctions pour appliquer une textures sur une surface. On parle alors de texture procédurales. Pour définir une texture de couleur, il s agit d avoir une fonction qui associe une couleur C à chaque coordonnées de texture (u, v). Il est possible de simuler la texture de bois de cette façon. www.povray.org 8TRD147 UQAC Y. Chiricota(2014) 41