Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is my GLSL shader rendering a cleavage?

I'm working on a deferred lighting technique in 2D, using a frame buffer to accumulate light sources using the GL_MAX blend equation.

Here's what I get when rendering one light source (the geometry is a quad without a texture, I'm only using a fragment shader for colouring) to my buffer:

enter image description here

Which is exactly what I want - attenuation from the light source. However, when two light sources are near each other, when they overlap, they seem to produce a lower RGB value where they meet, like so:

enter image description here

Why is there a darker line between the two? I was expecting that with GL_MAX blend equation they would smoothly blend into each other, using the maximal value of the fragments in each location.

Here's the setup for the FBO (using LibGDX):

    Gdx.gl.glClearColor(0.14f, 0.14f, 0.19f, 1); 
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    Gdx.gl.glBlendEquation(GLMAX_BLEND_EQUATION);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_COLOR, GL20.GL_DST_COLOR);
    Gdx.gl.glEnable(GL20.GL_BLEND);

I don't think the call to glBlendFunc is actually necessary when using this equation. GLMAX_BLEND_EQUATION is set to 0x8008.

varying vec2 v_texCoords;
varying vec2 v_positionRelativeToLight;
uniform sampler2D u_texture;
uniform vec3 u_lightPosition;
uniform vec3 u_lightColor;

void main() {
    float distanceToLight = length(v_positionRelativeToLight);
    float falloffVarA = 0.1;
    float falloffVarB = 1.0;
    float attenuation = 1.0 / (1.0 + (falloffVarA*distanceToLight) + (falloffVarB*distanceToLight*distanceToLight));
    float minDistanceOrAttenuation = min(attenuation, 1.0-distanceToLight);
    float combined = minDistanceOrAttenuation * attenuation;
    gl_FragColor = vec4(combined, combined, combined, 1.0);
}

There are extra variables passed in there as this fragment shader is usually more complicated, but I've cut it down to just show how the attenuation and blending is behaving.

This happens between every light source that I render where they meet - rather than the colour that I'm expecting, the meeting of two light sources - the equidistant point between the two quads, is a darker colour that I'm expecting. Any idea why and how to fix it?

like image 602
Ross Taylor-Turner Avatar asked Apr 05 '16 12:04

Ross Taylor-Turner


2 Answers

This is the result of subtracting the first image from the second:

Result of image 1 subtracted from image 2

The background on the first isn't quite black, hence the yellowing on the right, but otherwise you can clearly see the black region on the left where original values were preserved, the darker arc where values from both lights were evaluated but the right was greater, then all the area on the right that the original light didn't touch.

I therefore think you're getting max-pick blending. But what you want is additive blending:

Gdx.gl.glBlendFunc(GL20.GL_ONE, GL20.GL_ONE);

... and leave the blend equation on the default of GL_FUNC_ADD.

like image 131
Tommy Avatar answered Oct 23 '22 01:10

Tommy


Your result is the expected appearance for maximum blending (which is just like the lighten blend mode in Photoshop). The dark seam looks out of place perhaps because of the non-linear falloff of each light, but it's mathematically correct. If you introduce a light with a bright non-white color to it, it will look much more objectionable.

You can get around this if you render your lights to a frame buffer with inverted colors and multiplicative blending, and then render the frame buffer with inverted colors. Then the math works out to not have the seams, but it won't look unusually bright like what additive blending produces.

Use a pure white clear color on your frame buffer and then render the lights with the standard GL_ADD blend equation and the blend function GL_ONE_MINUS_DST_COLOR. Then render your FBO texture to the screen, inverting the colors again.

Two lights drawn using your method enter image description here

Two lights drawn additively enter image description here

Two lights, drawn sequentially with GL_ONE_MINUS_DST_COLOR, GL_ZERO and GL_ADD enter image description here

The above result, inverted enter image description here

like image 3
Tenfour04 Avatar answered Oct 23 '22 01:10

Tenfour04