[vlc-commits] [Git][videolan/vlc][master] 10 commits: qt: support background coloring in `SDFAARoundedTexture.frag`
Steve Lhomme (@robUx4)
gitlab at videolan.org
Wed Feb 12 06:34:08 UTC 2025
Steve Lhomme pushed to branch master at VideoLAN / VLC
Commits:
a2a0afbf by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qt: support background coloring in `SDFAARoundedTexture.frag`
- - - - -
a8d53a84 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: support background coloring in `RoundImage.qml`
- - - - -
189c4284 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qt: add support for using `fwidth()` in `SDFAARoundedTexture.frag`
Not enabled by default, as we need to know how much it shrinked
in the QML side to shrink the shadow and border by that same
amount. `CUSTOM_SOFTEDGE` can be undefined to use `fwidth()`
over the default `1 / Math.min(width, height)`.
- - - - -
295980e2 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qt: shrink the distance to provide breathing room in `SDFAARoundedTexture.frag`
- - - - -
d8b771a7 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: provide padding property that represents the shrinkage in `RoundImage`
- - - - -
f0ff7c47 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: use painted width of the target image in MusicArtistDelegate shadow
- - - - -
1d05fd47 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: shrink shadows if target image is also shrunk
- - - - -
56fab50a by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: set implicit size rather than final size in `NetworkGridItem` overlay
Final size is determined where it is reused (the loader).
- - - - -
06fa8c28 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: set implicit size rather than final size in `VideoGridItem` overlay
Final size is determined where it is reused (the loader).
- - - - -
88981f67 by Fatih Uzunoglu at 2025-02-12T06:15:10+00:00
qml: use painted size for image overlay in `MediaCover`
- - - - -
10 changed files:
- modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
- modules/gui/qt/medialibrary/qml/VideoGridItem.qml
- modules/gui/qt/network/qml/NetworkGridItem.qml
- modules/gui/qt/shaders/SDFAARoundedTexture.frag
- modules/gui/qt/shaders/SDFAARoundedTexture_cropsupport.frag
- modules/gui/qt/widgets/qml/DoubleShadow.qml
- modules/gui/qt/widgets/qml/DropShadowImage.qml
- modules/gui/qt/widgets/qml/GridItem.qml
- modules/gui/qt/widgets/qml/MediaCover.qml
- modules/gui/qt/widgets/qml/RoundImage.qml
Changes:
=====================================
modules/gui/qt/medialibrary/qml/MusicArtistDelegate.qml
=====================================
@@ -177,9 +177,12 @@ T.ItemDelegate {
readonly property real eDPR: MainCtx.effectiveDevicePixelRatio(Window.window)
Rectangle {
- anchors.fill: parent
+ anchors.centerIn: parent
+ anchors.alignWhenCentered: false
+
+ implicitWidth: roundImage.paintedWidth + border.width
+ implicitHeight: roundImage.paintedHeight + border.width
- anchors.margins: -border.width
z: -1
radius: roundImage.effectiveRadius
=====================================
modules/gui/qt/medialibrary/qml/VideoGridItem.qml
=====================================
@@ -48,8 +48,8 @@ Widgets.GridItem {
pictureHeight: VLCStyle.gridCover_video_height
pictureOverlay: Item {
- width: root.pictureWidth
- height: root.pictureHeight
+ implicitWidth: root.pictureWidth
+ implicitHeight: root.pictureHeight
Widgets.ScaledImage {
id: image
=====================================
modules/gui/qt/network/qml/NetworkGridItem.qml
=====================================
@@ -71,8 +71,8 @@ Widgets.GridItem {
}
pictureOverlay: Item {
- width: root.pictureWidth
- height: root.pictureHeight
+ implicitWidth: root.pictureWidth
+ implicitHeight: root.pictureHeight
Widgets.VideoProgressBar {
id: progressBar
=====================================
modules/gui/qt/shaders/SDFAARoundedTexture.frag
=====================================
@@ -1,6 +1,8 @@
#version 440
#define ANTIALIASING
+#define BACKGROUND_SUPPORT
+#define CUSTOM_SOFTEDGE
/*****************************************************************************
* Copyright (C) 2024 VLC authors and VideoLAN
@@ -44,13 +46,18 @@ layout(std140, binding = 0) uniform buf {
vec2 size;
#ifdef CROP_SUPPORT
vec2 cropRate;
+#endif
+#ifdef BACKGROUND_SUPPORT
+ vec4 backgroundColor;
#endif
float radiusTopRight;
float radiusBottomRight;
float radiusTopLeft;
float radiusBottomLeft;
+#ifdef CUSTOM_SOFTEDGE
float softEdgeMin;
float softEdgeMax;
+#endif
};
layout(binding = 1) uniform sampler2D source;
@@ -112,10 +119,22 @@ void main()
vec4 texel = texture(source, qt_TexCoord0);
#endif
+#ifdef BACKGROUND_SUPPORT
+ // Source over blending (S + D * (1 - S.a)):
+ texel = texel + backgroundColor * (1.0 - texel.a);
+#endif
+
+#ifdef ANTIALIASING
+#ifndef CUSTOM_SOFTEDGE
+ float softEdgeMax = fwidth(dist) * 0.75;
+ float softEdgeMin = -softEdgeMax;
+#endif
+ // Breathing room (shrink):
+ dist += softEdgeMax;
+
// Soften the outline, as recommended by the Valve paper, using smoothstep:
// "Improved Alpha-Tested Magnification for Vector Textures and Special Effects"
// NOTE: The whole texel is multiplied, because of premultiplied alpha.
-#ifdef ANTIALIASING
float factor = smoothstep(softEdgeMin, softEdgeMax, dist);
#else
float factor = step(0.0, dist);
=====================================
modules/gui/qt/shaders/SDFAARoundedTexture_cropsupport.frag
=====================================
@@ -13,6 +13,8 @@
// SAME IN SDFAARoundedTexture.frag.
#define ANTIALIASING
+#define BACKGROUND_SUPPORT
+#define CUSTOM_SOFTEDGE
/*****************************************************************************
* Copyright (C) 2024 VLC authors and VideoLAN
@@ -56,13 +58,18 @@ layout(std140, binding = 0) uniform buf {
vec2 size;
#ifdef CROP_SUPPORT
vec2 cropRate;
+#endif
+#ifdef BACKGROUND_SUPPORT
+ vec4 backgroundColor;
#endif
float radiusTopRight;
float radiusBottomRight;
float radiusTopLeft;
float radiusBottomLeft;
+#ifdef CUSTOM_SOFTEDGE
float softEdgeMin;
float softEdgeMax;
+#endif
};
layout(binding = 1) uniform sampler2D source;
@@ -124,10 +131,22 @@ void main()
vec4 texel = texture(source, qt_TexCoord0);
#endif
+#ifdef BACKGROUND_SUPPORT
+ // Source over blending (S + D * (1 - S.a)):
+ texel = texel + backgroundColor * (1.0 - texel.a);
+#endif
+
+#ifdef ANTIALIASING
+#ifndef CUSTOM_SOFTEDGE
+ float softEdgeMax = fwidth(dist) * 0.75;
+ float softEdgeMin = -softEdgeMax;
+#endif
+ // Breathing room (shrink):
+ dist += softEdgeMax;
+
// Soften the outline, as recommended by the Valve paper, using smoothstep:
// "Improved Alpha-Tested Magnification for Vector Textures and Special Effects"
// NOTE: The whole texel is multiplied, because of premultiplied alpha.
-#ifdef ANTIALIASING
float factor = smoothstep(softEdgeMin, softEdgeMax, dist);
#else
float factor = step(0.0, dist);
=====================================
modules/gui/qt/widgets/qml/DoubleShadow.qml
=====================================
@@ -36,8 +36,8 @@ Item {
property real viewportWidth: rectWidth + viewportHorizontalOffset
property real viewportHeight: rectHeight + viewportVerticalOffset
- property real rectWidth: sourceItem ? Math.min(sourceItem.paintedWidth ?? Number.MAX_VALUE, sourceItem.width) : 0
- property real rectHeight: sourceItem ? Math.min(sourceItem.paintedHeight ?? Number.MAX_VALUE, sourceItem.height) : 0
+ property real rectWidth: sourceItem ? Math.min((sourceItem.paintedWidth ?? Number.MAX_VALUE) - Math.ceil(sourceItem.padding ?? 0) * 2, sourceItem.width) : 0
+ property real rectHeight: sourceItem ? Math.min((sourceItem.paintedHeight ?? Number.MAX_VALUE) - Math.ceil(sourceItem.padding ?? 0) * 2, sourceItem.height) : 0
property real xRadius: (sourceItem ? (sourceItem.effectiveRadius ?? sourceItem.radius) : 0) ?? 0
property real yRadius: (sourceItem ? (sourceItem.effectiveRadius ?? sourceItem.radius) : 0) ?? 0
=====================================
modules/gui/qt/widgets/qml/DropShadowImage.qml
=====================================
@@ -32,8 +32,8 @@ Item {
property real blurRadius: 0
property color color
- property real rectWidth: sourceItem ? Math.min(sourceItem.paintedWidth ?? Number.MAX_VALUE, sourceItem.width) : 0
- property real rectHeight: sourceItem ? Math.min(sourceItem.paintedHeight ?? Number.MAX_VALUE, sourceItem.height) : 0
+ property real rectWidth: sourceItem ? Math.min((sourceItem.paintedWidth ?? Number.MAX_VALUE) - Math.ceil(sourceItem.padding ?? 0) * 2, sourceItem.width) : 0
+ property real rectHeight: sourceItem ? Math.min((sourceItem.paintedHeight ?? Number.MAX_VALUE) - Math.ceil(sourceItem.padding ?? 0) * 2, sourceItem.height) : 0
property real xOffset: 0
property real yOffset: 0
=====================================
modules/gui/qt/widgets/qml/GridItem.qml
=====================================
@@ -303,8 +303,8 @@ T.ItemDelegate {
sourceItem: parent
- width: picture.paintedWidth + viewportHorizontalOffset
- height: picture.paintedHeight + viewportVerticalOffset
+ width: picture.paintedWidth + viewportHorizontalOffset - Math.ceil(picture.padding) * 2
+ height: picture.paintedHeight + viewportVerticalOffset - Math.ceil(picture.padding) * 2
rectWidth: sourceSize.width
rectHeight: sourceSize.height
@@ -323,8 +323,8 @@ T.ItemDelegate {
sourceItem: parent
- width: picture.paintedWidth + viewportHorizontalOffset
- height: picture.paintedHeight + viewportVerticalOffset
+ width: picture.paintedWidth + viewportHorizontalOffset - Math.ceil(picture.padding) * 2
+ height: picture.paintedHeight + viewportVerticalOffset - Math.ceil(picture.padding) * 2
rectWidth: sourceSize.width
rectHeight: sourceSize.height
=====================================
modules/gui/qt/widgets/qml/MediaCover.qml
=====================================
@@ -25,8 +25,6 @@ import VLC.Widgets as Widgets
import VLC.Style
-// NOTE: This rectangle is useful to discern the item against a similar background.
-// FIXME: Maybe we could refactor this to draw the background directly in the RoundImage.
Item {
id: root
@@ -64,6 +62,8 @@ Item {
required property int pictureWidth
required property int pictureHeight
+ readonly property real padding: fallbackImage.visible ? fallbackImage.padding : image.padding
+
readonly property real paintedWidth: fallbackImage.visible ? fallbackImage.paintedWidth : image.paintedWidth
readonly property real paintedHeight: fallbackImage.visible ? fallbackImage.paintedHeight : image.paintedHeight
@@ -93,6 +93,8 @@ Item {
height: root.paintedHeight
radius: root.effectiveRadius
+
+ visible: !Qt.colorEqual(image.effectiveBackgroundColor, color)
}
//delay placeholder showing up
@@ -111,6 +113,8 @@ Item {
sourceSize: Qt.size(root.pictureWidth * root.eDPR,
root.pictureHeight * root.eDPR)
+ backgroundColor: root.color
+
onStatusChanged: {
if (status === Image.Loading) {
root._loadTimeout = false
@@ -128,6 +132,8 @@ Item {
radius: root.radius
+ backgroundColor: root.color
+
fillMode: root.fillMode
visible: image.source.toString() === "" //RoundImage.source is a QUrl
@@ -147,7 +153,11 @@ Item {
Loader {
id: overlay
- anchors.fill: parent
+ anchors.centerIn: parent
+ anchors.alignWhenCentered: true
+
+ width: root.paintedWidth
+ height: root.paintedHeight
}
Loader {
=====================================
modules/gui/qt/widgets/qml/RoundImage.qml
=====================================
@@ -42,6 +42,14 @@ Item {
property alias status: image.status
property alias cache: image.cache
+ // Padding represents how much the content is shrunk. For now this is a readonly property.
+ // Currently it only takes the `softEdgeMax` into calculation, as that's what the shader
+ // uses to shrink to prevent "hard edges". Note that padding can only be calculated properly
+ // when the shader has custom softedge support (`CUSTOM_SOFTEDGE`), currently it is used
+ // at all times.
+ readonly property real padding: (shaderEffect.readyForVisibility && antialiasing) ? (Math.max(shaderEffect.width, shaderEffect.height) / 4 * shaderEffect.softEdgeMax)
+ : Qt.size(0.0, 0.0)
+
readonly property real paintedWidth: (shaderEffect.readyForVisibility) ? shaderEffect.width
: (image.clip ? image.width : image.paintedWidth)
readonly property real paintedHeight: (shaderEffect.readyForVisibility) ? shaderEffect.height
@@ -83,7 +91,9 @@ Item {
fillMode: Image.PreserveAspectFit
property real radius
+ property alias backgroundColor: shaderEffect.backgroundColor
readonly property real effectiveRadius: shaderEffect.readyForVisibility ? radius : 0.0
+ readonly property color effectiveBackgroundColor: shaderEffect.readyForVisibility ? backgroundColor : "transparent"
// NOTE: Note the distinction between ShaderEffect and
// ShaderEffectSource. ShaderEffect is no different
@@ -125,6 +135,8 @@ Item {
readonly property real radiusTopLeft: radius
readonly property real radiusBottomLeft: radius
+ property color backgroundColor: "transparent"
+
readonly property size size: Qt.size(width, height)
readonly property double softEdgeMin: -1. / Math.min(width, height)
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/d90763320fca2b8ae04fad6d0ae8bb7e117ce2cc...88981f67b86e03e83d7129c56b7d62e9504c05e1
--
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/d90763320fca2b8ae04fad6d0ae8bb7e117ce2cc...88981f67b86e03e83d7129c56b7d62e9504c05e1
You're receiving this email because of your account on code.videolan.org.
VideoLAN code repository instance
More information about the vlc-commits
mailing list