Display problem when two rectangles are close to each other

[llsansun]

for (var i = 0u; i < PIXELS_PER_THREAD; i += 1u) {
let i_f = f32(i);
let xmin = min(xmin0 - i_f, 1.0) - 1.0e-6;
let xmax = xmax0 - i_f;
let b = min(xmax, 1.0);
let c = max(b, 0.0);
let d = max(xmin, 0.0);
let a = (b + 0.5 * (d * d - c * c) - xmin) / (xmax - xmin);
area[i] += a * dy;
}
What is the purpose of x squared minus x squared in this code at the end of fine.wgsl? Suppose I have two rectangles, one is at position (0,0) with width and height of (100,100), and the other is at position (100,100) , the width and height are (200,200). Now we find that if we want to subtract c square from d square, there will be a gap between them. If we remove it, there will be no gap. Can it be removed please? Is there any other way to solve it?

[llsansun]

When I subtract 1.0e-6 from b, there will be no seam (I know that subtracting 1.0e-6 from xmin may be to prevent the denominator from being 0). Is there any problem with this change?
for (var i = 0u; i < PIXELS_PER_THREAD; i += 1u) {
let i_f = f32(i);
let xmin = min(xmin0 - i_f, 1.0) - 1.0e-6;
let xmax = xmax0 - i_f;
let b = min(xmax, 1.0);
let c = max(b - 1.0e-6, 0.0);
let d = max(xmin, 0.0);
let a = (b + 0.5 * (d * d - c * c) - xmin) / (xmax - xmin);
area[i] += a * dy;
}

[DJMcNab]

Thanks for the issue.

Edit: see #417 (comment)

I believe this issue is known as conflation artifacts. See also #49, and #271 which introduces a test scene similar to the example you have screenshotted.

#377 introduced other anti-aliasing modes, which do not experience these. I have not personally dug into the origin of these to understand the different trade-offs associated with each option, but does usin either AaConfig::Msaa8 or AaConfig::Msaa8 as RenderParams#antialiasing_method resolve this for you? The relevant AaSupport must have been enabled in RendererOptions for this to work

[raphlinus]

The antialiasing modes fix conflation artifacts within a path, but not when compositing multiple paths together. That's something we're also interested in, but don't have a timeline. Unfortunately, it's impossible to tell from this issue whether that's what you're seeing or not, or why fiddling with the antialiasing logic seems to resolve the problem. Could you post what you're trying to render, what you're seeing (a screenshot), and what you expect?

[llsansun]

@raphlinus

For example, in the above example,
A is
builder.fill(
Fill::NonZero,
transform * Affine::translate((200.0, 200.0)),
Color::GREEN,
None,
&[
// triangle 1
MoveTo((0.0, 0.0).into()),
LineTo((100., 0.).into()),
LineTo((100., 100.).into()),
LineTo((0., 100.).into()),
LineTo((0., 0.).into()),
],
);
, B is
builder.fill(
Fill::NonZero,
transform * Affine::translate((200.0, 200.0)),
Color::GREEN,
None,
&[
// triangle 1
MoveTo((100.0, 0.0).into()),
LineTo((200., 0.).into()),
LineTo((200., 100.).into()),
LineTo((100., 100.).into()),
LineTo((100., 0.).into()),
],
);
, and C is
builder.fill(
Fill::NonZero,
transform * Affine::translate((200.0, 200.0)),
Color::GREEN,
None,
&[
// triangle 1
MoveTo((100.0, 100.0).into()),
LineTo((200., 100.).into()),
LineTo((200., 200.).into()),
LineTo((100., 200.).into()),
LineTo((100., 100.).into()),
],
);
.
My goal is to make the two rectangles A and B closely connected, and the two rectangles B and C also closely connected. It is complete when the scene camera is not zoomed, but problems will occur once the scene is zoomed (equivalent to changing the transform). Now it looks like there will be a pixel gap between them. Hope this problem can be solved, thank you!

[caxieyou]

any progress？

[llsansun]

@raphlinus Could you please provide some suggestions to solve this problem? Now I have tried to modify y_edge, but the result seems not to be ideal. I really hope to get some suggestions. Thank you!