Normal

mapping

+ =

Crédits :
Gaël Guennebaud, Joëlle Thollot, Marco Salvi,
Akenine-Möller, Haines & Hoffman (« Real-Time Rendering », AK Peters)
 Normal mapping
Idée générale
§ représenter les micro-détails sous forme d'une texture de
normales représentant les variations de la surface détaillée
§ utiliser un maillage de basse résolution pour la rastérisation
§ utiliser la carte de normales lors du shading par fragment

2
 Stockage
Dans une image RGB
R = Nx, G = Ny, B = Nz
Mapping de [-1,1] ⟶ [0,1]

3 Images par Eric Chadwick

 Calcul d'une carte de normales
À partir d'un maillage 3D très détaillé
1. projeter et rastériser le maillage simplifié dans la texture
2. pour chaque texel, lancer un rayon en direction du maillage détaillé
3. calculer et stocker la normale en espace objet ou tangent

maillage détaillé maillage simplifié carte de normales

4 Images : Normal Map Baking in Blender 2.5 by Jonathan Williamson
 Calcul d'une carte de normales
Rayon lancé depuis une cage extrudée à partir du
maillage simplifié
cage extrudée
rayons
maillage simplifié

maillage détaillé

[Link]

5
 Calcul d'une carte de normales
À partir d’une image
1. convertir l'image en champ d'élévation (niveaux de gris)
2. calculer les normales du champ d'élévation (gradient)
Attention : les normales sont représentées dans l'espace de la
texture, c.-à-d. dans l’espace tangent
⟹ transformation des normales dans le repère de l'objet
avant de réaliser les calculs d'éclairage !

6
 Calcul du repère tangent
Pour un triangle, repère tangent défini par :
T : tangente, B : cotangente, N : normale
Un point q(s,t) du triangle p0, p1, p2 peut être p2

définie comme : q = (s-s0) T + (t-t0) B q2

N
Soient q1, q2 tels que : q1 = p1 – p0 B
q1
p1
q2 = p2 – p0 p0 T
On veut T, B, N tels que : q1 = (s1-s0) T + (t1-t0) B
q2 = (s2-s0) T + (t2-t0) B
⟹ 6 équations, 6 inconnues (3 pour T et B) : p2 p1
✓ ◆ q(s,t)
s1 s0 s2 s0
q1 q2 = T B q2 q1
t1 t0 t2 t0
<latexit sha1_base64="/ExPCPabZqLyAhh0h0+YqMGo5e0=">AAACtXicdZHfbtMwFMadMGALf1bgcruwaEHcUCUZUtcLpKncILGLTVq3SUsUOc5JZ81xgn2CVkV5Ld6FN+AxcLpuait2pMhffud8ts9xWklh0Pf/OO6TrafPnm/veC9evnq923vz9tyUteYw5aUs9WXKDEihYIoCJVxWGliRSrhIb751+YtfoI0o1RnOK4gLNlMiF5yhRUnv92AQpTATqqkKhlrctpFdr9O8+dkmAf1IV37DCFT2UEe/0kecZ+2Kb9KuubwND/VMEnw2iW8tJgk7FUUeWoYLhpZZ5a1tMhgkvb4/HB364/GI+kN/EZ34Mg7DAxosSZ8s4yTp/Y2yktcFKOSSGXMV+BXGDdMouAR7rdpAxfgNm8GVlYoVYOJmMd+WfrAko3mp7aeQLuiqo2GFMfMitZVd12Yz18H/5jpSYXG7cT7mh3EjVFUjKH53fF5LiiXtnpBmQgNHObeCcS1sB5RfM8042of27Gju+6ePi/NwGBwMg9OwfzRZDmmb7JH35BMJyIgcke/khEwJd/adifPDOXZHbuxmbn5X6jpLzzuyFm75DxOj1mk=</latexit>

t
p0(s0,t0)
7 s
 Calcul du repère tangent
