Opacity with line 2d and anti-aliasing on causes visible wireframe/"ghost" lines to appear

[EricEzaM]

Not sure if this is as it supposed to be or not... But might as well try submit a bug to see if it is one.

Godot version:
3.2 stable
OS/device including version:
Windows 10 1903
Issue description:
Line 2d shows debug boxes when anti-aliasing is enabled and material is translucent (i.e. 0 < alpha < 1). Example below

Steps to reproduce:
New project
Add Line2d
Add some points
Set default color alpha to be <1, e.g. 0.5
Make width larger (to better see effect), e.g. 30 - 50
Enable anti-aliasing under 'border'

[YeldhamDev]

I think it's the anti-aliasing effect overlapping over the polygons rather than debug boxes.

[Calinou]

As @YeldhamDev said, I'm not sure if anything can be done about it given the current antialiasing implementation. It could be redone entirely to work like StyleBoxFlat's antialiasing, but that's a fair amount of work which should probably be done after the switch to Vulkan.

[Zylann]

How is it possible that AA makes triangles of the line visible? They are even supposed to be shared vertices, there is no way they would overlap like that and show as if they were wireframe Oo
In fact there is some debug code showing them, but it's commented out.

[SleepProgger]

Assuming the godot 3.2_stable release is the same as the current 3.2 branch:

Line2D antialiasing ends up in here:

godot/drivers/gles3/rasterizer_canvas_gles3.cpp

Line 905 in 669cd46

_draw_generic_indices(GL_LINE_STRIP, polygon->indices.ptr(), polygon->count, polygon->points.size(), polygon->points.ptr(), polygon->uvs.ptr(), polygon->colors.ptr(), polygon->colors.size() == 1);

rendered as TYPE_POLYGON

canvas_item_add_polyline ends up being rendered as TYPE_POLYLINE (

godot/drivers/gles3/rasterizer_canvas_gles3.cpp

Line 690 in 669cd46

case Item::Command::TYPE_POLYLINE: {

) which doesn't have this problem.

The reason seem to be that TYPE_POLYGON tries to smooth by drawing a line with smooth enabled between all indices while TYPE_POLYLINE draws the outline from the line attribute which is filled properly in VisualServerCanvas::canvas_item_add_polyline. As far as i see LineBuilder could be changed so it does the same and Line2D could then also draw via TYPE_POLYLINE in the end.
I may have missed something tho, its late for me.

Both implementation seem to have some overdraw regardless, which prevents them from being really useful with opaque:

[Zylann]

_draw_generic_indices(GL_LINE_STRIP

I guess this is again an attempt at faking AA somehow? If it tries to draw a line on the edges of the polygon, it is doing a mistake by also drawing the inside triangles.

It looks like a buggy solution to me, for ANY kind of polygon, not just Line2D, here in beta4:

It was fixed for opaque polygons in beta5, but transparent ones still have a thin brighter outline with AA, and Line2D wasn't fixed: #33857 (comment)

Line2D cannot be replaced with add_polyline because you'd basically throw away all features it has compared to it. Or maybe if AA is enabled, it could compute outlines in LineBuilder in addition to its polygons (which btw could allow to generate collision segments?). Or did you mean it to draw as a triangle strip rather than indexed triangles?

Still, these kinds of problems remind me of #35279, I wish we simply had proper AA rather than complicated workarounds like this...
According to Reduz, in 4.0 2D viewports would get MSAA: #33857 (comment)

The second example in your screenshot shows a different algorithm using round joints, so yeah you get different results. It will look more like draw_polyline if you turn off some settings.
Completely avoiding overlap in the geometry is hard in both cases, normally you'd get less if you had less points anyways:

This kind of problem has been around for years... one way to never get overlap is to pre-draw the geometry opaque in a viewport and draw the result with transparency, but in Godot 3.2 it's quite overkill.

[SleepProgger]

Or maybe if AA is enabled, it could compute outlines in LineBuilder in addition to its polygons (which btw could allow to generate collision segments?).

Yes, that was the idea. Similar to draw_line, although i concur a better antialiasing strategy would be the better approach.
I am currently writing a LineRenderer using a Mesh basically following https://blog.mapbox.com/drawing-antialiased-lines-with-opengl-8766f34192dc?gi=ea7cb7d50409
This uses the shader to blend the alpha on the line edges for antialiasing.
This would probably be not a good approach for godot tho as it relies on the shader (ie: AA would break if the user uses their own shader).
An alternative with the same effect would be to draw 6 triangles per line segment.

TBH. as is: i'd say line rendering with translucency is broken and this should at least be noted in the docs.

/kinda offtopic, sorry:
The overlapping problem is the same for all join types and i need custom color per vertex, so i guess i have to fiddle a bit more :)

[ghost]

pre-draw the geometry opaque in a viewport and draw the result with transparency

@Zylann I think I understand the first part is to use draw functions on a canvas, but what do you mean by draw the result with transparency?

[Calinou]

@avencherus It means you should render an opaque line to a viewport, and display the resulting ViewportTexture with a modulate value that makes it translucent. If the line doesn't need to be updated, this should be even faster than rendering it directly (at the cost of overdraw).

[akien-mga]

Still seems reproducible in the current 3.x branch. MRP: TestLine2DAA.zip

In master anti-aliasing doesn't seem to work so the bug is not reproducible, but might be if/when AA gets fixed.

[Calinou]

As a workaround, use https://github.com/godot-extended-libraries/godot-antialiased-line2d which supports translucent antialiased 2D lines.

[erayzesen]

Hi all. I encountered this issue in version 3.6, and the solution to the problem is actually quite simple. Godot applies antialiasing to the edges to smooth polygons. What causes this issue is the overlapping lines within the polygon. Managing these collective polygon drawings together and preventing the drawing of lines if 2 lines overlap will give the most accurate result. In my own application, I first draw the polygon with antialiasing disabled, and then I draw 1-pixel antialiased lines on the edges using draw_line. I didn't need an algorithm like checking for overlapping lines in my sample. I made exceptions for which lines should not be drawn, and my problem was resolved.

Antialiased polygon formula of Godot= polygon + 1px antialiased edges

So you can try to make an antialiased polygon with this formula and you can see it's the same thing with the antialiased polygon of Godot. In this way, you have the chance to determine which edges to cancel. When drawing multiple polygons simultaneously, you can prevent the issue by not drawing lines on overlapping adjacent edges.

I hope it has been explanatory; if not, I can provide further clarification.