OpenGL ES2着色器顶点法线计算：OBJ模型无法线的光照问题咨询

嘿，这个问题我太熟了！Google Poly上不少OBJ模型确实会缺法线数据，尤其是那些简化过或者早期上传的模型，直接导致漫反射计算出0——毕竟没法线的话，光照公式里的点积就没意义了。不用急，你完全不用手动去给每个面加法线，有两个靠谱的解决方向，看你需求选：

如果不想折腾模型加载逻辑，直接在着色器里处理是最快的路子。这里有两种实现方式：

片段着色器用导数计算近似法线 #

利用GLSL的dFdx和dFdy函数，通过屏幕空间的位置导数来估算法线，适合快速兼容无法线的模型。修改你的片段着色器：

#version 300 es
precision mediump float;

// 假设你已经传入了世界空间位置
in vec3 v_PositionWorld;
#ifdef HAS_NORMAL
in vec3 v_Normal;
#endif

uniform vec3 u_LightDirection;
uniform vec4 u_DiffuseColor;

out vec4 FragColor;

void main() {
    vec3 normal;
    #ifdef HAS_NORMAL
        normal = normalize(v_Normal);
    #else
        // 用屏幕空间导数计算近似法线
        vec3 posDx = dFdx(v_PositionWorld);
        vec3 posDy = dFdy(v_PositionWorld);
        normal = normalize(cross(posDx, posDy));
        // 注意：如果模型是单面的，可能需要反转法线方向
        // normal = -normal;
    #endif

    // 漫反射计算
    float diffuse = max(dot(normal, normalize(u_LightDirection)), 0.0);
    FragColor = u_DiffuseColor * diffuse;
}

优点是零模型修改成本，缺点是低面数模型或锐利边缘的法线会有点模糊，但足够满足漫反射计算的需求。

几何着色器计算面法线 #

如果想要更准确的平面法线，可以用几何着色器拿到每个三角形的三个顶点，直接计算面法线再传给片段着色器：

// 几何着色器示例
#version 300 es
layout(triangles) in;
layout(triangle_strip, max_vertices=3) out;

in vec3 v_PositionWorld[];
out vec3 v_Normal;

void main() {
    // 计算当前三角形的面法线
    vec3 edge1 = v_PositionWorld[1] - v_PositionWorld[0];
    vec3 edge2 = v_PositionWorld[2] - v_PositionWorld[0];
    vec3 faceNormal = normalize(cross(edge1, edge2));

    // 把法线传递给每个顶点
    for(int i = 0; i < 3; i++) {
        gl_Position = gl_in[i].gl_Position;
        v_Normal = faceNormal;
        EmitVertex();
    }
    EndPrimitive();
}

这种方法的法线更贴合模型平面，适合以平面为主的模型，性能也比片段着色器计算更优。

如果这个模型要长期用，最好在加载OBJ的时候就预计算好法线，这样GPU不用每次都额外计算。你可以自己实现逻辑，或者用模型加载库（比如Assimp）自带的自动法线计算功能。

手动实现的核心逻辑（伪代码） #

// 假设已加载顶点位置数组和三角面索引数组
vector<vec3> normals(vertices.size(), vec3(0.0f));

for each face in faces:
    // 取出当前面的三个顶点
    vec3 v0 = vertices[face.indices[0]];
    vec3 v1 = vertices[face.indices[1]];
    vec3 v2 = vertices[face.indices[2]];
    // 计算面法线
    vec3 faceNormal = normalize(cross(v1 - v0, v2 - v0));

    // 根据OBJ的平滑标记处理法线
    if(face.isSmooth) {
        // 平滑着色：累加相邻面的法线，最后归一化
        normals[face.indices[0]] += faceNormal;
        normals[face.indices[1]] += faceNormal;
        normals[face.indices[2]] += faceNormal;
    } else {
        // Flat着色：直接给当前面的三个顶点赋值面法线
        normals[face.indices[0]] = faceNormal;
        normals[face.indices[1]] = faceNormal;
        normals[face.indices[2]] = faceNormal;
    }

// 对平滑着色的顶点法线做归一化
for(int i = 0; i < normals.size(); i++) {
    if(length(normals[i]) > 0.0001f) {
        normals[i] = normalize(normals[i]);
    }
}

计算完法线后，把它作为a_Normal属性传给GPU，你的原有着色器就能正常工作了。

你可以给着色器加个宏定义HAS_NORMAL，在加载有法线的模型时启用这个宏，没法线的模型就自动用GPU估算逻辑，这样同一个着色器就能兼容两种情况，不用写两套着色器。

比如修改你的顶点着色器：

#version 300 es
layout(location = 0) in vec3 a_Position;
#ifdef HAS_NORMAL
layout(location = 1) in vec3 a_Normal;
#endif

uniform mat4 u_ModelViewProjectionMatrix;
uniform mat4 u_ModelMatrix;

out vec3 v_PositionWorld;
#ifdef HAS_NORMAL
out vec3 v_Normal;
#endif

void main() {
    vec4 worldPos = u_ModelMatrix * vec4(a_Position, 1.0);
    v_PositionWorld = worldPos.xyz;
    #ifdef HAS_NORMAL
        v_Normal = normalize((u_ModelMatrix * vec4(a_Normal, 0.0)).xyz);
    #endif
    gl_Position = u_ModelViewProjectionMatrix * vec4(a_Position, 1.0);
}

内容的提问来源于stack exchange，提问作者TheHebrewHammer