调整窗口大小导致2D Lighting拉伸

Question

我正在尝试实现一个简单的人造2D照明。我没有使用像Phong那样的算法，然而，我在确保我的光照不会在窗口调整大小时拉伸/挤压时遇到了一些困难。任何提示和建议都将不胜感激。我试着把我的半径转换成一个vec2，这样我就可以根据宽高比相应地缩放它们，但是它不能正常工作。此外，我知道我的代码不是最有效的，任何反馈也很感谢，因为我还在学习！:D

我有一个正交投影矩阵变换灯光的位置，以便它将在视口中的正确位置，这固定的位置，但不是半径(正如我计算每个碎片)。我该如何根据纵横比变换半径呢？

void LightSystem::Update(const OrthographicCamera& camera)
{
    std::vector<LightComponent> lights;
    for (auto& entity : m_Entities)
    {
        auto& light = g_ECSManager.GetComponent<LightComponent>(entity);
        auto& trans = g_ECSManager.GetComponent<TransformComponent>(entity);
        if (light.lightEnabled)
        {
            light.pos = trans.Position;
            glm::mat4 viewProjMat = camera.GetViewProjectionMatrix();
            light.pos = viewProjMat * glm::vec4(light.pos, 1.f);
            // Need to store all the light atrributes in an array
            lights.emplace_back(light);
        }
        // Create a function in Render2D.cpp, pass all the arrays as a uniform variable to the shader, call this function here
        glm::vec2 res{ camera.GetWidth(), camera.GetHeight() };
        Renderer2D::DrawLight(lights, camera, res);

    }
}

这是我的着色器：

#type fragment
#version 330 core
layout (location = 0) out vec4 color;

#define MAX_LIGHTS 10
uniform struct Light
{
    vec4 colour;
    vec3 position;
    float radius;
    float intensity;
} allLights[MAX_LIGHTS];

in vec4 v_Color;
in vec2 v_TexCoord;
in float v_TexIndex;
in float v_TilingFactor;
in vec4 fragmentPosition;

uniform sampler2D u_Textures[32];
uniform vec4 u_ambientColour;
uniform int numLights;
uniform vec2 resolution;

vec4 calculateLight(Light light)
{
    float lightDistance = length(distance(fragmentPosition.xy, light.position.xy));

    //float ar = resolution.x / resolution.y;

    if (lightDistance >= light.radius)
    {
        return vec4(0, 0, 0, 1); //outside of radius make it black
    }
    return light.intensity * (1 - lightDistance / light.radius) * light.colour;
}

void main()
{   
    vec4 texColor = v_Color;

    vec4 netLightColour = vec4(0, 0, 0, 1);
    if (numLights == 0)
        color = texColor;
    else
    {
        for(int i = 0; i < numLights; ++i) //Loop through lights
            netLightColour += calculateLight(allLights[i]) + u_ambientColour;
        color = texColor * netLightColour;
    }
}

​

​

Answer 1

我将汇总我的问题的所有答案，因为我在提问时做得很糟糕，结果一切都变得一团糟。

正如其他答案所建议的那样，首先我必须使用正交投影矩阵来确保光源位置显示在视口中的正确位置。

接下来，从我做照明的方式来看，之前的投影矩阵不会修复拉伸效果，因为我的光不是由实际顶点组成的实际圆形对象。我必须将radius转换为vec2类型，表示沿x和y轴的半径向量。这样我就可以根据纵横比修改向量了：

if (aspectRatio > 1.0)
    light.radius.x /= aspectRatio;
else
    light.radius.x /= aspectRatio;

我发布了另一个问题here，修改我的光照算法以支持椭圆形状。这使得我可以在我的纵横比改变时执行所需的缩放，以对抗沿x/y轴的拉伸。感谢你们所有人的回答。

Answer 2

必须在顶点着色器中使用正交投影矩阵。通过投影矩阵修改剪辑空间位置。

或者，在计算到灯光的距离时考虑纵横比：

float aspectRatio = resolution.x/resolution.y;
vec2 pos = fragmentPosition.xy * vec2(aspectRatio, 1.0);
float lightDistance = length(distance(pos.xy, light.position.xy));