调整窗口大小导致我的 2D 照明拉伸答案

【问题标题】：Resizing window cause my 2D Lighting to stretch调整窗口大小导致我的 2D 照明拉伸
【发布时间】：2021-11-18 06:37:30
【问题描述】：

我正在尝试实现一个简单的人工 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;
    }
}

【问题讨论】：

您必须在顶点着色器中使用正交投影矩阵。通过投影矩阵修改fragmentPosition。

标签： c++ opengl glsl 2d lighting

【解决方案1】：

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

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

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

【讨论】：

嗨，我确实在顶点着色器中使用了正交投影矩阵，但所做的只是确保我的灯光位置在正确的位置，但是半径（不是实际的顶点）仍在拉伸。
@ToM4tto 我看不到你的着色器，所以我帮不了你。
@ToM4tto 你在我的回答中尝试过代码 sn-p 吗？
嗨，抱歉，我试过了，但无法在视图框架内渲染对象。
@ToM4tto 你设置统一变量resolution吗？

【解决方案2】：

我将汇总我的问题的所有答案，因为我在提问方面做得不好，结果一切都变得一团糟。

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

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

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

我发布了另一个问题here，以修改我的照明算法以支持椭圆形状。这使我能够在我的纵横比发生变化时执行抵消沿 x/y 轴拉伸所需的缩放。谢谢大家的回答。

【讨论】：