Master Professionnel d'informatique, Université Paris 11 Cours de Rendu Graphique Avancé

Transcription

1 Environnement Master Professionnel d'informatique, Université Paris 11 Cours de Rendu Graphique Avancé Christian Jacquemin (Université Paris 11 et LIMSI-CNRS) ENVIRONNEMENT: INTRODUCTION ENVIRONNEMENT: INTRODUCTION Prise en compte de l'environnement en rendu graphique Rendu de l'environnement en rendu graphique temps réel On appelle environnement, les composantes secondaires de la scène ayant les caractéristiques suivantes: assez éloignées pour que leur rendu soit stable dans des petits déplacements, rendues à base d'image plutôt que de géométrie, Une partie des effets obtenus en rendu graphique avancé prennent en compte des informations sur l'environnement réflexion, réfraction, éclairement. On utilise des surfaces simples sur lesquelles on projette des images de l'environnement. Différentes surfaces Sphère: même vue du maillage quelle que soit la direction. Rendu assez lourd. Intersections faciles à calculer Cube: génération des textures et rendu faciles. Légers artéfacts dans les coins. Cylindre: intermédiaire entre les deux précédents. Convient bien pour des déplacements de caméra avec des vues horizontales. Il s'agit généralement d'approximations, qui sont cependant convaincantes.

2 Le cube d'environnement ENVIRONNEMENT: CUBE 1 Un cube d'environnement est un cube centré sur les axes et portant 6 images carrées et d'angle de vue 90 degrés. Le cube d'environnement: images ENVIRONNEMENT: CUBE 2 On charge 6 textures correspondant à x positif, x négatif, y positif, y négatif, z positif et z négatif. Crées à partir de photos ou de logiciels de modélisation de paysages 3D tels que Bryce. Crées à partir de photos ou de logiciels de modélisation de paysages 3D tels que Bryce. ENVIRONNEMENT: CUBE 3 Le cube d'environnement en OpenGL: chargement des textures Un seul identifiant de texture suffit pour charger les six textures: Six variables OpenGL prédéfinies et séquentielles pour la désignation des six faces: // chargement des six textures for( int facenumber = 0 ; facenumber < NB_CUBE_FACES ; facenumber++ ) { loadpngtex( strfilename[ facenumber ], PNG, &hasalpha ); glbindtexture( GL_TEXTURE_CUBE_MAP, textureid ); glubuild2dmipmaps(gl_texture_cube_map_positive_x + facenumber, GL_RGBA8, imagepng.sizex, imagepng.sizey, GL_RGBA, GL_UNSIGNED_BYTE, (const void *)imagepng.data); free(imagepng.data); } ENVIRONNEMENT: CUBE 4 Le cube d'environnement en OpenGL: rendu Le rendu d'une cube map consiste à activer la texture de cube map, rendre un cube en assignant les bonnes coordonnées de textures aux sommets du cube. // charge la cube map glbindtexture( GL_TEXTURE_CUBE_MAP, g_texture[cube_map_texture] ); // mode cube map texture glenable(gl_texture_cube_map); // dessine la cube map draw_skybox(); // fin de mode cube map texture gldisable(gl_texture_cube_map); Attention à ne pas activer les shaders au moment du rendu du cube.

3 ENVIRONNEMENT: CUBE 5 Le cube d'environnement en OpenGL: coordonnées de texture sur le cube Prévoir éventuellement un petit recouvrement entre les faces pour masquer les arêtes. ENVIRONNEMENT: RÉFLEXION 1 Rendu de la réflexion en suivant le trajet inverse de la lumière Le rendu de la réflexion s'appuie sur un volume d'environnement pour rendre les parties lointaines de la scène. ENVIRONNEMENT: RÉFLEXION 2 Limites de la réflexion avec un volume d'environnement Le rendu de la réflexion avec un volume d'environnement a les limites suivantes. ne prend pas en compte les réflexions entre objets, demande un recalcul des textures d'environnement en cas de déplacement important, ne prend pas en compte l'auto-réflexion d'un objet concave. ENVIRONNEMENT: RÉFLEXION 3 Calcul du rendu dans le cas d'un cube d'environnement Soit R(x, y, z) le vecteur réfléchi divisé par la valeur absolue de la plus grande coordonnée. La coordonnée à +1 ou -1 donne la face d'intersection, les deux autres coordonnées donnent les coordonnées de texture sur cette face. Exemple V = ( 3, -5, -8 ) Après normalisation V = ( 3/8, -5/8, -1 ) Le point est dans le plan z=-1 avec comme coordonnées x=3/8 et y=-5/8. On se ramène à des coordonnées dans l'intervalle [0,1] avec une translation et un changement d'échelle 0.5 * x et 0.5 * y Les coordonnées du texel sont donc: u = 3/ et v = -5/

