Skip to content
Snippets Groups Projects

qt: support background coloring and fix hard edge in round image

Merged Fatih Uzunoğlu requested to merge fuzun/vlc:qt/sdfroundedtextureadjustments into master
All threads resolved!

I'm not sure what is better, fwidth() may not be so cheap, so providing the soft edge as a uniform also makes sense (current approach is providing 1.0 / Math.min(width, height) as uniform).

Currently, we are not making use of custom soft edge as an effect, but rather have such a soft edge to merely act as antialiasing.

It seems that fwidth() would be more accurate to use for the anti aliasing here. It is hard for me to observe the difference, so I would be fine keeping the current approach.

In https://blog.frost.kiwi/analytical-anti-aliasing/#implementation, the difference can be seen ("Pixel size method" being fwidth (Screen-space derivative) or Precalculate pixel size).

The problem is more about having a hard edge currently, because without shrinking the outer soft edge exceeds the rectangle boundaries. This is also explained in https://blog.frost.kiwi/analytical-anti-aliasing/#unmentioned-challenges.

Request review @chub.

Edited by Fatih Uzunoğlu

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Fatih Uzunoğlu resolved all threads

    resolved all threads

  • Fatih Uzunoğlu approved this merge request

    approved this merge request

  • Fatih Uzunoğlu added 6 commits

    added 6 commits

    • 6aebe8b7 - qml: provide padding property that represents the shrinkage in `RoundImage`
    • 52f92c9a - qml: use painted width of the target image in MusicArtistDelegate shadow
    • ea227eda - qml: shrink shadows if target image is also shrunk
    • 4b2f24c7 - qml: set implicit size rather than final size in `NetworkGridItem` overlay
    • ecbea83a - qml: set implicit size rather than final size in `VideoGridItem` overlay
    • 3c80d553 - qml: use painted size for image overlay in `MediaCover`

    Compare with previous version

  • Fatih Uzunoğlu added 6 commits

    added 6 commits

    • d86427c0 - qml: provide padding property that represents the shrinkage in `RoundImage`
    • 60fe86cc - qml: use painted width of the target image in MusicArtistDelegate shadow
    • b4a30e7a - qml: shrink shadows if target image is also shrunk
    • 95bd4f1e - qml: set implicit size rather than final size in `NetworkGridItem` overlay
    • c49c4441 - qml: set implicit size rather than final size in `VideoGridItem` overlay
    • 82fb7d05 - qml: use painted size for image overlay in `MediaCover`

    Compare with previous version

  • Fatih Uzunoğlu added 6 commits

    added 6 commits

    • d9e6d233 - qml: provide padding property that represents the shrinkage in `RoundImage`
    • 7939b6b1 - qml: use painted width of the target image in MusicArtistDelegate shadow
    • de7b4870 - qml: shrink shadows if target image is also shrunk
    • 798c506b - qml: set implicit size rather than final size in `NetworkGridItem` overlay
    • adcbeb38 - qml: set implicit size rather than final size in `VideoGridItem` overlay
    • f9149683 - qml: use painted size for image overlay in `MediaCover`

    Compare with previous version

  • Fatih Uzunoğlu added 6 commits

    added 6 commits

    • 631a45f2 - qml: provide padding property that represents the shrinkage in `RoundImage`
    • 9f9dee6b - qml: use painted width of the target image in MusicArtistDelegate shadow
    • 43a31c7a - qml: shrink shadows if target image is also shrunk
    • 416ace60 - qml: set implicit size rather than final size in `NetworkGridItem` overlay
    • 70dfd1ed - qml: set implicit size rather than final size in `VideoGridItem` overlay
    • bbaf5988 - qml: use painted size for image overlay in `MediaCover`

    Compare with previous version

  • Author Reporter

    I realized these:

    • Considering shrinkage in paintedWidth/Height may be confusing. The main reason is that Image does not seem to do that when it uses antialiasing, so I also stopped considering shrinkage in painted size. Instead, I added a readonly padding property that tells the shrinkage. padding is similar to MultiEffect's paddingRect and its autoPaddingEnabled functionality (https://doc.qt.io/qt-6/qml-qtquick-effects-multieffect.html#autoPaddingEnabled-prop). However, instead of shrinking MultiEffect reportedly grows. I believe shrinkage is better, because then clipping would not cause issues, and other Qt Quick elements also shrink (such as border of Rectangle, or Image antialiasing). Currently padding only considers the outer antialiasing border (softEdgeMax), but in the future we can add functionality to have extra padding if necessary.
    • Unlike shadows, overlay items should not shrink as if the antialiased border of the exceeds the overlay items (such as the progress bar) due to different curvature of the corners, or their antialiased borders overlap where they blend in to a different color, it does not seem to look good. So I no longer shrink the overlay items.

    No major changes.

    Unlike shadows, overlay items should not shrink as it does not seem to look good. So I no longer shrink the overlay items.

    For example, this:

    image

    Looks more natural than this:

    image

  • Author Reporter

    If someone wants to clearly see how the shadows shrink, softEdgeMax can be set something large such as 0.5.

    Here are screenshots when softEdgeMax is 0.5 with shadows shrinking with the image:

    image

    image

    Without shrinkage:

    image

    image

    Although the default softEdgeMax is used for antialiasing, so it is really small. Currently, it is 1. / Math.min(width, height) (not very much different than fwidth()). So with that it is harder to notice if shadows shrink or not alongside the image (this screenshots is exaggeration).

    I think shadows really looks well with shrinkage (unlike overlay items).

  • MR Acceptance result

    :tada: This MergeRequest has been Accepted! Congratulations.

    MR acceptance checks details:

    • :white_check_mark: MR should be considered mergeable by Gitlab
    • :white_check_mark: Last pipeline should be successful
    • :white_check_mark: MergeRequest should have at least one external review and/or vote
    • :white_check_mark: All threads should be resolved, have votes and score > 0
    • :white_check_mark: MergeRequest should have no activity (threads/votes) for (72h/72h)

    This message was automatically generated by homer-bot.

  • Steve Lhomme added 109 commits

    added 109 commits

    • bbaf5988...d9076332 - 99 commits from branch videolan:master
    • a2a0afbf - qt: support background coloring in `SDFAARoundedTexture.frag`
    • a8d53a84 - qml: support background coloring in `RoundImage.qml`
    • 189c4284 - qt: add support for using `fwidth()` in `SDFAARoundedTexture.frag`
    • 295980e2 - qt: shrink the distance to provide breathing room in `SDFAARoundedTexture.frag`
    • d8b771a7 - qml: provide padding property that represents the shrinkage in `RoundImage`
    • f0ff7c47 - qml: use painted width of the target image in MusicArtistDelegate shadow
    • 1d05fd47 - qml: shrink shadows if target image is also shrunk
    • 56fab50a - qml: set implicit size rather than final size in `NetworkGridItem` overlay
    • 06fa8c28 - qml: set implicit size rather than final size in `VideoGridItem` overlay
    • 88981f67 - qml: use painted size for image overlay in `MediaCover`

    Compare with previous version

  • Steve Lhomme enabled an automatic merge when all merge checks for 88981f67 pass

    enabled an automatic merge when all merge checks for 88981f67 pass

  • merged

  • Fatih Uzunoğlu mentioned in merge request !6858

    mentioned in merge request !6858

  • Please register or sign in to reply
    Loading