高度贴图瑕疵中的法线贴图

Question

我正在从高度贴图的碎片着色器上烘焙法线贴图。高度贴图看起来很棒，而且看起来很平滑。然而，当我生成法线贴图时，我得到了非常奇怪的结果。

这里有两个显示问题的渲染图像，一个具有所有照明计算，另一个具有应用于网格顶部的法线贴图图像。

​

​

​

我烘焙法线贴图的方法是在碎片着色器上采样相邻像素。

网格为32x32，法线贴图和高度贴图为64x64。以下是对相邻像素进行采样的片段着色器代码：

float NORMAL_OFF = (1.0 / 64.0);
vec3 off = vec3(-NORMAL_OFF, 0, NORMAL_OFF);

// s11 = Current
float s11 = texture2D(uSampler, texturePos).x;

// s01 = Left
float s01 = texture2D(uSampler, vec2(texturePos.xy + off.xy)).x;

// s21 = Right
float s21 = texture2D(uSampler, vec2(texturePos.xy + off.zy)).x;

// s10 = Below
float s10 = texture2D(uSampler, vec2(texturePos.xy + off.yx)).x;

// s12 = Above
float s12 = texture2D(uSampler, vec2(texturePos.xy + off.yz)).x;

vec3 va = normalize( vec3(off.z, 0.0, s21 - s11) );
vec3 vb = normalize( vec3(0.0, off.z, s12 - s11) );

vec3 normal = normalize( cross(va, vb) );

在顶点着色器上，texturePos计算为vertexPosition.x / 128 (128，因为顶点之间的距离是4像素。所以32 *4= 128)。

为什么我的结果这么奇怪？

Answer 1

高度贴图的采样深度分辨率太少，导致这些困难的步骤。可能你的高度图是8位的，给你最多256个高度级别。现在，如果高度贴图的平面分辨率高于256，则横向分辨率不足以表示平滑的高度场。

解决方案:对高度贴图使用较高的采样分辨率。16位是一个流行的选择。

您的着色器和烘焙代码很好，但它们只是无法获得足够分辨率的输入数据来使用。