每个片段照亮高度图并生成法线

时间:2014-05-08 06:39:27

标签: graphics opengl-es glsl webgl shader

我正在尝试在高度图上实现每个framgent照明。我将高度贴图作为纹理上传到着色器,并根据各个像素调整顶点高度。为了生成法线,我取四个相邻像素的值,制作它们的矢量并计算十字产品,如下所示:

vec3 offset = vec3(-1.0/mapSize, 0, 1.0/mapSize);
float s1 = texture2D(sampler, texCoord + offset.xy).x;
float s2 = texture2D(sampler, texCoord + offset.zy).x;
float s3 = texture2D(sampler, texCoord + offset.yx).x;
float s4 = texture2D(sampler, texCoord + offset.yz).x;
vec3 va = normalize(vec3(1.0, 0.0, s2 - s1));
vec3 vb = normalize(vec3(0.0, 1.0, s3 - s4));
vec3 n = normalize(cross(va, vb));

并且是我的照明功能

vec4 directional(Light light){
    vec4 ret = vec4(0.0);
    vec3 lPos = (V * vec4(light.position, 0.0)).xyz;
    vec3 normal = normalize(vNormal);
    vec3 lightDir = normalize(lPos);
    vec3 reflectDir = reflect(-lightDir, normal);    
    vec3 viewDir = normalize(-vPosition);

    float lambertTerm = max(dot(lightDir, normal), 0.0);
    float specular = 0.0;

    if(lambertTerm > 0.0){
        float specAngle = max(dot(reflectDir, viewDir), 0.0);
        specular = pow(specAngle, material.shininess);
    }
    ret = vec4(light.ambient * material.ambient + light.diffuse * material.diffuse * lambertTerm + light.specular * material.specular * specular, 1.0);
    return ret;
} 

这种方式有效。只有y轴和z轴似乎是翻转即。如果我沿y轴移动光线,它看起来像沿z轴移动,反之亦然。

我还应该指出,该功能在常规3D模型上完美运行,因此我认为问题在于法线的生成。

1 个答案:

答案 0 :(得分:1)

如果您正在使用y-up坐标系,那么您希望在y分量而不是z分量上进行增量。

vec3 va = normalize(vec3(1.0, s2 - s1, 0.0));
vec3 vb = normalize(vec3(0.0, s4 - s3, 0.0));

此外,你应该确认它是s3 - s4还是s4 - s3。