4 Implémentation sur shaders ENVIRONNEMENT: RÉFLEXION 4 Implémentation en Cg ENVIRONNEMENT: RÉFLEXION 5 Programme de vertex Calcule du vecteur réfléchi à partir du vecteur incident I et du vecteur normal N normalisé: R = I - 2 N (N. I) La fonction Cg le fait. Repère Les coordonnées du vecteur réfléchi doivent être exprimées dans le repère du cube d'environnement. ENVIRONNEMENT: RÉFLEXION 6 Implémentation en Cg (suite) Shader de fragment Il existe une fonction d'accès à un cube d'environnement à partir de la direction d'un vecteur: ENVIRONNEMENT: RÉFRACTION 1 La réfraction avec un volume d'environnement Comme pour la réflexion, le rendu de la réfraction suit le trajet inverse de la lumière et s'appuie sur un volume d'environnement. Renvoie la couleur du texel intersection du vecteur avec la cube map.

5 ENVIRONNEMENT: RÉFRACTION 2 Calcul du vecteur transmis T Loi de Snell: 1 sin 1 = 2 sin 2 Les coefficients 1 et 2 correspondent à la vitesse de la lumière dans les milieux traversés. Résolution ENVIRONNEMENT: RÉFRACTION 3 Limites de la réfraction avec un volume d'environnement Le rendu de la réfraction avec un volume d'environnement a les limites suivantes. ne prend en compte que la première traversée du rayon et ignore, en particulier, sa sortie du volume translucide, demande un recalcul des textures d'environnement en cas de déplacement important. On se place dans le cas de vecteurs normalisés et on considère = 1 / sin 2 1 = sin On passe aux cosinus (des produits scalaires) et on résoud en cos 2 : cos 2 = -T. N = ( 1-2 ( 1 - cos 2 1 ) ) 1/2 = ( 1-2 ( 1 - (I. N) 2 ) ) 1/2 3.Les trois vecteurs N, I et T sont coplanaires, donc T = x I + y N. En utilisant la valeur précédente de T. N et T. T = 1, on en déduit x =. En remplaçant x par sa valeur, on trouve y = - cos 1 - cos 2 = - I. N - cos 2 Vecteur transmis: T = I - ( I. N + cos 2 ) N avec cos 2 = ( 1-2 ( 1 - (I. N) 2 ) ) 1/2 ENVIRONNEMENT: RÉFRACTION 4 Implémentation sur shaders Implémentation en Cg ENVIRONNEMENT: RÉFRACTION 5 Programme de vertex Calcule du vecteur réfracté à partir du vecteur incident I normalisé et du vecteur normal N normalisé: T = I - ( I. N + cos 2 ) N La fonction Cg le fait. Repère Comme pour la réflexion, les coordonnées du vecteur réfracté doivent être exprimées dans le repère du cube d'environnement. Shader de fragment Même shader que pour la réflexion.

6 ENVIRONNEMENT: RÉFRACTION 6 Amélioration: combinaison des lumières réfléchie et transmise Une partie de la lumière est transmise et une partie est réfléchie à la frontière entre deux matériaux. La quantité de lumière réfléchie est plus important aux angles rasants (angles incidents proches de 90 ). Elle se mesure par la réflectivité F, une valeur entre 0 (transparent) et 1 (réfléchissant). L'équation de Fresnel pour le calcul de la réflectivité en fonction de l'angle incident et des propriétés du matériau est trop complexe pour être faite en temps réél. ENVIRONNEMENT: RÉFRACTION 7 Approximation de la réflectivité Interpolation entre la couleur réfléchie et la couleur réfractée dont le coefficient est fonction de l'angle d'incidence F = max( 0, min( 1, biais + échelle (1 + I. N) puissance ) ) biais représente une réflectivité minimale, échelle est la contribution de l'angle à la réflectivité, puissance focalise ou élargit la zone de transparence., Implémentation sur shaders Le coefficient F est calculé dans le programme de vertex. Le shader de fragment interpole les contributions des lumières réfléchies et transmises. ENVIRONNEMENT: RÉFRACTION 8 Rendu de l'effet Fresnel sur shaders ENVIRONNEMENT: RÉFRACTION 9 Amélioration: rendu de la dispersion chromatique Le coefficient de réfraction est fonction de la longueur d'onde (et donc de la couleur de la lumière). Cette loi explique, en particulier, la décomposition de la lumière blanche par le prisme.