✓ ◆
s1 s0 s2 s0
q1 q2 = T B
<latexit sha1_base64="pJcrdvvEtbkF6Kqn3TfZfXDk3M0=">AAACtXicdVHBTtwwEHVCCzQUutBjOVjdBXFhlSwHuCCh7aVSOYDEAhKJIseZLBaOk9oTxCrKb/Ev/EE/o86yQrtLO5Ll5zfzPJ7npJTCoO+/OO7Kh4+ra+ufvI3Pm1tfOts716aoNIcRL2ShbxNmQAoFIxQo4bbUwPJEwk3y8KPN3zyCNqJQVzgpIcrZWIlMcIaWijvPvV6YwFiouswZavHUhHa/T7L6dxMHdJ/OHQchqPStjp7S/yivmjndsFlQeUsa6pk4ODSxbyUmHrQoDD20HE45tJxF3sIlvV7c6fp9fxr0PQhmoEtmcRF3/oRpwascFHLJjLkL/BKjmmkUXIJ9VmWgZPyBjeHOQsVyMFE99behe5ZJaVZouxTSKTuvqFluzCRPbGU7tVnOteQ/cy1TYv601B+zk6gWqqwQFH9tn1WSYkHbL6Sp0MBRTixgXAs7AeX3TDOO9qM9a02wbMR7cD3oB0f94HLQPRvOTFon38h3ckACckzOyE9yQUaEO7vO0PnlnLvHbuSmbvZa6jozzVeyEG7xF7bp1i0=</latexit>
t1 t0 t2 t0
✓ ◆ 1
s1 s0 s2 s0
⇔ T B = q1 q2
<latexit sha1_base64="toWKeaOzAAUNC3gHnv6Ew5EM9fw=">AAACunicdVFRT9swEHYytrHARrc97sWsZdoLVdw9sAcmIXiAxyJRQCIlctxLseo4wb4gqii/bL9k/4CfgVMKooWdZPm77+7z+e6SQkmLYfjP89+svH33fvVDsLb+8dNG6/OXU5uXRsBA5Co35wm3oKSGAUpUcF4Y4Fmi4CyZHDTxsxswVub6BKcFDDM+1jKVgqOj4tbfTidKYCx1VWQcjbytI3dfJWl1UtMf9NHZryPQo6cc+of+R3Vdx+yZzrm9BWWwpKOBjdm2jUMnsnGvQVEUoONwxqHjHAoWHrmstlnd6cStdtgNZ0ZfAjYHbTK3fty6i0a5KDPQKBS39oKFBQ4rblAKBe5vpYWCiwkfw4WDmmdgh9VsyDXdcsyIprlxRyOdsc8VFc+snWaJy2yat8uxhnw11jAFZrdL9TH9PaykLkoELR7Kp6WimNNmj3QkDQhUUwe4MNJ1QMUVN1yg23bgRsOWB/ESnPa67FeXHffae/vzIa2Sb+Q7+UkY2SF75Ij0yYAIb9M79Presb/rJ770Jw+pvjfXfCUL5uM9iAfYEw==</latexit>
t1 t0 t2 t0
✓ ◆ 1
1 t2 t0 s0 s2
⇔ T B = q1 q2
<latexit sha1_base64="kp/py7ArVd2y4tC2fRCq5cB+nPM=">AAAC0nicdZLPb9MwFMedDNgIvwocuVi0IC6r7HDYOCBN48JxSO02aSmW4zqtNcfJ7Be0YuUwceW/48R/wJ+B0xW0dvCkKF9/3ntfx8/Ja60cEPIzirfu3L23vXM/efDw0eMnvafPjl3VWCHHotKVPc25k1oZOQYFWp7WVvIy1/IkP//Q5U++SOtUZUawqOWk5DOjCiU4BMR6PwaDLJczZXxdcrDqss3Ce54XftTi1/jP4rDNpJn+rcHvcVZYLjxtvWMUWLrrWAqMtvg/bhctozf8wjJdc0w2+nDSmQIjockx0tlnWWAkMLpkNDCSrJl89ru0HQxYr0+GZBn4tqAr0UerOGK9X9m0Ek0pDQjNnTujpIaJ5xaU0DJ8W+NkzcU5n8mzIA0vpZv45fBb/CqQKS4qGx4DeElvdnheOrco81DZHd5t5jr4z1xHaigvN/aHYn/ilakbkEZcb180GkOFu/vFU2WlAL0IggurwgmwmPNwVxD+giSMhm4O4rY4Tof07ZB+SvsHh6sh7aAX6CV6gyjaQwfoIzpCYySidxGL5pGKR/HX+Cr+dl0aR6ue52gt4u+/AW+o4Xk=</latexit>
s1t2 s2t1 t0 t1 s1 s0

✓ ◆ 1 ✓ ◆
1 a b 1 d b
A = =
c d (ad bc) c a

8
[Link]
 Calcul du repère tangent
Pour un sommet, moyenne des repères tangents des
faces adjacentes (comme pour les normales)
⟹ Ortho-normalisation du repère en négligeant les
déformations anisotropes (Gram-Schmidt)
T' = T – (N • T) N
B' = B – (N • B) N – (T' • B)T'/||T'||
…puis re-normaliser

Remarque : attention aux discontinuités des coordonnées de texture

9
 Calcul du repère tangent
Ortho-normalisation de Gram-Schmidt

Wikipedia
10
 Calcul du repère tangent
Passage du repère tangent au repère local
de l'objet : 0 1
s
x y z = T0 B0 N @ t A
r

11
 Utilisation du repère tangent
Au chargement de l'objet :
calcul des repères tangents N, T', B' par sommet
Optimisation :
on peut ne stocker que les vecteur N, T' et l’entier m,
tel que: B' = m (N × T’) avec m = ±1 = det(T' B' N)

12
 Utilisation du repère tangent
Au moment du rendu :
1. envoi des repères tangents (N, T', B') au vertex shader
2. interpolation des vecteurs par le rasterizer
3. re-normalisation des vecteurs dans le fragment shader
4. lecture de la carte des normales
5. remapping de la normale de [0,1] ⟶ [-1,1]
6. transformation de la normale du repère tangent vers le
repère local, puis vers celui de la vue
7. calcul de l'éclairement

13
 Bump vs. Normal Map
Bump mapping
§ Stockage de la hauteur de la surface
§ Calcul du gradient à la volée pour obtenir
le déplacement dans le plan tangent
Normal mapping
§ Stockage direct des normales perturbées

Extensions
§ Parallax mapping : déplacement des coordonnées de texture
§ Displacement mapping : déplacement de la géométrie

14
Texture diffuse Normal mapping

Parallax mapping Displacement mapping

[Link]

15