Implementing anisotropic lighting for planar surfaces

Question

I am trying to emulate some kind of specular reflections through anisotropy in my WebGL shader, something like this described in this tutorial here.

I realized that while is easy to get convincing results with spherical shapes like the Utah teapot, it is somewhat more difficult to get nice looking lighting effects by implementing anisotropic lighting for planar or squared geometries.

After reading this paper Anisotropic Lighting using HLS from nVIDIA, I started playing with following shader:

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);
}

Here is what I get actually (geometries are without texture coordinates and without creased normals):

I am aware that I can't simply use the method described in the above mentioned paper for everything, but, at least, it seems to me a good starting point to achieve fast simulated anisotropic lighting.

Sadly, I am not able to fully understand the math used to create the texture and so I am asking if there is any method to either

tweak the texture coordinates in this part of the fragment shader

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

tweak the shape of the alpha channel inside the texture (below the RGBA layers and the result)

...to get nice-looking vertical specular reflections for planar geometries, like the cube on the right side.

Does anyone know anything about this?

BTW, if someone interested, pay attention that the texture shall be mirrored:

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

...and here is the texture as PNG (the original one from nVIDIA is in TGA format).

Implementing anisotropic lighting for planar surfaces

0 Answers0