7 ENVIRONNEMENT: RÉFRACTION 10 Simplification de la dispersion chromatique ENVIRONNEMENT: RÉFRACTION 11 Rendu de la dispersion chromatique sur shaders On ne considère que les coefficients de réfraction pour les trois couleurs primaires R, G et B. On combine les valeurs des lumières réfractées sur les trois couleurs primaires pour calculer la lumière réfractée totale. Inconvénient: ne prend pas en compte la variation continue des coefficients de réfraction sur les couleurs du spectre. Donne un rendu discrétisé des couleurs. Implémentation sur shaders Trois vecteurs transmis T r, T g et T b sont calculés dans le programme de vertex. Le shader de fragment copie la composante rouge (resp. verte et bleue) du texel pointé par le vecteur T r (resp. T g et T b ), et les additionne pour constuire les pixels de l'image réfractée. RENDU NPR: INTRODUCTION Notion de Rendu Non Photoréaliste (Non-Photorealistic Rendering - NPR) Rendu stylisé dans des buts de communication ou de personnalisation. Par exemple, Rendu Non Photoréaliste le rendu schématique dans des domaines techniques, le rendu dans le style bande dessinée utilisé, par exemple, dans les jeux, l'ajout d'effets visuels sur un rendu photoréaliste (effects de coloration, de contourage, de relief...). Il s'agit d'un sujet vaste dont nous ne traiterons qu'une partie. Nous nous focaliserons essentiellement sur les effets qui peuvent se traiter simplement par programmation du processeur graphique.

8 RENDU NPR: EXEMPLE Exemple de rendu non photo-réaliste: par par à-plats (Toon Shading) avec texturage et contourage par halo et par angle de vue avec la surface. RENDU NPR: TOON SHADING 1 Rendu diffus par à-plats (Toon Shading) RENDU NPR: TOON SHADING 2 Méthode de rendu par à-plats sur shader On s'appuie sur une texture unidimensionnelle pour discrétiser le rendu de la lumière diffuse. On calcule la composante diffuse de la lumière, on consulte une texture d'ombrage dont les coloris forment les différents niveaux, Pour limiter les effets d'aliasing, il est recommandé de flouter les transitions de couleur dans la texture. Implémentation dans le shader de fragment La valeur de l'éclairement diffus est utilisée comme coordonnée de texture à chaque pixel. On est obligé de se ramener à l'intervalle [ ]: float4 diffuse = tex2d(tons, float2( saturate(ndotl) * , 0.0));

9 Cas de la lumière spéculaire RENDU NPR: TOON SHADING 4 Extensions RENDU NPR: TOON SHADING 5 On effectue le même traitement que pour la lumière diffuse au moyen d'une texture bicolore. float valspeculaire = pow( saturate( NdotH ), 30 ); float4 specular = tex2d(speculaire, float2( saturate(valspeculaire)* , 0.0)); On peut avoir plusieurs sources lumineuses dans la scène qui éclairent chaque objet indépendemment (et optimalement). On peut utiliser des textures procédurales. Pour des matériaux, étoffes... Les valeurs non rendues de la lumière spéculaire correspondent à la couleur noire. Après avoir lu les valeurs sur les textures: couleur = saturate( diffuse * (1 - specular) + specular); But du rendu de silhouette RENDU NPR: SILHOUETTE 1 Il s'agit soit d'imiter un style bande dessinée en contourant les objets soit d'améliorer la lisibilité d'une figure: en traçant le contour des objets, RENDU NPR: SILHOUETTE 2 Rendu de silhouette par angle de vue d'une surface On colorie les zones pour lesquelles la vue est rasante et donc susceptibles de correspondre à une frontière entre une zone visible et une zone cachée. en traçant les frontières entre des zones différentes d'un objet, en soulignant le relief en traçant les crêtes et les vallées. Focus Nous nous intéressons, dans ce cours, aux implémentations sur cartes graphiques (donc peu contextuelles).

