Opengl 实现平面的各向异性照明

我试图在我的WebGL着色器中通过各向异性模拟某种镜面反射，如本教程中所述

我意识到，虽然使用类似的球形很容易获得令人信服的结果，但通过对平面或方形几何体实施各向异性照明，要获得好看的照明效果却有点困难

在阅读了nVIDIA的这篇文章后，我开始使用以下着色器：

vec3 surfaceToLight(vec3 p) {
    return normalize(p - v_worldPos);
}
vec3 anisoVector() {
    return vec3(0.0,0.0,1.0);
}
void main() {
    vec3 texColor = vec3(0.0);
    vec3 N = normalize(v_normal); // Interpolated directions need to be re-normalized 
    vec3 L = surfaceToLight(lightPos);
    vec3 E = anisoVector();
    vec3 H = normalize(E + L);
    vec2 tCoords = vec2(0.0);
    tCoords.x = 2.0 * dot(H, N) - 1.0; //The value varies with the line of sight
    tCoords.y = 2.0 * dot(L, N) - 1.0; //each vertex has a fixed value
    vec4 tex = texture2D(s_texture, tCoords);
    //vec3 anisoColor = tex.rgb; // show texture color only
    //vec3 anisoColor = tex.aaa; // show anisotropic term only
    vec3 anisoColor = tex.rgb * tex.aaa;
    texColor += material.specular * light.color * anisoColor;
    gl_FragColor = vec4(texColor, u_opacity);
}

以下是我实际得到的结果（几何体没有纹理坐标，也没有折痕法线）：

我知道我不能简单地将上述论文中描述的方法用于所有事情，但至少在我看来，这是实现快速模拟各向异性照明的一个良好起点

可悲的是，我不能完全理解用于创建纹理的数学，因此我问是否有任何方法可以实现这两种效果

• 调整片段着色器此部分中的纹理坐标

  tCoords.x = 2.0 * dot(H, N) - 1.0;
  tCoords.y = 2.0 * dot(L, N) - 1.0;
  

• 调整纹理内部alpha通道的形状（位于RGBA层和结果下方）

…为平面几何体（如右侧的立方体）获得好看的垂直镜面反射

有人知道这件事吗

---

顺便说一句，如果有人感兴趣，请注意纹理应镜像：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

…这是PNG的纹理（nVIDIA的原始纹理为TGA格式）