Fix UI overflow clipping

[chronicl]

Objective

Overflow clipping currently doesn't respect the ui node's scale.

Solution

Multiply the clipping rectangle by the ui node's scale.

Testing

Added a new example overflow_scale.rs that tests this visually (The actual change is 4 lines, the rest is comments and the example).

Showcase

Before

overflow_scale_WT4F4ovWo4.mp4

After

overflow_scale_QuPQIkdzOn.mp4

[kfc35]

Works for me!

[ickshonpe]

This isn't sufficient, the example breaks if the parent node is 200px wide for example. The problem are with the vertex calculations in the renderer.

[chronicl]

I see, I implemented the scaling inside of prepare_uinodes now and fixed the issue that you mentioned (only locally, not in this PR). It's not very complicated, but I saw that this code is duplicated in a lot of different places inside of bevy_ui_render and ideally rotations would be supported too.

I could make this a bandaid fix for only scaling, but I don't want to implement a proper fix that takes rotation into account and deduplicates the vertex attribute logic right now. I only made this PR, because I thought it might be an easy fix, I don't actually need it myself, I'm fine with closing it.

I believe borders are also broken when scaled.

[ickshonpe]

I see, I implemented the scaling inside of prepare_uinodes now and fixed the issue that you mentioned (only locally, not in this PR). It's not very complicated, but I saw that this code is duplicated in a lot of different places inside of bevy_ui_render and ideally rotations would be supported too.

I could make this a bandaid fix for only scaling, but I don't want to implement a proper fix that takes rotation into account and deduplicates the vertex attribute logic right now. I only made this PR, because I thought it might be an easy fix, I don't actually need it myself, I'm fine with closing it.

I believe borders are also broken when scaled.

I've started on a full implementation doing CPU using the Sutherland-Hodgman algorithm that handles rotations and non-rectangular clipping regions:

(The choppiness and color artifacts are due to the conversion to GIF)

Mostly seems to work, but still needs incremental updates and caching etc. I held back on doing it because I was hoping someone with more rendering expertise would implement a GPU based solution using a stencil buffer, which should be more efficient and could support rounded corners. But after looking into this and #23520, I think it might not be too bad after all.

[chronicl]

Perfect!