Dot based light mask with shader on sprites

Question

So I have a scene, completely based on 2D sprites. I want to render "light sources" into a seperate frame buffer (so mostly dots around, for example, the centre of a flame) and then render that frame buffer with my "lighting" shader above my whole scene, causing the light sources to "tint" the surrounding pixels, mostly by blending a pixel with the light source's color dependant on it's distance to the nearest light source.

The question: What concepts should I apply here to get the results I want? What am I doing wrong right now?

I have here a few concept drawings:

The scene without lighting:

The framebuffer of the scene containing the light source (the top yellow pixel of the flame):

The result of rendering the framebuffer as a texture with the glow shader. I also "simulated" a 2nd buffer with a smaller radius and a yellow light at the same position.

Alternatively, and closer to my first approach to the idea, imagine the whole framebuffer of the 2nd pixel transparent but the dot at the center.

What I wasn't able to mock up quickly was a gradient of the lighting, dimming it at the edges and having it brighter at the center.

The current idea needs to conform this fragment shader's layout:

#version 400 uniform sampler2D color_map; layout(std140) uniform Sprite { vec2 position; vec2 size; vec2 position_in_texture; vec2 size_in_texture; float rotation; }; in vec2 texture_coordinate; layout(std140) uniform Color { vec4 color; }; layout(location = 0) out vec4 out_color; void main(){ vec4 tex_color = texture2D(color_map, texture_coordinate); vec2 diff; vec2 norm; vec2 sample_coordinate; out_color = tex_color; int radius = 4; int count = 1; norm = vec2(radius/size.x, radius/size.y); for(int i=-radius; i < radius; i++){ //Sample each pixel around the one rendered right now and add it's color to the current one with a certain gradient factor for(int j=-radius; j < radius; j++){ diff = vec2(i/size.x, j/size.y); sample_coordinate = texture_coordinate + diff; if(0.0 <= sample_coordinate.x && sample_coordinate.x <= 1.0 && 0.0 <= sample_coordinate.y && sample_coordinate.y <= 1.0){ tex_color = texture2D(color_map, sample_coordinate); if(tex_color != vec4(0.0,0.0,0.0,0.0) && sample_coordinate != texture_coordinate && length(diff) <= length(norm)){ out_color = (out_color * count + tex_color * (1.0 - (length(diff) / length(norm)))) / (count+1); count++; } } } } }

I am planning on making the radius variable by passing it as another uniform element. With what I am doing there, I don't get the results I am looking for.

Though through experimenting I got this glow-shader, which I like, but the edges of the logo are still a bit too dark though (left the passed frame above the original, that is right):

Answer 1

You're doing it wrong - very inefficiently. Instead of rendering lightsources to your "lighting framebuffer", render the lighting contribution. That would be a soft disk centered at your light source instead of a single pixel. Example disk:

... and you can render that as a sprite! (Additive blending, clamp to 1 for best results).

You can now bind that lighting framebuffer and just sample the texel location that you're interested in and you get the lighting contribution directly.

If you want to create the texture yourself, it's as easy as writing a shader like this: (run via shadertoy)

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    float d = length(uv - 0.5); // distance to center
    float c = 1.0-smoothstep(0.3,0.5,d); // apply smoothing curve
    fragColor = vec4(c,c,c,1.0);
}