Как сделать круговую виньетку с помощью GLSL - PullRequest
Новая
       7

Как сделать круговую виньетку с помощью GLSL

0 голосов
/ 11 октября 2018

Я пытаюсь создать круглую виньетку с GLSL, но результат будет эллиптическим, если текстура прямоугольная.Как правильно сделать его квадратным независимо от размера текстуры?Входной размер текстуры (разрешение) может быть как прямоугольным, так и квадратным.Я попробовал решение, используя метод discard , но это не соответствует тому, что мне нужно, так как мне нужно использовать smoothstep , чтобы получить градиент грани.

Currentрезультат:

enter image description here

GLSL-шейдер: 

varying vec2 v_texcoord;
uniform sampler2D u_texture;
uniform vec2 u_resolution;

vec4 applyVignette(vec4 color)
{
    vec2 position = (gl_FragCoord.xy / u_resolution) - vec2(0.5);           
    float dist = length(position);

    float radius = 0.5;
    float softness = 0.02;
    float vignette = smoothstep(radius, radius - softness, dist);

    color.rgb = color.rgb - (1.0 - vignette);

    return color;
}

void main()
{
    vec4 color = texture2D(u_texture, v_texcoord);
    color = applyVignette(color);
    gl_FragColor = color;
}

1 Ответ

0 голосов
/ 11 октября 2018

Вы должны соблюдать соотношение сторон при расчете расстояния до центральной точки кругового обзора: 

float dist = length(position * vec2(u_resolution.x/u_resolution.y, 1.0));

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

...