TP 3 : Éclairage et textures

Transcription

1 Université de Strasbourg Logiciels et Matériels Graphique Master 1 ISI Feuille de TP TP 3 : Éclairage et textures 1 Éclairage Jusqu à présent, nous avons rendu les objets de façon simple sans avoir d éclairage réaliste. Nous allons voir dans ce TP une façon de simuler un éclairage, un peu plus réaliste : le Phong shading. Ce modèle d éclairage, décompose la lumière en 3 composantes disctinctes : ambiante, correspondant à un éclairage provenant d une multitude de sources lumineuses et d inter-reflections entre les objets ; diffuse, correspondant à un éclairage provenant d une sources de lumière ; spéculaire, correspondant aux reflets lumineux sur la surface de l objet. Ces différentes composantes s additionnent pour donner la couleur finale à l objet éclairé : Bui Tuong Phong a proposé de synthétiser cet éclairage par la formule suivante : I f = k a i a + (k d ( L l N ) i dl + k s ( R V ) α i sl ) l Lights où I f donne l intensité lumineuse finale (la couleur) du fragment de l objet ; k a donne la composante ambiante de la couleur du matériaus composant l objet ; k d, k s donnent les couleurs de composantes diffuses et spéculaire du matériau composant l objet ; i a donne l intensité lumineuse de la scène (la couleur de la lumière ambiante de la scène) ; i dl, i sl donnent respectivement les composantes diffuse et spéculaire de la source lumineuse l ; α donnent le coefficient de brillance (shininess) qui conditionne la reflectivitéde l objet ; L l donnent la direction d éclairage de la source l ; N donnent la normale de la surface au fragment courant ; R donnent la direction de la réflection de la lumière au fragment courant ; V donnent la direction de vue. Les différents vecteurs utilisés sont présentés sur la Figure 1. 1

2 n R source camera L V 2 Implantation en GLSL FIG. 1 Valeurs utilisées pour le calcul de l éclairage de Phong. Pour simplifier l implantation, on autorise qu une seule source lumineuse. Par conséquent, il faut développer un programme de shaders utilisant les données suivantes : les paramètres d éclairage, en tant que variables uniformes : une couleur représentant l éclairage ambiant de la scène ; deux couleurs représentant respectivement l éclairage diffus et spéculaire de la source lumineuse ; la position de la source lumineuse exprimée dans l espace du monde. les propriétés du matériau de l objet, en tant que variables uniformes ou attributs de sommet (au choix) : une couleur ambiante ; deux couleurs représentant la couleur diffuse et spéculaire de l objet ; un réel représentant la coefficient de brillance du matériaux. les propriétés géométriques, en tant qu attributs de sommet : la position du sommet ; la normale de la surface pour chaque sommet. Le calcul d éclairage est effectué dans le fragment shader. Le vertex shader communique seulement les données au fragment shader. Il doit donc : transformer les coordonnées des sommets en espace image (classique) ; calculer le vecteur de vue en transformant les coordonnées des sommets en espace du monde 1 ; transmettre les normales au fragment shader ; transmettre les couleurs du matériaux (si ce sont des attributs de sommets) au fragment shader ; calculer la direction d éclairage en espace du monde 2. Le calcul de la couleur finale s effectue dans le fragment shader en calculant la formule de l éclairage de Phong décrite par l Algorithme 1. Exercice : Implanter un programme de shaders pour afficher l objet bunny du TP 2 en utilisant un éclairage de Phong. 1 Pour cela, il faut multiplier les matrices de vue et de modélisation par les coordonnées des sommets. Dans cet espace, la caméra est placée à l origine du repère. 2 Penser à donner la position de la lumière dans l espace du monde. 2

