Combining and drawing 2D lights in OpenGL

Question

I have progressed to the lighting portion of my little framework and I managed to solve a few initial problems so now I'm left with the subtle weirdnesses.

At this stage I just have 2 lights - the ambient daylight and a hard-coded example light in my fragment shader (ultimately, I want to have multiple lights that I loop through adding together, and shadows would be nice too, but 1 step at a time!):

        uniform sampler2D u_image;

        varying vec2 v_texCoords;
        varying vec4 v_position;

        uniform vec3 ambient_light; // set as (0.3, 0.3, 0.3), night!

        vec2 point_light_pos = vec2(-0.4, 0.3);
        vec3 point_light_col = vec3(0.999, 0.999, 0.999);
        float point_light_intensity = 0.4;

        void main() 
        {
            vec4 frag_color = texture2D(u_image, v_texCoords);
            if(frag_color.a < 1.0)
              discard;

            float distance = distance(point_light_pos, v_position.xy);
            float diffuse = 0.0;

            if (distance <= point_light_intensity)
                diffuse =  1.0 - abs(distance / point_light_intensity);

            gl_FragColor = vec4(min(frag_color.rgb * ((point_light_col * diffuse) + ambient_light), frag_color.rgb), 1.0);
        }

Which almost does what I want, but there are 2 problems:

The light has a bright ring in it and the light is squashed on the y-axis. I actually like how it looks squashed at this ratio, but I'd much rather do it deliberately.

I the y-axis squashing is down to the window aspect ratio - if the window is square, the light is circular, but I don't know how to fix this in the fragment shader.

I don't know where the bright ring is coming from.

Answer 1

When your distance <= 0.3 you set diffuse to be 1.0 - distance = 0.7, and also add 0.3 ambient, so lighting value will effectively always be 1 for distances <= 0.3... hence the bright ring in the middle.

As for the stretch I'm guessing you have normalized coordinates mapped to the screen, perhaps take the x/y stretch values into account when calculating your distances.

edit 1:

oops I misread the code, but I think a similar effect is happening. I've plugged the numbers into a spreadsheet and get the following:

i've only shown the green channel values, but the first few initial values in this case are 1.0

Answer 2

Excellent catch by DMGregory in that the ring is an optical illusion. If you zoom in really close, you'll see that the ring is not there. You can verify values in an image editor.

Next, in order to have the light look good, make sure you are doing all light calculations in the correct colour space (which is the linear colour space.)

In OpenGL this is best achieved by creating an SRGB capable framebuffer and then doing glEnable( GL_FRAMEBUFFER_SRGB );

Lastly, you need to adapt the quad you are drawing for the light: If window aspect ratio changes, you need to use different vertex positions for the quad. If the window has ratio 2:1, then a square covering top to bottom of screen has lowerleft coordinates (-0.5,-1) and upper right (0.5,1). So multiply the x-coords of the quad with (winh/winw).

Answer 3

In regards to the y-axis squishing - The problem, like you said, is caused by the window dimensions. OpenGL works in a different space then you're trying to work in. So to solve this, simply take your y-scale and then divide it by the window's y-scale, then multiply by one hundred. This is your new y-scale. Do the same for the x axis.