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
Pick-to: 6.5
Change-Id: I596bf54316ab70b85b1ace33a433a4109c43b239
Reviewed-by: Kaj Grönholm <kaj.gronholm@qt.io>

13 files changed, 602 insertions, 3 deletions

diff --git a/examples/quick/multieffect/testbed/CMakeLists.txt b/examples/quick/multieffect/testbed/CMakeLists.txt
index 71c448e1c6..3a21a0c1fd 100644
--- a/examples/quick/multieffect/testbed/CMakeLists.txt
+++ b/examples/quick/multieffect/testbed/CMakeLists.txt
@@ -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
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..8e7622e557
--- /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: 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
+    }
+}
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..9f22c176a2
--- /dev/null
+++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qep
@@ -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
+    }
+}
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..66b77fe880
--- /dev/null
+++ b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/CustomMultiEffect.qml
@@ -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
+    }
+}
diff --git a/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.frag.qsb b/examples/quick/multieffect/testbed/qml/CustomMultiEffect/bluritems.frag.qsb
new 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
new 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
new 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
new 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 {