3 Varying variables : n normales en espace du monde l direction d éclairage en espace du monde v vecteur de vue en espace du monde Uniform variables: l a couleur de la lumière ambiante l d couleur de la lumière diffuse l s couleur de la lumière spéculaire c a couleur ambiante du matériaux de l objet c d couleur diffuses du matériaux de l objet c s couleur spéculaire du matériaux de l objet c shin coefficient de brillance du matériaux de l objet finalcolor ambiant (0, 0, 0, 0) finalcolor diffuse (0, 0, 0, 0) finalcolor specular (0, 0, 0, 0) finalcolor ambiant l a c a n normalize ( n ) l normalize ( l ) v normalize ( v ) lambertterm n l if lambertterm > 0 then finalcolor diffuse l d c d lambertterm r reflect( n, v ) specfactor max(0, r l ) c shin finalcolor specular specfactor c s l s end finalcolor finalcolor ambiant + finalcolor diffuse + finalcolor specular Algorithm 1: Algorithme de calcul de l éclairage de Phong. 3

4 3 Textures Originellement, les textures sont des images 2D qui, plaquées sur la géométrie d objet, permettaient d ajouter du détail aux objets 3D. Ce détail était essentiellement une information de couleur supplémentaire faisant varier la teinte d un objet. Aujourd hui, les textures sont utilisées pour stocker toute sorte d informations (normales, informations géométriques,...). Il en existe d ailleurs plusieurs type différents (textures 1D, 2D, 3D, cube,...). Pour plaquer une texture sur un objet, il faut définir un moyen d associer un point de la texture, appelé texel, aux fragments qui forment l objet. Pour cela, on définit des coordonnées de textures, associées à chaque point de l objet et qui permettent de faire le lien entre un point de l objet et texel de la texture. (1,1) (0,1) (0,1) (1,1) (0,0) (1,0) (0,0) (1,0) En fonction de la forme de l objet recevant la texture, l étape de placage de la texture peut entrainer une déformation de celle-ci 3. Le choix d une bonne paramétrisation de surface est donc cruciale. Pour utiliser une texture, il faut charger une image en mémoire et la transférer vers la mémoire de la carte graphique pour y accéder depuis un shader. Pour charger une texture, il faut effectuer plusieurs opérations : 1. Charger le fichier image en mémoire central ; Cette étape n est pas gérée par OpenGL. Il faut, au final, avoir les données de l image sous forme d un tableau où chaque élément du tableau est un triplet ou quadruplet de valeurs de même type. 2. Créer un identifiant de texture (glgentextures) ; 3. Envoyer la texture à OpenGL (fonctions glteximage* dépendant du type de texture : 1D, 2D, 3D,...) ; 4. Définir les paramètres d utilisation de la texture (gltexparameter*) ; 5. Associer des coordonnées de texture à chaque sommet dessiné (ajout d un attribut de sommet : vecteur 2D pour une texture à 2 dimensions, floattant pour une texture à 1 dimension, vecteur 3D pour une texture à 3 dimensions,...) ; 3 Par exemple le placage d une texture carrée sur une sphère ou un tore 4

5 6. Activer la texture à utiliser (glbindtexture) ; 7. Utiliser un shader qui accède à la texture active (doit prendre en compte la texture et les coordonnées de textures associées aux sommets traités) ; 8. Dessiner l objet ; 9. Désactiver le shader ; 10. Désactiver la texture (glbindtexture). Pour libérer les ressources utilisées par la texture, elle peut être supprimée via la fcontion gldeletetextures. 4 Création/Initialisation d une texture 4.1 Création d un identifiant de textures void glgentextures(glsizei n, GLuint *textures); permet de créer n identifiants de textures. Ces identifiants permettent par la suite d activer les textures. 4.2 Suppression d une texture void gldeletetextures(glsizei n, const GLuint *textures); qui permet de supprimer les n textures repérées par les identifiants de textures 4.3 Activation/Désactivation de textures Pour activer une texture, il faut utiliser la fonction : void glbindtexture(glenum target, GLuint texture); où target est le type de texture utilisé (texture 2D, 3D,...). Dans ce TP nous n utiliserons que des textures 2D donc GL_TEXTURE_2D. texture représente l identifiant de la texture à utiliser, obtenu avec glgentextures. Pour désactiver une texture, il faut appeler glbindtexture avec le type de texture souhaité (GL_TEXTURE_2D pour ce TP) et l identifiant de texture Envoie de la texture à OpenGL Pour envoyer la texture à OpenGL, il faut utiliser la fonction void glteximage2d( GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid* data ); 5

