javascript - 纹理 Splatted Terrain 上的法线贴图

Question

我在 Three.js 中开发了一个带有纹理散布的地形生成系统，但我无法对其应用法线贴图。我该怎么办？此代码目前功能齐全。

我查看了一些 WebGL 着色和法线贴图的教程，但找不到适合我的代码的教程。

FRAGMENT_SHADER: `
    uniform sampler2D albedoA;
    uniform sampler2D albedoB;
    uniform sampler2D albedoC;
    uniform sampler2D albedoD;
    uniform sampler2D albedoE;

    uniform sampler2D normalA;
    uniform sampler2D normalB;
    uniform sampler2D normalC;
    uniform sampler2D normalD;
    uniform sampler2D normalE;

    uniform float repeatScale;

    uniform vec3 sunPosition;

    varying vec2 vUV;
    varying float vAmount;

    varying vec3 vNormal;
    varying vec3 vWorldPosition;

    void main()
    {
        vec3 diffA = (smoothstep(0.01, 0.25, vAmount) - smoothstep(0.25, 0.35, vAmount)) * texture2D(albedoA, vUV * repeatScale).rgb;
        vec3 diffB = (smoothstep(0.24, 0.27, vAmount) - smoothstep(0.27, 0.37, vAmount)) * texture2D(albedoB, vUV * repeatScale).rgb;
        vec3 diffC = (smoothstep(0.28, 0.32, vAmount) - smoothstep(0.32, 0.42, vAmount)) * texture2D(albedoC, vUV * repeatScale).rgb;
        vec3 diffD = (smoothstep(0.30, 0.60, vAmount) - smoothstep(0.40, 0.70, vAmount)) * texture2D(albedoD, vUV * repeatScale).rgb;
        vec3 diffE = (smoothstep(0.50, 0.85, vAmount))                                   * texture2D(albedoE, vUV * repeatScale).rgb;
        vec3 albedoVector = diffA + diffB + diffC + diffD + diffE;

        vec3 normA = (smoothstep(0.01, 0.25, vAmount) - smoothstep(0.25, 0.35, vAmount)) * texture2D(normalA, vUV * repeatScale).rgb;
        vec3 normB = (smoothstep(0.24, 0.27, vAmount) - smoothstep(0.27, 0.37, vAmount)) * texture2D(normalB, vUV * repeatScale).rgb;
        vec3 normC = (smoothstep(0.28, 0.32, vAmount) - smoothstep(0.32, 0.42, vAmount)) * texture2D(normalC, vUV * repeatScale).rgb;
        vec3 normD = (smoothstep(0.30, 0.60, vAmount) - smoothstep(0.40, 0.70, vAmount)) * texture2D(normalD, vUV * repeatScale).rgb;
        vec3 normE = (smoothstep(0.50, 0.85, vAmount))                                   * texture2D(normalE, vUV * repeatScale).rgb;
        vec3 normalVector = normA + normB + normC + normD + normE;

        float diffuseFloat = max(dot(normalize(sunPosition - vWorldPosition), vNormal), 0.0);
        if (diffuseFloat < 0.25) { diffuseFloat = 0.25; }
        if (diffuseFloat > 1.0) { diffuseFloat = 1.0; }

        gl_FragColor = vec4(diffuseFloat * albedoVector, 1.0);
    }
`,
VERTEX_SHADER: `
    uniform sampler2D heightTexture;

    varying vec2 vUV;
    varying float vAmount;

    varying vec3 vNormal;
    varying vec3 vWorldPosition;

    void main()
    {
        vUV = uv;
        vAmount = texture2D(heightTexture, uv).r;

        vec4 worldPosition = modelViewMatrix * vec4(position, 1.0);

        vWorldPosition = worldPosition.xyz;
        vNormal = vec3(normal);

        gl_Position = projectionMatrix * worldPosition;
    }
`

我正在使用 THREE.ShaderMaterial，截至目前，代码会显示纹理并说明光照和阴影，但不会显示法线贴图。

Answer 1

您可以通过简单的数值近似计算表面(地形)的法线 - 请参阅 Finite difference method .

你必须知道高度图纹理的大小。我建议将纹理的大小设置为统一变量:

uniform sampler2D heightTexture;
uniform vec2 heightTextureSize;  // (width, height) of heightTexture;

计算纹理相邻纹素之间的偏移量:

vec2 offset = 1.0 / heightTextureSize;

读取纹理相邻纹素的高度

vA = texture2D(heightTexture, uv).r;

vAL = texture2D(heightTexture, uv + vec2(-offset.x,  0.0)).r;
vAR = texture2D(heightTexture, uv + vec2( offset.x,  0.0)).r;
vAB = texture2D(heightTexture, uv + vec2( 0.0, -offset.y)).r;
vAT = texture2D(heightTexture, uv + vec2( 0.0,  offset.y)).r;

最后可以计算纹理空间中的近似法向量

vec3 normalMap = normalize( vec3(vAL - vAR, vAT - vAB, 2.0) );