本文同时发布在我的个人博客上：https://dragon_boy.gitee.io

  视差贴图是一种和法线贴图类似的技术，但基于不同的原则。同样也是通过视觉上的一些操作来让人产生有纵深的感觉，视差贴图效果更好。
  视差贴图和置换贴图的技术有很大的关系，置换贴图技术通过一张存储几何信息的纹理来置换或偏移顶点。其中一种纹理存储的是高度信息，这张纹理被称为高度图，下面是一个砖块图的高度图例子：

  当操作一个平面时，每个顶点将根据高度图中的采样高度值进行置换，将一个很平坦的平面转化为有一个有凹凸信息的平面。下面时一个使用了高度图置换的例子：

  这里的红线代表高度图中的几何平面信息，v向量代表我们的视线方向，如果一个平坦平面上的一个点有置换的话，那么对于A点我们应该看到的是B点。视差贴图的目的就是偏移A点的纹理坐标，以得到B点的纹理坐标，接着我们使用B点的纹理坐标来进行纹理采样，让观察者感觉再看B点。
  技巧在于如何从A点获取B点的纹理坐标。视差贴图通过将向量V的长度缩放到H(A)来获得P向量：

视差贴图

  这里使用的高度图是上面提到的高度图的反相，这样就会产生一些差别：

  同样，我们有平面的一个片段点A，对应的深度是H(A),同时也有一个我们希望看到的点B。这一次，我们将V反向缩放来获得P向量。我们可以用1减去高度图中的高度值来获取片段的深度值，或者将高度图反相来获得相同的结果。
  视差贴图在片元着色器中实现，我们需要计算片段到观察者的方向向量，所以我们需要切线空间的观察者位置和片段位置。顶点着色器如下：

#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;
layout (location = 3) in vec3 aTangent;
layout (location = 4) in vec3 aBitangent;

out VS_OUT {
    vec3 FragPos;
    vec2 TexCoords;
    vec3 TangentLightPos;
    vec3 TangentViewPos;
    vec3 TangentFragPos;
} vs_out;

uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;

uniform vec3 lightPos;
uniform vec3 viewPos;

void main()
{
    gl_Position      = projection * view * model * vec4(aPos, 1.0);
    vs_out.FragPos   = vec3(model * vec4(aPos, 1.0));   
    vs_out.TexCoords = aTexCoords;    
    
    vec3 T   = normalize(mat3(model) * aTangent);
    vec3 B   = normalize(mat3(model) * aBitangent);
    vec3 N   = normalize(mat3(model) * aNormal);
    mat3 TBN = transpose(mat3(T, B, N));

    vs_out.TangentLightPos = TBN * lightPos;
    vs_out.TangentViewPos  = TBN * viewPos;
    vs_out.TangentFragPos  = TBN * vs_out.FragPos;
}   

  片元着色器如下：

#version 330 core
out vec4 FragColor;

in VS_OUT {
    vec3 FragPos;
    vec2 TexCoords;
    vec3 TangentLightPos;
    vec3 TangentViewPos;
    vec3 TangentFragPos;
} fs_in;

uniform sampler2D diffuseMap;
uniform sampler2D normalMap;
uniform sampler2D depthMap;
  
uniform float height_scale;
  
vec2 ParallaxMapping(vec2 texCoords, vec3 viewDir);
  
void main()
{           
    // offset texture coordinates with Parallax Mapping
    vec3 viewDir   = normalize(fs_in.TangentViewPos - fs_in.TangentFragPos);
    vec2 texCoords = ParallaxMapping(fs_in.TexCoords,  viewDir);

    // then sample textures with new texture coords
    vec3 diffuse = texture(diffuseMap, texCoords);
    vec3 normal  = texture(normalMap, texCoords);
    normal = normalize(normal * 2.0 - 1.0);
    // proceed with lighting code
    [...]    
}

  我们定义了一个ParallaxMapping来计算偏移后的纹理坐标，输入纹理坐标和视线方向。生成置换后的纹理坐标后，我们将其用来采样漫反射纹理和法线贴图。
  ParallaxMapping方法实现如下：

vec2 ParallaxMapping(vec2 texCoords, vec3 viewDir)
{ 
    float height =  texture(depthMap, texCoords).r;    
    vec2 p = viewDir.xy / viewDir.z * (height * height_scale);
    return texCoords - p;    
} 

  注意这个方法中的viewDir.xy/viewDir.z，viewDir本身是标准化坐标，viewDir.z的范围就是[0,1]。如果视线很靠近平面，那么viewDir.z的值就会接近0，这样的话纹理坐标偏移量就会很大，反之，就很比较正常。我们通过这种方式可以让置换更加自然。
  下面是height_scale置为0.1的视差贴图结果和法线贴图的对比：

  我们可以看出区别，因为视差贴图尝试模拟深度感，所以在某些方向会有些许的重叠。
  同时，视差贴图的边缘很奇怪，这是因为边缘的纹理坐标采样的值会超出[0,1]的范围，一种解决这一问题的方式是如果采样纹理坐标超出范围，我们就丢弃这些片段：

