Реализация анизотропного освещения для плоских поверхностей - PullRequest
Новая
       44

Реализация анизотропного освещения для плоских поверхностей

0 голосов
/ 18 сентября 2018

Я пытаюсь эмулировать какие-то зеркальные отражения с помощью анизотропии в моем шейдере WebGL, что-то вроде этого, описанного в этом уроке здесь .

Я понял, что пока легко получить убедительностьрезультаты со сферическими формами, такими как чайник Юта , несколько сложнее получить приятные на вид световые эффекты за счет применения анизотропного освещения для плоских или прямоугольных геометрий.

После прочтения этой статьи АнизотропныйОсвещая, используя HLS от 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);
}

Вот что я получаю на самом деле (геометрия без координат текстуры и без складчатых нормалей):

enter image description here

Я знаю, что я не могу просто использовать метод, описанный в вышеупомянутой статье, для всего, но, по крайней мере, мне кажется хорошей отправной точкой для достижениябыстро моделируется анизотропное освещение.

К сожалению, я не могу полностью понять матh используется для создания текстуры, и поэтому я спрашиваю, есть ли какой-либо метод либо

  • для настройки координат текстуры в этой части фрагмента шейдера 

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

  • настроить форму альфа-канала внутри текстуры (ниже слоев RGBA и результата)

enter image description here

... чтобы получить красивые вертикальные зеркальные отражения для плоских геометрий, например, куб с правой стороны.

Кто-нибудь что-нибудь знает об этом?

Кстати, есликому-то интересно, обратите внимание, что текстура должна быть зеркальной: 

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).

enter image description here

...