Add custom MultiEffect into testbed example
Add CustomMultiEffect QQEM project and the effect exported from it into
the MultiEffect testbed example. This can be used to validate the QQEM
MultiEffect node compatibility with the Qt Quick MultiEffect.
Task-number: QTBUG-109740
Change-Id: I596bf54316ab70b85b1ace33a433a4109c43b239
Reviewed-by: Kaj Grönholm <kaj.gronholm@qt.io>
(cherry picked from commit 3b5aea849f)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
This commit is contained in:
Kaj Grönholm
Qt Cherry-pick Bot
parent
4a1458cb75
commit
2843479129
|
|
@ -49,6 +49,8 @@ qt_add_qml_module(testbedexample
|
|||
"qml/SettingsComponentSlider.qml"
|
||||
"qml/SettingsComponentCheckBox.qml"
|
||||
"qml/SettingsComponentColorSelector.qml"
|
||||
"qml/CustomMultiEffect/BlurHelper.qml"
|
||||
"qml/CustomMultiEffect/CustomMultiEffect.qml"
|
||||
RESOURCES
|
||||
"qml/images/pause.png"
|
||||
"qml/images/play.png"
|
||||
|
|
@ -57,6 +59,10 @@ qt_add_qml_module(testbedexample
|
|||
"qml/images/arrow.png"
|
||||
"qml/images/Built_with_Qt.png"
|
||||
"qml/images/Built_with_Qt_RGB_logo.png"
|
||||
"qml/CustomMultiEffect/bluritems.frag.qsb"
|
||||
"qml/CustomMultiEffect/bluritems.vert.qsb"
|
||||
"qml/CustomMultiEffect/custommultieffect.frag.qsb"
|
||||
"qml/CustomMultiEffect/custommultieffect.vert.qsb"
|
||||
)
|
||||
|
||||
install(TARGETS testbedexample
|
||||
|
|
|
|||
|
|
@ -21,5 +21,11 @@
|
|||
<file>qml/images/arrow.png</file>
|
||||
<file>qml/images/Built_with_Qt.png</file>
|
||||
<file>qml/images/Built_with_Qt_RGB_logo.png</file>
|
||||
<file>qml/CustomMultiEffect/BlurHelper.qml</file>
|
||||
<file>qml/CustomMultiEffect/bluritems.frag.qsb</file>
|
||||
<file>qml/CustomMultiEffect/bluritems.vert.qsb</file>
|
||||
<file>qml/CustomMultiEffect/custommultieffect.frag.qsb</file>
|
||||
<file>qml/CustomMultiEffect/CustomMultiEffect.qml</file>
|
||||
<file>qml/CustomMultiEffect/custommultieffect.vert.qsb</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
// Copyright (C) 2022 The Qt Company Ltd.
|
||||
// SPDX-License-Identifier: BSD-3-Clause
|
||||
|
||||
import QtQuick
|
||||
|
||||
Item {
|
||||
id: rootItem
|
||||
property alias blurSrc1: blurredItemSource1
|
||||
property alias blurSrc2: blurredItemSource2
|
||||
property alias blurSrc3: blurredItemSource3
|
||||
property alias blurSrc4: blurredItemSource4
|
||||
property alias blurSrc5: blurredItemSource5
|
||||
|
||||
component BlurItem : ShaderEffect {
|
||||
property vector2d offset: Qt.vector2d((1.0 + rootItem.blurMultiplier) / width,
|
||||
(1.0 + rootItem.blurMultiplier) / height)
|
||||
visible: false
|
||||
layer.enabled: true
|
||||
layer.smooth: true
|
||||
vertexShader: "bluritems.vert.qsb"
|
||||
fragmentShader: "bluritems.frag.qsb"
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: priv
|
||||
property bool useBlurItem1: true
|
||||
property bool useBlurItem2: rootItem.blurMax > 2
|
||||
property bool useBlurItem3: rootItem.blurMax > 8
|
||||
property bool useBlurItem4: rootItem.blurMax > 16
|
||||
property bool useBlurItem5: rootItem.blurMax > 32
|
||||
}
|
||||
|
||||
BlurItem {
|
||||
id: blurredItemSource1
|
||||
property var src: priv.useBlurItem1 ? source : null
|
||||
// Size of the first blurred item is by default half of the source.
|
||||
// Increase for quality and decrease for performance & more blur.
|
||||
readonly property int blurItemSize: 8
|
||||
width: src ? Math.ceil(src.width / 16) * blurItemSize : 0
|
||||
height: src ? Math.ceil(src.height / 16) * blurItemSize : 0
|
||||
}
|
||||
BlurItem {
|
||||
id: blurredItemSource2
|
||||
property var src: priv.useBlurItem2 ? blurredItemSource1 : null
|
||||
width: blurredItemSource1.width / 2
|
||||
height: blurredItemSource1.height / 2
|
||||
}
|
||||
BlurItem {
|
||||
id: blurredItemSource3
|
||||
property var src: priv.useBlurItem3 ? blurredItemSource2 : null
|
||||
width: blurredItemSource2.width / 2
|
||||
height: blurredItemSource2.height / 2
|
||||
}
|
||||
BlurItem {
|
||||
id: blurredItemSource4
|
||||
property var src: priv.useBlurItem4 ? blurredItemSource3 : null
|
||||
width: blurredItemSource3.width / 2
|
||||
height: blurredItemSource3.height / 2
|
||||
}
|
||||
BlurItem {
|
||||
id: blurredItemSource5
|
||||
property var src: priv.useBlurItem5 ? blurredItemSource4 : null
|
||||
width: blurredItemSource4.width / 2
|
||||
height: blurredItemSource4.height / 2
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,377 @@
|
|||
{
|
||||
"QEP": {
|
||||
"QQEM": "0.42",
|
||||
"connections": [
|
||||
{
|
||||
"fromId": 2,
|
||||
"toId": 1
|
||||
},
|
||||
{
|
||||
"fromId": 0,
|
||||
"toId": 3
|
||||
},
|
||||
{
|
||||
"fromId": 3,
|
||||
"toId": 2
|
||||
}
|
||||
],
|
||||
"exportDirectory": ".",
|
||||
"exportFlags": 11,
|
||||
"exportName": "CustomMultiEffect",
|
||||
"nodes": [
|
||||
{
|
||||
"fragmentCode": [
|
||||
"void main() {",
|
||||
" fragColor = texture(iSource, texCoord);",
|
||||
" @nodes",
|
||||
" fragColor = fragColor * qt_Opacity;",
|
||||
"}"
|
||||
],
|
||||
"name": "Main",
|
||||
"nodeId": 0,
|
||||
"type": 0,
|
||||
"vertexCode": [
|
||||
"void main() {",
|
||||
" texCoord = qt_MultiTexCoord0;",
|
||||
" fragCoord = qt_Vertex.xy;",
|
||||
" vec2 vertCoord = qt_Vertex.xy;",
|
||||
" @nodes",
|
||||
" gl_Position = qt_Matrix * vec4(vertCoord, 0.0, 1.0);",
|
||||
"}"
|
||||
],
|
||||
"x": 140,
|
||||
"y": 35.25
|
||||
},
|
||||
{
|
||||
"name": "Output",
|
||||
"nodeId": 1,
|
||||
"type": 1,
|
||||
"x": 140,
|
||||
"y": 589.75
|
||||
},
|
||||
{
|
||||
"description": "This node matches to features and API of the Qt Quick MultiEffect element. This makes it easy to build customized MultiEffects.",
|
||||
"fragmentCode": [
|
||||
"{",
|
||||
" vec4 color = fragColor;",
|
||||
"#if (BLUR_ENABLED)",
|
||||
" // blur",
|
||||
" vec4 blurredColor = texture(iSource, texCoord) * blurWeight1[0];",
|
||||
" blurredColor += texture(iSourceBlur1, texCoord) * blurWeight1[1];",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 2)",
|
||||
" blurredColor += texture(iSourceBlur2, texCoord) * blurWeight1[2];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 8)",
|
||||
" blurredColor += texture(iSourceBlur3, texCoord) * blurWeight1[3];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 16)",
|
||||
" blurredColor += texture(iSourceBlur4, texCoord) * blurWeight2[0];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 32)",
|
||||
" blurredColor += texture(iSourceBlur5, texCoord) * blurWeight2[1];",
|
||||
"#endif",
|
||||
" color = blurredColor;",
|
||||
"#endif",
|
||||
" // contrast, brightness, saturation and colorization",
|
||||
" color.rgb = (color.rgb - 0.5 * color.a) * (1.0 + contrast) + 0.5 * color.a;",
|
||||
" color.rgb += brightness * color.a;",
|
||||
" float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));",
|
||||
" float colorizationAlpha = colorization * colorizationColor.a;",
|
||||
" color.rgb = mix(color.rgb, gray * colorizationColor.rgb, colorizationAlpha);",
|
||||
" color.rgb = mix(vec3(gray), color.rgb, 1.0 + saturation);",
|
||||
"#if (SHADOW_ENABLED)",
|
||||
" // shadow",
|
||||
" float shadow = texture(iSource, shadowTexCoord).a * shadowBlurWeight1[0];",
|
||||
" shadow += texture(iSourceBlur1, shadowTexCoord).a * shadowBlurWeight1[1];",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 2)",
|
||||
" shadow += texture(iSourceBlur2, shadowTexCoord).a * shadowBlurWeight1[2];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 8)",
|
||||
" shadow += texture(iSourceBlur3, shadowTexCoord).a * shadowBlurWeight1[3];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 16)",
|
||||
" shadow += texture(iSourceBlur4, shadowTexCoord).a * shadowBlurWeight2[0];",
|
||||
"#endif",
|
||||
"#if (BLUR_HELPER_MAX_LEVEL > 32)",
|
||||
" shadow += texture(iSourceBlur5, shadowTexCoord).a * shadowBlurWeight2[1];",
|
||||
"#endif",
|
||||
" shadow *= (shadowColor.a * shadowOpacity);",
|
||||
" float saa = (1.0 - color.a) * (1.0 - shadow);",
|
||||
" color.rgb = mix(shadowColor.rgb * shadow, color.rgb, color.a + saa);",
|
||||
" color.a = 1.0 - saa;",
|
||||
"#endif",
|
||||
"#if (MASK_ENABLED)",
|
||||
" // mask",
|
||||
" vec4 maskTexture = texture(maskSource, texCoord);",
|
||||
" float alphaMask = maskTexture.a;",
|
||||
" const float mSLow = 1.0 + maskSpreadAtMin;",
|
||||
" const float mSUp = 1.0 + maskSpreadAtMax;",
|
||||
" float m1 = smoothstep(maskThresholdMin * mSLow - (mSLow - 0.999), maskThresholdMin * mSLow, alphaMask);",
|
||||
" float m2 = smoothstep((1.0 - maskThresholdMax) * mSUp - (mSUp - 0.999), (1.0 - maskThresholdMax) * mSUp, (1.0 - alphaMask));",
|
||||
" float mm = m1 * m2;",
|
||||
" color *= (1.0 - float(maskInverted)) * mm + float(maskInverted) * (1.0 - mm);",
|
||||
"#endif",
|
||||
" fragColor = color;",
|
||||
"}"
|
||||
],
|
||||
"name": "MultiEffect",
|
||||
"nodeId": 2,
|
||||
"properties": [
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "1",
|
||||
"minValue": "-1",
|
||||
"name": "contrast",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "1",
|
||||
"minValue": "-1",
|
||||
"name": "brightness",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "1",
|
||||
"minValue": "-1",
|
||||
"name": "saturation",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "colorization",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1, 0, 0, 1",
|
||||
"name": "colorizationColor",
|
||||
"type": "color",
|
||||
"value": "1, 0, 0, 1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"description": "Enables the blur effect.",
|
||||
"name": "BLUR_ENABLED",
|
||||
"type": "define",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "32",
|
||||
"maxValue": "64",
|
||||
"minValue": "0",
|
||||
"name": "blurMax",
|
||||
"type": "int",
|
||||
"value": "32"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "blur",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"description": "Enables the shadow effect.",
|
||||
"name": "SHADOW_ENABLED",
|
||||
"type": "define",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"description": "This property defines how much blur (radius) is applied to the shadow.\n\nThe value ranges from 0.0 (no blur) to 1.0 (full blur). By default, the property is set to \\c 0.0 (no change). The amount of full blur is affected by blurHelperBlurMultiplier.",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "shadowBlur",
|
||||
"type": "float",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "shadowOpacity",
|
||||
"type": "float",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0, 0, 0, 1",
|
||||
"name": "shadowColor",
|
||||
"type": "color",
|
||||
"value": "0, 0, 0, 1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"maxValue": "1.2",
|
||||
"minValue": "0.8",
|
||||
"name": "shadowScale",
|
||||
"type": "float",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "30",
|
||||
"minValue": "-30",
|
||||
"name": "shadowHorizontalOffset",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"maxValue": "30",
|
||||
"minValue": "-30",
|
||||
"name": "shadowVerticalOffset",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"description": "Enables the mask effect.",
|
||||
"name": "MASK_ENABLED",
|
||||
"type": "define",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "",
|
||||
"description": "Source item for the mask effect. By default the alpha channel of the source item is used for masking but this can be easily adjusted in the shader.",
|
||||
"name": "maskSource",
|
||||
"type": "image",
|
||||
"value": ""
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"description": "This property defines a lower threshold value for the mask pixels. The mask pixels that have an alpha value below this property are used to completely mask away the corresponding pixels from the source item. The mask pixels that have a higher alpha value are used to alphablend the source item to the display.\n\nThe value ranges from 0.0 (alpha value 0) to 1.0 (alpha value 255). By default, the property is set to 0.0.",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "maskThresholdMin",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"description": "This property defines the smoothness of the mask edges near the maskThresholdMin. Setting higher spread values softens the transition from the transparent mask pixels towards opaque mask pixels by adding interpolated values between them.\n\nThe value ranges from 0.0 (sharp mask edge) to 1.0 (smooth mask edge). By default, the property is set to 0.0.",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "maskSpreadAtMin",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "1",
|
||||
"description": "This property defines an upper threshold value for the mask pixels. The mask pixels that have an alpha value below this property are used to completely mask away the corresponding pixels from the source item. The mask pixels that have a higher alpha value are used to alphablend the source item to the display.\n\nThe value ranges from 0.0 (alpha value 0) to 1.0 (alpha value 255). By default, the property is set to 1.0.",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "maskThresholdMax",
|
||||
"type": "float",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"description": "This property defines the smoothness of the mask edges near the maskThresholdMax. Using higher spread values softens the transition from the transparent mask pixels towards opaque mask pixels by adding interpolated values between them.\n\nThe value ranges from 0.0 (sharp mask edge) to 1.0 (smooth mask edge). By default, the property is set to 0.0.",
|
||||
"maxValue": "1",
|
||||
"minValue": "0",
|
||||
"name": "maskSpreadAtMax",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"defaultValue": "false",
|
||||
"description": "This property switches the mask to the opposite side; instead of masking away the content outside maskThresholdMin and maskThresholdMax, content between them will get masked away.\n\nBy default, the property is set to false.",
|
||||
"name": "maskInverted",
|
||||
"type": "bool",
|
||||
"value": "false"
|
||||
}
|
||||
],
|
||||
"type": 2,
|
||||
"vertexCode": [
|
||||
"out vec4 blurWeight1;",
|
||||
"out vec2 blurWeight2;",
|
||||
"out vec2 shadowTexCoord;",
|
||||
"out vec4 shadowBlurWeight1;",
|
||||
"out vec2 shadowBlurWeight2;",
|
||||
"",
|
||||
"float blurWeight(float v) {",
|
||||
" return max(0.0, min(1.0, 1.0 - v * 2.0));",
|
||||
"}",
|
||||
"",
|
||||
"@main",
|
||||
"{",
|
||||
"#if (BLUR_ENABLED)",
|
||||
" float blurLod = sqrt(blur * (blurMax / 64.0)) * 1.2 - 0.2;",
|
||||
" float bw1 = blurWeight(abs(blurLod - 0.1));",
|
||||
" float bw2 = blurWeight(abs(blurLod - 0.3));",
|
||||
" float bw3 = blurWeight(abs(blurLod - 0.5));",
|
||||
" float bw4 = blurWeight(abs(blurLod - 0.7));",
|
||||
" float bw5 = blurWeight(abs(blurLod - 0.9));",
|
||||
" float bw6 = blurWeight(abs(blurLod - 1.1));",
|
||||
"",
|
||||
" float bsum = bw1 + bw2 + bw3 + bw4 + bw5 + bw6;",
|
||||
" blurWeight1 = vec4(bw1 / bsum, bw2 / bsum, bw3 / bsum, bw4 / bsum);",
|
||||
" blurWeight2 = vec2(bw5 / bsum, bw6 / bsum);",
|
||||
"#endif",
|
||||
"#if (SHADOW_ENABLED)",
|
||||
" float shadowBlurLod = sqrt(shadowBlur * (blurMax / 64.0)) * 1.2 - 0.2;",
|
||||
" float sbw1 = blurWeight(abs(shadowBlurLod - 0.1));",
|
||||
" float sbw2 = blurWeight(abs(shadowBlurLod - 0.3));",
|
||||
" float sbw3 = blurWeight(abs(shadowBlurLod - 0.5));",
|
||||
" float sbw4 = blurWeight(abs(shadowBlurLod - 0.7));",
|
||||
" float sbw5 = blurWeight(abs(shadowBlurLod - 0.9));",
|
||||
" float sbw6 = blurWeight(abs(shadowBlurLod - 1.1));",
|
||||
"",
|
||||
" float sbsum = sbw1 + sbw2 + sbw3 + sbw4 + sbw5 + sbw6;",
|
||||
" shadowBlurWeight1 = vec4(sbw1 / sbsum, sbw2 / sbsum, sbw3 / sbsum, sbw4 / sbsum);",
|
||||
" shadowBlurWeight2 = vec2(sbw5 / sbsum, sbw6 / sbsum);",
|
||||
"",
|
||||
" vec2 shadowOffset = vec2(shadowHorizontalOffset / iResolution.x, shadowVerticalOffset / iResolution.y);",
|
||||
" float invertedScale = 1.0 / shadowScale;",
|
||||
" float s = (1.0 - invertedScale) * 0.5;",
|
||||
" vec2 shadowCenterOffset = vec2(s);",
|
||||
" shadowTexCoord = qt_MultiTexCoord0 - shadowOffset;",
|
||||
" shadowTexCoord = (shadowTexCoord * invertedScale) + shadowCenterOffset;",
|
||||
"#endif",
|
||||
"}"
|
||||
],
|
||||
"x": 105,
|
||||
"y": 327.5
|
||||
},
|
||||
{
|
||||
"description": "This node is required e.g. for FastBlur and DropShadow. It generates blurred iSourceBlur[1..6] samplers to be available for shaders.",
|
||||
"fragmentCode": [
|
||||
"@blursources"
|
||||
],
|
||||
"name": "BlurHelper",
|
||||
"nodeId": 3,
|
||||
"properties": [
|
||||
{
|
||||
"defaultValue": "64",
|
||||
"description": "This property defines the maximum pixel radius that blur with value 1.0 will reach.\n\nMeaningful range of this value is from 2 (subtle blur) to 64 (high blur). By default, the property is set to 32. For the most optimal performance, select as small value as you need.\n\nNote: This affects to both blur and shadow effects.",
|
||||
"name": "BLUR_HELPER_MAX_LEVEL",
|
||||
"type": "define",
|
||||
"value": "64"
|
||||
},
|
||||
{
|
||||
"defaultValue": "0",
|
||||
"description": "This property defines a multiplier for extending the blur radius.\n\nThe value ranges from 0.0 (not multiplied) to inf. By default, the property is set to 0.0. Incresing the multiplier extends the blur radius, but decreases the blur quality. This is more performant option for a bigger blur radius than BLUR_HELPER_MAX_LEVEL as it doesn't increase the amount of texture lookups.\n\nNote: This affects to both blur and shadow effects.",
|
||||
"maxValue": "2",
|
||||
"minValue": "0",
|
||||
"name": "blurMultiplier",
|
||||
"type": "float",
|
||||
"value": "0"
|
||||
}
|
||||
],
|
||||
"type": 2,
|
||||
"x": 105,
|
||||
"y": 188.875
|
||||
}
|
||||
],
|
||||
"version": 1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
// Copyright (C) 2023 The Qt Company Ltd.
|
||||
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
|
||||
// Created with Qt Quick Effect Maker (version 0.42), Fri Feb 3 15:59:56 2023
|
||||
|
||||
import QtQuick
|
||||
|
||||
Item {
|
||||
id: rootItem
|
||||
|
||||
// This is the main source for the effect
|
||||
property var source: null
|
||||
|
||||
property real contrast: 0
|
||||
property real brightness: 0
|
||||
property real saturation: 0
|
||||
property real colorization: 0
|
||||
property color colorizationColor: Qt.rgba(1, 0, 0, 1)
|
||||
property int blurMax: 32
|
||||
property real blur: 0
|
||||
// This property defines how much blur (radius) is applied to the shadow.
|
||||
//
|
||||
// The value ranges from 0.0 (no blur) to 1.0 (full blur). By default, the property is set to \c 0.0 (no change). The amount of full blur is affected by blurHelperBlurMultiplier.
|
||||
property real shadowBlur: 1
|
||||
property real shadowOpacity: 1
|
||||
property color shadowColor: Qt.rgba(0, 0, 0, 1)
|
||||
property real shadowScale: 1
|
||||
property real shadowHorizontalOffset: 0
|
||||
property real shadowVerticalOffset: 0
|
||||
// Source item for the mask effect. By default the alpha channel of the source item is used for masking but this can be easily adjusted in the shader.
|
||||
property var maskSource: null
|
||||
// This property defines a lower threshold value for the mask pixels. The mask pixels that have an alpha value below this property are used to completely mask away the corresponding pixels from the source item. The mask pixels that have a higher alpha value are used to alphablend the source item to the display.
|
||||
//
|
||||
// The value ranges from 0.0 (alpha value 0) to 1.0 (alpha value 255). By default, the property is set to 0.0.
|
||||
property real maskThresholdMin: 0
|
||||
// This property defines the smoothness of the mask edges near the maskThresholdMin. Setting higher spread values softens the transition from the transparent mask pixels towards opaque mask pixels by adding interpolated values between them.
|
||||
//
|
||||
// The value ranges from 0.0 (sharp mask edge) to 1.0 (smooth mask edge). By default, the property is set to 0.0.
|
||||
property real maskSpreadAtMin: 0
|
||||
// This property defines an upper threshold value for the mask pixels. The mask pixels that have an alpha value below this property are used to completely mask away the corresponding pixels from the source item. The mask pixels that have a higher alpha value are used to alphablend the source item to the display.
|
||||
//
|
||||
// The value ranges from 0.0 (alpha value 0) to 1.0 (alpha value 255). By default, the property is set to 1.0.
|
||||
property real maskThresholdMax: 1
|
||||
// This property defines the smoothness of the mask edges near the maskThresholdMax. Using higher spread values softens the transition from the transparent mask pixels towards opaque mask pixels by adding interpolated values between them.
|
||||
//
|
||||
// The value ranges from 0.0 (sharp mask edge) to 1.0 (smooth mask edge). By default, the property is set to 0.0.
|
||||
property real maskSpreadAtMax: 0
|
||||
// This property switches the mask to the opposite side; instead of masking away the content outside maskThresholdMin and maskThresholdMax, content between them will get masked away.
|
||||
//
|
||||
// By default, the property is set to false.
|
||||
property bool maskInverted: false
|
||||
// This property defines a multiplier for extending the blur radius.
|
||||
//
|
||||
// The value ranges from 0.0 (not multiplied) to inf. By default, the property is set to 0.0. Incresing the multiplier extends the blur radius, but decreases the blur quality. This is more performant option for a bigger blur radius than BLUR_HELPER_MAX_LEVEL as it doesn't increase the amount of texture lookups.
|
||||
//
|
||||
// Note: This affects to both blur and shadow effects.
|
||||
property real blurMultiplier: 0
|
||||
|
||||
BlurHelper {
|
||||
id: blurHelper
|
||||
anchors.fill: parent
|
||||
property int blurMax: 64
|
||||
property real blurMultiplier: rootItem.blurMultiplier
|
||||
}
|
||||
ShaderEffect {
|
||||
readonly property var iSource: source
|
||||
readonly property vector3d iResolution: Qt.vector3d(width, height, 1.0)
|
||||
readonly property var iSourceBlur1: blurHelper.blurSrc1
|
||||
readonly property var iSourceBlur2: blurHelper.blurSrc2
|
||||
readonly property var iSourceBlur3: blurHelper.blurSrc3
|
||||
readonly property var iSourceBlur4: blurHelper.blurSrc4
|
||||
readonly property var iSourceBlur5: blurHelper.blurSrc5
|
||||
readonly property real contrast: parent.contrast
|
||||
readonly property real brightness: parent.brightness
|
||||
readonly property real saturation: parent.saturation
|
||||
readonly property real colorization: parent.colorization
|
||||
readonly property color colorizationColor: parent.colorizationColor
|
||||
readonly property int blurMax: parent.blurMax
|
||||
readonly property real blur: parent.blur
|
||||
readonly property real shadowBlur: parent.shadowBlur
|
||||
readonly property real shadowOpacity: parent.shadowOpacity
|
||||
readonly property color shadowColor: parent.shadowColor
|
||||
readonly property real shadowScale: parent.shadowScale
|
||||
readonly property real shadowHorizontalOffset: parent.shadowHorizontalOffset
|
||||
readonly property real shadowVerticalOffset: parent.shadowVerticalOffset
|
||||
readonly property var maskSource: parent.maskSource
|
||||
readonly property real maskThresholdMin: parent.maskThresholdMin
|
||||
readonly property real maskSpreadAtMin: parent.maskSpreadAtMin
|
||||
readonly property real maskThresholdMax: parent.maskThresholdMax
|
||||
readonly property real maskSpreadAtMax: parent.maskSpreadAtMax
|
||||
readonly property bool maskInverted: parent.maskInverted
|
||||
readonly property real blurMultiplier: parent.blurMultiplier
|
||||
|
||||
vertexShader: 'custommultieffect.vert.qsb'
|
||||
fragmentShader: 'custommultieffect.frag.qsb'
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -18,6 +18,7 @@ QtObject {
|
|||
property bool animateMovement: true
|
||||
property bool showShader: false
|
||||
property bool showItemSize: false
|
||||
property bool showCustomMultiEffect: false
|
||||
|
||||
property bool autoPaddingEnabled: true
|
||||
property rect paddingRect: Qt.rect(0, 0, 0, 0)
|
||||
|
|
|
|||
|
|
@ -125,6 +125,13 @@ Item {
|
|||
settings.autoPaddingEnabled = checked;
|
||||
}
|
||||
}
|
||||
SettingsComponentCheckBox {
|
||||
text: "Show Custom MultiEffect"
|
||||
checked: settings.showCustomMultiEffect
|
||||
onToggled: {
|
||||
settings.showCustomMultiEffect = checked;
|
||||
}
|
||||
}
|
||||
Item {
|
||||
width: 1
|
||||
height: 20 * dp
|
||||
|
|
|
|||
|
|
@ -28,4 +28,11 @@ Item {
|
|||
anchors.leftMargin: 16
|
||||
text: qsTr("Item resized!")
|
||||
}
|
||||
WarningsItem {
|
||||
id: customEffectWarning
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
text: qsTr("<b>Note:</b> Custom MultiEffect doesn't support all the MultiEffect features, like paddings and disabling effects.")
|
||||
opacity: settings.showCustomMultiEffect
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import QtQuick
|
||||
import QtQuick.Window
|
||||
import QtQuick.Effects
|
||||
import "CustomMultiEffect"
|
||||
|
||||
Rectangle {
|
||||
id: mainWindow
|
||||
|
|
@ -77,9 +78,9 @@ Rectangle {
|
|||
MultiEffect {
|
||||
id: quickMultiEffect
|
||||
anchors.fill: testSourceItem
|
||||
visible: !settings.showCustomMultiEffect
|
||||
source: testSourceItem
|
||||
maskSource: testMaskItem
|
||||
|
||||
autoPaddingEnabled: settings.autoPaddingEnabled
|
||||
paddingRect: settings.paddingRect
|
||||
brightness: settings.brightnessEnabled ? settings.brightness : 0
|
||||
|
|
@ -106,12 +107,42 @@ Rectangle {
|
|||
maskSpreadAtMax: settings.maskSpreadAtMax
|
||||
|
||||
onItemSizeChanged: {
|
||||
warningsView.showSizeWarning();
|
||||
if (visible)
|
||||
warningsView.showSizeWarning();
|
||||
}
|
||||
onShaderChanged: {
|
||||
warningsView.showShaderWarning();
|
||||
if (visible)
|
||||
warningsView.showShaderWarning();
|
||||
}
|
||||
}
|
||||
|
||||
// For comparison, custom effect created with QQEM and the MultiEffect node.
|
||||
CustomMultiEffect {
|
||||
id: customMultiEffect
|
||||
anchors.fill: testSourceItem
|
||||
visible: settings.showCustomMultiEffect
|
||||
source: testSourceItem
|
||||
maskSource: testMaskItem
|
||||
brightness: settings.brightnessEnabled ? settings.brightness : 0
|
||||
contrast: settings.contrastEnabled ? settings.contrast : 0
|
||||
saturation: settings.saturationEnabled ? settings.saturation : 0
|
||||
colorizationColor: settings.colorizationColor
|
||||
colorization: settings.colorizationEnabled ? settings.colorization : 0
|
||||
blur: settings.blur
|
||||
blurMax: settings.blurMax
|
||||
blurMultiplier: settings.blurMultiplier
|
||||
shadowOpacity: settings.shadowOpacity
|
||||
shadowBlur: settings.shadowBlur
|
||||
shadowHorizontalOffset: settings.shadowHorizontalOffset
|
||||
shadowVerticalOffset: settings.shadowVerticalOffset
|
||||
shadowColor: settings.shadowColor
|
||||
shadowScale: settings.shadowScale
|
||||
maskInverted: settings.maskInverted
|
||||
maskThresholdMin: settings.maskThresholdMin
|
||||
maskSpreadAtMin: settings.maskSpreadAtMin
|
||||
maskThresholdMax: settings.maskThresholdMax
|
||||
maskSpreadAtMax: settings.maskSpreadAtMax
|
||||
}
|
||||
}
|
||||
|
||||
SettingsView {
|
||||
|
|
|
|||
Loading…
Reference in New Issue