texCoords = ParallaxMapping(fs_in.TexCoords,  viewDir);
if(texCoords.x > 1.0 || texCoords.y > 1.0 || texCoords.x < 0.0 || texCoords.y < 0.0)
    discard;

  这样的话，就可以得到不错的结果：

陡峭视差贴图

  陡峭视差贴图进行多次采样来得到最佳的P向量以吻合我们想要的B点。主要的做法是将深度值或高度值分为许多不同的层级，对每个层级我们都进行深度图的采样，沿着P向量方向平移纹理坐标，直到采样的深度值比当前层级的深度值小，下图是一个示例：

  我们从上到下切换深度层，对每个层我们将它的深度值和当前存储在深度图中的深度值比较。如果层的深度值小于深度图中的值，就表明这个层的P向量不在表面下面。我们持续这个过程直到层的深度值高于采样的深度值，这样的话，P向量就在表面下面了。
  我们修改ParallaxMapping方法来实现我们的想法：

vec2 ParallaxMapping(vec2 texCoords, vec3 viewDir)
{ 
    // number of depth layers
    const float numLayers = 10;
    // calculate the size of each layer
    float layerDepth = 1.0 / numLayers;
    // depth of current layer
    float currentLayerDepth = 0.0;
    // the amount to shift the texture coordinates per layer (from vector P)
    vec2 P = viewDir.xy * height_scale; 
    vec2 deltaTexCoords = P / numLayers;
  
    [...]     
}   

  我们首先定义10个层，并设置每个层的高度，接着计算每层平移纹理坐标的量。
  接着我们遍历所有的层，直到深度图的值小于某一层的深度值：

// get initial values
vec2  currentTexCoords     = texCoords;
float currentDepthMapValue = texture(depthMap, currentTexCoords).r;
  
while(currentLayerDepth < currentDepthMapValue)
{
    // shift texture coordinates along direction of P
    currentTexCoords -= deltaTexCoords;
    // get depthmap value at current texture coordinates
    currentDepthMapValue = texture(depthMap, currentTexCoords).r;  
    // get depth of next layer
    currentLayerDepth += layerDepth;  
}

return currentTexCoords;

  最后得到的currentTexCoords就是我们要减去的偏移量。
  通过这10次的采样，我们可以得到比较好的结果：

  我们可以利用一个视差贴图的属性来改进算法。直视平面并不会的带太大的置换，通过某些角度观察置换的程度会比较大，所以，某些角度我们减少采样数，某些角度我们增大采样数：

const float minLayers = 8.0;
const float maxLayers = 32.0;
float numLayers = mix(maxLayers, minLayers, max(dot(vec3(0.0, 0.0, 1.0), viewDir), 0.0));  

  这里我们使用视线方向和+z轴方向的点乘来代表观察角度，这个值越小表明观察的角度越倾斜，通过这个角度来获取最小采样值和最大采样值之间的值。
  这里给出原文代码参考：Code。
  但还是有一个问题，因为我们使用的是有限的采样数，当观察的角度很倾斜时，我们会得到这种结果（层间的区别被放大）：

视差遮蔽贴图

  视差遮蔽贴图和陡峭视差贴图基于的原则一样，但不使用迭代结束后的目标深度层的纹理坐标，而是使用迭代结束前后的深度层进行线性插值计算。下面是图例：

  可以看到，我们将T3和T2的插值作为目标点。视差遮蔽贴图的代码只需要在陡峭视差贴图的基础上进行一些修改：

[...] // 陡峭视差贴图代码
  
// 迭代结束前一层的纹理坐标
vec2 prevTexCoords = currentTexCoords + deltaTexCoords;

// 迭代结束前后对应的深度值
float afterDepth  = currentDepthMapValue - currentLayerDepth;
float beforeDepth = texture(depthMap, prevTexCoords).r - currentLayerDepth + layerDepth;
 
//插值计算纹理坐标
float weight = afterDepth / (afterDepth - beforeDepth);
vec2 finalTexCoords = prevTexCoords * weight + currentTexCoords * (1.0 - weight);

return finalTexCoords;  

  视差遮蔽贴图的效果如下：