PDA

View Full Version : Blended lines do not look as expected



esapir
03-31-2014, 08:13 AM
I use the following fragment shader, which uses the fog effect, to draw my scene:


precision mediump float;

uniform int EnableFog;
uniform float FogMinDist;
uniform float FogMaxDist;

varying lowp vec4 DestinationColor;
varying float EyeToVertexDist;

float computeFogFactor()
{
float fogFactor = 1.0;

if (EnableFog != 0)
{
//Use a bit lower vlaue of FogMaxDist to get a better fog effect - it will make the far end disappear quicker.
float fogMaxDistABitCloser = FogMaxDist * 0.98;

fogFactor = (fogMaxDistABitCloser - EyeToVertexDist) / (fogMaxDistABitCloser - FogMinDist);

fogFactor = clamp(fogFactor, 0.0, 1.0);
}

return fogFactor;
}

void main(void)
{
float fogFactor = computeFogFactor();

gl_FragColor = DestinationColor * fogFactor;
}

The following is a screenshot of the result:
1254

My problem is where the lines are connect at the far ends:

1255

It seems that the colors of both lines are added to receive the result color. This is not the result i want - i would like the transition to look smooth. How can i get that result?

aqnuep
03-31-2014, 08:27 AM
The problem is with blending, not with fog.
If you blend multiple primitives on top of each other, then in most cases they will result in such undesired effects. I assume you use here multiplicative blending here, that's why pixels where two primitives overlap you get darker results.

I don't think it's a good idea to implement fog using blending. Just mix the fog color with the fragment color (using the fog factor) in the fragment shader and simply output the result, and, of course, disable blending.

Brokenmind
03-31-2014, 10:55 AM
A bit of search resulted in this (http://stackoverflow.com/questions/6972338/opengl-primitives-with-opacity-without-visible-overlap) and this (http://stackoverflow.com/questions/2143690/is-it-possible-to-achieve-maxas-ad-opengl-blending) posting. Although they're both for iphone, the functions they use also exist in the normal openGL, namely glBlendEquation (http://wiki.delphigl.com/index.php/glBlendEquation) and glBlendEquationSeparate (https://www.opengl.org/sdk/docs/man2/xhtml/glBlendEquationSeparate.xml). You could try tweaking that, and the snipped above is missing how you managed transparency in your non-shader code, namely glBlendFunc (http://wiki.delphigl.com/index.php/glBlendFunc) ;)

esapir
03-31-2014, 01:23 PM
The problem is with blending, not with fog.
If you blend multiple primitives on top of each other, then in most cases they will result in such undesired effects. I assume you use here multiplicative blending here, that's why pixels where two primitives overlap you get darker results.

I don't think it's a good idea to implement fog using blending. Just mix the fog color with the fragment color (using the fog factor) in the fragment shader and simply output the result, and, of course, disable blending.


It am not sure how to make it work when i have a gradient background - the fog color changes from pixel to pixel.
How i can i achieve the fog effect without using alpha blending?

reto.koradi
03-31-2014, 10:53 PM
It am not sure how to make it work when i have a gradient background - the fog color changes from pixel to pixel.
How i can i achieve the fog effect without using alpha blending?
The approach aqnuep suggests should still work. When you mix the fog color with the fragment color in your shader, you can calculate the coefficient based on your desired fog density. This calculation might typically be based on the depth, but there's nothing stopping you from e.g. also using the y coordinate in the density calculation if you want denser fog towards the bottom.

esapir
04-01-2014, 02:16 AM
The approach aqnuep suggests should still work. When you mix the fog color with the fragment color in your shader, you can calculate the coefficient based on your desired fog density. This calculation might typically be based on the depth, but there's nothing stopping you from e.g. also using the y coordinate in the density calculation if you want denser fog towards the bottom.

My background is a gradient drawn using two rectangles (colors of the vertices with y=0 are not equals to the colors of the vertices with y=height). If i understand correctly, the fog color i use must match the color of the background in the exact pixel. However, i don't have a way to know that is the color of the background when in the shader when i draw my lines - correct?