6 target représente le type de texture (GL_TEXTURE_2D) ; level représente le niveau de mipmap (0 pour le moment) ; internalformat représente le format de stockage de la texture sur la carte graphique (rgb, rgba, rgb flottant sur 8, 16 ou 32 bits,...). On se limitera pour ce TP aux formats GL_RGB ou GL_RGBA (en fonction du type d image) ; width largeur de la texture (de l image) en texels (pixels) ; height hauteur de la texture (de l image) en texels (pixels) ; border définit le nombre de pixels sur la bordure de l image (on restera à 0) ; format définit le format des données en entrée (rgb, rgba,...). On utilisera, en fonction des données en entrée les constantes GL_RGB ou GL_RGBA ; type spécifie le type des données en entrée (entiers, flottants, entier non signé, short, long,...) via différentes constantes (cf. la doc pour avoir une liste exhaustive des types de donnée utilisables) : GL_INT, GL_FLOAT, GL_UNSIGNED_INT,... ; data spécifie un pointeur sur les données de l image (un tableau 2D de pixels, en général chaque pixel est composé de 3 ou 4 composantes en fonction du format de l image rgb ou rgba). Cette fonction modifie la texture actuellement active. Elle a pour effet d envoyer les données spécifiées par cette fonction vers la mémoire de la carte graphique. 4.5 Spécification des paramètre d accès à la texture Lors de l accès d un shader à une texture, il est possible de modifier le comportement de cet accès (filtrage bi-linaire des données, répétition de la texture,...). Pour cela il faut utiliser la fonction void gltexparameteri( GLenum target, GLenum pname, GLint param ); où target représente le type de texture à paramétrer (GL_TEXTURE_2D) ; pname le nom du paramètre à régler. Il faut systématiquement régler les 4 paramètres suivants : GL_TEXTURE_MIN_FILTER, GL_TEXTURE_MAG_FILTER, GL_TEXTURE_WRAP_S, GL_TEXTURE_WRAP_T ; param donne la valeur du paramètre. Les paramètres ont chacun un rôle : GL_TEXTURE_MIN_FILTER et GL_TEXTURE_MAG_FILTER permettent de spécifier le comportement du filtrage de la texture lors de la mise à l echelle de la texture pour la plaquer sur un objet. Deux cas sont possibles : réduction (MIN) ou agrandissement (MAG). Deux valeurs pour ces paramètre sont possibles : GL_LINEAR (active le filtrage bi-linéaire) et GL_NEAREST (prend le texel le plus proche, sans filtrage). GL_TEXTURE_WRAP_S et GL_TEXTURE_WRAP_T permet de spécifier si il faut répéter la texture ou non sur la largeur (S) et la hauteur (T) lorsque les coordonnées de textures dépassent la taille de la texture. Les valeurs possibles des paramètres sont : GL_CLAMP, GL_MIRRORED_REPEAT ou GL_REPEAT. Cette fonction modifie les paramètres d accès de la texture active courante. 4.6 Exemple Exemple de création et d initialisation d une texture. GLuint idtex; 6

