Clipping masks not working with Vello

[Keavon]

capture.mp4

[harshtiwari2022]

Hi @Keavon, I’d like to work on this .
From the capture.mp4, it looks like clipping masks are not behaving correctly when using the Vello backend.
Could you please share:
The exact steps to reproduce (tool/layer settings, etc.)
Whether this only happens with Vello or also with the existing renderer
Any relevant docs or code pointers for the clipping implementation in Graphite + Vello?
If it’s okay with you, I’ll start investigating and put together a fix.

[0HyperCube]

@harshtiwari2022 Thanks your your enthusiasm! It is truely an honour to see such a great programmer generously giving their time to help with this issue.

You can reproduce the issue by drawing two shapes (e.g. ellipses). Change the fill colour so it is not the same as the background. You then hold alt whilst clicking on the gap between the layers in the «layers» panel (as illustrated in the video) to set the clip. You can enter vello rendering mode using file -> preferences -> vello

I can confirm that the issue only happens with the vello backend.

The code related to the issue is in node-graph/libraries/rendering/src/renderer.rs:625 line 625 inside the Table<Graphic>::render_to_vello function.

This is a regression introduced in #3349, specifically the following change:

diff --git a/node-graph/libraries/rendering/src/renderer.rs b/node-graph/libraries/rendering/src/renderer.rs
index 4171ab6d0..8bde63c0f 100644
--- a/node-graph/libraries/rendering/src/renderer.rs
+++ b/node-graph/libraries/rendering/src/renderer.rs
@@ -622,7 +622,7 @@ impl Render for Table<Graphic> {
 
                                        scene.push_layer(peniko::Mix::Normal, 1., kurbo::Affine::IDENTITY, &rect);
                                        mask_element.render_to_vello(scene, transform_mask, context, &render_params.for_clipper());
-                                       scene.push_layer(peniko::BlendMode::new(peniko::Mix::Clip, peniko::Compose::SrcIn), 1., kurbo::Affine::IDENTITY, &rect);
+                                       scene.push_clip_layer(kurbo::Affine::IDENTITY, &rect);
                                }
 
                                row.element.render_to_vello(scene, transform, context, render_params);

If you revert this change, you will see the clipping is fixed. However the peniko::Mix::Clip is deprecated. The push_clip_layer function uses the Compose::SrcOver rather than Compose::SrcIn.

I hope that gives you a good starting point.

[saquibjawedbit]

Hey, @0HyperCube is the issue still open ?

[0HyperCube]

@saquibjawedbit yes, the issue is still open. You can tell because it says «Open» at the top and the erroneous behaviour is still visible in the main branch. I hope that helps.

[ashishmohapatra240]

@harshtiwari2022 Thanks your your enthusiasm! It is truely an honour to see such a great programmer generously giving their time to help with this issue.

You can reproduce the issue by drawing two shapes (e.g. ellipses). Change the fill colour so it is not the same as the background. You then hold alt whilst clicking on the gap between the layers in the «layers» panel (as illustrated in the video) to set the clip. You can enter vello rendering mode using file -> preferences -> vello

I can confirm that the issue only happens with the vello backend.

The code related to the issue is in node-graph/libraries/rendering/src/renderer.rs:625 line 625 inside the Table<Graphic>::render_to_vello function.

This is a regression introduced in #3349, specifically the following change:

diff --git a/node-graph/libraries/rendering/src/renderer.rs b/node-graph/libraries/rendering/src/renderer.rs
index 4171ab6d0..8bde63c0f 100644
--- a/node-graph/libraries/rendering/src/renderer.rs
+++ b/node-graph/libraries/rendering/src/renderer.rs
@@ -622,7 +622,7 @@ impl Render for Table {

                                    scene.push_layer(peniko::Mix::Normal, 1., kurbo::Affine::IDENTITY, &rect);
                                    mask_element.render_to_vello(scene, transform_mask, context, &render_params.for_clipper());

•                                   scene.push_layer(peniko::BlendMode::new(peniko::Mix::Clip, peniko::Compose::SrcIn), 1., kurbo::Affine::IDENTITY, &rect);
  

•                                   scene.push_clip_layer(kurbo::Affine::IDENTITY, &rect);
                            }
  
                            row.element.render_to_vello(scene, transform, context, render_params);
  

If you revert this change, you will see the clipping is fixed. However the peniko::Mix::Clip is deprecated. The push_clip_layer function uses the Compose::SrcOver rather than Compose::SrcIn.

I hope that gives you a good starting point.

Hello @0HyperCube, since Mix::Clip is deprecated in peniko and it suggests using push_clip_layer instead (as we were doing it earlier), but it has a known bug in Vello, see linebender/vello#1198. So, can we move back to using push_layer with Mix::Normal(not deprecated), combined with Compose::SrcIn for the clipping?

[0HyperCube]

So, can we move back to using push_layer with Mix::Normal(not deprecated), combined with Compose::SrcIn for the clipping?

Yes, since Normal is the same as Clip but with worse performance (which doesn't matter).

/// `Clip` was similar to `Normal`, but was optimised for clipping (by avoiding
/// blending in areas where there was no clip path).

known bug in Vello, see linebender/vello#1198.

This issue (masks not working in Graphite) is not related to any bugs with peniko::Mix::Clip (which is used internally by the push_clip_layer function). It is related to the push_clip_layer using the Compose::SrcOver rather than Compose::SrcIn as I have already said.