10 RENDU NPR: SILHOUETTE 3 Calcul du rendu de silhouette par angle de vue d'une surface Rendu de silhouette par halo RENDU NPR: SILHOUETTE 4 On calcule le produit scalaire du vecteur de vue et de la normale à la surface. On accède à une texture de seuillage en fonction de la valeur de ce produit scalaire: float3 silhouette = tex2d(bord, float2( saturate(ndotv) * , 0.0)).rgb; On combine la couleur de bord avec la couleur de l'objet: C *= silhouette; RENDU NPR: SILHOUETTE 5 Construction du halo autour d'un maillage Le maillage expansé est construit en tout sommet M de normale n en prenant MM' = k n RENDU NPR: SILHOUETTE 6 Étapes du rendu de silhouette par halo Désactiver le buffer de profondeur, Dessiner le maillage en le dilatant le long des normales avec le programme de vertex et en lui attribuant un shader de fragment noir uniforme, activer le buffer de profondeur, tracer le maillage avec diffus et spéculaire.

11 Contrôle de la taille du halo RENDU NPR: SILHOUETTE 7 On recherche la hauteur h entre deux points M et M' du plan z = z 0 qui correspond à un pixel sur le port de vue. Soit H, le nombre de pixels en hauteur: (top + bottom) / (H. near) = h / z 0 donc h = (z 0 / near). ((top + bottom) / H) Contrôle de la taille du halo (suite) RENDU NPR: SILHOUETTE 8 La longueur du déplacement le long des normales en xy doit être proportionnel à l'ordonnée z pour que le halo soit de taille constante. Pour un halo de taille 3 pixels: 1.on passe le rapport uniforme au programme de vertex: float rapport = (top - bottom) / (near * (float)height); cgglsetparameter1f( cggetnamedparameter(cgvertexhaloprogram, "topbottomsurhnear"), rapport ); 2.et on en déduit la dilatation à faire sur chaque normale en fonction de, la longueur de la normale dans le plan xy, et de!, l'ordonnée du point courant dans le repère de l'observateur: float rapport = abs( poso.z * topbottomsurhnear ) / longxy; 3.pour un halo de 3 pixels, on a donc un décalage: float4 exppos = position * rapport * float4( normal, 0 ); Hachures RENDU NPR: HACHURES 1 Rendre des hachures comme sur un tracé à la plume. Difficulté Éviter du flou et du mélange de hachures à des niveaux de résolution et à des niveaux de gris intermédiares. Les mipmaps ne conviennent donc pas. Exemple de rendu de hachures RENDU NPR: HACHURES 2 Emil Praun, Hugues Hoppe, Matthew Webb, Adam Finkelstein Real-Time Hatching. SIGGRAPH 2001, Computer Graphics Proceedings Méthode On utilise des Tonal Art Maps qui sont des textures telles que les traits à un niveau d'opacité apparaissent dans les niveaux d'opacité supérieurs.

12 Éclairage de Gooch RENDU NPR: GOOCH 1 Méthode RENDU NPR: GOOCH 2 Amy Gooch - Bruce Gooch - Peter Shirley - Elaine Cohen A Non-Photorealistic Lighting Model For Automatic Technical Illustration. SIGGRAPH 1998, Computer Graphics Proceedings On remplace la lumière diffuse rendue par des variations dans la luminosité (ou valeur) par des variations sur le ton (hue) On combine la couleur de l'objet avec des couleurs prises dans une palettes de couleurs chaudes à froides en fonction de l'intensité de la lumière diffuse. Formules RENDU NPR: GOOCH 3 Exemple RENDU NPR: GOOCH 4 C = saturate((.5 * (1 + saturate(ndotl))) * (float3(1,0,0) +.3 * float3(.98,.84,.61)) + ( * (1 + saturate(ndotl))) * (float3(0,0,1) +.3 * float3(.98,.84,.61)) + valspeculaire / 2.0 );

13 RENDU NPR: ESPACE IMAGE 2 Principe Le traitement dans l'espace image consiste à enrichir le rendu à partir d'une sortie bitmap intermédiaire (et non directement sur le maillage). Exemples Recherche de contours à partir de différences de couleur entre des rendus d'objets. Recherche de contours à partir de cartes de normales (normal map): une sortie image encodant la direction de la normale en chaque pixel. Recherche de contours à partir de cartes de profondeurs (depth map): une sortie image encodant la distance à la caméra. Modification du rendu à partir de fonction de transfert sur une sortie image (flou, rendu sépia, seuillage...). RENDU NPR: ESPACE IMAGE 4 Implémentation sur le processeur graphique On utilise un rendu projectif de l'image pour appliquer un shader de fragment et récupérer en sortie l'image retraitée.