7 float imgrawdata[10 * 10 * 4] = {...}; //Creation de l identifiant de texture glgentextures(1, &idtex); //Activation de la texture glbindtexture(gl_texture_2d, idtex); //Envoi des donnees glteximage2d( GL_TEXTURE_2D, 0, GL_RGBA, 10, 10, 0 GL_RGBA, GL_FLOAT, imgrawdata ); //Reglage des parametres d acces gltexparameteri(gl_texture_2d, GL_TEXTURE_MIN_FILTER, GL_LINEAR); gltexparameteri(gl_texture_2d, GL_TEXTURE_MAG_FILTER, GL_LINEAR); gltexparameteri(gl_texture_2d, GL_WRAP_S, GL_CLAMP); gltexparameteri(gl_texture_2d, GL_WRAP_T, GL_REPEAT); //On oublie pas de desactiver la texture glbindtexture(gl_texture_2d, 0); 5 Utilisation des textures 5.1 Dessin utilisant la texture Une fois ces étapes d initialisations effectuées, il est possible d utiliser la texture pour le dessin d un objet. Pour cela, il suffit d activer la texture, via glbindtexture avant d appeler les primitives de dessins. Attention, il faut que le programme de shaders servant au rendu prenne en compte la texture! Une fois le rendu terminé, il faut désactiver la texture via un glbindtexture(gl_texture_2d, 0); 5.2 Spécification des coordonnées de texture Pour associer un sommet de la géométrie à un texel d une texture, il faut associer aux coordoonées du sommet des coordonnées de textures. Il faut donc ajouter un attribut supplémentaire à chaque sommet indiquant les coordonnées de textures. Dans ce TP, comme nous manipulons des textures 2D, il suffit de spécifier un attribut pour chaque sommet qui sera un vecteur 2D. Par défaut, les coordonnées de textures sont comprises dans l intervalle [0; 1]. Le texel de coordonnée (0, 0) est donc le pixel (0, 0) et le texel de coordonnées (1, 1) sera le pixel (w 1, h 1) où w désigne la largeur (en nombre de pixels) de l image utilisée pour la texture et h sa hauteur (en nombre de pixels). 5.3 Accès depuis un shader Pour accéder à une texture dans un shader, il faut définir une variable uniforme de type sampler2d (pour une texture 2D). Cette variable permet d accéder à la texture active au moment de l appel de la primitive de dessin. 7

8 Pour récupérer la couleur d un texel d une texture dans un shader, il faut utiliser l une des fonctions prédéfinie en GLSL pour accéder aux textures. Dans ce TP nous utiliserons la fonction suivante 4 : vec4 texture(sampler2d sampler, vec2 coord); Exercice : 1. Créer 2 vertex buffer objects : un pour les coordonnées de sommets, un pour les coordonnées de textures. Ces sommets devront permettent de dessiner ces 3 bandes de triangles avec les coordonnées de textures mentionnées pour les différents sommets : (-1,1) (2,2) (1,1) (0,0) (-1,-1) (1,-1) 2. Créer un vertex shader et un fragment shader permettant de dessiner ces 3 bandes de triangles. Le vertex shader doit prendre en entrée : les coordonnées (3D) des sommets et les coordonnées 2D de texture associé à chaque sommet. Il doit seulement transmettre les coordonnées transformées des sommets et les coordonnées de textures au fragment shader. Le fragment shader lit en entrée les coordonnées de textures passées par le vertex shader. Récupère la couleur du texel correspondant dans la texture et renvoie comme couleur de sortie la couleur du texel. 3. Dessiner ces bandes de triangles en utilisant le shader précédemment créé. Faites varier les paramètres d accès à la texture. Utiliser la texture fournie dans le fichier damier.h 5. Exercice : 1. Concevoir une méthode (ou une classe) permettant de lire une image depuis un fichier et de la charger en une texture OpenGL. Vous pouvez utiliser la méthode contenue dans le fichier texture_loading.cpp. 2. Rendre un cube et sur chaque face y plaquer la texture du fichier woodbox.bmp. 4 Référer vous aux spécifications du GLSL pour avoir la liste exhaustive de ces fonctions d accès aux textures. 5 Tous les détails sur le type de la texture (taille, nombre de composantes couleurs et format) sont donnés dans ce fichier. 8