diff options
Diffstat (limited to 'examples/quick/multieffect/testbed')
15 files changed, 641 insertions, 21 deletions
diff --git a/examples/quick/multieffect/testbed/CMakeLists.txt b/examples/quick/multieffect/testbed/CMakeLists.txt index 71c448e1c6..fb8c566378 100644 --- a/examples/quick/multieffect/testbed/CMakeLists.txt +++ b/examples/quick/multieffect/testbed/CMakeLists.txt @@ -1,18 +1,12 @@ # Copyright (C) 2022 The Qt Company Ltd. -# SPDX-License-Identifier: BSD-3-Clause +# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause cmake_minimum_required(VERSION 3.16) project(testbed LANGUAGES CXX) -if(NOT DEFINED INSTALL_EXAMPLESDIR) - set(INSTALL_EXAMPLESDIR "examples") -endif() - -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quick/multieffect/testbed") - find_package(Qt6 REQUIRED COMPONENTS Core Gui Qml Quick QuickControls2) -qt_standard_project_setup() +qt_standard_project_setup(REQUIRES 6.5) add_subdirectory("../../shared" "shared") @@ -21,11 +15,11 @@ qt_add_executable(testbedexample WIN32 MACOSX_BUNDLE ) target_link_libraries(testbedexample PRIVATE - Qt::Core - Qt::Gui - Qt::Qml - Qt::Quick - Qt::QuickControls2 + Qt6::Core + Qt6::Gui + Qt6::Qml + Qt6::Quick + Qt6::QuickControls2 ) add_dependencies(testbedexample testbed_shared) @@ -33,7 +27,6 @@ add_dependencies(testbedexample testbed_shared) # Resources: qt_add_qml_module(testbedexample URI testbed - AUTO_RESOURCE_PREFIX QML_FILES "qml/FpsItem.qml" "qml/main.qml" @@ -49,6 +42,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,12 +52,23 @@ 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 - RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" - BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" - LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION . + RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR} + LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR} ) -bundle_shared(testbedexample) +qt_generate_deploy_qml_app_script( + TARGET testbedexample + OUTPUT_SCRIPT deploy_script + MACOS_BUNDLE_POST_BUILD + NO_UNSUPPORTED_PLATFORM_ERROR + DEPLOY_USER_QML_MODULES_ON_UNSUPPORTED_PLATFORM +) +install(SCRIPT ${deploy_script}) diff --git a/examples/quick/multieffect/testbed/doc/images/qml-multieffecttestbed-example.jpg b/examples/quick/multieffect/testbed/doc/images/qml-multieffecttestbed-example.jpg Binary files differnew file mode 100644 index 0000000000..de6b05da56 --- /dev/null +++ b/examples/quick/multieffect/testbed/doc/images/qml-multieffecttestbed-example.jpg diff --git a/examples/quick/multieffect/testbed/doc/src/testbed.qdoc b/examples/quick/multieffect/testbed/doc/src/testbed.qdoc new file mode 100644 index 0000000000..64a815b3a8 --- /dev/null +++ b/examples/quick/multieffect/testbed/doc/src/testbed.qdoc @@ -0,0 +1,16 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only +/*! + \title Qt Quick Examples - MultiEffect Test Bed + \example multieffect/testbed + \image qml-multieffecttestbed-example.jpg + \brief Demonstrates MultiEffect usage. + \ingroup qtquickexamples + \examplecategory {Graphics} + + This example demonstrates the MultiEffect type, which offers a simple, + efficient solution for applying effects such as blur, drop shadow, or + colorize to an Item and its children. + + \include examples-run.qdocinc +*/ diff --git a/examples/quick/multieffect/testbed/qml.qrc b/examples/quick/multieffect/testbed/qml.qrc index ab21cc8b0f..4c23cff873 100644 --- a/examples/quick/multieffect/testbed/qml.qrc +++ b/examples/quick/multieffect/testbed/qml.qrc @@ -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> diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/BlurHelper.qml b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/BlurHelper.qml new file mode 100644 index 0000000000..7a9390791b --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/BlurHelper.qml @@ -0,0 +1,66 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR 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 Item 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 Item src: priv.useBlurItem2 ? blurredItemSource1 : null + width: blurredItemSource1.width * 0.5 + height: blurredItemSource1.height * 0.5 + } + BlurItem { + id: blurredItemSource3 + property Item src: priv.useBlurItem3 ? blurredItemSource2 : null + width: blurredItemSource2.width * 0.5 + height: blurredItemSource2.height * 0.5 + } + BlurItem { + id: blurredItemSource4 + property Item src: priv.useBlurItem4 ? blurredItemSource3 : null + width: blurredItemSource3.width * 0.5 + height: blurredItemSource3.height * 0.5 + } + BlurItem { + id: blurredItemSource5 + property Item src: priv.useBlurItem5 ? blurredItemSource4 : null + width: blurredItemSource4.width * 0.5 + height: blurredItemSource4.height * 0.5 + } +} diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qep b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qep new file mode 100644 index 0000000000..2600bc505f --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qep @@ -0,0 +1,383 @@ +{ + "QEP": { + "QQEM": "0.43", + "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 + } + ], + "settings": { + "headings": [ + "// Copyright (C) 2023 The Qt Company Ltd.", + "// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause" + ] + }, + "version": 1 + } +} diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qml b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qml new file mode 100644 index 0000000000..d0fdf9c1b9 --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qml @@ -0,0 +1,97 @@ +// 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.43), Thu Feb 16 13:48:55 2023 + +import QtQuick + +Item { + id: rootItem + + // This is the main source for the effect + property Item 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 alias iSource: rootItem.source + readonly property vector3d iResolution: Qt.vector3d(width, height, 1.0) + readonly property alias iSourceBlur1: blurHelper.blurSrc1 + readonly property alias iSourceBlur2: blurHelper.blurSrc2 + readonly property alias iSourceBlur3: blurHelper.blurSrc3 + readonly property alias iSourceBlur4: blurHelper.blurSrc4 + readonly property alias iSourceBlur5: blurHelper.blurSrc5 + readonly property alias contrast: rootItem.contrast + readonly property alias brightness: rootItem.brightness + readonly property alias saturation: rootItem.saturation + readonly property alias colorization: rootItem.colorization + readonly property alias colorizationColor: rootItem.colorizationColor + readonly property alias blurMax: rootItem.blurMax + readonly property alias blur: rootItem.blur + readonly property alias shadowBlur: rootItem.shadowBlur + readonly property alias shadowOpacity: rootItem.shadowOpacity + readonly property alias shadowColor: rootItem.shadowColor + readonly property alias shadowScale: rootItem.shadowScale + readonly property alias shadowHorizontalOffset: rootItem.shadowHorizontalOffset + readonly property alias shadowVerticalOffset: rootItem.shadowVerticalOffset + readonly property alias maskSource: rootItem.maskSource + readonly property alias maskThresholdMin: rootItem.maskThresholdMin + readonly property alias maskSpreadAtMin: rootItem.maskSpreadAtMin + readonly property alias maskThresholdMax: rootItem.maskThresholdMax + readonly property alias maskSpreadAtMax: rootItem.maskSpreadAtMax + readonly property alias maskInverted: rootItem.maskInverted + readonly property alias blurMultiplier: rootItem.blurMultiplier + + vertexShader: 'custommultieffect.vert.qsb' + fragmentShader: 'custommultieffect.frag.qsb' + anchors.fill: parent + } +} diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.frag.qsb b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.frag.qsb Binary files differnew file mode 100644 index 0000000000..054745d277 --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.frag.qsb diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.vert.qsb b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.vert.qsb Binary files differnew file mode 100644 index 0000000000..6aa0eb1d4e --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.vert.qsb diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.frag.qsb b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.frag.qsb Binary files differnew file mode 100644 index 0000000000..370cf501dc --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.frag.qsb diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.vert.qsb b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.vert.qsb Binary files differnew file mode 100644 index 0000000000..c522c25aee --- /dev/null +++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/custommultieffect.vert.qsb diff --git a/examples/quick/multieffect/testbed/qml/Settings.qml b/examples/quick/multieffect/testbed/qml/Settings.qml index 6139bdc6f4..05947c2ab4 100644 --- a/examples/quick/multieffect/testbed/qml/Settings.qml +++ b/examples/quick/multieffect/testbed/qml/Settings.qml @@ -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) diff --git a/examples/quick/multieffect/testbed/qml/SettingsView.qml b/examples/quick/multieffect/testbed/qml/SettingsView.qml index 9b753298dd..789f7685c2 100644 --- a/examples/quick/multieffect/testbed/qml/SettingsView.qml +++ b/examples/quick/multieffect/testbed/qml/SettingsView.qml @@ -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 diff --git a/examples/quick/multieffect/testbed/qml/WarningsView.qml b/examples/quick/multieffect/testbed/qml/WarningsView.qml index 880a75b885..c25ad5fccd 100644 --- a/examples/quick/multieffect/testbed/qml/WarningsView.qml +++ b/examples/quick/multieffect/testbed/qml/WarningsView.qml @@ -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 + } } diff --git a/examples/quick/multieffect/testbed/qml/main.qml b/examples/quick/multieffect/testbed/qml/main.qml index 6d34a47bfa..8fc761169e 100644 --- a/examples/quick/multieffect/testbed/qml/main.qml +++ b/examples/quick/multieffect/testbed/qml/main.qml @@ -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 { |
