高度图工件的法线贴图

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位是一个受欢迎的选择。

你的着色器和烘焙代码很好，他们只是没有足够的分辨率来输入数据。