Thin line in a distance flickering when rotating the camera

Hi,

When I draw a thin line (in this case a finish line) in a distance it is flickering when you move the camera. I made a demo for this problem

https://playground.babylonjs.com/#CMVWD4#4

It is a very annoying effect when move towards the finish line. Is there any way around this problem?

thanks in advantage

Tijmen

You can try to increase MSAA samples :

https://playground.babylonjs.com/#CMVWD4#3

But it won’t totaly remove the effect. I would suggest to use a texture for the line with fully transparent alpha on the outside and fully opaque inside. With some gradient in the alpha & mipmaps, I think it can decrease the aliasing effect.

1 Like

I can’t see a way to fix that… It is because of the anti-aliasing algorithm which is dimming the line when it is a single pixel because it averages with other darker pixels. You could disable the anti-aliasing, but it would be worst because the line would sometimes completely disappear…

One thing you could do is detecting that the line is only one or two pixels height and draw a line instead of the box.

2 Likes

Thank you , the msaa sample fix is a big improvement. I assume this will feature will come at a certain cost. I will try your texture option.

1 Like

With your sampling idea I found an alternative more cheaper solution. Increase the transparency when it is further away. This will blur it more and make the line thiner and it will become more visible when coming towards your. It is not perfect but a bit better.

https://playground.babylonjs.com/#CMVWD4#5

1 Like

great idea! I love it!