Normal Mapping (part 2)

This post is the continuation of the previous post. (link)

In this post, I will continue from where I finished the previous post. First, I will talk about how to compute the normal vectors for a surface defined by a height map, and how they get transformed when we transform the underlying height map. After that, I will derive to proper formula for the normal vector of a surface whose vertices are offset with a height map. I used this formula for computing the normal in the project I talked about in the previous post. (For more info, please check the previous post.)

Connection between the normal and the height map

Let’s take a height map, i.e. a $h: [0,1]^2\rightarrow\mathbb{R}$ function. Let’s assume that this function is smooth. The graph of this function, $\tilde{h}: [0,1]^2\rightarrow\mathbb{R}^3$ , $\tilde{h}(u,v)=(u,v,h(u,v))^T$ defines a smooth surface in $\mathbb{R}^3$ .

What is the normal vector of this surface? Or in other words, what is the normal map, corresponding to the height map $h$ ? To calculate that, we can take the cross product of the tangent and bitangent vectors, and normalize the result. So, for the unnormalized normal vector (denoted by $\hat{n}$ ) we have

$\hat{n}=\partial _u\tilde{h}\times\partial _v\tilde{h}=\begin{pmatrix} 1 \\ 0 \\ \partial_uh\end{pmatrix} \times\begin{pmatrix} 0 \\ 1 \\ \partial_vh\end{pmatrix} = \begin{pmatrix} -\partial_uh \\ -\partial_vh \\ 1 \end{pmatrix}$

and for the normal vector, we have $n=\frac{\hat{n}}{\|\hat{n}\|}$ . Now, what happens if we scale the height map by some number $a\in\mathbb{R}$ , that is, we consider the height map $(u,v)\mapsto ah(u,v)$ ? The partial derivatives will get multiplied by $a$ as well, so to compute the new normal from the old one, we have to do the following steps:

Divide the old normal by its z coordinate to get the old unnormalized normal back.
Multiply the first two coordinates of the old unnormalized normal by $a$ to get the new unnormalized normal.
Normalize the new unnormalized normal.

As you can see, the normal vector does not behave so nicely during the transformation of the height map, the partial derivatives (gradient) behave in a much simpler fashion. In fact, if we apply a more complicated transformation to the height map (for example multiply, add, divide two height maps together, take the exponential, logarithm, sine, square root of a height map, or whatever you like), the gradient of the new height map can be computed relatively easily and intuitively from the old gradient map, using the chain rule for derivation. Then the transformed normal map can be computed from the transformed gradient map.

In my opinion, it’s always more straightforward to work with the gradient map directly instead of the normal map. It’s not only that gradient maps can be transformed in a more naturally way, but in case of linear sampling and mip level generation they produce more correct results. This easily follows from the fact that differentiation is a linear operation, but the operation of taking the normal vector is not. For example, in this project, to compute the mip levels for a normal map I generate all mip levels of the underlying height map, and generate each level of the normal map from the corresponding level of the height map, instead of generating the biggest level of the normal map from the height map, and generating the mip levels of it by downsampling.

Also, as we will see below, if we want to apply normal mapping properly, what we need directly is not the normal map of the height map, it’s rather the gradient map of it.

Normal mapping

So let’s see, what we have and what we want. We have a surface $r: [0,1]^2\rightarrow\mathbb{R}^3$ . As I wrote at the end of the previous post, we can assume that the texture coordinates of a point $r(u,v)$ is $(u,v)$ . We also have a height map $h: [0,1]^2\rightarrow\mathbb{R}$ . Let’s define the function $n: [0,1]^2\rightarrow\mathbb{R}^3$ in a way that $n(u,v)$ is the normal vector of the surface at the point $r(u,v)$ . (This map is called the Gauss map of the surface $r$ .) From $r, n$ and $h$ we can define a new surface $r_h$ by offsetting the surface $r$ along its normal by the amount $h$ , that is,

$r_h=r+hn$ .

(This is the equation I use in the vertex shader to offset the vertices.) What we want is to find the normal vector of the surface $r_h$ . For that, we have to compute the tangent and bitangent vectors of this surface, and take the cross product of them. For the tangent vector, we have $\partial_ur_h = \partial_ur + (\partial_uh)n + h\partial_un$ . The terms look familiar, except for one: we haven’t seen the $\partial_un$ term yet. This term represents how the normal vector changes if we move along the tangent direction on the surface. It can be viewed as a second order term for describing the surface (the first order terms are the tangent and bitangent vectors), and can be computed from the first and second partial derivatives of the surface $r$ . Without going into too much details, I say that in differential geometry there is a thing called the shape operator (or Weingarten map) for a given surface. This operator tells us how the normal vector changes along a vector from the tangent plane on the surface, and this is exactly what we need. It can be represented by a 2×2 matrix $W$ which for the surface $r$ can be computed as