14 Étapes du rendu RENDU NPR: ESPACE IMAGE 6 Rendu de la carte des normales RENDU NPR: ESPACE IMAGE 7 On utilise un shader de fragment dont la sortie en chaque pixel est la normale en ce point. (Les coordonnées sont transformées dans l'intervalle [0,1].) // Normalise normale float3 N = normalize(normal); // Transforme les coordonnées de la normale de [-1..1] vers [0..1] normal = 0.5 * (normal + float3( 1.0, 1.0, 1.0 )); return float4( normal, 1.0 ); On fait un rendu vers texture de cette sortie pour la réutiliser en texturage (en restant sur la mémoire de la carte graphique). glbindtexture( GL_TEXTURE_2D, idtexture ); glcopyteximage2d( GL_TEXTURE_2D, 0,GL_RGBA, 0, 0, width, height, 0); RENDU NPR: ESPACE IMAGE 8 Rendu orthogonal de la carte des normales Rendu en projection orthogonale d'un polygone texturé dont la taille est celle du plan de projection et dont la texture est la carte de normales de l'étape précédente. Détection des contours par un shader de fragment Fonction de calcul de la valeur d'origine du vecteur normal dans [-1,1] 3 float3 vecteurinitial( sampler2d normales, float x, float y ) { return 2.0 * tex2d(normales, float2( x, y )).rgb - 1.0; } Calculs des produits scalaires du vecteur normal avec les vecteurs voisins: ); ); float3 norm = valinit( normales, decalcoords.x, decalcoords.y ); float3 norm10 = valinit( normales, decalcoords.x + radius, decalcoords.y float3 norm01 = valinit( normales, decalcoords.x, decalcoords.y + radius float dist = min( abs(dot(norm10, norm)), abs(dot(norm01, norm)) ); On fait un rendu vers texture de cette sortie pour texturer le maillage.

15 Notion de texture projective RENDU NPR: ESPACE IMAGE 9 L'application projective d'une texture consiste à calculer les coordonnées de la texture en chaque point dans un plan de projection. RENDU NPR: ESPACE IMAGE 10 Application de la notion de texture projective au contourage On se place dans le cas particulier où la texture projective contenant les contours est dans un plan parallèle au plan de projection de rendu en perspective. Il faut donc pour cela connare la matrice de texturage: la transformation qui fait passer de l'espace objet à l'espace de la texture. Ce type de texturage est utilisé, par exemple, en ombrage par carte d'ombres (shadow mapping). La texture contient les distances des objets dans une projection où l'observateur est la source lumineuse. RENDU NPR: ESPACE IMAGE 11 Rendu perspective du maillage et ajout des contours par texture projective Le programme de vertex calcule les coordonnées de texture des sommets du maillage. Programme de vertex On effectue la transformation vers un quadrilatère parallèle au plan de projection et dont les sommets diagonaux sont (0,0) et (1,1). // position de l'espace objet vers l'espace de l'observateur float4 PosView = mul(modelview, position); // position dans le plan de projection float3 posviewinprojplane = PosView.xyz * near / PosView.z; // coordonnées de texture projective dans le plan de la texture // homothétie (on suppose un plan de projection carré) et translation projtexcoords = float4( -posviewinprojplane.xyz / (top - bottom), 1 ) - float4( 0.5, 0.5, 0, 0 ); RENDU NPR: ESPACE IMAGE 12 Ajout des contours par texture projective (suite) Le shader de fragment accède à la texture projective et l'applique sur le rendu du maillage comme un masque. Shader de fragment Le shader de fragment reçoit du programme de vertex les coordonnées de texture "# dans la texture projective. // Accède à la texture projective de contours float4 couleurcontour = tex2dproj( contours, projtexcoords ); // Utilise la couleur de contour comme un masque C *= couleurcontour.r;

16 RENDU NPR: ESPACE IMAGE 13 Caractéristiques du rendu sur image Permet de "recycler" les programmes de traitement d'image sur bitmaps dans le cadre d'un rendu 3D. Un GIMP 3D temps réel multipasses... Tire parti de la parallélisation de traitement dans le shader de fragment pour faire le traitement de l'image en sortie de rendu. Peut utiliser d'autres informations que le bitmap pour faire un rendu dans l'espace image: les cartes de normales, les cartes de hauteurs, les couleurs, des informations symboliques telles que des étiquettes attachées aux maillages... Traitement fait dans l'espace image donc à la précision de l'image. Les résultats des traitements varient en fonction de la résolution, donc en fonction de la distance, de l'orientation, du facteur de zoom... Limite: un seul rendu en texture peut être utilisé à la fois (à confirmer).