来自高度图的法线贴图

Question

我正在尝试从 HLSL 中的高度图创建法线贴图。我关注了这个用于 GLSL 的https://stackoverflow.com/a/5284527/451136。以下是我将 GLSL 翻译成 HLSL 的方法：

GLSL：

uniform sampler2D unit_wave
noperspective in vec2 tex_coord;
const vec2 size = vec2(2.0,0.0);
const ivec3 off = ivec3(-1,0,1);

    vec4 wave = texture(unit_wave, tex_coord);
    float s11 = wave.x;
    float s01 = textureOffset(unit_wave, tex_coord, off.xy).x;
    float s21 = textureOffset(unit_wave, tex_coord, off.zy).x;
    float s10 = textureOffset(unit_wave, tex_coord, off.yx).x;
    float s12 = textureOffset(unit_wave, tex_coord, off.yz).x;
    vec3 va = normalize(vec3(size.xy,s21-s01));
    vec3 vb = normalize(vec3(size.yx,s12-s10));
    vec4 bump = vec4( cross(va,vb), s11 );

HLSL：

sampler2D image : register(s0);

noperspective float2 TEXCOORD;
static const float2 size = (2.0,0.0);
static const int3 off = (-1,0,1);

float4 main(float2 uv : TEXCOORD) : COLOR 
{ 

    float4 color = tex2D(image, uv);
    float s11 = color.x;
    float s01 = tex2D(image, uv + off.xy).x;
    float s21 = tex2D(image, uv + off.zy).x;
    float s10 = tex2D(image, uv + off.yx).x;
    float s12 = tex2D(image, uv + off.yz).x;
    float3 va = normalize((size.xy,s21-s01));
    float3 vb = normalize((size.yx,s12-s10));
    float4 bump = (cross(va,vb), s11);

    return bump; 
}

输出是黑白图像，较暗的像素更透明（因为 alpha 是高度）。
如何从高度图生成像 http://www.filterforge.com/filters/3051-normal.jpg 这样的法线贴图？

编辑
我遵循了 megadan 的建议，并且我还修复了一些合成错误。这是有效的 HLSL 代码：

float Width : register(C0);

float Height : register(C1);

sampler2D image : register(s0);

noperspective float2 TEXCOORD;
static const float2 size = {2.0,0.0};
static const float3 off = {-1.0,0.0,1.0};
static const float2 nTex = {Width, Height};
float4 main(float2 uv : TEXCOORD) : COLOR 
{ 

    float4 color = tex2D(image, uv.xy);

    float2 offxy = {off.x/nTex.x , off.y/nTex.y};
    float2 offzy = {off.z/nTex.x , off.y/nTex.y};
    float2 offyx = {off.y/nTex.x , off.x/nTex.y};
    float2 offyz = {off.y/nTex.x , off.z/nTex.y};

    float s11 = color.x;
    float s01 = tex2D(image, uv.xy + offxy).x;
    float s21 = tex2D(image, uv.xy + offzy).x;
    float s10 = tex2D(image, uv.xy + offyx).x;
    float s12 = tex2D(image, uv.xy + offyz).x;
    float3 va = {size.x, size.y, s21-s01};
    float3 vb = {size.y, size.x, s12-s10};
    va = normalize(va);
    vb = normalize(vb);
    float4 bump = {(cross(va,vb)) / 2 + 0.5, 1.0};

    return bump; 
}

我读到 Direct3D 10.1 或更高版本支持使用 GetDimensions 自动获取纹理的宽度和高度，因此必须将纹理的宽度和高度传递给着色器，因为我需要它与 Direct3D 9 兼容也是。

Answer 1

一种可能性是您的法线指向错误的方向。这可能是因为 OpenGL 使用的纹理坐标原点位于图像的左下角，Y 轴指向上方，而 DirectX 使用的纹理坐标原点位于图像的左上角，Y 轴指向下方。

如果您绘制出代码为 DirectX 采集高度样本的位置，您会看到 s01 位于左侧，s21 位于右侧，s10 位于顶部，s12 位于底部。在 OpenGL 中 s10 和 s12 会颠倒过来。

当您通过从 s12 中减去 s10 创建向量 vb 时，它将指向 DirectX 的一个方向，而 OpenGL 的相反方向。现在，当您在两个向量之间进行叉积时，它会形成一个垂直向量，该向量可以指向两个方向中的任何一个，具体取决于使用右手定则的叉积顺序：http://en.wikipedia.org/wiki/Cross_product。这将导致 DirectX 和 OpenGL 的叉积指向相反的方向。

因此，如果这是一个问题，解决方法可能是交换叉积中向量的顺序或交换 s10 和 s12 样本的位置。

你的纹理坐标也有问题。 uv 应该在 [0, 1] 的范围内。当您添加它时，它会使其超出范围，结果取决于任何纹理寻址模式处于活动状态。在每个 tex2D 样本中，您需要将 off 的第一个分量除以纹理宽度，将第二个分量除以纹理高度。

最后，叉积的结果具有 [-1, 1] 范围内的值。如果要将其存储为颜色，则需要将它们转换为 [0, 1]。所以像 cross(vb, va) * 0.5 + 0.5 这样的东西会起作用。当在着色器中对法线贴图进行采样时，颜色会被转换回 [-1, 1] 的正常范围。