$W = \begin{pmatrix} w_{11} & w_{21} \\ w_{12} & w_{22} \end{pmatrix} = \begin{pmatrix} \langle\partial_ur, \partial_ur\rangle & \langle\partial_ur, \partial_vr\rangle \\ \langle\partial_vr, \partial_ur\rangle & \langle\partial_vr, \partial_vr\rangle \end{pmatrix} ^{-1}\ast \begin{pmatrix} \langle\partial_{uu}r, n\rangle & \langle\partial_{uv}r, n\rangle \\ \langle\partial_{vu}r, n\rangle & \langle\partial_{vv}r, n\rangle \end{pmatrix}$

where $\langle \cdot, \cdot\rangle$ denotes the usual scalar product on $\mathbb{R}^3$ .

I mention that the shape operator is related to the curvature of the surface: its eigenvalues are the principal curvatures, its determinant (the product of the eigenvalues) are the Gaussian curvature, the half of its trace (the sum of the element in the main diagonal, or the sum of the eigenvalues) is the mean curvature of the surface.

For us, the important thing is that we have $\partial_un = -w_{11}\partial_u r - w_{12}\partial_vr$ . (Don’t care about the negative sign, let’s just accept it as a convention.) So for the tangent vector of the offset surface we have

$\partial_ur_h = \partial_ur + (\partial_uh)n + h(-w_{11} \partial_u r - w_{12}\partial_vr) = (1-hw_{11})\partial_ur -hw_{12}\partial_vr + (\partial_uh)n$

$= \left[TBN\right] \begin{pmatrix} 1-hw_{11} \\ -hw_{12} \\ \partial_uh \end{pmatrix}$ ,

where $\left[TBN\right] = (\partial_ur, \partial_vr, n)$ is the usual (but not orthogonalized!) TBN matrix. Similarly, for the bitangent vector of the offset surface we have

$\partial_vr_h = \left[TBN\right] \begin{pmatrix} -hw_{21} \\ 1-w_{22} \\ \partial_vh \end{pmatrix}$ .

And actually, that’s it. As usually, the cross product of the tangent and bitangent vectors gives the unnormalized normal $\hat{n}_h= \partial_ur_h \times \partial_vr_h$ , and normalizing that we get the required normal vector $n_h=\frac{\hat{n}_h}{\|\hat{n}_h\|}$ .

Computation in practice

In order to do the above computation in the pixel shader, we need the following data

TBN matrix (at least the tangent and bitangent vectors),
the height map,
the gradient map (or indirectly, the normal map) of the height map,
the shape operator of the mesh.

The shape operator can be placed in the vertex data, next to the TBN matrix. Note, that even if the TBN matrix is not orthogonal, the normal vector is always perpendicular to the tangent vectors, and has unit length, so it can be computed on the fly, doesn’t have to be stored.

The shape operator is not large, it’s four floats. But anyway, is this the shape operator really necessary? As I said above, it can be seen as the second order terms of the surface, so in some way, they are less significant as the first order terms (the tangent and bitangent vectors). For the shapes in the video in the previous post I didn’t see too big difference between using the shape operator in the computation, or assuming it is zero. I saw only a little change in the rendered image when I switched on and off the shape operator in the shader (and hot-reloaded it). I want to do more experiments with it in the future, but it’s obvious from the above calculation, that the bigger the vertex offset (the values in the height map), the more significantly the shape operator influences the normal. Also, of course, the matrix of the shape operator depends on the actual surface, the more it curves, the bigger the values in the matrix are. For example, the shape operator of the plane (not surprisingly) is the zero matrix, and the shape operator of a sphere with radius $r$ is

$\begin{pmatrix} 1/r & 0 \\ 0 & 1/r \end{pmatrix}$ .

The case when TBN is orthogonal

Let’s finish with assuming that the TBN matrix is orthogonal, the shape operator is zero, and compute the normal in this case. Hopefully, we will get back the formula that is usually used for normal mapping.

If the shape operator is zero, we have

$\partial_ur_h = \left[TBN\right] \begin{pmatrix} 1 \\ 0 \\ \partial_uh \end{pmatrix}$ , and

$\partial_vr_h = \left[TBN\right] \begin{pmatrix} 0 \\ 1 \\ \partial_vh \end{pmatrix}$ .

And if TBN is orthogonal, we have

$\hat{n}_h=\left( \left[TBN\right] \begin{pmatrix} 1 \\ 0 \\ \partial_uh \end{pmatrix} \right) \times \left( \left[TBN\right] \begin{pmatrix} 0 \\ 1 \\ \partial_vh \end{pmatrix} \right) = \left[TBN\right] \left( \begin{pmatrix} 1 \\ 0 \\ \partial_uh \end{pmatrix} \times \begin{pmatrix} 0 \\ 1 \\ \partial_vh \end{pmatrix} \right)$

$= \left[TBN\right] \begin{pmatrix} -\partial_uh \\ -\partial_vh \\ 1 \end{pmatrix}$ .

Does this look familiar? I hope it does. The last term in the above equation is the unnormalized normal of the height map that we’ve seen before. That is what is usually stored in the normal map, and that’s what we multiply by the TBN matrix to get the normal vector of the normal mapped surface.

Normal Mapping (part 2)