Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering issue when clipping and stroking the same path #616

Closed
timtom-dev opened this issue Jun 18, 2024 · 5 comments · Fixed by #695
Closed

Rendering issue when clipping and stroking the same path #616

timtom-dev opened this issue Jun 18, 2024 · 5 comments · Fixed by #695

Comments

@timtom-dev
Copy link
Contributor

I'm trying to render a simple UI, and I'm using the same path to clip the contents of each button as well as stroke the border, but I'm getting some artifacts in the corners of some of the buttons. Is this a known issue?

image

@raphlinus
Copy link
Contributor

Hm, that definitely looks like a rendering issue. Is there any chance you could make a minimal repro?

@timtom-dev
Copy link
Contributor Author

timtom-dev commented Jun 19, 2024

Sure thing! I wasn't able to quickly repro the big black rectangle, but hopefully that's the same problem.

It looks like it only happens at certain coordinates, which is why the rectangle is at (60., 10.) it doesn't happen at 61, for example.

Swap this function in to the "simple" example in the vello repo:

fn add_shapes_to_scene(scene: &mut Scene) {
    let rect = RoundedRect::new(60.0, 10.0, 160.0, 100.0, 10.0);
    let stroke = Stroke::new(2.0);
    let fill = vello::peniko::Fill::NonZero;
    let mask_blend = vello::peniko::BlendMode::new(vello::peniko::Mix::Normal, vello::peniko::Compose::SrcOver);
    scene.push_layer(mask_blend, 1.0, Affine::IDENTITY, &rect);
    scene.stroke(&stroke, Affine::IDENTITY, Color::BLACK, None, &rect);
    scene.pop_layer();
}

image

@timtom-dev
Copy link
Contributor Author

So it turns out that this has nothing to do with clipping layers. The following code also exhibits the issue:

    let rect = RoundedRect::new(60.0, 10.0, 160.0, 100.0, 10.0);
    let stroke = Stroke::new(2.0);
    scene.stroke(&stroke, Affine::IDENTITY, Color::WHITE, None, &rect);

@DJMcNab
Copy link
Member

DJMcNab commented Jun 21, 2024

I can reproduce.

Some triage:

  1. This doesn't reproduce if we use the CPU "flatten" stage
  2. There seem to be two issues:
    • The little poke, which only reproduces with the MSAA8 or MSAA16 rendering modes
    • The filling of the square, which is reproducible with any AAConfig
  3. This only seems to reproduce near the top of the window for me
  4. It doesn't seem to reproduce if the rectangle is at all rotated
  5. It always seems to be at the join of the arc and the rectangle. This is the first/last point of the RoundedRectangle

The issue reproducing with area anti-aliasing, with no
image

@raphlinus
Copy link
Contributor

Based on Daniel's investigation, this seems most likely to be a watertightness issue in the flatten stage, possibly related to fastmath (another issue that implicates fastmath is #581, so we should probably look at these together).

A good next step would be to examine the output of the flatten stage (ie the line soup buffer). We made some effort to make joins watertight, but it's very easy to image we missed something.

@waywardmonkeys waywardmonkeys added this to the Vello 0.3 release milestone Aug 1, 2024
github-merge-queue bot pushed a commit that referenced this issue Sep 23, 2024
At subpath end, the last path segment is encoded with the end point
chosen so that the vector from the current point to the end point is the
tangent, ie the same vector as cubic_start_tangent applied to the first
segment in the subpath. In those cases, compute the tangent by
subtracting those two points, rather than cubic_start_tangent applied to
the line. These are mathematically identical, but may give different
results because of roundoff.

There are two cases: an open subpath, in which case the case is applied
to the tangent at draw_start_cap, or a closed subpath, where the logic
is in the tangent calculation in read_neighboring_segment.

Both GPU and CPU shaders are updated. It hasn't been carefully
validated.

Hopefully fixes #616 and #650.
DJMcNab added a commit to DJMcNab/vello that referenced this issue Sep 23, 2024
This was contributed in linebender#616 (comment)

Co-Authored-By: TimTom <perflexive+github@gmail.com>
github-merge-queue bot pushed a commit that referenced this issue Sep 25, 2024
This is a test created from
#616 (comment).

This was fixed in #695.

The version which fails looked like:
![half circle with an intruding
line.](https://github.com/user-attachments/assets/9b567912-2ad3-4d11-96cd-6db43dd64b09)

---------

Co-authored-by: TimTom <perflexive+github@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants