来自高度贴图神器的法线贴图

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 位是一种流行的选择。

虽然您的着色器和烘焙代码很好，但它们只是没有获得足够分辨率的输入数据。