Как добавить затухание по краям моего освещения?

В настоящее время я использую простой алгоритм 2D-освещения для создания 2D-прожектора. Вот пример того, как это выглядит на данный момент:

Однако я хотел бы добавить постепенное затухание по краям (сверху и снизу), чтобы это выглядело примерно так:

Как добавить затухание по краям моего освещения?

Мой текущий алгоритм освещения:

vec4 calculateLight(Light light)
{
    
    vec2 fragDirection = fragmentPosition.xy - light.position.xy;
    float aspectRatio = resolution.x / resolution.y; //amt of width / height
    if (aspectRatio > 1.0)
    {
        fragDirection.x *= aspectRatio;
    }
    else
    {
        fragDirection.x /= aspectRatio;
    }
    

    
    float lightDistance = length(fragDirection);
    if (length(fragDirection / light.radius) >= 1.0)
            return vec4(0, 0, 0, 1); //outside of radius make it black
    
    if (dot(normalize(fragDirection), normalize(light.spotDir.xy)) < cos(light.spotAngle/2))
            return vec4(0, 0, 0, 1); //outside of radius make it black
    
    return light.intensity * (1 - length(fragDirection / light.radius)) * light.colour;
}

opengl graphics glsl 2d lighting

17.03.2022 03:36

Стоит ли изучать PHP в 2023-2024 годах?

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте это в качестве отправной точки:

Вершина:

#version 400 core

in vec2 position;
out vec2 pos;

void main(void)
    {
    pos=position;
    gl_Position = vec4(position.xy,0.0,1.0);
    }

Фрагмент:

#version 400 core

in vec2 pos;
out vec3 out_Color;

// light
const float deg=0.01745329251994329576923690768489;
uniform vec2 lpos=vec2(-0.5,0.0); // positon
uniform vec2 ldir=vec2(+1.0,0.0); // directon (unit vector)
uniform float lr1=1.0;            // soft radius
uniform float lr0=0.9;            // hard radius
uniform float la1=cos(25.0*deg);  // soft half angle
uniform float la0=cos(20.0*deg);  // hard half angle

void main(void)
    {
    float a,c,r;
    vec3 col;
    vec2 d;
    col=vec3(1.0,1.0,1.0);
    d=pos-lpos;
    r=length(d);
    d=normalize(d);
    c=0.0;
    // light side strength (angle)
    a=abs(max(0.0,dot(ldir,d)));
         if (a>=la0) c=1.0;                 // hard light
    else if (a>=la1) c=(a-la1)/(la0-la1);   // soft light
    else discard;                           // no light
    // light forward strength (radius)
         if (r<=lr0);                       // hard light
    else if (r<=lr1) c*=(r-lr1)/(lr0-lr1);  // soft light
    else discard;                           // no light
    out_Color = col*c;
    }

он использует линейное затухание линии с обеих сторон (угол) и вперед (радиус), просто измените световые формы на структуру света, которую вы используете ...

Здесь превью:

preview

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

Немного поиграв с константами и уравнениями:

Фрагмент:

#version 400 core

in vec2 pos;
out vec3 out_Color;

// light
const float deg=0.01745329251994329576923690768489;
uniform vec2 lpos=vec2(-0.5,+0.0);// positon
uniform vec2 ldir=vec2(+0.7,-0.7);// directon (unit vector)
uniform float lr1=1.00;           // soft radius
uniform float lr0=0.25;           // hard radius
uniform float la1=cos(30.0*deg);  // soft half angle
uniform float la0=cos(15.0*deg);  // hard half angle

void main(void)
    {
    float a,r,c0,c1;
    vec3 col;
    vec2 d;
    col=vec3(1.0,1.0,1.0);
    d=pos-lpos;
    r=length(d);
    d=normalize(d);
    // light side strength (angle)
    a=abs(max(0.0,dot(ldir,d)));
         if (a>=la0) c0=1.0;                // hard light
    else if (a>=la1) c0=(a-la1)/(la0-la1);  // soft light
    else discard;                           // no light
    // light forward strength (radius)
         if (r<=lr0) c1=1.0;                // hard light
    else if (r<=lr1) c1=(r-lr1)/(lr0-lr1);  // soft light
    else discard;                           // no light
    a=c0*c1;
    out_Color = col*pow(a,2.5);
    }

preview