diff options
author | Gunnar Sletta <gunnar.sletta@jollamobile.com> | 2015-01-27 22:18:34 +0100 |
---|---|---|
committer | Gunnar Sletta <gunnar@sletta.org> | 2015-03-24 12:13:38 +0000 |
commit | db18dcf6dfc7d1ca830e503502438bce5775c5f4 (patch) | |
tree | d38d7522a9b76daeac49fdfec0005dd329a9f031 | |
parent | 12a222b71cecc854481e196c1efa931a121a32e3 (diff) | |
download | qtgraphicaleffects-db18dcf6dfc7d1ca830e503502438bce5775c5f4.tar.gz qtgraphicaleffects-db18dcf6dfc7d1ca830e503502438bce5775c5f4.tar.bz2 qtgraphicaleffects-db18dcf6dfc7d1ca830e503502438bce5775c5f4.zip |
Implement MaskedBlur in terms of the new GaussianBlur.
The mask code uses the fallback shader which is equivalent,
performance wise, to what we have in Qt 5.4, but in the interest of
keeping one codebase for all the blurring, we'll replace it anyway.
'transparentBorder' doesn't do anything anymore because it never
really worked to begin with and it doesn't make sense. See comment in
code.
'fast' codepath has been removed because it isn't really all that
fast.
[ChangeLog] MaskedBlur has a new blur implementation. The default
values of properties has been updated such that 'layer.effect:
MaskedBlur { maskSource: myMask }' works out of the box. The 'fast'
and 'transparentBorder' properties no longer have any effect.
Change-Id: Ibc05442914b563c50c95212fb0d4578f02990504
Reviewed-by: Laszlo Agocs <laszlo.agocs@theqtcompany.com>
-rw-r--r-- | src/effects/GaussianBlur.qml | 48 | ||||
-rw-r--r-- | src/effects/MaskedBlur.qml | 165 | ||||
-rw-r--r-- | src/effects/doc/images/MaskedBlur_transparentBorder1.png | bin | 99793 -> 0 bytes | |||
-rw-r--r-- | src/effects/doc/images/MaskedBlur_transparentBorder2.png | bin | 105721 -> 0 bytes |
4 files changed, 86 insertions, 127 deletions
diff --git a/src/effects/GaussianBlur.qml b/src/effects/GaussianBlur.qml index dff5cd9..6c53717 100644 --- a/src/effects/GaussianBlur.qml +++ b/src/effects/GaussianBlur.qml @@ -91,14 +91,19 @@ Item { affect the blurring of an individual pixel. A larger radius increases the blur effect. - Depending on the radius value, value of the - \l{GaussianBlur::samples}{samples} should be set to sufficiently large - to ensure the visual quality. + The ideal blur is acheived by selecting \c samples and \c radius such + that \c {samples = 1 + radius * 2}, such as: - The value ranges from 0.0 (no blur) to inf. By default, the property is - set to \c 0.0 (no blur). + \table + \header \li Radius \li Samples + \row \li 0 \e{(no blur)} \li 1 + \row \li 1 \li 3 + \row \li 2 \li 5 + \row \li 3 \li 7 + \endtable - By default, this property is set to \c 4. + The value ranges from 0.0 (no blur) to inf. By default, the property is + set to \c floor(samples / 2.0). \table \header @@ -259,6 +264,8 @@ Item { property int _dpr: Screen.devicePixelRatio; /*! \internal */ property bool _alphaOnly: false; + /*! \internal */ + property var _maskSource: undefined /*! \internal */ property alias _output: sourceProxy.output; @@ -273,6 +280,7 @@ Item { on_KernelSizeChanged: _rebuildShaders(); onDeviationChanged: _rebuildShaders(); on_DprChanged: _rebuildShaders(); + on_MaskSourceChanged: _rebuildShaders(); Component.onCompleted: _rebuildShaders(); /*! \internal */ @@ -284,7 +292,7 @@ Item { radius: _kernelRadius, deviation: deviation, alphaOnly: root._alphaOnly, - masked: false + masked: _maskSource != undefined } var shaders = ShaderBuilder.gaussianBlur(params); horizontalBlur.fragmentShader = shaders.fragmentShader; @@ -304,13 +312,23 @@ Item { id: horizontalBlur width: root.transparentBorder ? root._paddedTexWidth : root.width height: root.height; + + // Used by all shaders property Item source: sourceProxy.output; - property real deviation: root.deviation - property real radius: root._kernelRadius property real spread: root.radius / root._kernelRadius; property var step: Qt.vector2d(1 / (root._paddedTexWidth * root._dpr), 0); + + // Used by fallback shader (sampleCount exceeds number of varyings) + property real deviation: root.deviation + property real radius: root._kernelRadius + + // Only in use for DropShadow and Glow property color color: "white" property real thickness: Math.max(0, Math.min(0.98, 1 - root._thickness * 0.98)); + + // Only in use for MaskedBlur + property var mask: root._maskSource; + layer.enabled: true layer.smooth: true layer.sourceRect: root.transparentBorder @@ -328,14 +346,20 @@ Item { height: root.transparentBorder ? root._paddedTexHeight : root.height; fragmentShader: horizontalBlur.fragmentShader vertexShader: horizontalBlur.vertexShader + property Item source: horizontalBlur - property real deviation: horizontalBlur.deviation - property real radius: horizontalBlur.radius property real spread: horizontalBlur.spread property var step: Qt.vector2d(0, 1 / (root._paddedTexHeight * root._dpr)); + + property real deviation: horizontalBlur.deviation + property real radius: horizontalBlur.radius + property color color: "black" property real thickness: horizontalBlur.thickness; - visible: true; + + property var mask: horizontalBlur.mask; + + visible: true } ShaderEffectSource { diff --git a/src/effects/MaskedBlur.qml b/src/effects/MaskedBlur.qml index 19a6810..49d1bbf 100644 --- a/src/effects/MaskedBlur.qml +++ b/src/effects/MaskedBlur.qml @@ -1,6 +1,7 @@ /**************************************************************************** ** ** Copyright (C) 2015 The Qt Company Ltd. +** Copyright (C) 2015 Jolla Ltd, author: <gunnar.sletta@jollamobile.com> ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the Qt Graphical Effects module. @@ -51,12 +52,11 @@ import QtGraphicalEffects.private 1.0 MaskedBlur effect softens the image by blurring it. The intensity of the blur can be controlled for each pixel using maskSource so that some parts of - the source are blurred more than others. By default the effect produces a - high quality result, thus the rendering speed may not be the highest - possible. The rendering speed is reduced especially if the - \l{MaskedBlur::samples}{samples} is large. For use cases that require faster - rendering speed and the highest possible visual quality is not necessary, - property \l{MaskedBlur::fast}{fast} can be set to true. + the source are blurred more than others. + + Performing blur live is a costly operation. Fullscreen gaussian blur + with even a moderate number of samples will only run at 60 fps on highend + graphics hardware. \table \header @@ -76,7 +76,7 @@ import QtGraphicalEffects.private 1.0 */ Item { - id: rootItem + id: root /*! This property defines the source item that is going to be blurred. @@ -84,7 +84,7 @@ Item { \note It is not supported to let the effect include itself, for instance by setting source to the effect's parent. */ - property variant source + property alias source: blur.source /*! This property defines the item that is controlling the final intensity @@ -97,7 +97,7 @@ Item { blur completely. Semitransparent maskSource pixels produce blur with a radius that is interpolated according to the pixel transparency level. */ - property variant maskSource + property alias maskSource: maskProxy.input /*! This property defines the distance of the neighboring pixels which @@ -125,21 +125,13 @@ Item { \li \b { radius: 8 } \li \b { radius: 16 } \row - \li \l samples: 24 - \li \l samples: 24 - \li \l samples: 24 - \row - \li \l transparentBorder: false - \li \l transparentBorder: false - \li \l transparentBorder: false - \row - \li \l fast: false - \li \l fast: false - \li \l fast: false + \li \l samples: 25 + \li \l samples: 25 + \li \l samples: 25 \endtable */ - property real radius: 0.0 + property alias radius: blur.radius /*! This property defines how many samples are taken per pixel when blur @@ -147,18 +139,15 @@ Item { to render. Ideally, this value should be twice as large as the highest required - radius value, for example, if the radius is animated between 0.0 and - 4.0, samples should be set to 8. + radius value plus 1, for example, if the radius is animated between 0.0 + and 4.0, samples should be set to 9. - The value ranges from 0 to 32. By default, the property is set to \c 0. + By default, the property is set to \c 9. This property is not intended to be animated. Changing this property may cause the underlying OpenGL shaders to be recompiled. - - When \l{MaskedBlur::fast}{fast} property is set to true, this property - has no effect. */ - property int samples: 0 + property alias samples: blur.samples /*! This property allows the effect output pixels to be cached in order to @@ -173,110 +162,56 @@ Item { By default, the property is set to \c false. */ - property bool cached: false + property alias cached: cacheItem.visible /*! - This property selects the blurring algorithm that is used to produce the - blur. Setting this to true enables fast algorithm, setting value to - false produces higher quality result. - - By default, the property is set to \c false. - - \table - \header - \li Output examples with different fast values - \li - \li - \row - \li \image MaskedBlur_fast1.png - \li \image MaskedBlur_fast2.png - \row - \li \b { fast: false } - \li \b { fast: true } - \row - \li \l radius: 16 - \li \l radius: 16 - \row - \li \l samples: 24 - \li \l samples: 24 - \row - \li \l transparentBorder: false - \li \l transparentBorder: false - \endtable + \internal + Kept for source compatibility only. Removed in Qt 5.6 + ### Qt6: remove */ property bool fast: false /*! - This property defines the blur behavior near the edges of the item, - where the pixel blurring is affected by the pixels outside the source - edges. - - If the property is set to \c true, the pixels outside the source are - interpreted to be transparent, which is similar to OpenGL - clamp-to-border extension. The blur is expanded slightly outside the - effect item area. + \internal - If the property is set to \c false, the pixels outside the source are - interpreted to contain the same color as the pixels at the edge of the - item, which is similar to OpenGL clamp-to-edge behavior. The blur does - not expand outside the effect item area. + Kept for source compatibility only. Removed in Qt 5.6 - By default, the property is set to \c false. + Doing transparent border on a masked source doesn't make any sense + as the padded exterior will have a mask alpha value of 0 which means + no blurring and as the padded exterior of the source is a transparent + pixel, the result is no pixels at all. - \table - \header - \li Output examples with different transparentBorder values - \li - \li - \row - \li \image MaskedBlur_transparentBorder1.png - \li \image MaskedBlur_transparentBorder2.png - \row - \li \b { transparentBorder: false } - \li \b { transparentBorder: true } - \row - \li \l radius: 64 - \li \l radius: 64 - \row - \li \l samples: 24 - \li \l samples: 24 - \row - \li \l fast: true - \li \l fast: true - \endtable + In Qt 5.6 and before, this worked based on that the mask source + was scaled up to fit the padded blur target rect, which would lead + to inconsistent and buggy results. + ### Qt6: remove */ - property bool transparentBorder: false + property bool transparentBorder; + + GaussianBlur { + id: blur - Loader { - id: loaderItem + source: root.source; anchors.fill: parent - sourceComponent: rootItem.fast ? fastBlur : gaussianBlur - } + _maskSource: maskProxy.output; - Component { - id: gaussianBlur - GaussianMaskedBlur { - anchors.fill: parent - source: rootItem.source - maskSource: rootItem.maskSource - radius: rootItem.radius - maximumRadius: rootItem.samples * 0.5 - transparentBorder: rootItem.transparentBorder - cached: rootItem.cached + SourceProxy { + id: maskProxy } } - Component { - id: fastBlur - FastMaskedBlur { - anchors.fill: parent - source:rootItem. source - maskSource: rootItem.maskSource - blur: Math.pow(rootItem.radius / 64.0, 0.4) - transparentBorder: rootItem.transparentBorder - cached: rootItem.cached - } + ShaderEffectSource { + id: cacheItem + x: -blur._kernelRadius + y: -blur._kernelRadius + width: blur.width + 2 * blur._kernelRadius + height: blur.height + 2 * blur._kernelRadius + visible: false + smooth: true + sourceRect: Qt.rect(-blur._kernelRadius, -blur._kernelRadius, width, height); + sourceItem: blur + hideSource: visible } } diff --git a/src/effects/doc/images/MaskedBlur_transparentBorder1.png b/src/effects/doc/images/MaskedBlur_transparentBorder1.png Binary files differdeleted file mode 100644 index 1f2bc5d..0000000 --- a/src/effects/doc/images/MaskedBlur_transparentBorder1.png +++ /dev/null diff --git a/src/effects/doc/images/MaskedBlur_transparentBorder2.png b/src/effects/doc/images/MaskedBlur_transparentBorder2.png Binary files differdeleted file mode 100644 index d62df72..0000000 --- a/src/effects/doc/images/MaskedBlur_transparentBorder2.png +++ /dev/null |