Add FX & Material showroom demo

Fixes: QTBUG-113477 Change-Id: I2cdd68027224516b6e6ddacad99d06b6a4dc1ba0 Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io> (cherry picked from commit c77719ff5d44947acc85daf794bcbd3f9f8c0702) Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
author: Mahmoud Badri <mahmoud.badri@qt.io> 2023-06-09 22:11:20 +0300
committer: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org> 2023-06-19 23:59:01 +0000
commit: 42c611f9a347fac5923143c6b3d7b7b991e2f121 (patch)
tree: 897223f83ad9f94bc6db09cb643055ef5d311e41
parent: 59acfb1b4ad59a2edea4d09b9c9602b1c35fea82 (diff)
127 files changed, 12601 insertions, 0 deletions
diff --git a/examples/demos/CMakeLists.txt b/examples/demos/CMakeLists.txt
index 5c50e85de..313d6d7ac 100644
--- a/examples/demos/CMakeLists.txt
+++ b/examples/demos/CMakeLists.txt
@@ -28,6 +28,7 @@ if(TARGET Qt6::Widgets AND TARGET Qt6::PdfWidgets)
 endif()
 if(TARGET Qt::Quick AND TARGET Qt::QuickControls2 AND TARGET Qt::Quick3D)
     qt_internal_add_example(robotarm)
+    qt_internal_add_example(FX_Material_Showroom)
 endif()
 if(TARGET Qt::Quick AND TARGET Qt::QuickControls2 AND TARGET Qt::Multimedia)
     qt_internal_add_example(mediaplayer)
diff --git a/examples/demos/FX_Material_Showroom/CMakeLists.txt b/examples/demos/FX_Material_Showroom/CMakeLists.txt
new file mode 100644
index 000000000..eb730560a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/CMakeLists.txt
@@ -0,0 +1,31 @@
+cmake_minimum_required(VERSION 3.16)
+
+project(FxMaterialShowroomApp LANGUAGES CXX)
+
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(CMAKE_AUTOMOC ON)
+
+find_package(Qt6 6.5 REQUIRED COMPONENTS Gui Qml Quick)
+
+qt_add_executable(FxMaterialShowroomApp
+    src/app_environment.h
+    src/main.cpp
+    src/imagedownloader.cpp
+    src/imagedownloader.h
+)
+
+qt_add_resources(FxMaterialShowroomApp "configuration"
+    PREFIX "/"
+    FILES
+        qtquickcontrols2.conf
+)
+
+target_link_libraries(FxMaterialShowroomApp PRIVATE
+    Qt6::Core
+    Qt6::Gui
+    Qt6::Qml
+    Qt6::Quick
+)
+
+include(qmlcomponents)
+include(qmlmodules)
diff --git a/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject b/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject
new file mode 100644
index 000000000..6f9ff80b2
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject
@@ -0,0 +1,110 @@
+import QmlProject
+
+Project {
+    mainFile: "content/App.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "content"
+    }
+
+    QmlFiles {
+        directory: "imports"
+    }
+
+    JavaScriptFiles {
+        directory: "content"
+    }
+
+    JavaScriptFiles {
+        directory: "imports"
+    }
+
+    ImageFiles {
+        directory: "content"
+    }
+
+    ImageFiles {
+        directory: "asset_imports"
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Files {
+        filter: "*.ttf;*.otf"
+    }
+
+    Files {
+        filter: "*.wav;*.mp3"
+    }
+
+    Files {
+        filter: "*.mp4"
+    }
+
+    Files {
+        filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
+    }
+
+    Files {
+        filter: "*.mesh"
+        directory: "asset_imports"
+    }
+
+    Files {
+        filter: "*.qml"
+        directory: "asset_imports"
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+        QT_LOGGING_RULES: "qt.qml.connections=false"
+        QT_ENABLE_HIGHDPI_SCALING: "0"
+        /* Useful for debugging
+       QSG_VISUALIZE=batches
+       QSG_VISUALIZE=clip
+       QSG_VISUALIZE=changes
+       QSG_VISUALIZE=overdraw
+       */
+    }
+
+    qt6Project: true
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "asset_imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/PocketDemo"
+
+    qdsVersion: "3.7"
+
+    quickVersion: "6.2"
+
+    /* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
+    widgetApp: true
+
+    /* args: Specifies command line arguments for qsb tool to generate shaders.
+       files: Specifies target files for qsb tool. If path is included, it must be relative to this file.
+              Wildcard '*' can be used in the file name part of the path.
+              e.g. files: [ "content/shaders/*.vert", "*.frag" ]  */
+    ShaderTool {
+        args: "-s --glsl \"100 es,120,150\" --hlsl 50 --msl 12"
+        files: [ "content/shaders/*" ]
+    }
+
+    multilanguageSupport: true
+    supportedLanguages: ["en"]
+    primaryLanguage: "en"
+
+
+    mainUiFile: "content/MouseRotatorAndWASD.qml"
+}
diff --git a/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject.qtds b/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject.qtds
new file mode 100644
index 000000000..c4ca88a7d
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/PocketDemo.qmlproject.qtds
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 4.1.0, 2023-05-30T19:17:26. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{464bda2b-5338-456d-af03-3f916943c0fc}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="qlonglong">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="qlonglong" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.PreferSingleLineComments">false</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="bool" key="EditorConfiguration.UseIndenter">false</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="QString" key="EditorConfiguration.ignoreFileTypes">*.md, *.MD, Makefile</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+   <value type="bool" key="EditorConfiguration.skipTrailingWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.tintMarginArea">true</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap">
+   <valuemap type="QVariantMap" key="CppEditor.QuickFix">
+    <value type="bool" key="UseGlobalSettings">true</value>
+   </valuemap>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="DeviceType">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop Qt 6.5.1</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop Qt 6.5.1</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{63f87550-2541-4163-9631-08b7fea781da}</value>
+   <value type="qlonglong" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="qlonglong" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="qlonglong" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="qlonglong" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="qlonglong" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <valuemap type="QVariantMap" key="ProjectExplorer.DeployConfiguration.CustomData"/>
+    <value type="bool" key="ProjectExplorer.DeployConfiguration.CustomDataEnabled">false</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="qlonglong" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <valuelist type="QVariantList" key="CustomOutputParsers"/>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Runtime</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.Qml</value>
+    <value type="QString" key="ProjectExplorer.RunConfiguration.BuildKey"></value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.LastUsedLanguage">en</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="int" key="QmlProjectManager.kit">0</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="qlonglong" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="qlonglong">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">22</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">22</value>
+ </data>
+</qtcreator>
diff --git a/examples/demos/FX_Material_Showroom/README.md b/examples/demos/FX_Material_Showroom/README.md
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/README.md
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/CMakeLists.txt b/examples/demos/FX_Material_Showroom/asset_imports/CMakeLists.txt
new file mode 100644
index 000000000..b236217bf
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/CMakeLists.txt
@@ -0,0 +1 @@
+add_subdirectory(ComponentBundles)
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/CMakeLists.txt b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/CMakeLists.txt
new file mode 100644
index 000000000..828108267
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/CMakeLists.txt
@@ -0,0 +1 @@
+add_subdirectory(MaterialBundle)
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/AsphaltMaterial.qml b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/AsphaltMaterial.qml
new file mode 100644
index 000000000..4eeb56c0b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/AsphaltMaterial.qml
@@ -0,0 +1,32 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+PrincipledMaterial {
+    id: asphalt
+    cullMode: Material.NoCulling
+    roughnessMap: asphalt010_2K_Roughness
+    normalMap: asphalt010_2K_NormalGL
+    roughness: 1
+    objectName: "Asphalt"
+    baseColor: "#404040"
+    specularAmount: 1
+    clearcoatAmount: 0
+    metalness: 0
+
+    Texture {
+        id: asphalt010_2K_NormalGL
+        source: "file:content/images/Asphalt010_2K_NormalGL.png"
+        scaleV: 3
+        scaleU: 3
+    }
+
+    Texture {
+        id: asphalt010_2K_Roughness
+        source: "file:content/images/Asphalt010_2K_Roughness.png"
+        scaleV: 3
+        scaleU: 3
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CMakeLists.txt b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CMakeLists.txt
new file mode 100644
index 000000000..fd3cd8ba3
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CMakeLists.txt
@@ -0,0 +1,10 @@
+qt_add_library(ComponentBundles_MaterialBundle STATIC)
+qt6_add_qml_module(ComponentBundles_MaterialBundle
+    URI "ComponentBundles.MaterialBundle"
+    VERSION 1.0
+    QML_FILES
+        AsphaltMaterial.qml
+        CopperMaterial.qml
+        GoldMaterial.qml
+        SilverMaterial.qml
+)
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CopperMaterial.qml b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CopperMaterial.qml
new file mode 100644
index 000000000..c1196ab0e
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/CopperMaterial.qml
@@ -0,0 +1,24 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+PrincipledMaterial {
+    id: copper
+    cullMode: Material.NoCulling
+    roughnessMap: roughness
+    baseColor: "#fad0c0"
+    objectName: "Copper"
+    metalness: 1
+    roughness: 0.15
+    clearcoatAmount: 0
+
+    Texture {
+        id: roughness
+        source: "images/Metal029_2K_Displacement.jpg"
+        mipFilter: Texture.Linear
+        scaleV: 5
+        scaleU: 5
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/GoldMaterial.qml b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/GoldMaterial.qml
new file mode 100644
index 000000000..24bd45b0d
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/GoldMaterial.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+PrincipledMaterial {
+    id: gold
+    roughnessMap: roughness
+    cullMode: Material.NoCulling
+    specularAmount: 0.98
+    baseColor: "#ffe29b"
+    metalness: 0.98
+    objectName: "Gold"
+    roughness: 0.15
+    clearcoatAmount: 0
+
+    Texture {
+        id: roughness
+        source: "images/Metal029_2K_Displacement.jpg"
+        mipFilter: Texture.Linear
+        scaleV: 5
+        scaleU: 5
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/SilverMaterial.qml b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/SilverMaterial.qml
new file mode 100644
index 000000000..8663d7b97
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/SilverMaterial.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+PrincipledMaterial {
+    id: silver
+    cullMode: Material.NoCulling
+    roughnessMap: roughness
+    specularAmount: 0.95
+    baseColor: "#fcf8ef"
+    objectName: "Silver"
+    metalness: 0.95
+    roughness: 0.15
+    clearcoatAmount: 0
+
+    Texture {
+        id: roughness
+        source: "images/Metal029_2K_Displacement.jpg"
+        mipFilter: Texture.Linear
+        scaleV: 5
+        scaleU: 5
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/_asset_ref.json b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/_asset_ref.json
new file mode 100644
index 000000000..267aa8686
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/_asset_ref.json
@@ -0,0 +1,124 @@
+{
+    "designer/asphalt.metainfo": [
+        "AsphaltMaterial.qml"
+    ],
+    "designer/carbonfiber.metainfo": [
+        "CarbonFiberMaterial.qml"
+    ],
+    "designer/carpaintglitter.metainfo": [
+        "CarPaintGlitterMaterial.qml"
+    ],
+    "designer/concrete.metainfo": [
+        "ConcreteMaterial.qml"
+    ],
+    "designer/copper.metainfo": [
+        "CopperMaterial.qml"
+    ],
+    "designer/fabric.metainfo": [
+        "FabricMaterial.qml"
+    ],
+    "designer/glass.metainfo": [
+        "GlassMaterial.qml"
+    ],
+    "designer/gold.metainfo": [
+        "GoldMaterial.qml"
+    ],
+    "designer/leather.metainfo": [
+        "LeatherMaterial.qml"
+    ],
+    "designer/plastictextured.metainfo": [
+        "PlasticTexturedMaterial.qml"
+    ],
+    "designer/silver.metainfo": [
+        "SilverMaterial.qml"
+    ],
+    "designer/steelbrushed.metainfo": [
+        "SteelBrushedMaterial.qml"
+    ],
+    "designer/stone.metainfo": [
+        "StoneMaterial.qml"
+    ],
+    "designer/wax.metainfo": [
+        "WaxMaterial.qml"
+    ],
+    "designer/wood.metainfo": [
+        "WoodMaterial.qml"
+    ],
+    "images/Asphalt010_2K_NormalGL.png": [
+        "AsphaltMaterial.qml"
+    ],
+    "images/Asphalt010_2K_Roughness.png": [
+        "AsphaltMaterial.qml"
+    ],
+    "images/Concrete032_2K_NormalGL.png": [
+        "ConcreteMaterial.qml"
+    ],
+    "images/Concrete032_2K_Roughness.png": [
+        "ConcreteMaterial.qml"
+    ],
+    "images/Fabric004_2K_NormalGL.png": [
+        "CarbonFiberMaterial.qml"
+    ],
+    "images/Fabric030_2K_Displacement.png": [
+        "FabricMaterial.qml"
+    ],
+    "images/Fabric030_2K_NormalGL.png": [
+        "FabricMaterial.qml"
+    ],
+    "images/Fabric030_2K_Roughness.png": [
+        "FabricMaterial.qml"
+    ],
+    "images/LDR_RGB1_3.png": [
+        "CarPaintGlitterMaterial.qml"
+    ],
+    "images/Leather005_2K_Displacement.png": [
+        "LeatherMaterial.qml"
+    ],
+    "images/Leather005_2K_NormalGL.png": [
+        "LeatherMaterial.qml"
+    ],
+    "images/Leather005_2K_Roughness.png": [
+        "LeatherMaterial.qml"
+    ],
+    "images/Metal009_2K_NormalGL.png": [
+        "SteelBrushedMaterial.qml"
+    ],
+    "images/Metal009_2K_Roughness.png": [
+        "SteelBrushedMaterial.qml"
+    ],
+    "images/Metal029_2K_Displacement.jpg": [
+        "GoldMaterial.qml",
+        "SilverMaterial.qml",
+        "CopperMaterial.qml"
+    ],
+    "images/Rock003_2K_NormalGL.png": [
+        "StoneMaterial.qml"
+    ],
+    "images/Rock003_2K_Roughness.png": [
+        "StoneMaterial.qml"
+    ],
+    "images/Wood052_2K_Color.png": [
+        "WoodMaterial.qml"
+    ],
+    "images/Wood052_2K_NormalGL.png": [
+        "WoodMaterial.qml"
+    ],
+    "images/Wood052_2K_Roughness.png": [
+        "WoodMaterial.qml"
+    ],
+    "images/noisenormal.png": [
+        "PlasticTexturedMaterial.qml"
+    ],
+    "shaders/carmat_simple.frag": [
+        "CarPaintGlitterMaterial.qml"
+    ],
+    "shaders/carmat_simple.vert": [
+        "CarPaintGlitterMaterial.qml"
+    ],
+    "shaders/glass.frag": [
+        "GlassMaterial.qml"
+    ],
+    "shaders/glass.vert": [
+        "GlassMaterial.qml"
+    ]
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/asphalt.metainfo b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/asphalt.metainfo
new file mode 100644
index 000000000..dd1cfeac5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/asphalt.metainfo
@@ -0,0 +1,20 @@
+MetaInfo {
+    Type {
+        name: "ComponentBundles.MaterialBundle.AsphaltMaterial"
+        icon: "images/material16.png"
+
+        Hints {
+            visibleInNavigator: false
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+        }
+
+        ItemLibraryEntry {
+            name: "Asphalt"
+            category: "Architectural"
+            libraryIcon: "images/material.png"
+            version: "1.0"
+            requiredImport: "ComponentBundles.MaterialBundle"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/copper.metainfo b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/copper.metainfo
new file mode 100644
index 000000000..8382b41b5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/copper.metainfo
@@ -0,0 +1,20 @@
+MetaInfo {
+    Type {
+        name: "ComponentBundles.MaterialBundle.CopperMaterial"
+        icon: "images/material16.png"
+
+        Hints {
+            visibleInNavigator: false
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+        }
+
+        ItemLibraryEntry {
+            name: "Copper"
+            category: "Metal"
+            libraryIcon: "images/material.png"
+            version: "1.0"
+            requiredImport: "ComponentBundles.MaterialBundle"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/gold.metainfo b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/gold.metainfo
new file mode 100644
index 000000000..2e283c787
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/gold.metainfo
@@ -0,0 +1,20 @@
+MetaInfo {
+    Type {
+        name: "ComponentBundles.MaterialBundle.GoldMaterial"
+        icon: "images/material16.png"
+
+        Hints {
+            visibleInNavigator: false
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+        }
+
+        ItemLibraryEntry {
+            name: "Gold"
+            category: "Metal"
+            libraryIcon: "images/material.png"
+            version: "1.0"
+            requiredImport: "ComponentBundles.MaterialBundle"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/silver.metainfo b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/silver.metainfo
new file mode 100644
index 000000000..a3bc45a6b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/designer/silver.metainfo
@@ -0,0 +1,20 @@
+MetaInfo {
+    Type {
+        name: "ComponentBundles.MaterialBundle.SilverMaterial"
+        icon: "images/material16.png"
+
+        Hints {
+            visibleInNavigator: false
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+        }
+
+        ItemLibraryEntry {
+            name: "Silver"
+            category: "Metal"
+            libraryIcon: "images/material.png"
+            version: "1.0"
+            requiredImport: "ComponentBundles.MaterialBundle"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/qmldir b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/qmldir
new file mode 100644
index 000000000..5834d33ac
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/ComponentBundles/MaterialBundle/qmldir
@@ -0,0 +1,16 @@
+module ComponentBundles.MaterialBundle
+GoldMaterial 1.0 GoldMaterial.qml
+AsphaltMaterial 1.0 AsphaltMaterial.qml
+ConcreteMaterial 1.0 ConcreteMaterial.qml
+GlassMaterial 1.0 GlassMaterial.qml
+CarPaintGlitterMaterial 1.0 CarPaintGlitterMaterial.qml
+WaxMaterial 1.0 WaxMaterial.qml
+SilverMaterial 1.0 SilverMaterial.qml
+SteelBrushedMaterial 1.0 SteelBrushedMaterial.qml
+CopperMaterial 1.0 CopperMaterial.qml
+WoodMaterial 1.0 WoodMaterial.qml
+StoneMaterial 1.0 StoneMaterial.qml
+CarbonFiberMaterial 1.0 CarbonFiberMaterial.qml
+PlasticTexturedMaterial 1.0 PlasticTexturedMaterial.qml
+FabricMaterial 1.0 FabricMaterial.qml
+LeatherMaterial 1.0 LeatherMaterial.qml
diff --git a/examples/demos/FX_Material_Showroom/asset_imports/asset_imports.txt b/examples/demos/FX_Material_Showroom/asset_imports/asset_imports.txt
new file mode 100644
index 000000000..84c843f10
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/asset_imports/asset_imports.txt
@@ -0,0 +1 @@
+Imported 3D assets and components imported from bundles will be created in this folder.
diff --git a/examples/demos/FX_Material_Showroom/content/AmbientEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/AmbientEffect.ui.qml
new file mode 100644
index 000000000..7725a2f84
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/AmbientEffect.ui.qml
@@ -0,0 +1,85 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: ambientParticleEffect
+    ParticleEmitter3D {
+        id: modelShapeEmitter18
+        particleScaleVariation: 1
+        particleEndScaleVariation: 1
+        emitRate: 1000
+        lifeSpanVariation: 100
+        enabled: ambientParticleEffect.visible
+        particleEndScale: 1
+        SpriteParticle3D {
+            id: modelShapeParticle
+            color: "#8085edff"
+            blendMode: SpriteParticle3D.Screen
+            billboard: true
+            sprite: ambientdot
+            colorVariation.w: 0.5
+            colorVariation.z: 0.25
+            colorVariation.y: 0.25
+            colorVariation.x: 0.25
+            particleScale: 2
+            fadeOutDuration: 2500
+            fadeInDuration: 2500
+            maxAmount: 5000
+
+            Texture {
+                id: ambientdot
+                source: "images/ambientdot.tif"
+            }
+        }
+
+        Wander3D {
+            id: wander13
+            uniquePaceVariation: 1
+            uniquePace.z: 1
+            uniquePace.y: 1
+            uniquePace.x: 1
+            uniqueAmountVariation: 1
+            uniqueAmount.z: 1
+            uniqueAmount.y: 1
+            uniqueAmount.x: 1
+            particles: modelShapeParticle
+            system: ambientParticleEffect
+        }
+
+        Attractor3D {
+            id: attractor1
+            useCachedPositions: false
+            hideAtEnd: false
+            durationVariation: 5000
+            duration: 10000
+            positionVariation.z: 500
+            positionVariation.y: 500
+            positionVariation.x: 500
+            particles: modelShapeParticle
+            system: ambientParticleEffect
+        }
+        lifeSpan: 5000
+        particle: modelShapeParticle
+        shape: targetShape19
+    }
+
+    ParticleModelShape3D {
+        id: targetShape19
+        delegate: Model {
+            source: "#Cube"
+            scale.z: 10
+            scale.y: 10
+            scale.x: 10
+        }
+        fill: true
+    }
+
+    Node {
+        id: __materialLibrary__
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/App.qml b/examples/demos/FX_Material_Showroom/content/App.qml
new file mode 100644
index 000000000..40577c672
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/App.qml
@@ -0,0 +1,119 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
+import PocketDemo
+
+Window {
+    id: mainWindow
+    width: Constants.width
+    height: Constants.height
+
+    visibility: Qt.platform.os === 'android' ? Window.FullScreen : Window.AutomaticVisibility
+
+    visible: true
+    title: "FX & Material Showroom"
+
+    function downloadProgress(progress) {
+        progressBar.value = progress
+    }
+
+    function downloadStart(num, total) {
+        progressText.text = "Downloading asset " + num + " of " + total;
+    }
+
+    function downloadComplete() {
+        assetsLoader.visible = false
+        loader.sourceComponent = screen01Component
+    }
+
+    Rectangle {
+        id:bg
+        color: "black"
+        anchors.fill: parent
+
+        Loader {
+            id: loader
+            anchors.centerIn: parent
+        }
+
+        Component {
+            id: screen01Component
+
+            Screen01 {
+                id: mainScreen
+
+                transform: Scale {
+                    origin.x: mainScreen.width / 2
+                    origin.y: mainScreen.height / 2
+                    readonly property real xRatio: bg.width / mainScreen.width
+                    readonly property real yRatio: bg.height / mainScreen.height
+                    xScale: Math.min(xRatio, yRatio)
+                    yScale: Math.min(xRatio, yRatio)
+                }
+            }
+        }
+
+        Rectangle {
+            id: assetsLoader
+
+            color: "#222222"
+            anchors.fill: parent
+
+            Rectangle {
+                color: "#444444"
+                radius: 4
+                anchors.centerIn: parent
+                width: column.width + 100
+                height: column.height + 100
+
+                Column {
+                    id: column
+                    anchors.centerIn: parent
+                    spacing: 10
+
+                    Row {
+                        spacing: 10
+                        anchors.horizontalCenter: parent.horizontalCenter
+
+                        BusyIndicator {
+                            id: busyIndicator
+                            palette.dark: "white"
+                            width: 50
+                            height: 50
+
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        Text {
+                            color: "#ffffff"
+                            text: qsTr("Downloading Assets...")
+                            font.pixelSize: 30
+                            font.styleName: "Bold"
+
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    Item { width: 1; height: 30 } // spacer
+
+                    Text {
+                        id: progressText
+                        color: "#ffffff"
+                        font.pixelSize: 16
+                        anchors.left: progressBar.left
+                    }
+
+                    ProgressBar {
+                        id: progressBar
+
+                        height: 10
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/BubblesEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/BubblesEffect.ui.qml
new file mode 100644
index 000000000..d3575a17c
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/BubblesEffect.ui.qml
@@ -0,0 +1,136 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: bubbles
+    ParticleEmitter3D {
+        id: modelShapeEmitter6
+        x: -0
+        y: -8.389
+        particleRotation.z: 0
+        enabled: bubbles.visible
+        velocity: vectorDirection2
+        particle: particleRed8
+        particleRotationVariation.x: 0
+        particleRotationVelocityVariation.x: 0
+        lifeSpan: 5000
+        ModelParticle3D {
+            id: particleRed8
+            color: "#ffffff"
+            sortMode: Particle3D.SortDistance
+            alignMode: Particle3D.AlignTowardsStartVelocity
+            colorVariation.w: 0.25
+            colorVariation.y: 0.25
+            colorVariation.x: 0.25
+            maxAmount: 5000
+            alignTargetPosition: sceneCamera.position
+            fadeInDuration: 0
+            hasTransparency: true
+            unifiedColorVariation: false
+            colorVariation.z: 0
+            fadeOutDuration: 0
+        }
+        particleRotationVelocity.z: 0
+        particleRotation.y: 0
+        particleEndScaleVariation: 0.25
+        shape: targetShape7
+        system: bubbles
+        particleRotationVelocity.x: 0
+        particleRotationVelocityVariation.y: 0
+        particleScale: 0.25
+        particleScaleVariation: 0.25
+        particleRotationVariation.y: 0
+        particleEndScale: 0.25
+        z: 9.0413
+        particleRotationVelocity.y: 0
+        particleRotationVelocityVariation.z: 0
+        particleRotation.x: 0
+        lifeSpanVariation: 5000
+        emitRate: 50
+        particleRotationVariation.z: 0
+    }
+
+    ParticleModelShape3D {
+        id: targetShape7
+        fill: true
+        delegate: Model {
+            source: "#Sphere"
+            scale.y: 1
+            scale.x: 1
+            scale.z: 1
+        }
+    }
+
+    Gravity3D {
+        id: gravity8
+        magnitude: 9.8
+        direction.y: -1
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        receivesReflections: true
+        materials: bubbleMat
+        receivesShadows: true
+        scale.y: 1
+        castsShadows: true
+        instancing: particleRed8.instanceTable
+        scale.z: 1
+        scale.x: 1
+    }
+
+    Wander3D {
+        id: wander5
+        uniqueAmount.y: 0
+        globalAmount.y: 0
+        globalPace.x: 0.1
+        uniqueAmountVariation: 1
+        globalPaceStart.z: 0.1
+        uniqueAmount.z: 0
+        uniquePaceVariation: 1
+        particles: [particleRed8]
+        globalAmount.z: 0
+        uniquePace.z: 0.1
+        globalPace.y: 0.1
+        globalAmount.x: 0
+        system: bubbles
+        uniqueAmount.x: 0
+        globalPaceStart.y: 0.1
+        globalPaceStart.x: 0.1
+        globalPace.z: 0.1
+        uniquePace.y: 0.1
+        uniquePace.x: 0.1
+    }
+
+    VectorDirection3D {
+        id: vectorDirection2
+        direction.z: 0
+        directionVariation.x: 50
+        directionVariation.z: 50
+        directionVariation.y: 100
+        direction.y: 100
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: bubbleMat
+            fragmentShader: "shaders/bubble.frag"
+            objectName: "New Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            depthDrawMode: Material.NeverDepthDraw
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            property color baseColor: "#ffffff"
+            vertexShader: "shaders/bubble.vert"
+            shadingMode: CustomMaterial.Shaded
+            cullMode: Material.BackFaceCulling
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/CMakeLists.txt b/examples/demos/FX_Material_Showroom/content/CMakeLists.txt
new file mode 100644
index 000000000..1b44da85a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/CMakeLists.txt
@@ -0,0 +1,88 @@
+qt_add_library(content STATIC)
+
+qt_add_qml_module(content
+    URI "content"
+    VERSION 1.0
+    QML_FILES
+        AmbientEffect.ui.qml
+        App.qml
+        BubblesEffect.ui.qml
+        CloudEffect.ui.qml
+        DebugBox.ui.qml
+        DustEffect.ui.qml
+        ExplosionEffect.ui.qml
+        FireEffect.ui.qml
+        FlashEffect.ui.qml
+        FloorComponent.ui.qml
+        HeatwaveEffect.ui.qml
+        LineparticleEffect.ui.qml
+        MouseRotatorAndWASD.qml
+        RainEffect.ui.qml
+        Screen01.ui.qml
+        ShockwaveEffect.ui.qml
+        SmokeEffect.ui.qml
+        SnowEffect.ui.qml
+        SparksEffect.ui.qml
+        SteamEffect.ui.qml
+        Figma_Assets/Button.ui.qml
+        Figma_Assets/CardMaterial.ui.qml
+        Figma_Assets/Checkbox.ui.qml
+        Figma_Assets/CheckboxImages.ui.qml
+        Figma_Assets/CheckboxImages_1.ui.qml
+        Figma_Assets/Checkbox_1.ui.qml
+        Figma_Assets/IconsCards.ui.qml
+        Figma_Assets/IconsCheckbox.ui.qml
+        Figma_Assets/IconsCheckbox_1.ui.qml
+        Figma_Assets/IconsFunctional.ui.qml
+        Figma_Assets/LabelQt.ui.qml
+        Figma_Assets/LayoutFull.ui.qml
+        Figma_Assets/LayoutSidePanel.ui.qml
+        Figma_Assets/ListEffects.ui.qml
+        Figma_Assets/ListMaterial.ui.qml
+        Figma_Assets/ListModels.ui.qml
+        Figma_Assets/Material_pop_up.ui.qml
+        Figma_Assets/MouseScroll.qml
+        Figma_Assets/Scrollbar.ui.qml
+        Figma_Assets/State_Idle.ui.qml
+        Pocket_Demo_SkylightUI/ButtonTabs.ui.qml
+        Pocket_Demo_SkylightUI/ButtonWithIcon.ui.qml
+        Pocket_Demo_SkylightUI/IconsSkylight.ui.qml
+        Pocket_Demo_SkylightUI/Layout.ui.qml
+    RESOURCES
+        shaders/steam.vert
+        shaders/steam.frag
+        shaders/SSS.vert
+        shaders/SSS.frag
+        shaders/spark.vert
+        shaders/spark.frag
+        shaders/snow.vert
+        shaders/snow.frag
+        shaders/smokerm.vert
+        shaders/smokerm.frag
+        shaders/smoke.vert
+        shaders/smoke.frag
+        shaders/sky.vert
+        shaders/sky.frag
+        shaders/shockwave.vert
+        shaders/shockwave.frag
+        shaders/raindrop.vert
+        shaders/raindrop.frag
+        shaders/rainsplash.frag
+        shaders/debris.vert
+        shaders/debris.frag
+        shaders/heatwave.vert
+        shaders/heatwave.frag
+        shaders/floor.vert
+        shaders/floor.frag
+        shaders/flash.vert
+        shaders/flash.frag
+        shaders/fire.vert
+        shaders/fire.frag
+        shaders/dustcloud.vert
+        shaders/dustcloud.frag
+        shaders/bubble.vert
+        shaders/bubble.frag
+        shaders/cloud.vert
+        shaders/cloud.frag
+        Figma_Assets/assets/qtlogo.png
+)
diff --git a/examples/demos/FX_Material_Showroom/content/CloudEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/CloudEffect.ui.qml
new file mode 100644
index 000000000..59aa5b1f3
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/CloudEffect.ui.qml
@@ -0,0 +1,153 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: cloud
+    ParticleEmitter3D {
+        id: modelShapeEmitter7
+        x: 0
+        y: -45.815
+        particleScale: 20
+        velocity: vectorDirection3
+        particleRotation.z: 0
+        particle: particleRed9
+        enabled: cloud.visible
+        particleRotationVariation.x: 360
+        particleRotationVelocityVariation.x: 10
+        lifeSpan: 25000
+        ModelParticle3D {
+            id: particleRed9
+            color: "#ffffff"
+            sortMode: Particle3D.SortDistance
+            alignMode: Particle3D.AlignNone
+            maxAmount: 50
+            alignTargetPosition: sceneCamera.position
+            fadeInDuration: 12500
+            hasTransparency: true
+            unifiedColorVariation: false
+            fadeOutDuration: 12500
+        }
+        particleRotationVelocity.z: 0
+        particleRotation.y: 0
+        particleEndScaleVariation: 0
+        shape: targetShape8
+        system: cloud
+        particleRotationVelocity.x: 0
+        particleRotationVelocityVariation.y: 10
+        particleScaleVariation: 10
+        particleRotationVariation.y: 360
+        particleEndScale: 20
+        z: -5.27116
+        particleRotationVelocity.y: 0
+        particleRotationVelocityVariation.z: 10
+        particleRotation.x: 0
+        lifeSpanVariation: 0
+        emitRate: 2
+        particleRotationVariation.z: 360
+    }
+
+    ParticleModelShape3D {
+        id: targetShape8
+        fill: true
+        delegate: Model {
+            source: "#Cube"
+            scale.z: 3
+            eulerRotation.z: 0
+            eulerRotation.y: 0
+            scale.x: 3
+            scale.y: 3
+            eulerRotation.x: 0
+        }
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        receivesReflections: true
+        materials: cloudMat
+        scale.y: 0.1
+        receivesShadows: true
+        castsShadows: true
+        instancing: particleRed9.instanceTable
+        scale.z: 0.1
+        scale.x: 0.1
+    }
+
+    Wander3D {
+        id: wander6
+        uniqueAmount.y: 1
+        globalPace.x: 0.1
+        uniqueAmountVariation: 1
+        uniqueAmount.z: 1
+        globalPaceStart.z: 0.1
+        uniquePaceVariation: 1
+        particles: particleRed9
+        globalAmount.z: 0
+        uniquePace.z: 0.1
+        globalPace.y: 0.1
+        globalAmount.x: 0
+        system: cloud
+        uniqueAmount.x: 1
+        globalPaceStart.y: 0.1
+        globalPaceStart.x: 0.1
+        globalPace.z: 0.1
+        uniquePace.y: 0.1
+        uniquePace.x: 0.1
+    }
+
+    VectorDirection3D {
+        id: vectorDirection3
+        directionVariation.z: 1
+        directionVariation.y: 1
+        directionVariation.x: 5
+        direction.y: 0
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: cloudMat
+            TextureInput {
+                id: cloudtexinput
+                enabled: true
+                texture: cloudtex
+            }
+
+            Texture {
+                id: cloudtex
+                source: "file:content/images/cloud.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            cullMode: Material.BackFaceCulling
+
+            property real specular: 0
+            property real density: 0.0
+            property real opacity: 1
+            property real roughness: 1
+            property real clearcoat: 1
+            property real metalness: 0.0
+            property real sssDistortion: 0.1
+            property real sssPower: 1
+            property real sssScale: 3
+            property color baseColor: "#ffffff"
+            property color sssColor: "#e5f9ff"
+            property TextureInput dfMask: cloudtexinput
+            alwaysDirty: false
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            fragmentShader: "shaders/cloud.frag"
+            sourceBlend: CustomMaterial.SrcAlpha
+            vertexShader: "shaders/cloud.vert"
+            shadingMode: CustomMaterial.Shaded
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "Cloud Material"
+        }
+    }
+    staticFlags: 0
+}
diff --git a/examples/demos/FX_Material_Showroom/content/DebugBox.ui.qml b/examples/demos/FX_Material_Showroom/content/DebugBox.ui.qml
new file mode 100644
index 000000000..995bce8d5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/DebugBox.ui.qml
@@ -0,0 +1,84 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick 6.4
+import QtQuick.Controls 6.4
+import QtQuick3D 6.4
+import QtQuick3D.Helpers 6.4
+
+Rectangle {
+    id: debugBox
+    property color colorBG: "#ca000000"
+    property color colorText: "#ffffff"
+    property View3D sView: view3D
+    property int secondaryinfoSize: 24
+    property int fpsSize: 32
+    property int fps: sView.renderStats.fps
+    property int frameTime: sView.renderStats.frameTime
+    property int syncTime: sView.renderStats.syncTime
+    property int renderTime: sView.renderStats.renderTime
+    property int maxTime: sView.renderStats.maxFrameTime
+
+    height: framerate.height + sync.height + render.height + max.height + 32
+    Rectangle {
+        id: rectangle2
+        color: "#00000000"
+        anchors.fill: parent
+        anchors.rightMargin: 16
+        anchors.leftMargin: 16
+        anchors.bottomMargin: 16
+        anchors.topMargin: 16
+
+        Text {
+            id: framerate
+            x: 0
+            y: 0
+            color: debugBox.colorText
+            text: debugBox.fps + " FPS (" + debugBox.frameTime + " ms)"
+            anchors.left: parent.left
+            font.pixelSize: debugBox.fpsSize
+            height: font.pixelSize * 1.5
+            anchors.leftMargin: 0
+        }
+
+        Text {
+            id: sync
+            x: 0
+            y: framerate.height
+            color: debugBox.colorText
+            text: "Sync: " + debugBox.syncTime + " ms"
+            anchors.left: parent.left
+            font.pixelSize: debugBox.secondaryinfoSize
+            height: font.pixelSize * 1.5
+            anchors.leftMargin: 0
+        }
+
+        Text {
+            id: render
+            x: 0
+            y: sync.y + sync.height
+            color: debugBox.colorText
+            text: "Render: " + debugBox.renderTime + " ms"
+            anchors.left: parent.left
+            font.pixelSize: debugBox.secondaryinfoSize
+            height: font.pixelSize * 1.5
+            anchors.leftMargin: 0
+        }
+
+        Text {
+            id: max
+            x: 0
+            y: render.y + render.height
+            color: debugBox.colorText
+            text: "Max: " + debugBox.maxTime + " ms"
+            anchors.left: parent.left
+            font.pixelSize: debugBox.secondaryinfoSize
+            height: font.pixelSize * 1.5
+            anchors.leftMargin: 0
+        }
+    }
+
+    Item {
+        id: __materialLibrary__
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/DustEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/DustEffect.ui.qml
new file mode 100644
index 000000000..9a234e577
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/DustEffect.ui.qml
@@ -0,0 +1,214 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: dust
+
+    ParticleEmitter3D {
+        id: dustpointEmitter
+        x: 0
+        y: -38
+
+        enabled: dust.visible
+        emitRate: 2000
+        velocity: dustpointDir
+        particleRotationVariation.z: 360
+        lifeSpanVariation: 6000
+        particleRotationVariation.x: 360
+        particleRotation.x: 0
+        system: dust
+        particleEndScale: 0.1
+        particleRotationVelocityVariation.y: 5
+        particleEndScaleVariation: 0.1
+        particleScale: 0.1
+        particleRotationVelocityVariation.z: 5
+        ModelParticle3D {
+            id: particleRed7
+            color: "#40ffffff"
+            unifiedColorVariation: false
+            fadeInDuration: 3000
+            alignTargetPosition: sceneCamera.position
+            hasTransparency: true
+            sortMode: Particle3D.SortDistance
+            fadeOutDuration: 3000
+            alignMode: Particle3D.AlignNone
+            maxAmount: 600000
+            colorVariation.w: 0.25
+        }
+        particle: particleRed7
+        particleRotation.y: 0
+        particleRotationVelocityVariation.x: 5
+        particleRotationVelocity.y: 0
+        particleScaleVariation: 0.1
+        shape: targetShape6
+        lifeSpan: 6000
+        particleRotationVariation.y: 360
+        particleRotationVelocity.x: 0
+        particleRotationVelocity.z: 0
+        z: -5.27116
+        particleRotation.z: 0
+    }
+
+    ParticleEmitter3D {
+        id: dustcloudEmitter
+        x: 0
+        y: -45.815
+
+        enabled: dust.visible
+        velocity: vectorDirection1
+        particleScale: 5
+        emitRate: 20
+        particleRotation.x: 0
+        particleRotationVariation.x: 360
+        lifeSpanVariation: 6000
+        particleRotationVariation.z: 360
+        system: dust
+        particleEndScaleVariation: 2.5
+        particleRotationVelocityVariation.y: 10
+        particleEndScale: 5
+        particleRotationVelocityVariation.z: 10
+        ModelParticle3D {
+            id: particleRed6
+            color: "#ffffff"
+            unifiedColorVariation: false
+            fadeInDuration: 6000
+            alignTargetPosition: sceneCamera.position
+            hasTransparency: true
+            sortMode: Particle3D.SortDistance
+            fadeOutDuration: 6000
+            alignMode: Particle3D.AlignNone
+            maxAmount: 1500
+            colorVariation.w: 1
+        }
+        particle: particleRed6
+        particleRotation.y: 0
+        particleScaleVariation: 2.5
+        particleRotationVelocity.y: 0
+        particleRotationVelocityVariation.x: 10
+        shape: targetShape6
+        lifeSpan: 6000
+        particleRotationVariation.y: 360
+        particleRotationVelocity.x: 0
+        particleRotationVelocity.z: 0
+        z: -5.27116
+        particleRotation.z: 0
+    }
+
+    ParticleModelShape3D {
+        id: targetShape6
+        fill: true
+        delegate: Model {
+            source: "#Cube"
+            scale.x: 10
+            scale.y: 10
+            scale.z: 10
+        }
+    }
+
+    Gravity3D {
+        id: gravity6
+        magnitude: 1
+        direction.y: -1
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        castsShadows: true
+        receivesShadows: true
+        scale.z: 1
+        instancing: particleRed6.instanceTable
+        materials: dustMat
+        scale.y: 1
+        scale.x: 1
+        receivesReflections: true
+    }
+
+    Wander3D {
+        id: wander4
+        uniqueAmount.y: 0
+        uniqueAmount.x: 0
+        uniquePace.x: 100
+        globalPaceStart.z: 0.1
+        globalAmount.z: 5
+        system: dust
+        uniquePaceVariation: 1
+        globalPace.y: 0.1
+        uniquePace.y: 100
+        particles: particleRed6
+        uniquePace.z: 100
+        globalPaceStart.y: 0.1
+        uniqueAmount.z: 0
+        globalPaceStart.x: 0.1
+        globalPace.x: 0.1
+        uniqueAmountVariation: 1
+        globalAmount.x: 5
+        globalPace.z: 0.1
+    }
+
+    VectorDirection3D {
+        id: vectorDirection1
+        directionVariation.x: 10
+        directionVariation.y: 10
+        direction.y: 0
+        directionVariation.z: 10
+    }
+
+    Model {
+        id: dustpoint
+        source: "#Sphere"
+        receivesShadows: false
+        castsShadows: false
+        scale.z: 0.1
+        instancing: particleRed7.instanceTable
+        materials: dustMat
+        scale.y: 0.1
+        receivesReflections: false
+        scale.x: 0.1
+    }
+
+    VectorDirection3D {
+        id: dustpointDir
+        directionVariation.x: 10
+        directionVariation.y: 10
+        direction.y: 0
+        directionVariation.z: 10
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: dustMat
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#40ffffff"
+            property TextureInput dfMask: dusttexinput
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "New Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            TextureInput {
+                id: dusttexinput
+                texture: dusttex
+                enabled: true
+            }
+
+            Texture {
+                id: dusttex
+                source: "file:content/images/dust.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            vertexShader: "shaders/dustcloud.vert"
+            fragmentShader: "shaders/dustcloud.frag"
+            shadingMode: CustomMaterial.Shaded
+        }
+    }
+
+    staticFlags: 0
+}
diff --git a/examples/demos/FX_Material_Showroom/content/ExplosionEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/ExplosionEffect.ui.qml
new file mode 100644
index 000000000..9bbca470b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/ExplosionEffect.ui.qml
@@ -0,0 +1,440 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: explosion
+    visible: true
+    ParticleEmitter3D {
+        id: burstEmitter5
+        particleScaleVariation: 0
+        enabled: explosion.visible
+        system: explosion
+        velocity: burstDirection5
+        particleRotationVelocityVariation.y: 90
+        particle: modelParticle5
+        particleScale: 0
+        particleRotationVelocityVariation.x: 90
+        particleEndScale: 5
+        lifeSpan: 500
+        particleRotationVelocityVariation.z: 90
+        emitBursts: dynamicBurst3
+        ModelParticle3D {
+            id: modelParticle5
+            color: "#ffffff"
+            maxAmount: 1000
+            fadeInDuration: 500
+            fadeOutDuration: 500
+        }
+
+        VectorDirection3D {
+            id: burstDirection5
+            directionVariation.x: 25
+            directionVariation.z: 25
+            directionVariation.y: 25
+            direction.y: 0
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            receivesReflections: true
+            materials: explosion_fireMat
+            receivesShadows: true
+            scale.y: 1
+            castsShadows: true
+            instancing: modelParticle5.instanceTable
+            scale.z: 1
+            scale.x: 1
+        }
+
+        DynamicBurst3D {
+            id: dynamicBurst3
+            enabled: explosion.visible
+            duration: 1
+            amount: 100
+            time: 1000
+        }
+        lifeSpanVariation: lifeSpan
+        particleEndScaleVariation: particleEndScale
+        emitRate: 0
+    }
+    running: true
+
+    Timer {
+        id: explosionTimer
+        running: explosion.visible
+        interval: 10000
+        triggeredOnStart: true
+        repeat: true
+    }
+
+    Connections {
+        target: explosionTimer
+        onTriggered: explosion_flash.reset()
+    }
+
+    Connections {
+        target: explosionTimer
+        onTriggered: explosion_smoke.reset()
+    }
+
+    Connections {
+        target: explosionTimer
+        onTriggered: explosion.reset()
+    }
+
+    Connections {
+        target: explosionTimer
+        onTriggered: explosion_sparks.reset()
+    }
+
+    ParticleSystem3D {
+        id: explosion_shockwave
+        ParticleEmitter3D {
+            id: burstEmitter2
+            system: explosion_shockwave
+            velocity: burstDirection2
+            particle: modelParticle2
+            particleScale: 0
+            particleEndScale: 30
+            enabled: explosion.visible
+            lifeSpan: 1000
+            emitBursts: dynamicBurst2
+            ModelParticle3D {
+                id: modelParticle2
+                fadeInDuration: 100
+                fadeOutDuration: 900
+            }
+
+            VectorDirection3D {
+                id: burstDirection2
+                directionVariation.x: 0
+                directionVariation.z: 0
+                direction.y: 0
+                directionVariation.y: 0
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: explosion_shockwaveMat
+                scale.y: 1
+                receivesShadows: true
+                castsShadows: true
+                instancing: modelParticle2.instanceTable
+                scale.z: 1
+                scale.x: 1
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst2
+                time: 1000
+                enabled: explosion.visible
+                duration: 10
+                amount: 1
+            }
+            emitRate: 0
+            particleEndScaleVariation: 0
+        }
+    }
+
+    ParticleSystem3D {
+        id: explosion_flash
+        visible: true
+        ParticleEmitter3D {
+            id: burstEmitter3
+            enabled: explosion.visible
+            system: explosion_flash
+            velocity: burstDirection3
+            particle: modelParticle3
+            particleScale: 0
+            particleEndScale: 60
+            lifeSpan: 1000
+            emitBursts: dynamicBurst1
+            ModelParticle3D {
+                id: modelParticle3
+                fadeInDuration: burstEmitter3.lifeSpan / 4
+                fadeOutDuration: modelParticle3.fadeInDuration * 3
+            }
+
+            VectorDirection3D {
+                id: burstDirection3
+                directionVariation.x: 0
+                directionVariation.z: 0
+                directionVariation.y: 0
+                direction.y: 0
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: explosion_flashMat
+                receivesShadows: true
+                scale.y: 1
+                castsShadows: true
+                instancing: modelParticle3.instanceTable
+                scale.z: 1
+                scale.x: 1
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst1
+                time: 1000
+                enabled: explosion.visible
+                duration: 10
+                amount: 1
+            }
+            particleEndScaleVariation: 0
+            emitRate: 0
+        }
+    }
+
+    ParticleSystem3D {
+        id: explosion_smoke
+        visible: true
+        running: true
+        ParticleEmitter3D {
+            id: burstEmitter4
+            enabled: explosion.visible
+            lifeSpanVariation: lifeSpan
+            particleRotationVelocityVariation.z: 90
+            particleRotationVelocityVariation.y: 90
+            particleRotationVelocityVariation.x: 90
+            system: explosion_smoke
+            velocity: burstDirection4
+            particle: modelParticle4
+            particleScale: 0
+            particleEndScale: 10
+            lifeSpan: 5000
+            emitBursts: dynamicBurst
+            ModelParticle3D {
+                id: modelParticle4
+                color: "#33ffffff"
+                maxAmount: 1000
+                fadeInDuration: 1000
+                fadeOutDuration: 4000
+            }
+
+            VectorDirection3D {
+                id: burstDirection4
+                directionVariation.x: 100
+                directionVariation.z: 100
+                directionVariation.y: 100
+                direction.y: 0
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: explosion_smokeMat
+                receivesShadows: true
+                scale.y: 1
+                castsShadows: true
+                instancing: modelParticle4.instanceTable
+                scale.z: 1
+                scale.x: 1
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst
+                time: 1250
+                enabled: explosion.visible
+                amount: 100
+                duration: 100
+            }
+
+            particleEndScaleVariation: particleEndScale / 2
+            emitRate: 0
+        }
+    }
+
+
+
+    ParticleSystem3D {
+        id: explosion_sparks
+        visible: true
+        ParticleEmitter3D {
+            id: burstEmitter6
+            system: explosion_sparks
+            velocity: burstDirection6
+            enabled: explosion.visible
+            particleRotationVelocityVariation.y: 90
+            particle: modelParticle6
+            particleScale: 0.1
+            particleRotationVelocityVariation.x: 90
+            particleScaleVariation: particleScale
+            particleEndScale: 0.5
+            lifeSpan: 3000
+            particleRotationVelocityVariation.z: 90
+            emitBursts: dynamicBurst4
+            ModelParticle3D {
+                id: modelParticle6
+                color: "#ffffff"
+                maxAmount: 1000
+                fadeInDuration: 500
+                fadeOutDuration: 500
+            }
+
+            VectorDirection3D {
+                id: burstDirection6
+                directionVariation.x: 200
+                directionVariation.z: 200
+                direction.y: 0
+                directionVariation.y: 200
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: explosion_sparkMat
+                scale.y: 1
+                receivesShadows: true
+                castsShadows: true
+                instancing: modelParticle6.instanceTable
+                scale.z: 1
+                scale.x: 1
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst4
+                enabled: explosion.visible
+                duration: 100
+                amount: 500
+                time: 1000
+            }
+
+            Gravity3D {
+                id: gravity7
+                particles: modelParticle6
+                system: explosion_sparks
+            }
+            lifeSpanVariation: lifeSpan
+            particleEndScaleVariation: particleEndScale
+            emitRate: 0
+        }
+        running: true
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: explosion_shockwaveMat
+            fragmentShader: "shaders/shockwave.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            property color baseColor: "#ffffff"
+            cullMode: Material.BackFaceCulling
+            sourceBlend: CustomMaterial.SrcAlpha
+            vertexShader: "shaders/shockwave.vert"
+            objectName: "New Material"
+        }
+
+        CustomMaterial {
+            id: explosion_flashMat
+            fragmentShader: "shaders/flash.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.One
+            property color baseColor: "#ffaa11"
+            cullMode: Material.NoCulling
+            sourceBlend: CustomMaterial.One
+            vertexShader: "shaders/flash.vert"
+            objectName: "New Material"
+        }
+
+        CustomMaterial {
+            id: explosion_smokeMat
+            fragmentShader: "shaders/smoke.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#222222"
+            property color sssColor: "#222222"
+            property real roughness: 0.5
+            property real density: 0.5
+            property real metalness: 0.0
+            sourceBlend: CustomMaterial.SrcAlpha
+
+            property TextureInput dfMask: smoketexinput1
+            TextureInput {
+                id: smoketexinput1
+                enabled: true
+                texture: smoketex1
+            }
+
+            Texture {
+                id: smoketex1
+                source: "file:content/images/smoke.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            vertexShader: "shaders/smoke.vert"
+            objectName: "New Material"
+        }
+
+        CustomMaterial {
+            id: explosion_fireMat
+            fragmentShader: "shaders/fire.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.One
+            cullMode: Material.BackFaceCulling
+            property TextureInput dfMask: firetexinput1
+            property color baseColor: "#d97111"
+            sourceBlend: CustomMaterial.SrcAlpha
+            TextureInput {
+                id: firetexinput1
+                enabled: true
+                texture: firetex1
+            }
+
+            Texture {
+                id: firetex1
+                source: "file:content/images/fire.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            vertexShader: "shaders/fire.vert"
+            objectName: "New Material"
+        }
+
+        CustomMaterial {
+            id: explosion_sparkMat
+            cullMode: Material.NoCulling
+            property color baseColor: "#e5b16d"
+            property real brightness: 10
+            property TextureInput dfMask: sparktexinput
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "New Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            destinationBlend: CustomMaterial.One
+            TextureInput {
+                id: sparktexinput
+                texture: sparktex
+                enabled: true
+            }
+
+            Texture {
+                id: sparktex
+                source: "file:content/images/spark.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+            vertexShader: "shaders/spark.vert"
+            fragmentShader: "shaders/spark.frag"
+            shadingMode: CustomMaterial.Shaded
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/Button.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Button.ui.qml
new file mode 100644
index 000000000..956fca8de
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Button.ui.qml
@@ -0,0 +1,80 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: settingsbutton
+    width: 311
+    height: 80
+    property alias open_setting_panelText: open_setting_panel.text
+    state: "state_state_Idle"
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 311
+        height: 80
+        color: "#222222"
+        radius: 8
+    }
+
+    Text {
+        id: open_setting_panel
+        x: 28
+        y: 26
+        width: 180
+        height: 28
+        color: "#ffffff"
+        text: qsTr("Open setting panel")
+        font.pixelSize: 20
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        font.family: "Archivo"
+        font.weight: Font.Bold
+    }
+
+    IconsFunctional {
+        id: iconsFunctional
+        x: 235
+        y: 16
+        width: 48
+        height: 48
+        clip: true
+        state: "state_icon_ArrowRight"
+    }
+    states: [
+        State {
+            name: "state_state_Idle"
+        },
+        State {
+            name: "state_state_Hover"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#5c5c5d"
+            }
+        },
+        State {
+            name: "state_state_Pressed"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#b8b8b9"
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:80;width:311}D{i:1;uuid:"c7c4867f-637a-5518-aceb-7f1dd2290416"}D{i:2;uuid:"5266f2b1-d65a-5433-a9f7-76f929ec337c"}
+D{i:3;uuid:"fb09fa68-07b0-5e3d-ab6a-51d549302bbe"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/CardMaterial.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CardMaterial.ui.qml
new file mode 100644
index 000000000..3e7e6d303
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CardMaterial.ui.qml
@@ -0,0 +1,102 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: cardMaterial
+    width: 188
+    height: 160
+    property string iconsCardsState: "state_name_Materials"
+    property alias materialText: material.text
+    property string selectionID: "test"
+    state: "state_state_Idle"
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 188
+        height: 160
+        color: button.pressed ? "#B8B8B9" : (button.hovered ? "#5C5C5D" : (button.checked ? "#3D3D3E" : "#222222"))
+        radius: 8
+    }
+
+    Text {
+        id: material
+        x: 20
+        width: 149
+        height: 28
+        color: "#ffffff"
+        text: qsTr("Material")
+        anchors.bottom: parent.bottom
+        font.pixelSize: 20
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        anchors.bottomMargin: 20
+        font.family: "Archivo"
+        font.weight: Font.Normal
+    }
+
+    IconsCards {
+        id: iconsCards
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: 58
+        anchors.bottomMargin: 68
+        clip: true
+        anchors.topMargin: 20
+        anchors.leftMargin: 58
+        state: parent.iconsCardsState
+    }
+
+    Button {
+        id: button
+        opacity: 0
+        text: qsTr("")
+        anchors.fill: parent
+        highlighted: true
+        checkable: true
+        checked: material_pop_up.state == cardMaterial.selectionID
+        display: AbstractButton.TextOnly
+
+        Connections {
+            target: button
+            onClicked: material_pop_up.state = cardMaterial.selectionID
+        }
+    }
+    states: [
+        State {
+            name: "state_state_Active"
+        },
+        State {
+            name: "state_state_Pressed"
+        },
+        State {
+            name: "state_state_Hover"
+        },
+        State {
+            name: "state_state_Idle"
+
+            PropertyChanges {
+                target: iconsCards
+                x: 58
+                y: 20
+                width: 72
+                height: 72
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:160;width:188}D{i:1;uuid:"ea2df35d-3c75-51e1-8a6b-534bf039dd51"}D{i:2;uuid:"8e896bc3-37b4-5166-ab69-5d94de048ede"}
+D{i:3;uuid:"630f982b-ec7f-51b6-9634-cb32f2584cf5"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox.ui.qml
new file mode 100644
index 000000000..575ac9914
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox.ui.qml
@@ -0,0 +1,103 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: checkbox
+    width: 580
+    height: 88
+    property alias item_nameText: item_name.text
+    state: "state_state_Idle"
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+        color: "#222222"
+        radius: 8
+    }
+
+    CheckboxImages_1 {
+        id: checkboxImages
+        x: 8
+        y: 8
+        width: 72
+        height: 72
+        state: "state_type_Materials_Number_1"
+    }
+
+    Text {
+        id: item_name
+        x: 108
+        y: 30
+        width: 389
+        height: 28
+        color: "#ffffff"
+        text: qsTr("Item name")
+        font.pixelSize: 20
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        font.family: "Archivo"
+        font.weight: Font.Normal
+    }
+
+    IconsCheckbox_1 {
+        id: iconsCheckbox
+        x: 524
+        y: 30
+        width: 28
+        height: 28
+        clip: true
+        state: "state_name_CheckEmpty"
+    }
+    states: [
+        State {
+            name: "state_state_Idle"
+        },
+        State {
+            name: "state_state_Pressed"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#b8b8b9"
+            }
+        },
+        State {
+            name: "state_state_Hover"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#5c5c5d"
+            }
+        },
+        State {
+            name: "state_state_Active"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#3d3d3e"
+            }
+
+            PropertyChanges {
+                target: iconsCheckbox
+                state: "state_name_CheckFilled"
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"97d01e06-eea5-5b77-8d98-8551fdcb3a24"}D{i:1;uuid:"acbb415b-f966-5d42-9c0d-44b939fb8acb"}
+D{i:2;uuid:"6782aee3-77ae-53ec-abf2-e1a5ea758261"}D{i:3;uuid:"07ed43fe-f485-5015-a68c-4b8dcc05e565"}
+D{i:4;uuid:"6aff6e75-eba9-5616-8028-1339982141e4"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages.ui.qml
new file mode 100644
index 000000000..653def935
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages.ui.qml
@@ -0,0 +1,2031 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components 1.0
+import QtQuick.Shapes 1.0
+
+Item {
+    id: checkboxImages
+    width: 72
+    height: 72
+    state: "state_type_Materials_Number_1"
+
+    ArcItem {
+        id: materialimage10
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#10129b"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage09
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#252aad"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage08
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#2d33bc"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage07
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#3940c4"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage06
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#3f48cf"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage05
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#5d65d7"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage04
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#7b82de"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#a1a5e7"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#c7c8f1"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: materialimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#e9e9f9"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage07
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#ec2075"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage06
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#ee3683"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage05
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f04d91"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage04
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f2639f"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f479ac"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f690ba"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: effectimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f7a6c8"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: dmodelimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f0b829"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: dmodelimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f3ca5e"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+
+    ArcItem {
+        id: dmodelimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        begin: 90
+        end: 450.00001
+        fillColor: "#f7db94"
+        antialiasing: true
+        strokeColor: "transparent"
+        arcWidth: 36
+        outlineArc: true
+        strokeWidth: 0
+    }
+    states: [
+        State {
+            name: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_8"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_6"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_11"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                fillColor: "#ffffff"
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_5"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_7"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_9"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_10"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_1"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_7"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_5"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_8"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                fillColor: "#f9bcd6"
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_6"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: true
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_9"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                fillColor: "#fbd2e3"
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_10"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                fillColor: "#fde9f1"
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_1"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: true
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage02
+                visible: true
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage01
+                visible: true
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage05
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage01
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage10
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage01
+                fillColor: "#fbedc9"
+            }
+
+            PropertyChanges {
+                target: effectimage04
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage07
+                visible: false
+            }
+
+            PropertyChanges {
+                target: dmodelimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage09
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage06
+                visible: false
+            }
+
+            PropertyChanges {
+                target: effectimage02
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage03
+                visible: false
+            }
+
+            PropertyChanges {
+                target: materialimage02
+                visible: false
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"f2874344-b8af-5518-8668-bba94e8240c7"}D{i:1;uuid:"621f571f-9ea0-52a3-a543-7ed3015aea80"}
+D{i:2;uuid:"d25c4764-1aa6-5825-b9d5-d0e9d111f613"}D{i:3;uuid:"2a0ee2f6-c5e1-5014-91d6-fd55b6814146"}
+D{i:4;uuid:"a74b4f44-4eda-50b3-8e0c-86d120993a67"}D{i:5;uuid:"4c255f54-6252-5d3b-9e0a-eb6c85abbf8d"}
+D{i:6;uuid:"587dbb81-45bd-59ed-b471-ba9cd8b5b8f7"}D{i:7;uuid:"6d50fded-7f30-5e8a-86e4-9fcaac503c32"}
+D{i:8;uuid:"c3e66a41-9a2d-5997-a6a1-8180966a4d55"}D{i:9;uuid:"3245fbb2-5c60-5655-8148-ad03a8250ff1"}
+D{i:10;uuid:"21c404db-1470-5297-8123-480632231995"}D{i:11;uuid:"9d0d6aac-1b49-56ff-9317-bbaf7b630775"}
+D{i:12;uuid:"a7acc20d-c4b7-56a2-9336-ed2f9e7e1d5b"}D{i:13;uuid:"654f44c9-f4aa-57ab-9e4f-c2091cf686e3"}
+D{i:14;uuid:"46ddacc6-c3e1-5a85-8333-b17ffc7ceffa"}D{i:15;uuid:"5ecf4611-53c0-5712-8bb1-deb9e4e73c8e"}
+D{i:16;uuid:"e23392d3-d29f-5504-a270-c26adaa18eb6"}D{i:17;uuid:"172afb9f-8d40-5de4-accc-7df8be563943"}
+D{i:18;uuid:"8103af99-9b53-5e3d-92e9-1a04201e762a"}D{i:19;uuid:"999a521e-d27b-59f7-b5b1-5129ea151657"}
+D{i:20;uuid:"7c424856-ac55-5d84-8648-4166f5bf1332"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages_1.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages_1.ui.qml
new file mode 100644
index 000000000..c085f88c2
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/CheckboxImages_1.ui.qml
@@ -0,0 +1,699 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+import QtQuick.Shapes
+
+Item {
+    id: checkboxImages
+    width: 72
+    height: 72
+    layer.format: ShaderEffectSource.RGBA
+    smooth: false
+    state: "state_type_Effects_Number_5"
+
+    Image {
+        id: materialimage10
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/LeathermatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage09
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/FabricmatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage08
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/PlasticTexturedmatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage07
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CarbonFibermatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage06
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/StonematIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage05
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/WoodmatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage04
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/GlassmatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CoppermatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/BrushedSteelmatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: materialimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/SilvermatIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage07
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-6.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage06
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-5.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage05
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-4.tif"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage04
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-3.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-2.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-1.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: dmodelimage03
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesmodelIcon-1.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: dmodelimage02
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesmodelIcon.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: dmodelimage01
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesmodelIcon-3.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: dmodelimage04
+        x: 3
+        y: 7
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesmodelIcon-2.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage08
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-7.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage09
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-8.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage10
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-9.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+
+    Image {
+        id: effectimage11
+        x: 0
+        y: 0
+        width: 72
+        height: 72
+        visible: false
+        horizontalAlignment: Image.AlignLeft
+        verticalAlignment: Image.AlignTop
+        source: "file:content/images/Icons/CheckboxImagesfxIcon-10.png"
+        layer.smooth: true
+        layer.format: ShaderEffectSource.RGBA
+        antialiasing: false
+        cache: false
+        mipmap: false
+        smooth: false
+    }
+    states: [
+        State {
+            name: "state_type_Materials_Number_1"
+            PropertyChanges {
+                target: materialimage10
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage09
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_8"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage03
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_6"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage05
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_9"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage02
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage08
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage07
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_7"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage04
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_5"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage06
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Materials_Number_10"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: materialimage01
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_1"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage07
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_8"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage01
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage06
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage05
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage04
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_5"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage03
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_4"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: dmodelimage04
+                x: 0
+                y: 0
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_6"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage02
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_7"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage08
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_9"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage09
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_10"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage10
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_Effects_Number_11"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: effectimage11
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_1"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: dmodelimage03
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_2"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: dmodelimage02
+                visible: true
+            }
+        },
+        State {
+            name: "state_type_3DModel_Number_3"
+            extend: "state_type_Materials_Number_1"
+
+            PropertyChanges {
+                target: dmodelimage01
+                visible: true
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:72;width:72}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox_1.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox_1.ui.qml
new file mode 100644
index 000000000..827e284fd
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Checkbox_1.ui.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: checkbox
+    width: 580
+    height: 88
+
+    State_Idle {
+        id: state_Idle
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"83c6a39a-06e0-5fe3-aadb-2ee0f007c174"}D{i:1;uuid:"16be9320-bde9-533e-a350-aab2e1fb35ce"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCards.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCards.ui.qml
new file mode 100644
index 000000000..1ace15b47
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCards.ui.qml
@@ -0,0 +1,104 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+
+Item {
+    id: iconsCards
+    width: 72
+    height: 72
+    state: "state_name_Effects"
+
+    SvgPathItem {
+        id: effect_Vector
+        x: 4
+        y: 8
+        width: 64
+        height: 55
+        path: "M 55.153770446777344 12.324169158935547 C 55.30002212524414 12.222911834716797 55.39002227783203 12.048542022705078 55.39002227783203 11.868541717529297 C 55.39002227783203 11.682918548583984 55.30000686645508 11.514179229736328 55.15375518798828 11.407308578491211 C 54.14689636230469 10.698528289794922 53.2862548828125 9.770387649536133 52.605613708496094 8.65102767944336 C 52.3974723815918 8.319156646728516 51.846256256103516 8.319156646728516 51.64375686645508 8.65102767944336 C 50.95747756958008 9.77044677734375 50.10247039794922 10.698589324951172 49.095611572265625 11.407308578491211 C 48.94373321533203 11.51418685913086 48.8593635559082 11.682929992675781 48.8593635559082 11.868558883666992 C 48.8593635559082 12.048559188842773 48.94374084472656 12.222938537597656 49.095611572265625 12.329809188842773 C 50.10247039794922 13.032949447631836 50.95747756958008 13.961088180541992 51.64375686645508 15.080448150634766 C 51.74501419067383 15.249198913574219 51.92500686645508 15.350448608398438 52.121883392333984 15.350448608398438 C 52.31875991821289 15.350448608398438 52.49876022338867 15.249198913574219 52.60563278198242 15.080448150634766 C 53.28627395629883 13.961029052734375 54.14691162109375 13.032890319824219 55.153770446777344 12.324169158935547 Z M 63.14741516113281 11.024940490722656 C 58.236778259277344 11.024940490722656 55.69422149658203 8.578079223632812 54.37782287597656 6.08057975769043 C 53.061424255371094 3.583080291748047 52.97154235839844 1.0349407196044922 52.96596145629883 0.8268604278564453 C 52.9547119140625 0.36561012268066406 52.583465576171875 0 52.12224578857422 0 C 51.66661834716797 0 51.28974151611328 0.3656282424926758 51.27852249145508 0.8268604278564453 C 51.27289581298828 1.2431106567382812 50.92414855957031 11.02505874633789 41.09712219238281 11.02505874633789 C 40.63587188720703 11.02505874633789 40.25340270996094 11.401931762695312 40.25340270996094 11.868782043457031 C 40.25340270996094 12.335628509521484 40.635902404785156 12.712501525878906 41.09712219238281 12.712501525878906 C 50.92392349243164 12.712501525878906 51.27252197265625 22.494298934936523 51.27852249145508 22.91069984436035 C 51.289772033691406 23.3663272857666 51.66665267944336 23.731979370117188 52.12224578857422 23.737560272216797 C 52.58349609375 23.737560272216797 52.954742431640625 23.366310119628906 52.96596145629883 22.91069984436035 C 52.977210998535156 22.494449615478516 53.32596206665039 12.712501525878906 63.147361755371094 12.712501525878906 C 63.614234924316406 12.712501525878906 63.99108123779297 12.335628509521484 63.99108123779297 11.868782043457031 C 63.99108123779297 11.401931762695312 63.61426544189453 11.024940490722656 63.14741516113281 11.024940490722656 Z M 52.1224250793457 18.725339889526367 C 51.25056457519531 16.23348045349121 49.484283447265625 13.285980224609375 45.901023864746094 11.868541717529297 C 49.48416519165039 10.451040267944336 51.25038528442383 7.497900009155273 52.1224250793457 5.005740165710449 C 52.994285583496094 7.497600555419922 54.76056671142578 10.450740814208984 58.34382629394531 11.868541717529297 C 54.760684967041016 13.286041259765625 52.99446487426758 16.233539581298828 52.1224250793457 18.725339889526367 Z M 40.365570068359375 36.35979080200195 C 40.51744842529297 36.25291442871094 40.6018180847168 36.08416748046875 40.6018180847168 35.89854049682617 C 40.6018180847168 35.71291732788086 40.5174674987793 35.54416275024414 40.365596771240234 35.43729019165039 C 38.21687698364258 33.92414855957031 36.388736724853516 31.949790954589844 34.92623519897461 29.564788818359375 C 34.72367477416992 29.227291107177734 34.17245101928711 29.227291107177734 33.96995162963867 29.564788818359375 C 32.507450103759766 31.949790954589844 30.67931365966797 33.92414855957031 28.530593872070312 35.43729019165039 C 28.37871551513672 35.544166564941406 28.29434585571289 35.71291732788086 28.29434585571289 35.89854049682617 C 28.29434585571289 36.084163665771484 28.37872314453125 36.2529182434082 28.530593872070312 36.35979080200195 C 30.67931365966797 37.87293243408203 32.507450103759766 39.847293853759766 33.96995162963867 42.23229217529297 C 34.07120895385742 42.40104293823242 34.25120544433594 42.50229263305664 34.448081970214844 42.50229263305664 C 34.64495849609375 42.50229263305664 34.82495880126953 42.40104293823242 34.92620849609375 42.23229217529297 C 36.388710021972656 39.847293853759766 38.21685028076172 37.87293243408203 40.365570068359375 36.35979080200195 Z M 35.29182434082031 17.240341186523438 C 35.308624267578125 17.966341018676758 35.89362335205078 35.05493927001953 53.08902359008789 35.05493927001953 C 53.555870056152344 35.05493927001953 53.93274688720703 35.43181610107422 53.93274688720703 35.89866256713867 C 53.93274688720703 36.365509033203125 53.5558967590332 36.74238204956055 53.08902359008789 36.74238204956055 C 35.89368438720703 36.74238204956055 35.30870056152344 53.83134460449219 35.29182434082031 54.556983947753906 C 35.28060531616211 55.01821517944336 34.90932083129883 55.383846282958984 34.44810104370117 55.383846282958984 C 33.986881256103516 55.383846282958984 33.615631103515625 55.01823425292969 33.6043815612793 54.556983947753906 C 33.587581634521484 53.83098220825195 33.00258255004883 36.74238204956055 15.807182312011719 36.74238204956055 C 15.340333938598633 36.74238204956055 14.963462829589844 36.365509033203125 14.963462829589844 35.89866256713867 C 14.963462829589844 35.43181610107422 15.340309143066406 35.05493927001953 15.807182312011719 35.05493927001953 C 33.00252151489258 35.05493927001953 33.58750534057617 17.965980529785156 33.6043815612793 17.240341186523438 C 33.6156005859375 16.779109954833984 33.986881256103516 16.413480758666992 34.44810104370117 16.413480758666992 C 34.90932083129883 16.413480758666992 35.280574798583984 16.779090881347656 35.29182434082031 17.240341186523438 Z M 22.11222267150879 35.89854431152344 C 30.003902435302734 38.21034240722656 33.17634201049805 44.774940490722656 34.4476203918457 49.45494079589844 C 35.718421936035156 44.774940490722656 38.89122772216797 38.21040344238281 46.78302764892578 35.89854431152344 C 38.8913459777832 33.58674621582031 35.71889877319336 27.022140502929688 34.4476203918457 22.34214210510254 C 33.17681884765625 27.022140502929688 30.00402069091797 33.58668518066406 22.11222267150879 35.89854431152344 Z M 14.895349502563477 14.450569152832031 C 15.047222137451172 14.349311828613281 15.13722038269043 14.174942016601562 15.13722038269043 13.994941711425781 C 15.13722038269043 13.809318542480469 15.047222137451172 13.634941101074219 14.895349502563477 13.53369140625 C 13.88848876953125 12.824909210205078 13.033489227294922 11.896770477294922 12.347208023071289 10.777412414550781 C 12.245952606201172 10.608661651611328 12.065959930419922 10.50741195678711 11.869081497192383 10.50741195678711 C 11.672203063964844 10.50741195678711 11.492202758789062 10.608661651611328 11.385331153869629 10.777412414550781 C 10.704690933227539 11.896831512451172 9.844050407409668 12.824970245361328 8.837190628051758 13.53369140625 C 8.690940856933594 13.640567779541016 8.600940704345703 13.80931282043457 8.600940704345703 13.994941711425781 C 8.600940704345703 14.174942016601562 8.690940856933594 14.349319458007812 8.837190628051758 14.450569152832031 C 9.844050407409668 15.15934944152832 10.704690933227539 16.087488174438477 11.385331153869629 17.20684814453125 C 11.492209434509277 17.375598907470703 11.672203063964844 17.476848602294922 11.869081497192383 17.476848602294922 C 12.065959930419922 17.476848602294922 12.24595832824707 17.375598907470703 12.347208023071289 17.20684814453125 C 13.033489227294922 16.08742904663086 13.88848876953125 15.159290313720703 14.895349502563477 14.450569152832031 Z M 22.89402198791504 13.15134048461914 C 17.977741241455078 13.15134048461914 15.435420989990234 10.70448112487793 14.124420166015625 8.206981658935547 C 12.80813980102539 5.703840255737305 12.7181396484375 3.15570068359375 12.71255874633789 2.947620391845703 C 12.701309204101562 2.491992950439453 12.324432373046875 2.126340866088867 11.868841171264648 2.126340866088867 C 11.407590866088867 2.126340866088867 11.036340713500977 2.491969108581543 11.025120735168457 2.947620391845703 C 11.013871192932129 3.363870620727539 10.665121078491211 13.15121841430664 0.8437204360961914 13.15121841430664 C 0.3768482208251953 13.15121841430664 0 13.528091430664062 0 13.994941711425781 C 0 14.456192016601562 0.37687206268310547 14.838661193847656 0.8437204360961914 14.838661193847656 C 10.665121078491211 14.838661193847656 11.013720512390137 24.620460510253906 11.025120735168457 25.036861419677734 C 11.036370277404785 25.492488861083984 11.407621383666992 25.858139038085938 11.868841171264648 25.858139038085938 C 12.324470520019531 25.858139038085938 12.701339721679688 25.492515563964844 12.71255874633789 25.036861419677734 C 12.723808288574219 24.62061309814453 13.066930770874023 14.838661193847656 22.893959045410156 14.838661193847656 C 23.355209350585938 14.838661193847656 23.737680435180664 14.456161499023438 23.737680435180664 13.994941711425781 C 23.737680435180664 13.528068542480469 23.355241775512695 13.15134048461914 22.89402198791504 13.15134048461914 Z M 11.869020462036133 20.85173988342285 C 10.997159957885742 18.359880447387695 9.230880737304688 15.41238021850586 5.64762020111084 13.994941711425781 C 9.23076057434082 12.571800231933594 10.996980667114258 9.624300003051758 11.869020462036133 7.132140159606934 C 12.740880966186523 9.624000549316406 14.507160186767578 12.571500778198242 18.090421676635742 13.994941711425781 C 14.507282257080078 15.41244125366211 12.741060256958008 18.359939575195312 11.869020462036133 20.85173988342285 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+
+    SvgPathItem {
+        id: material_Vector
+        x: 10
+        y: 10
+        width: 53
+        height: 53
+        path: "M 26.30280113220215 0 C 11.801400184631348 0 0 11.79539966583252 0 26.29680061340332 C 0 40.79820251464844 11.801400184631348 52.59360122680664 26.30280113220215 52.59360122680664 C 27.06216049194336 52.59360122680664 27.815940856933594 52.55422592163086 28.5640811920166 52.49235153198242 C 35.28588104248047 51.91297912597656 41.29368209838867 48.80235290527344 45.624481201171875 44.11095428466797 C 49.95012283325195 39.425315856933594 52.599483489990234 33.16455078125 52.599483489990234 26.296350479125977 C 52.599483489990234 11.794949531555176 40.804203033447266 0 26.30280113220215 0 Z M 1.687800407409668 26.29680061340332 C 1.687800407409668 25.672441482543945 1.721550464630127 25.059301376342773 1.7665504217147827 24.4461612701416 L 24.45195198059082 1.7607595920562744 C 25.065092086791992 1.7157596349716187 25.678234100341797 1.6876318454742432 26.302593231201172 1.6876318454742432 C 27.8719539642334 1.6876318454742432 29.401952743530273 1.8395037651062012 30.892593383789062 2.1207597255706787 L 2.126190662384033 30.88715934753418 C 1.8449406623840332 29.402158737182617 1.687800407409668 27.866161346435547 1.687800407409668 26.29680061340332 Z M 5.366520404815674 39.21720504760742 L 39.223323822021484 5.3603997230529785 C 40.6070442199707 6.221039772033691 41.900821685791016 7.211041450500488 43.08768081665039 8.319121360778809 L 8.324880599975586 43.08192443847656 C 7.216740608215332 41.89506530761719 6.22152042388916 40.606563568115234 5.366520404815674 39.21720504760742 Z M 14.895120620727539 48.0989990234375 L 48.0997200012207 14.894400596618652 C 48.90972137451172 16.435680389404297 49.56222152709961 18.066898345947266 50.029083251953125 19.78253936767578 L 19.783681869506836 50.0279426574707 C 18.073680877685547 49.555442810058594 16.4364013671875 48.909000396728516 14.895120620727539 48.0989990234375 Z M 30.943323135375977 50.46149826049805 L 50.46792221069336 30.936904907226562 C 48.57792282104492 40.79190444946289 40.79832458496094 48.57689666748047 30.943323135375977 50.46149826049805 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+
+    SvgPathItem {
+        id: d_Vector
+        x: 15
+        y: 15
+        width: 43
+        height: 43
+        path: "M 42.15907669067383 0.0056247711181640625 C 42.26033401489258 0.0056247711181640625 42.36157989501953 0.022500038146972656 42.45720672607422 0.061875343322753906 C 42.7722053527832 0.19123554229736328 42.974674224853516 0.5005912780761719 42.974674224853516 0.843719482421875 L 42.974674224853516 32.5123176574707 C 42.974674224853516 32.73169708251953 42.884674072265625 32.95106506347656 42.7271728515625 33.10856628417969 L 33.10857391357422 42.727169036865234 C 33.02981948852539 42.80592346191406 32.9341926574707 42.8677978515625 32.832942962646484 42.91279602050781 C 32.82731628417969 42.91279602050781 32.82169723510742 42.91279220581055 32.816070556640625 42.918418884277344 C 32.7204475402832 42.95216751098633 32.61919403076172 42.97467041015625 32.51232147216797 42.97467041015625 L 0.843719482421875 42.97467041015625 C 0.37687206268310547 42.97467041015625 0 42.59782028198242 0 42.13094711303711 L 0 10.462352752685547 C 0 10.355476379394531 0.022500038146972656 10.254230499267578 0.05624961853027344 10.15860366821289 C 0.061875343322753906 10.152978897094727 0.061875343322753906 10.147354125976562 0.061875343322753906 10.141727447509766 C 0.10687541961669922 10.040472030639648 0.16875267028808594 9.944849014282227 0.24750232696533203 9.866100311279297 L 9.86610221862793 0.24750041961669922 C 10.023601531982422 0.09000015258789062 10.24298095703125 0 10.462352752685547 0 L 42.130950927734375 0 C 42.136573791503906 0 42.14079284667969 0.0014057159423828125 42.14501190185547 0.0028123855590820312 C 42.14923095703125 0.00421905517578125 42.15345001220703 0.0056247711181640625 42.15907669067383 0.0056247711181640625 Z M 2.880006790161133 9.618675231933594 L 32.163604736328125 9.618675231933594 L 40.09500503540039 1.6872749328613281 L 10.811405181884766 1.6872749328613281 L 2.880006790161133 9.618675231933594 Z M 33.355804443359375 40.09507369995117 L 41.28720474243164 32.16367721557617 L 41.28720474243164 2.880075454711914 L 33.355804443359375 10.811473846435547 L 33.355804443359375 40.09507369995117 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+    states: [
+        State {
+            name: "state_name_Effects"
+
+            PropertyChanges {
+                target: d_Vector
+                visible: false
+            }
+
+            PropertyChanges {
+                target: material_Vector
+                visible: false
+            }
+        },
+        State {
+            name: "state_name_Material"
+            extend: "state_name_Effects"
+
+            PropertyChanges {
+                target: effect_Vector
+                visible: false
+            }
+
+            PropertyChanges {
+                target: material_Vector
+                visible: true
+            }
+        },
+        State {
+            name: "state_name_3D_model"
+            extend: "state_name_Effects"
+
+            PropertyChanges {
+                target: d_Vector
+                visible: true
+            }
+
+            PropertyChanges {
+                target: effect_Vector
+                visible: false
+            }
+
+            PropertyChanges {
+                target: material_Vector
+                visible: false
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:72;width:72}D{i:1;uuid:"c43782ce-3278-5d5b-a2f6-5056f87c6b19"}D{i:2;uuid:"ae32c45d-71cf-59b6-9c01-25d3806fa597"}
+D{i:3;uuid:"4dbc727d-8f09-5480-963b-f80d11d46969"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox.ui.qml
new file mode 100644
index 000000000..fd1b7f6ad
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox.ui.qml
@@ -0,0 +1,73 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+import QtQuick.Shapes
+
+Item {
+    id: iconsCheckbox
+    width: 28
+    height: 28
+    state: "state_name_CheckEmpty"
+
+    ArcItem {
+        id: checkEmptyVector
+        x: 2
+        y: 2
+        width: 24
+        height: 24
+        begin: 90
+        end: 450.00001
+        fillColor: "transparent"
+        antialiasing: true
+        strokeColor: "#989899"
+        arcWidth: 12
+        outlineArc: true
+        strokeWidth: 1
+    }
+
+    SvgPathItem {
+        id: checkFilledVector
+        x: 2
+        y: 2
+        width: 24
+        height: 24
+        path: "M 12 24 C 18.627416610717773 24 24 18.627416610717773 24 12 C 24 5.372582912445068 18.627416610717773 0 12 0 C 5.372582912445068 0 0 5.372582912445068 0 12 C 0 18.627416610717773 5.372582912445068 24 12 24 Z M 9.666585922241211 17.83333396911621 L 3.833251953125 12 L 5.4782514572143555 10.354999542236328 L 9.666585922241211 14.531667709350586 L 18.521587371826172 5.676666259765625 L 20.16658592224121 7.3333330154418945 L 9.666585922241211 17.83333396911621 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+    states: [
+        State {
+            name: "state_name_CheckEmpty"
+
+            PropertyChanges {
+                target: checkFilledVector
+                visible: false
+            }
+        },
+        State {
+            name: "state_name_CheckFilled"
+            extend: "state_name_CheckEmpty"
+
+            PropertyChanges {
+                target: checkFilledVector
+                visible: true
+            }
+
+            PropertyChanges {
+                target: checkEmptyVector
+                visible: false
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"1d835453-f12d-55cc-93b6-64b6520c15c5"}D{i:1;uuid:"5cff71a4-0143-5689-a7e2-e2566dc04940"}
+D{i:2;uuid:"233f1ecd-a0e7-5ffc-8ae4-7e08d2732e7b"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox_1.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox_1.ui.qml
new file mode 100644
index 000000000..b292e7c47
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsCheckbox_1.ui.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+import QtQuick.Shapes
+
+Item {
+    id: iconsCheckbox
+    width: 28
+    height: 28
+    state: "state_name_CheckEmpty"
+
+    ArcItem {
+        id: checkEmptyVector
+        x: 2
+        y: 2
+        width: 24
+        height: 24
+        visible: false
+        begin: 90
+        end: 450.00001
+        fillColor: "transparent"
+        antialiasing: true
+        strokeColor: "#989899"
+        arcWidth: 12
+        outlineArc: true
+        strokeWidth: 1
+    }
+
+    SvgPathItem {
+        id: checkFilledVector
+        x: 2
+        y: 2
+        width: 24
+        height: 24
+        visible: false
+        path: "M 12 24 C 18.627416610717773 24 24 18.627416610717773 24 12 C 24 5.372582912445068 18.627416610717773 0 12 0 C 5.372582912445068 0 0 5.372582912445068 0 12 C 0 18.627416610717773 5.372582912445068 24 12 24 Z M 9.666585922241211 17.83333396911621 L 3.833251953125 12 L 5.4782514572143555 10.354999542236328 L 9.666585922241211 14.531667709350586 L 18.521587371826172 5.676666259765625 L 20.16658592224121 7.3333330154418945 L 9.666585922241211 17.83333396911621 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+    states: [
+        State {
+            name: "state_name_CheckEmpty"
+
+            PropertyChanges {
+                target: checkEmptyVector
+                visible: true
+            }
+        },
+        State {
+            name: "state_name_CheckFilled"
+
+            PropertyChanges {
+                target: checkFilledVector
+                visible: true
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:28;width:28}D{i:1;uuid:"4c637224-c99e-5eea-b42c-930909e37dd7"}D{i:2;uuid:"1c35c035-31b4-5c3b-a256-d071255c8171"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsFunctional.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsFunctional.ui.qml
new file mode 100644
index 000000000..ce8c08052
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/IconsFunctional.ui.qml
@@ -0,0 +1,68 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+
+Item {
+    id: iconsFunctional
+    width: 48
+    height: 48
+    state: "state_icon_Close"
+
+    SvgPathItem {
+        id: close_Vector
+        x: 10
+        y: 10
+        width: 28
+        height: 28
+        path: "M 25.180004119873047 0 L 28.000003814697266 2.8199996948242188 L 16.82000160217285 14.000001907348633 L 28.000003814697266 25.180004119873047 L 25.180004119873047 28.000003814697266 L 14.000001907348633 16.82000160217285 L 2.8199996948242188 28.000003814697266 L 0 25.180004119873047 L 11.180000305175781 14.000001907348633 L 0 2.8199996948242188 L 2.8199996948242188 0 L 14.000001907348633 11.180000305175781 L 25.180004119873047 0 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+
+    SvgPathItem {
+        id: arrow_Vector
+        x: 8
+        y: 8
+        width: 32
+        height: 32
+        path: "M 13.180000305175781 2.8199996948242188 L 16 0 L 32 16 L 16 32 L 13.180000305175781 29.18000030517578 L 24.34000015258789 17.999998092651367 L 0 17.999998092651367 L 0 14 L 24.34000015258789 14 L 13.180000305175781 2.8199996948242188 Z"
+        fillColor: "#ffffff"
+        strokeWidth: 1
+        strokeColor: "transparent"
+    }
+    states: [
+        State {
+            name: "state_icon_Close"
+
+            PropertyChanges {
+                target: arrow_Vector
+                visible: false
+            }
+        },
+        State {
+            name: "state_icon_ArrowRight"
+            extend: "state_icon_Close"
+
+            PropertyChanges {
+                target: close_Vector
+                visible: false
+            }
+
+            PropertyChanges {
+                target: arrow_Vector
+                visible: true
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"cc6a230c-8aa4-5be8-9645-07e3db2ac100"}D{i:1;uuid:"d8c7d35b-ba9a-58be-a046-a12fc4a6761b"}
+D{i:2;uuid:"3076d5e4-0f44-5782-8399-5bc34efa43a0"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/LabelQt.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LabelQt.ui.qml
new file mode 100644
index 000000000..c8bf867f0
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LabelQt.ui.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: labelQt
+    width: 248
+    height: 80
+    property alias built_with_QtText: built_with_Qt.text
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 248
+        height: 80
+        color: "#222222"
+        radius: 8
+    }
+
+    Text {
+        id: built_with_Qt
+        x: 28
+        y: 26
+        width: 116
+        height: 28
+        color: "#ffffff"
+        text: qsTr("Built with Qt")
+        font.pixelSize: 20
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        font.family: "Archivo"
+        font.weight: Font.Bold
+    }
+
+    Rectangle {
+        id: qt_logo
+        y: 21
+        width: 51
+        height: 38
+        color: "transparent"
+        anchors.right: parent.right
+        anchors.rightMargin: 27
+        clip: true
+        Image {
+            source: "assets/qtlogo.png"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"314987a3-c4c0-5399-9285-490b3fa1727f"}D{i:1;uuid:"4d65dfb8-1b3e-5585-a24e-a7c2d555dac2"}
+D{i:2;uuid:"fbc07ec5-79f9-5b39-8692-73c80f372942"}D{i:4;uuid:"3e4a2a64-9faf-5c69-bbb0-07bd939efcf8"}
+D{i:3;uuid:"864d959f-75d4-5ada-80c0-76c16bbf5fff"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutFull.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutFull.ui.qml
new file mode 100644
index 000000000..1856aafc1
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutFull.ui.qml
@@ -0,0 +1,101 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls 6.3
+
+Rectangle {
+    id: layoutFull
+    width: 1920
+    height: 1080
+    color: "#00ffffff"
+    border.color: "#00000000"
+    property bool debugOn: button.checked
+
+    LabelQt {
+        id: labelQt
+        x: 1644
+        y: 972
+        width: 248
+        height: 80
+
+        Button {
+            id: button
+            opacity: 0
+            text: qsTr("")
+            anchors.fill: parent
+            checkable: true
+            display: AbstractButton.TextOnly
+        }
+    }
+
+    Button {
+        id: settingsbutton
+        x: 28
+        y: 972
+        width: 311
+        height: 80
+        scale: 1.0 - menutransition_open.phase * 0.5
+        opacity: 1 - menutransition_open.phase
+        state: "state_state_Idle"
+
+        background: Rectangle {
+            implicitWidth: 0
+            implicitHeight: 0
+            opacity: 0
+            border.color: "#000000"
+            border.width: 0
+            radius: 2
+            color: settingsbutton.pressed ? "#B8B8B9" : (settingsbutton.hovered ? "#5C5C5D" : (settingsbutton.checked ? "#3D3D3E" : "#222222"))
+        }
+
+        Connections {
+            target: settingsbutton
+            onClicked: menutransition_open.start()
+        }
+
+        Rectangle {
+            id: bg
+            x: 0
+            y: 0
+            width: 311
+            height: 80
+            color: settingsbutton.pressed ? "#B8B8B9" : (settingsbutton.hovered ? "#5C5C5D" : (settingsbutton.checked ? "#3D3D3E" : "#222222"))
+            radius: 8
+        }
+
+        Text {
+            id: open_setting_panel
+            x: 28
+            y: 26
+            width: 180
+            height: 28
+            color: "#ffffff"
+            text: qsTr("Open setting panel")
+            font.pixelSize: 20
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
+            font.weight: Font.Bold
+            font.family: "Archivo"
+        }
+
+        IconsFunctional {
+            id: iconsFunctional
+            x: 235
+            y: 16
+            width: 48
+            height: 48
+            clip: true
+            state: "state_icon_ArrowRight"
+        }
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:1080;width:1920}D{i:1;uuid:"462816af-d13a-5644-b82e-550e6ea71900"}D{i:5;uuid:"c7c4867f-637a-5518-aceb-7f1dd2290416"}
+D{i:6;uuid:"5266f2b1-d65a-5433-a9f7-76f929ec337c"}D{i:7;uuid:"fb09fa68-07b0-5e3d-ab6a-51d549302bbe"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutSidePanel.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutSidePanel.ui.qml
new file mode 100644
index 000000000..9dc1f6a50
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/LayoutSidePanel.ui.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    id: layoutSidePanel
+    width: 1920
+    height: 1080
+    color: "#00ffffff"
+    border.color: "#00ffffff"
+
+    Material_pop_up {
+        id: material_pop_up
+        x: 0
+        y: 0
+        width: 636
+        height: 1080
+        clip: true
+        state: "state_type_Materials"
+    }
+
+    LabelQt {
+        id: labelQt
+        x: 1644
+        y: 972
+        width: 248
+        height: 80
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"751cad8e-e09f-5bc0-8892-9425429e1d58"}D{i:1;uuid:"5ef21d17-7d2a-52e7-bc56-01caf4363781"}
+D{i:2;uuid:"0b85865c-5a98-58ce-b526-856fd3a1631d"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListEffects.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListEffects.ui.qml
new file mode 100644
index 000000000..fa5e23930
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListEffects.ui.qml
@@ -0,0 +1,134 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: listEffects
+    width: 580
+    height: 1050
+
+    property string selection: "None"
+
+    State_Idle {
+        id: none
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+        item_nameText: "None"
+        checkboxImagesState: "state_type_Effects_Number_8"
+    }
+
+    State_Idle {
+        id: rain
+        x: 0
+        y: 96
+        width: 580
+        height: 88
+        item_nameText: "Rain"
+        checkboxImagesState: "state_type_Effects_Number_6"
+    }
+
+    State_Idle {
+        id: snow
+        x: 0
+        y: 192
+        width: 580
+        height: 88
+        item_nameText: "Snow"
+        checkboxImagesState: "state_type_Effects_Number_5"
+    }
+
+    State_Idle {
+        id: smole
+        x: 0
+        y: 288
+        width: 580
+        height: 88
+        item_nameText: "Smoke"
+        checkboxImagesState: "state_type_Effects_Number_4"
+    }
+
+    State_Idle {
+        id: heatwave
+        x: 0
+        y: 384
+        width: 580
+        height: 88
+        item_nameText: "Heatwave"
+        checkboxImagesState: "state_type_Effects_Number_3"
+    }
+
+    State_Idle {
+        id: other1
+        x: 0
+        y: 480
+        width: 580
+        height: 88
+        item_nameText: "Sparks"
+        checkboxImagesState: "state_type_Effects_Number_2"
+    }
+
+    State_Idle {
+        id: other2
+        x: 0
+        y: 576
+        width: 580
+        height: 88
+        item_nameText: "Flames"
+        checkboxImagesState: "state_type_Effects_Number_1"
+    }
+
+    State_Idle {
+        id: other21
+        x: 0
+        y: 672
+        width: 580
+        height: 88
+        item_nameText: "Dust"
+        checkboxImagesState: "state_type_Effects_Number_7"
+    }
+
+    State_Idle {
+        id: other22
+        x: 0
+        y: 768
+        width: 580
+        height: 88
+        item_nameText: "Clouds"
+        checkboxImagesState: "state_type_Effects_Number_9"
+    }
+
+    State_Idle {
+        id: other23
+        x: 0
+        y: 865
+        width: 580
+        height: 88
+        item_nameText: "Explosion"
+        checkboxImagesState: "state_type_Effects_Number_10"
+    }
+
+    State_Idle {
+        id: other24
+        x: 0
+        y: 962
+        width: 580
+        height: 88
+        item_nameText: "Bubbles"
+        checkboxImagesState: "state_type_Effects_Number_11"
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:1050;width:580}D{i:1;uuid:"1a64e024-c630-5dad-a09f-be30d0edc445"}D{i:2;uuid:"e80a93e7-1251-5ba2-9545-47409bf0be1c"}
+D{i:3;uuid:"476cae96-dacf-5b5d-a34f-40ca069814a1"}D{i:4;uuid:"c6959992-fe57-5f49-8a74-c5e1c2404921"}
+D{i:5;uuid:"e495756c-e8df-58cb-8c3c-ce71f0b14c4f"}D{i:6;uuid:"9ab1c75c-f885-51dd-a7ad-4d3fee391b09"}
+D{i:7;uuid:"5552fc87-577d-5949-bb60-280a608ba544"}D{i:8;uuid:"281906eb-de7b-5ea1-a3bd-afdcaaf4e5f9"}
+D{i:9;uuid:"aaca4b05-0a5d-53ca-876e-806142e3e720"}D{i:10;uuid:"bde4ea91-d841-5df7-b133-0b69dc180cb9"}
+D{i:11;uuid:"0ea1def8-1ad9-5b73-91c5-d5a53d3ec553"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListMaterial.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListMaterial.ui.qml
new file mode 100644
index 000000000..100eaeed2
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListMaterial.ui.qml
@@ -0,0 +1,119 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: listMaterial
+    width: 580
+    height: 952
+    property alias silverBtn: silverBtn
+    property string selection: "Silver"
+
+    State_Idle {
+        id: silverBtn
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+        item_nameText: "Silver"
+        checkboxImagesState: "state_type_Materials_Number_10"
+    }
+
+    State_Idle {
+        id: brushedSteelBtn
+        x: 0
+        y: 96
+        width: 580
+        height: 88
+        item_nameText: "Brushed Steel"
+        checkboxImagesState: "state_type_Materials_Number_9"
+    }
+
+    State_Idle {
+        id: copperBtn
+        x: 0
+        y: 192
+        width: 580
+        height: 88
+        item_nameText: "Copper"
+        checkboxImagesState: "state_type_Materials_Number_8"
+    }
+
+    State_Idle {
+        id: glassBtn
+        x: 0
+        y: 288
+        width: 580
+        height: 88
+        item_nameText: "Wax"
+        checkboxImagesState: "state_type_Materials_Number_7"
+    }
+
+    State_Idle {
+        id: woodBtn
+        x: 0
+        y: 384
+        width: 580
+        height: 88
+        item_nameText: "Wood"
+        checkboxImagesState: "state_type_Materials_Number_6"
+    }
+
+    State_Idle {
+        id: stoneBtn
+        x: 0
+        y: 480
+        width: 580
+        height: 88
+        item_nameText: "Stone"
+        checkboxImagesState: "state_type_Materials_Number_5"
+    }
+
+    State_Idle {
+        id: carbonFiberBtn
+        x: 0
+        y: 576
+        width: 580
+        height: 88
+        item_nameText: "Carbon Fiber"
+        checkboxImagesState: "state_type_Materials_Number_4"
+    }
+
+    State_Idle {
+        id: plasticBtn
+        x: 0
+        y: 672
+        width: 580
+        height: 88
+        item_nameText: "Plastic"
+        checkboxImagesState: "state_type_Materials_Number_3"
+    }
+
+    State_Idle {
+        id: fabricBtn
+        x: 0
+        y: 768
+        width: 580
+        height: 88
+        item_nameText: "Fabric"
+        checkboxImagesState: "state_type_Materials_Number_2"
+    }
+
+    State_Idle {
+        id: leatherBtn
+        x: 0
+        y: 864
+        width: 580
+        height: 88
+        item_nameText: "Leather"
+        checkboxImagesState: "state_type_Materials_Number_1"
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:952;width:580}D{i:1;uuid:"48276ca8-dc8a-53e9-91d0-ff5e4d5eb722"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListModels.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListModels.ui.qml
new file mode 100644
index 000000000..0375c2a4b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/ListModels.ui.qml
@@ -0,0 +1,60 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: listModels
+    width: 580
+    height: 376
+    property alias rabbit: rabbit
+    property string selection: "Dragon"
+
+    State_Idle {
+        id: rabbit
+        x: 0
+        y: 96
+        width: 580
+        height: 88
+        item_nameText: "Rabbit"
+        checkboxImagesState: "state_type_3DModel_Number_2"
+    }
+
+    State_Idle {
+        id: none
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+        item_nameText: "None"
+        checkboxImagesState: "state_type_3DModel_Number_1"
+    }
+
+    State_Idle {
+        id: headbust
+        x: 0
+        y: 288
+        width: 580
+        height: 88
+        item_nameText: "Dragon"
+        checkboxImagesState: "state_type_3DModel_Number_4"
+    }
+
+    State_Idle {
+        id: qtMaterialBall
+        x: 0
+        y: 192
+        width: 580
+        height: 88
+        item_nameText: "Qt material ball"
+        checkboxImagesState: "state_type_3DModel_Number_3"
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:376;width:580}D{i:1;uuid:"5655c12e-3314-5270-93f1-30393ca6bd10"}D{i:2;uuid:"0f43834f-bd09-5e54-9317-6683c9f3a480"}
+D{i:3;uuid:"48016141-dc04-548b-9ba4-25ab1bf3ee95"}D{i:4;uuid:"db69947c-c4ea-5fde-a1a9-c3535ae3e73d"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/Material_pop_up.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Material_pop_up.ui.qml
new file mode 100644
index 000000000..3df6b665a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Material_pop_up.ui.qml
@@ -0,0 +1,256 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick3D.Helpers
+
+Item {
+    id: material_pop_up
+    x: (1 - menutransition_open.phase) * -636
+    width: 636
+    height: 1080
+    opacity: menutransition_open.phase
+    property alias setting_panelText: setting_panel.text
+    property alias effectsL: listEffects
+    property alias modelsL: listModels
+    property alias matsL: listMaterial
+    property alias matSelection: listMaterial.selection
+    state: "state_type_Materials"
+
+    Rectangle {
+        id: bg
+        anchors.fill: parent
+        color: "#222222"
+    }
+
+    Scrollbar {
+        id: scrollbar
+        y: 288
+        width: 4
+        height: 764
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+        scrollPos: mouseScroll.normalizedValue > 1 ? 1 : mouseScroll.normalizedValue
+    }
+
+    MouseScroll {
+        id: mouseScroll
+        width: bg.width
+        height: bg.height
+        anchors.top: parent.top
+        anchors.topMargin: 300
+        maxValue: 200
+        minValue: 0
+    }
+
+    MouseArea {
+        id: mouseAreaList
+        width: bg.width
+        height: bg.height
+
+        Connections {
+            target: mouseAreaList
+            property real speed: 0.3
+            onWheel: (wheel) => mouseScroll.curValue = (mouseScroll.curValue + wheel.angleDelta.y * speed
+                        < mouseScroll.minValue) ? mouseScroll.minValue : ((mouseScroll.curValue + wheel.angleDelta.y * speed > mouseScroll.maxValue) ? mouseScroll.maxValue : mouseScroll.curValue + wheel.angleDelta.y * speed)
+        }
+    }
+
+    ListMaterial {
+        id: listMaterial
+        x: 28
+        y: 288
+        width: 580
+        height: 636
+        visible: false
+        property alias list: listMaterial
+    }
+
+    ListEffects {
+        id: listEffects
+        x: 28
+        y: 288
+        width: 580
+        height: 1050
+        visible: false
+        property alias list: listEffects
+    }
+
+    ListModels {
+        id: listModels
+        x: 28
+        y: 288
+        width: 580
+        height: 376
+        visible: false
+        property alias list: listModels
+    }
+
+    Rectangle {
+        id: bg1
+        height: 288
+        color: "#222222"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.rightMargin: 0
+        anchors.leftMargin: 0
+        anchors.topMargin: 0
+    }
+
+    IconsFunctional {
+        id: iconsFunctional
+        width: 48
+        height: 48
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 28
+        clip: true
+        state: "state_icon_Close"
+        anchors.verticalCenterOffset: -488
+
+        Button {
+            id: button
+            opacity: 0
+            text: qsTr("")
+            anchors.fill: parent
+            display: AbstractButton.TextOnly
+
+            Connections {
+                target: button
+                onClicked: rectangle1.settingsopen = false
+            }
+
+            Connections {
+                target: button
+                onClicked: menutransition_close.start()
+            }
+        }
+    }
+
+    Text {
+        id: setting_panel
+        x: 28
+        y: 32
+        width: 176
+        height: 40
+        color: "#ffffff"
+        text: qsTr("Setting panel")
+        font.pixelSize: 30
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        font.family: "Archivo"
+        font.weight: Font.Normal
+    }
+
+    CardMaterial {
+        id: card3DModels
+        x: 420
+        y: 100
+        width: 188
+        height: 160
+        materialText: "3D models"
+        selectionID: "state_type_3D_models"
+        iconsCardsState: "state_name_3D_model"
+    }
+
+    CardMaterial {
+        id: cardMaterial
+        x: 28
+        y: 100
+        width: 188
+        height: 160
+        materialText: "Materials"
+        selectionID: "state_type_Materials"
+        iconsCardsState: "state_name_Material"
+    }
+
+    CardMaterial {
+        id: cardEffects
+        x: 224
+        y: 100
+        width: 188
+        height: 160
+        materialText: "Effects"
+        selectionID: "state_type_Effects"
+        iconsCardsState: "state_name_Effects"
+    }
+
+    states: [
+        State {
+            name: "state_type_Materials"
+
+            PropertyChanges {
+                target: listMaterial
+                visible: true
+                y: 288 - (mouseScroll.curValue > 180 ? 180 : mouseScroll.curValue)
+            }
+
+            PropertyChanges {
+                target: cardMaterial
+                state: "state_state_Active"
+            }
+
+            PropertyChanges {
+                target: mouseScroll
+                maxValue: 180
+            }
+        },
+        State {
+            name: "state_type_Effects"
+
+            PropertyChanges {
+                target: listEffects
+                visible: true
+                y: 288 - mouseScroll.curValue
+            }
+
+            PropertyChanges {
+                target: scrollbar
+                visible: true
+            }
+
+            PropertyChanges {
+                target: cardEffects
+                state: "state_state_Active"
+            }
+
+            PropertyChanges {
+                target: mouseScroll
+                maxValue: 280
+            }
+        },
+        State {
+            name: "state_type_3D_models"
+
+            PropertyChanges {
+                target: listModels
+                visible: true
+            }
+
+            PropertyChanges {
+                target: scrollbar
+                visible: false
+            }
+
+            PropertyChanges {
+                target: card3DModels
+                state: "state_state_Active"
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;height:1080;width:636}D{i:1;uuid:"86f97c70-70e8-521e-89d9-030a4ad25d96"}D{i:2;uuid:"61d97dfb-bcb1-5349-b95e-1af2f40e6a16"}
+D{i:6;uuid:"6a7f3dee-c8de-5bc9-bf1e-4fe9a90f6532"}D{i:7;uuid:"0ea32f9e-8e4f-5682-a9bb-5ab31dadcec5"}
+D{i:8;uuid:"f9d3179e-957d-5adc-9ad7-3499fde6fb21"}D{i:9;uuid:"86f97c70-70e8-521e-89d9-030a4ad25d96"}
+D{i:10;uuid:"7f9fbcda-099b-5ba4-8537-831fb61a0a4c"}D{i:14;uuid:"ad97d5ce-1828-5bf5-a684-6a124c8cd64d"}
+D{i:15;uuid:"192c6cf4-144a-527d-b03e-6a7a2635cbfa"}D{i:16;uuid:"9b328eb3-eafa-54a7-ba9f-cc8f646a3a8c"}
+D{i:17;uuid:"571e854d-d72c-523b-8318-4a7896028de1"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/MouseScroll.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/MouseScroll.qml
new file mode 100644
index 000000000..80797f9a2
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/MouseScroll.qml
@@ -0,0 +1,285 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+Item {
+    id: root
+    property real curValue: 0.5
+    property real maxValue: 1
+    property real minValue: 0
+
+    property real normalizedValue: (curValue - minValue) / (maxValue - minValue)
+
+    property real speed: 1
+    property real shiftSpeed: 3
+
+    property real forwardSpeed: 5
+    property real backSpeed: 5
+    property real rightSpeed: 5
+    property real leftSpeed: 5
+    property real upSpeed: 5
+    property real downSpeed: 5
+    property real xSpeed: 0.1
+    property real ySpeed: 0.1
+
+    property bool xInvert: true
+    property bool yInvert: false
+
+    property bool mouseEnabled: true
+    property bool keysEnabled: true
+
+    readonly property bool inputsNeedProcessing: status.moveForward | status.moveBack
+                                                 | status.moveLeft | status.moveRight
+                                                 | status.moveUp | status.moveDown
+                                                 | status.useMouse
+
+    property alias acceptedButtons: dragHandler.acceptedButtons
+    width: 500
+    height: 500
+
+
+
+    implicitWidth: width
+    implicitHeight: height
+    focus: keysEnabled
+
+    DragHandler {
+        id: dragHandler
+        target: null
+        enabled: mouseEnabled
+        onCentroidChanged: {
+            mouseMoved(Qt.vector2d(centroid.position.x, centroid.position.y));
+        }
+
+        onActiveChanged: {
+            if (active)
+                mousePressed(Qt.vector2d(centroid.position.x, centroid.position.y));
+            else
+                mouseReleased(Qt.vector2d(centroid.position.x, centroid.position.y));
+        }
+    }
+
+    TapHandler {
+
+    }
+
+    Keys.onPressed: (event)=> { if (keysEnabled) handleKeyPress(event) }
+    Keys.onReleased: (event)=> { if (keysEnabled) handleKeyRelease(event) }
+
+    function mousePressed(newPos) {
+        status.currentPos = newPos
+        status.lastPos = newPos
+        status.useMouse = true;
+    }
+
+    function mouseReleased(newPos) {
+        status.useMouse = false;
+    }
+
+    function mouseMoved(newPos) {
+        status.currentPos = newPos;
+    }
+
+    function forwardPressed() {
+        status.moveForward = true
+        status.moveBack = false
+    }
+
+    function forwardReleased() {
+        status.moveForward = false
+    }
+
+    function backPressed() {
+        status.moveBack = true
+        status.moveForward = false
+    }
+
+    function backReleased() {
+        status.moveBack = false
+    }
+
+    function rightPressed() {
+        status.moveRight = true
+        status.moveLeft = false
+    }
+
+    function rightReleased() {
+        status.moveRight = false
+    }
+
+    function leftPressed() {
+        status.moveLeft = true
+        status.moveRight = false
+    }
+
+    function leftReleased() {
+        status.moveLeft = false
+    }
+
+    function upPressed() {
+        status.moveUp = true
+        status.moveDown = false
+    }
+
+    function upReleased() {
+        status.moveUp = false
+    }
+
+    function downPressed() {
+        status.moveDown = true
+        status.moveUp = false
+    }
+
+    function downReleased() {
+        status.moveDown = false
+    }
+
+    function shiftPressed() {
+        status.shiftDown = true
+    }
+
+    function shiftReleased() {
+        status.shiftDown = false
+    }
+
+    function handleKeyPress(event)
+    {
+        switch (event.key) {
+        case Qt.Key_W:
+        case Qt.Key_Up:
+            forwardPressed();
+            break;
+        case Qt.Key_S:
+        case Qt.Key_Down:
+            backPressed();
+            break;
+        case Qt.Key_A:
+        case Qt.Key_Left:
+            leftPressed();
+            break;
+        case Qt.Key_D:
+        case Qt.Key_Right:
+            rightPressed();
+            break;
+        case Qt.Key_R:
+        case Qt.Key_PageUp:
+            upPressed();
+            break;
+        case Qt.Key_F:
+        case Qt.Key_PageDown:
+            downPressed();
+            break;
+        case Qt.Key_Shift:
+            shiftPressed();
+            break;
+        }
+    }
+
+    function handleKeyRelease(event)
+    {
+        switch (event.key) {
+        case Qt.Key_W:
+        case Qt.Key_Up:
+            forwardReleased();
+            break;
+        case Qt.Key_S:
+        case Qt.Key_Down:
+            backReleased();
+            break;
+        case Qt.Key_A:
+        case Qt.Key_Left:
+            leftReleased();
+            break;
+        case Qt.Key_D:
+        case Qt.Key_Right:
+            rightReleased();
+            break;
+        case Qt.Key_R:
+        case Qt.Key_PageUp:
+            upReleased();
+            break;
+        case Qt.Key_F:
+        case Qt.Key_PageDown:
+            downReleased();
+            break;
+        case Qt.Key_Shift:
+            shiftReleased();
+            break;
+        }
+    }
+
+    Timer {
+        id: updateTimer
+        interval: 16
+        repeat: true
+        running: root.inputsNeedProcessing
+        onTriggered: {
+            processInputs();
+        }
+    }
+
+    function processInputs()
+    {
+        if (root.inputsNeedProcessing)
+            status.processInput();
+    }
+
+    QtObject {
+        id: status
+
+        property bool moveForward: false
+        property bool moveBack: false
+        property bool moveLeft: false
+        property bool moveRight: false
+        property bool moveUp: false
+        property bool moveDown: false
+        property bool shiftDown: false
+        property bool useMouse: false
+
+        property vector2d lastPos: Qt.vector2d(0, 0)
+        property vector2d currentPos: Qt.vector2d(0, 0)
+
+        function updatePosition(vector, speed, position)
+        {
+            if (shiftDown)
+                speed *= shiftSpeed;
+            else
+                speed *= root.speed
+
+            var direction = vector;
+            var velocity = Qt.vector3d(direction.x * speed,
+                                       direction.y * speed,
+                                       direction.z * speed);
+        }
+
+        function negate(vector)
+        {
+            return Qt.vector3d(-vector.x, -vector.y, -vector.z)
+        }
+
+        function processInput()
+        {
+            if (useMouse) {
+                var delta = lastPos.y - currentPos.y;
+                if (delta > 0)
+                    root.curValue = root.curValue+delta < root.maxValue ? root.curValue+delta : root.maxValue;
+                else if (delta < 0)
+                    root.curValue = root.curValue+delta > root.minValue ? root.curValue+delta : root.minValue;
+
+                lastPos = currentPos;
+            }
+        }
+    }
+
+    Item {
+        id: __materialLibrary__
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:1080;width:1920}
+}
+##^##*/
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/Scrollbar.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Scrollbar.ui.qml
new file mode 100644
index 000000000..5ee54415b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/Scrollbar.ui.qml
@@ -0,0 +1,40 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: scrollbar
+    width: 4
+    height: 764
+    anchors.right: parent.right
+    anchors.rightMargin: -24
+    property real scrollPos: 0
+
+    Rectangle {
+        id: base
+        x: 0
+        y: 0
+        width: 4
+        height: 764
+        color: "#1affffff"
+        radius: 8
+    }
+
+    Rectangle {
+        id: filing
+        x: 0
+        y: scrollbar.scrollPos * 183
+        width: 4
+        height: 581
+        color: "#ffffff"
+        radius: 8
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:764;width:4}D{i:1;uuid:"b67cda01-6e13-5f27-af3d-8696beeac4d2"}D{i:2;uuid:"90ac16c2-d7c5-5b9c-b9a1-812dcb63d874"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/State_Idle.ui.qml b/examples/demos/FX_Material_Showroom/content/Figma_Assets/State_Idle.ui.qml
new file mode 100644
index 000000000..a4642f093
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/State_Idle.ui.qml
@@ -0,0 +1,93 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick3D
+
+Item {
+    id: state_Idle
+    width: 580
+    height: 88
+    property string checkboxImagesState: "state_type_Materials_Number_1"
+    property alias item_nameText: item_name.text
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 580
+        height: 88
+        color: button.pressed ? "#B8B8B9" : (button.hovered ? "#5C5C5D" : (button.checked ? "#3D3D3E" : "#222222"))
+        radius: 8
+    }
+
+    CheckboxImages_1 {
+        id: checkboxImages
+        x: 8
+        y: 8
+        width: 72
+        height: 72
+        state: state_Idle.checkboxImagesState
+    }
+
+    Text {
+        id: item_name
+        x: 108
+        y: 30
+        width: 389
+        height: 28
+        color: "#ffffff"
+        text: qsTr("Item name")
+        font.pixelSize: 20
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        layer.smooth: false
+        layer.format: ShaderEffectSource.RGBA
+        layer.enabled: true
+        renderTypeQuality: Text.VeryHighRenderTypeQuality
+        enabled: true
+        smooth: false
+        antialiasing: true
+        font.hintingPreference: Font.PreferDefaultHinting
+        renderType: Text.NativeRendering
+        font.family: "Archivo"
+        font.weight: Font.Normal
+    }
+
+    IconsCheckbox_1 {
+        id: iconsCheckbox
+        x: 524
+        y: 30
+        width: 28
+        height: 28
+        state: list.selection
+               == state_Idle.item_nameText ? "state_name_CheckFilled" : "state_name_CheckEmpty"
+    }
+
+    Button {
+        id: button
+        opacity: 0
+        text: qsTr("")
+        anchors.fill: parent
+        checkable: true
+        checked: list.selection == state_Idle.item_nameText
+        Connections {
+            target: button
+            onClicked: list.selection = state_Idle.item_nameText
+        }
+    }
+
+    Item {
+        id: __materialLibrary__
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:88;width:580}D{i:1;uuid:"0d8ea12a-c87c-56f2-a989-694e642387f9"}D{i:2;uuid:"6e1c9cdb-ebb3-59f8-875a-56612e28949e"}
+D{i:3;uuid:"aef0d473-f1a3-5cdc-a25c-6a24bda97c05"}D{i:4;uuid:"766d8034-0b03-5b52-b443-99b705d3fa2a"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/qtlogo.png b/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/qtlogo.png
new file mode 100644
index 000000000..ee6b10d0d
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/qtlogo.png
diff --git a/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/vector.svg b/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/vector.svg
new file mode 100644
index 000000000..2646e1285
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Figma_Assets/assets/vector.svg
@@ -0,0 +1,5 @@
+<svg width="49" height="36" viewBox="0 0 49 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.79721 0L0 6.78019V36H42.2028L49 29.2198V0L6.79721 0Z" fill="white"/>
+<path d="M18.2373 28.187C15.014 28.187 12.7594 27.3207 11.4902 25.5882C10.2209 23.8556 9.5863 21.1069 9.5863 17.3753C9.5863 13.627 10.2376 10.845 11.5236 9.02916C12.8095 7.21334 15.0641 6.29709 18.2373 6.29709C21.4271 6.29709 23.665 7.19668 24.9343 9.0125C26.2202 10.8117 26.8549 13.5937 26.8549 17.3586C26.8549 19.8408 26.5877 21.8399 26.0699 23.3559C25.5355 24.8885 24.6838 26.0546 23.4813 26.8542L26.0866 31.0356L22.8968 32.5183L20.1412 28.0037C19.7404 28.137 19.1057 28.187 18.2373 28.187ZM14.2124 23.3725C14.9138 24.572 16.2666 25.1883 18.254 25.1883C20.2414 25.1883 21.5774 24.5886 22.2789 23.4058C22.9636 22.2231 23.3143 20.2073 23.3143 17.392C23.3143 14.5599 22.9636 12.5109 22.2455 11.2281C21.5273 9.9454 20.208 9.31236 18.254 9.31236C16.3167 9.31236 14.9806 9.9454 14.2458 11.2281C13.5277 12.5109 13.1603 14.5433 13.1603 17.3586C13.1603 20.1573 13.511 22.1731 14.2124 23.3725Z" fill="black"/>
+<path d="M38.8125 14.8598H34.5372V21.6733C34.5372 22.9394 34.6374 23.7723 34.8211 24.1888C35.0048 24.6053 35.4891 24.8052 36.2406 24.8052L38.7791 24.7052L38.9295 27.404C37.5433 27.6705 36.4911 27.8038 35.7563 27.8038C34.0027 27.8038 32.8003 27.404 32.1489 26.6043C31.4976 25.8047 31.1636 24.2887 31.1636 22.0564V14.8764H28.8088V11.9944H31.1803V7.51318H34.5372V11.9944H38.8125V14.8598Z" fill="black"/>
+</svg>
diff --git a/examples/demos/FX_Material_Showroom/content/FireEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/FireEffect.ui.qml
new file mode 100644
index 000000000..9f9097800
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/FireEffect.ui.qml
@@ -0,0 +1,138 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: fire
+    ParticleEmitter3D {
+        id: modelShapeEmitter4
+        x: 0
+        y: -45.815
+        particleScale: 20
+
+        enabled: fire.visible
+        emitRate: 50
+        particleRotation.x: 0
+        particleRotationVariation.x: 360
+        lifeSpanVariation: 0
+        particleRotationVariation.z: 360
+        system: fire
+        particleEndScaleVariation: 10
+        particleRotationVelocityVariation.y: 90
+        particleEndScale: 10
+        particleRotationVelocityVariation.z: 90
+        ModelParticle3D {
+            id: particleRed4
+            color: "#ffffff"
+            unifiedColorVariation: false
+            fadeInDuration: 1250
+            alignTargetPosition: sceneCamera.position
+            hasTransparency: true
+            colorVariation.z: 1
+            sortMode: Particle3D.SortDistance
+            fadeOutDuration: 250
+            colorVariation.y: 1
+            alignMode: Particle3D.AlignNone
+            maxAmount: 100
+            colorVariation.x: 1
+            colorVariation.w: 1
+        }
+        particle: particleRed4
+        particleRotation.y: 360
+        particleScaleVariation: 20
+        particleRotationVelocity.y: 0
+        particleRotationVelocityVariation.x: 90
+        shape: targetShape4
+        lifeSpan: 1500
+        particleRotationVariation.y: 360
+        particleRotationVelocity.x: 0
+        particleRotationVelocity.z: 0
+        z: -5.27116
+        particleRotation.z: 360
+    }
+
+    ParticleModelShape3D {
+        id: targetShape4
+        fill: false
+        delegate: Model {
+            source: "#Rectangle"
+            scale.x: 1
+            eulerRotation.x: -90
+            scale.y: 1
+        }
+    }
+
+    Gravity3D {
+        id: gravity4
+        magnitude: 300
+        direction.y: 1
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        castsShadows: true
+        receivesShadows: true
+        scale.z: 0.1
+        instancing: particleRed4.instanceTable
+        materials: fireMat
+        scale.y: 0.1
+        scale.x: 0.1
+        receivesReflections: true
+    }
+
+    Wander3D {
+        id: wander2
+        uniqueAmount.x: 10
+        uniquePace.x: 0.1
+        globalPaceStart.z: 0.1
+        globalAmount.z: 5
+        system: fire
+        uniquePaceVariation: 1
+        globalPace.y: 0.1
+        uniquePace.y: 0.1
+        particles: particleRed4
+        uniquePace.z: 0.1
+        globalPaceStart.y: 0.1
+        uniqueAmount.z: 10
+        globalPaceStart.x: 0.1
+        globalPace.x: 0.1
+        uniqueAmountVariation: 1
+        globalAmount.x: 5
+        globalPace.z: 0.1
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: fireMat
+            cullMode: Material.NoCulling
+            property color baseColor: "#d97111"
+            property TextureInput dfMask: firetexinput
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "Fire Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            destinationBlend: CustomMaterial.One
+            TextureInput {
+                id: firetexinput
+                texture: firetex
+                enabled: true
+            }
+
+            Texture {
+                id: firetex
+                source: "file:content/images/fire.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            vertexShader: "shaders/fire.vert"
+            fragmentShader: "shaders/fire.frag"
+            shadingMode: CustomMaterial.Shaded
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/FlashEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/FlashEffect.ui.qml
new file mode 100644
index 000000000..608fa6331
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/FlashEffect.ui.qml
@@ -0,0 +1,75 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: flash
+    ParticleEmitter3D {
+        id: burstEmitter1
+        velocity: burstDirection1
+        particle: modelParticle1
+        particleScale: 0
+        particleEndScale: 30
+
+        enabled: flash.visible
+        lifeSpan: 1000
+        emitBursts: emitBurst1
+        ModelParticle3D {
+            id: modelParticle1
+            sortMode: Particle3D.SortDistance
+            fadeInDuration: burstEmitter1.lifeSpan / 4
+            fadeOutDuration: modelParticle1.fadeInDuration * 3
+        }
+
+        VectorDirection3D {
+            id: burstDirection1
+            directionVariation.x: 0
+            directionVariation.z: 0
+            direction.y: 0
+            directionVariation.y: 0
+        }
+
+        EmitBurst3D {
+            id: emitBurst1
+            duration: 100
+            amount: 1
+            time: 0
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            receivesReflections: true
+            materials: flashMat
+            scale.y: 1
+            receivesShadows: true
+            castsShadows: true
+            instancing: modelParticle1.instanceTable
+            scale.z: 1
+            scale.x: 1
+        }
+        emitRate: 1
+        particleEndScaleVariation: 0
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: flashMat
+            fragmentShader: "shaders/flash.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.One
+            cullMode: Material.NoCulling
+            property color baseColor: "#bbddff"
+            sourceBlend: CustomMaterial.One
+            vertexShader: "shaders/flash.vert"
+            objectName: "Flash Material"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/FloorComponent.ui.qml b/examples/demos/FX_Material_Showroom/content/FloorComponent.ui.qml
new file mode 100644
index 000000000..9662592df
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/FloorComponent.ui.qml
@@ -0,0 +1,136 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick3D
+import QtQuick3D.Helpers
+import QtQuick3D.Particles3D
+import "Figma_Assets"
+import "Pocket_Demo_SkylightUI"
+
+Model {
+    id: floor
+    property int aoState: 0
+    receivesReflections: true
+    materials: [floorMat_local]
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: floorMat_local
+            fragmentShader: "shaders/floor.frag"
+            vertexShader: "shaders/floor.vert"
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#ffffff"
+            property color subsurfaceColor: "#ffffff"
+            property real specular: 0.75
+            property real density: 0.5
+            property real opacity: 1
+            property real roughness: 0
+            property real clearcoat: 0.25
+            property real metalness: 0.0
+            property real sssDistortion: 0.0
+            property real sssPower: 10
+            property real sssScale: 2
+            property vector3d aoMaskScale: Qt.vector3d(1, 1, 1)
+            property vector3d aoMaskPos: Qt.vector3d(0, 0, 1)
+            shadingMode: CustomMaterial.Shaded
+            objectName: "New Material"
+            property color aoMask: "#ff0000"
+            property TextureInput aoTexture: aoTexInput
+            property TextureInput paramsTexture: paramsTexInput
+            property TextureInput normalsTexture: normalTexInput
+            alwaysDirty: false
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            sourceBlend: CustomMaterial.NoBlend
+            TextureInput {
+                id: aoTexInput
+                texture: aoTex
+                enabled: true
+            }
+
+            Texture {
+                id: aoTex
+                source: "file:content/images/AOBake.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+
+            TextureInput {
+                id: normalTexInput
+                texture: normalTex
+                enabled: true
+            }
+
+            Texture {
+                id: normalTex
+                source: "file:content/images/Asphalt010_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+
+            TextureInput {
+                id: paramsTexInput
+                texture: paramsTex
+                enabled: true
+            }
+
+            Texture {
+                id: paramsTex
+                source: "file:content/images/Asphalt010_2K_Roughness.png"
+                scaleV: 3
+                scaleU: 3
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+        }
+    }
+    states: [
+        State {
+            name: "Dragon"
+            when: floor.aoState == 1
+
+            PropertyChanges {
+                target: floorMat_local
+                aoMask: "#00ff00"
+                aoMaskScale: Qt.vector3d(0.7, 0.7, 1.0)
+                aoMaskPos: Qt.vector3d(0, 0, 0)
+            }
+        },
+        State {
+            name: "Bunny"
+            when: floor.aoState == 2
+
+            PropertyChanges {
+                target: floorMat_local
+                aoMaskScale: Qt.vector3d(0.9, 0.9, 1.0)
+                aoMaskPos: Qt.vector3d(0.01, 0.01, 0.0)
+                aoMask: "#0000ff"
+            }
+        },
+        State {
+            name: "matball"
+            when: floor.aoState == 0
+
+            PropertyChanges {
+                target: floorMat_local
+                aoMaskPos: Qt.vector3d(0, 0, 0.0)
+                aoMaskScale: Qt.vector3d(1, 1, 1.0)
+                aoMask: "#ff0000"
+            }
+        },
+        State {
+            name: "none"
+            when: floor.aoState == 3
+
+            PropertyChanges {
+                target: floorMat_local
+                aoMaskPos: Qt.vector3d(0, 0, 0.0)
+                aoMaskScale: Qt.vector3d(1, 1, 1.0)
+                aoMask: "#000000"
+            }
+        }
+    ]
+}
diff --git a/examples/demos/FX_Material_Showroom/content/HeatwaveEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/HeatwaveEffect.ui.qml
new file mode 100644
index 000000000..3623d0dbe
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/HeatwaveEffect.ui.qml
@@ -0,0 +1,94 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: heatwave
+    ParticleEmitter3D {
+        enabled: heatwave.visible
+        id: modelShapeEmitter
+        x: -0
+        y: -60
+        particleEndScaleVariation: 0
+        system: heatwave
+        z: 0.00002
+        particleEndScale: 1
+        particle: particleRed
+        emitRate: 20
+        lifeSpan: 5000
+        lifeSpanVariation: 0
+        particleRotationVariation.x: 0
+        particleRotationVelocityVariation.x: 0
+        particleRotationVelocityVariation.z: 0
+        particleRotationVelocityVariation.y: 0
+        shape: targetShape
+        particleRotationVariation.z: 0
+        particleRotationVariation.y: 0
+
+        ModelParticle3D {
+            id: particleRed
+            maxAmount: 100
+            color: "#ffffff"
+            fadeInDuration: 2000
+            fadeOutDuration: 2000
+            unifiedColorVariation: true
+            hasTransparency: true
+            sortMode: Particle3D.SortDistance
+            colorVariation.w: 0
+            colorVariation.z: 0
+            colorVariation.y: 0
+            colorVariation.x: 0
+        }
+    }
+
+    ParticleModelShape3D {
+        id: targetShape
+        fill: false
+        delegate: Model {
+            source: "#Rectangle"
+            eulerRotation.x: -90
+            scale.x: 5.0
+            scale.y: 5.0
+        }
+    }
+
+    Gravity3D {
+        id: gravity
+        magnitude: 20
+        direction.y: 1
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        receivesReflections: true
+        receivesShadows: true
+        castsShadows: true
+        materials: heatwaveMat
+        scale.z: 1
+        scale.y: 1
+        scale.x: 1
+        instancing: particleRed.instanceTable
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: heatwaveMat
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "white"
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            fragmentShader: "shaders/heatwave.frag"
+            sourceBlend: CustomMaterial.SrcAlpha
+            shadingMode: CustomMaterial.Shaded
+            vertexShader: "shaders/heatwave.vert"
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "New Material"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/LineparticleEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/LineparticleEffect.ui.qml
new file mode 100644
index 000000000..4d773566e
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/LineparticleEffect.ui.qml
@@ -0,0 +1,204 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: lineparticleEffect
+
+    ParticleEmitter3D {
+        id: particleEmitter
+        particleEndScaleVariation: 1
+        particleScaleVariation: 0
+        system: lineparticleEffect
+        enabled: lineparticleEffect.visible
+        particleScale: 0
+        particleRotationVariation.y: 180
+        particleRotationVelocityVariation.y: 200
+        emitRate: 5
+        particleRotationVelocityVariation.x: 200
+        particleRotationVelocityVariation.z: 200
+        particleRotationVariation.z: 180
+        lifeSpanVariation: 5000
+        velocity: dir3d
+        particleEndScale: 1
+        VectorDirection3D {
+            id: dir3d
+            directionVariation.z: 50
+            direction.y: 15
+            direction.z: 0
+            directionVariation.y: 15
+            directionVariation.x: 50
+        }
+
+        PointRotator3D {
+            id: pointRotator
+            magnitude: 100
+            particles: lineParticle
+            system: lineparticleEffect
+        }
+        lifeSpan: 5000
+        particle: lineParticle
+        particleRotationVariation.x: 180
+    }
+
+    LineParticle3D {
+        id: lineParticle
+        sprite: lineSprite
+        fadeOutDuration: 2500
+        fadeInDuration: 2500
+        color: "#7fffffff"
+        billboard: false
+        colorVariation.w: 0.5
+        colorVariation.z: 0.5
+        colorVariation.y: 0.5
+        colorVariation.x: 0.5
+        blendMode: SpriteParticle3D.Screen
+        alignMode: Particle3D.AlignNone
+        particleScale: 1
+        eolFadeOutDuration: 500
+        lengthVariation: 500
+        length: 500
+        alphaFade: 0.1
+        segmentCount: 200
+
+        Texture {
+            id: lineSprite
+            source: "images/lineSprite.tif"
+        }
+    }
+
+    Node {
+        id: __materialLibrary__
+    }
+
+    ParticleSystem3D {
+        id: lineparticlesystem_thick
+        ParticleEmitter3D {
+            id: lineparticle_thick_emitter
+            particle: lineparticle_Thick
+            emitRate: 5
+            particleEndScaleVariation: 15
+            particleRotationVariation.y: 180
+            particleRotationVelocityVariation.z: 200
+            particleRotationVariation.x: 180
+            lifeSpanVariation: 5000
+            velocity: lineparticle_thick_dir
+            enabled: lineparticleEffect.visible
+            lifeSpan: 5000
+            particleEndScale: 15
+            particleScale: 0
+            VectorDirection3D {
+                id: lineparticle_thick_dir
+                directionVariation.y: 15
+                direction.y: 15
+                directionVariation.x: 50
+                directionVariation.z: 50
+                direction.z: 0
+            }
+
+            PointRotator3D {
+                id: lineparticle_thick_rotator
+                magnitude: 100
+                particles: lineparticle_Thick
+                system: lineparticlesystem_thick
+            }
+            particleRotationVariation.z: 180
+            particleScaleVariation: 0
+            particleRotationVelocityVariation.y: 200
+            particleRotationVelocityVariation.x: 200
+            system: lineparticlesystem_thick
+        }
+
+        LineParticle3D {
+            id: lineparticle_Thick
+            texcoordMode: LineParticle3D.Fill
+            texcoordMultiplier: 1
+            sprite: lineSprite
+            particleScale: 1
+            fadeOutDuration: 2500
+            fadeInDuration: 2500
+            blendMode: SpriteParticle3D.Screen
+            color: "#40ffbb00"
+            billboard: false
+            colorVariation.w: 0.25
+            colorVariation.z: 0.25
+            colorVariation.y: 0.25
+            colorVariation.x: 0.25
+            sortMode: Particle3D.SortDistance
+            scaleMultiplier: 1
+            length: 500
+            alphaFade: 0
+            segmentCount: 200
+            alignMode: Particle3D.AlignNone
+            lengthVariation: 500
+            eolFadeOutDuration: 500
+        }
+    }
+
+    ParticleSystem3D {
+        ParticleEmitter3D {
+            lifeSpanVariation: 5000
+            emitRate: 20
+            particleScaleVariation: 0
+            enabled: lineparticleEffect.visible
+            particle: spriteParticle
+            VectorDirection3D {
+                id: dotvector
+                direction.y: 15
+                directionVariation.x: 50
+                directionVariation.z: 50
+                direction.z: 0
+                directionVariation.y: 15
+            }
+
+            PointRotator3D {
+                id: dotrotator
+                magnitude: 50
+                system: lineparticlesystem_thick
+                particles: spriteParticle
+            }
+
+            Wander3D {
+                uniquePace.z: 1
+                uniquePaceVariation: 1
+                uniquePace.x: 1
+                uniquePace.y: 1
+                uniqueAmount.x: 1
+                uniqueAmountVariation: 1
+                system: lineparticlesystem_thick
+                uniqueAmount.y: 1
+                uniqueAmount.z: 1
+                particles: spriteParticle
+            }
+
+            SpriteParticle3D {
+                id: spriteParticle
+                sprite: dotsprite
+                billboard: true
+                color: "#ffcc40"
+                maxAmount: 1000
+                blendMode: SpriteParticle3D.Screen
+                colorVariation.w: 0.5
+                colorVariation.z: 0.5
+                colorVariation.y: 0.5
+                colorVariation.x: 0.5
+                sortMode: Particle3D.SortDistance
+            }
+
+            Texture {
+                id: dotsprite
+                source: "images/dotSprite.tif"
+            }
+            particleEndScaleVariation: 1
+            particleEndScale: 1
+            particleScale: 0
+            system: lineparticlesystem_thick
+            velocity: dotvector
+            lifeSpan: 5000
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/MouseRotatorAndWASD.qml b/examples/demos/FX_Material_Showroom/content/MouseRotatorAndWASD.qml
new file mode 100644
index 000000000..6559c0767
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/MouseRotatorAndWASD.qml
@@ -0,0 +1,311 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+
+Item {
+    id: root
+    property Node controlledObject: cameraRoot
+
+    property real speed: 1
+    property real shiftSpeed: 3
+
+    property real forwardSpeed: 5
+    property real backSpeed: 5
+    property real rightSpeed: 5
+    property real leftSpeed: 5
+    property real upSpeed: 5
+    property real downSpeed: 5
+    property real xSpeed: 0.1
+    property real ySpeed: 0.1
+
+    property bool xInvert: true
+    property bool yInvert: false
+
+    property bool mouseEnabled: true
+    property bool keysEnabled: true
+
+    readonly property bool inputsNeedProcessing: status.moveForward | status.moveBack
+                                                 | status.moveLeft | status.moveRight
+                                                 | status.moveUp | status.moveDown
+                                                 | status.useMouse
+
+    property alias acceptedButtons: dragHandler.acceptedButtons
+
+
+
+    implicitWidth: parent.width
+    implicitHeight: parent.height
+    focus: keysEnabled
+
+    DragHandler {
+        id: dragHandler
+        target: null
+        enabled: mouseEnabled
+        onCentroidChanged: {
+            mouseMoved(Qt.vector2d(centroid.position.x, centroid.position.y));
+        }
+
+        onActiveChanged: {
+            if (active)
+                mousePressed(Qt.vector2d(centroid.position.x, centroid.position.y));
+            else
+                mouseReleased(Qt.vector2d(centroid.position.x, centroid.position.y));
+        }
+    }
+
+    TapHandler {
+        onTapped: root.forceActiveFocus()
+    }
+
+    Keys.onPressed: (event)=> { if (keysEnabled) handleKeyPress(event) }
+    Keys.onReleased: (event)=> { if (keysEnabled) handleKeyRelease(event) }
+
+    function mousePressed(newPos) {
+        root.forceActiveFocus()
+        status.currentPos = newPos
+        status.lastPos = newPos
+        status.useMouse = true;
+    }
+
+    function mouseReleased(newPos) {
+        status.useMouse = false;
+    }
+
+    function mouseMoved(newPos) {
+        status.currentPos = newPos;
+    }
+
+    function forwardPressed() {
+        status.moveForward = true
+        status.moveBack = false
+    }
+
+    function forwardReleased() {
+        status.moveForward = false
+    }
+
+    function backPressed() {
+        status.moveBack = true
+        status.moveForward = false
+    }
+
+    function backReleased() {
+        status.moveBack = false
+    }
+
+    function rightPressed() {
+        status.moveRight = true
+        status.moveLeft = false
+    }
+
+    function rightReleased() {
+        status.moveRight = false
+    }
+
+    function leftPressed() {
+        status.moveLeft = true
+        status.moveRight = false
+    }
+
+    function leftReleased() {
+        status.moveLeft = false
+    }
+
+    function upPressed() {
+        status.moveUp = true
+        status.moveDown = false
+    }
+
+    function upReleased() {
+        status.moveUp = false
+    }
+
+    function downPressed() {
+        status.moveDown = true
+        status.moveUp = false
+    }
+
+    function downReleased() {
+        status.moveDown = false
+    }
+
+    function shiftPressed() {
+        status.shiftDown = true
+    }
+
+    function shiftReleased() {
+        status.shiftDown = false
+    }
+
+    function handleKeyPress(event)
+    {
+        switch (event.key) {
+        case Qt.Key_W:
+        case Qt.Key_Up:
+            forwardPressed();
+            break;
+        case Qt.Key_S:
+        case Qt.Key_Down:
+            backPressed();
+            break;
+        case Qt.Key_A:
+        case Qt.Key_Left:
+            leftPressed();
+            break;
+        case Qt.Key_D:
+        case Qt.Key_Right:
+            rightPressed();
+            break;
+        case Qt.Key_R:
+        case Qt.Key_PageUp:
+            upPressed();
+            break;
+        case Qt.Key_F:
+        case Qt.Key_PageDown:
+            downPressed();
+            break;
+        case Qt.Key_Shift:
+            shiftPressed();
+            break;
+        }
+    }
+
+    function handleKeyRelease(event)
+    {
+        switch (event.key) {
+        case Qt.Key_W:
+        case Qt.Key_Up:
+            forwardReleased();
+            break;
+        case Qt.Key_S:
+        case Qt.Key_Down:
+            backReleased();
+            break;
+        case Qt.Key_A:
+        case Qt.Key_Left:
+            leftReleased();
+            break;
+        case Qt.Key_D:
+        case Qt.Key_Right:
+            rightReleased();
+            break;
+        case Qt.Key_R:
+        case Qt.Key_PageUp:
+            upReleased();
+            break;
+        case Qt.Key_F:
+        case Qt.Key_PageDown:
+            downReleased();
+            break;
+        case Qt.Key_Shift:
+            shiftReleased();
+            break;
+        }
+    }
+
+    Timer {
+        id: updateTimer
+        interval: 16
+        repeat: true
+        running: root.inputsNeedProcessing
+        onTriggered: {
+            processInputs();
+        }
+    }
+
+    function processInputs()
+    {
+        if (root.inputsNeedProcessing)
+            status.processInput();
+    }
+
+    QtObject {
+        id: status
+
+        property bool moveForward: false
+        property bool moveBack: false
+        property bool moveLeft: false
+        property bool moveRight: false
+        property bool moveUp: false
+        property bool moveDown: false
+        property bool shiftDown: false
+        property bool useMouse: false
+
+        property vector2d lastPos: Qt.vector2d(0, 0)
+        property vector2d currentPos: Qt.vector2d(0, 0)
+
+        function updatePosition(vector, speed, position)
+        {
+            if (shiftDown)
+                speed *= shiftSpeed;
+            else
+                speed *= root.speed
+
+            var direction = vector;
+            var velocity = Qt.vector3d(direction.x * speed,
+                                       direction.y * speed,
+                                       direction.z * speed);
+            controlledObject.position = Qt.vector3d(position.x + velocity.x,
+                                                    position.y + velocity.y,
+                                                    position.z + velocity.z);
+        }
+
+        function negate(vector) {
+            return Qt.vector3d(-vector.x, -vector.y, -vector.z)
+        }
+
+        function processInput() {
+            if (controlledObject == undefined)
+                return;
+
+            if (moveForward)
+                updatePosition(controlledObject.forward, forwardSpeed, controlledObject.position);
+            else if (moveBack)
+                updatePosition(negate(controlledObject.forward), backSpeed, controlledObject.position);
+
+            if (moveRight)
+                updatePosition(controlledObject.right, rightSpeed, controlledObject.position);
+            else if (moveLeft)
+                updatePosition(negate(controlledObject.right), leftSpeed, controlledObject.position);
+
+            if (moveDown)
+                updatePosition(negate(controlledObject.up), downSpeed, controlledObject.position);
+            else if (moveUp)
+                updatePosition(controlledObject.up, upSpeed, controlledObject.position);
+
+            if (useMouse) {
+                // Get the delta
+                var rotationVector = controlledObject.eulerRotation;
+                var delta = Qt.vector2d(lastPos.x - currentPos.x,
+                                        lastPos.y - currentPos.y);
+                // rotate x
+                var rotateX = -delta.x * xSpeed
+                if (xInvert)
+                    rotateX = -rotateX;
+                rotationVector.y += rotateX;
+
+                // rotate y
+                var rotateY = delta.y * ySpeed
+                if (yInvert)
+                    rotateY = -rotateY;
+                if (rotationVector.x + rotateY <= 9 && rotationVector.x + rotateY >= -70.0)
+                    rotationVector.x += rotateY;
+
+                controlledObject.setEulerRotation(rotationVector);
+                lastPos = currentPos;
+            }
+        }
+    }
+
+    Item {
+        id: __materialLibrary__
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;height:1080;width:1920}
+}
+##^##*/
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonTabs.ui.qml b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonTabs.ui.qml
new file mode 100644
index 000000000..a2df9567f
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonTabs.ui.qml
@@ -0,0 +1,130 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Item {
+    id: buttonTabs
+    width: 360
+    height: 80
+    state: ""
+    property string activeBtn: "Sunrise"
+
+    property int sceneState: 0
+
+    property real sunPosition: -2
+
+    property real newsunpos: -2
+    property real oldsunpos: -2
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 360
+        height: 80
+        color: "#222222"
+        radius: 8
+    }
+
+    ButtonWithIcon {
+        id: buttonWithIcon
+        x: 0
+        y: 0
+        width: 120
+        height: 80
+        state: "state_state_Idle"
+        iconState: "state_icon_SkySunrise"
+        buttonName: "Sunrise"
+    }
+
+    ButtonWithIcon {
+        id: buttonWithIcon1
+        x: 120
+        y: 0
+        width: 120
+        height: 80
+        state: "state_state_Idle"
+        iconState: "state_icon_SkyMidday"
+        buttonName: "Midday"
+    }
+
+    ButtonWithIcon {
+        id: buttonWithIcon2
+        x: 240
+        y: 0
+        width: 120
+        height: 80
+        state: "state_state_Idle"
+        iconState: "state_icon_SkySunset"
+        buttonName: "Sunset"
+    }
+
+    NumberAnimation {
+        id: numberAnimation
+        target: buttonTabs
+        property: "sunPosition"
+        easing.bezierCurve: [0.445, 0.05, 0.55, 0.95, 1, 1]
+        duration: 1000
+        running: true
+        to: 0
+        from: 0
+    }
+
+    states: [
+        State {
+            name: "Sunrise"
+            when: activeBtn == "Sunrise"
+
+            PropertyChanges {
+                target: buttonTabs
+                sunPosition: -5
+                sceneState: 0
+            }
+        },
+
+        State {
+            name: "Midday"
+            when: activeBtn == "Midday"
+
+            PropertyChanges {
+                target: buttonTabs
+                sunPosition: -120
+                sceneState: 1
+            }
+        },
+
+        State {
+            name: "Sunset"
+            when: activeBtn == "Sunset"
+
+            PropertyChanges {
+                target: buttonTabs
+                sunPosition: -178
+                sceneState: 2
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "*"
+            to: "*"
+
+            NumberAnimation {
+                target: buttonTabs
+                property: "sunPosition"
+                duration: 1000
+                easing.type: Easing.InOutSine
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"2c5f0faa-c5fd-50a9-983c-4d5c430e52bc"}D{i:2;uuid:"3ea1e882-d922-5053-b0c7-64f1ced6fa0c"}
+D{i:3;uuid:"11b40535-45b6-5496-a48c-a89a4c18cfab"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonWithIcon.ui.qml b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonWithIcon.ui.qml
new file mode 100644
index 000000000..556d601e8
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/ButtonWithIcon.ui.qml
@@ -0,0 +1,89 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: buttonWithIcon
+    width: 120
+    height: 80
+    state: "state_state_Idle"
+    property string iconState: "state_icon_SkySunrise"
+    property string buttonName: "Sunrise"
+
+    Rectangle {
+        id: bg
+        x: 0
+        y: 0
+        width: 120
+        height: 80
+        color: button.pressed ? "#B8B8B9" : (button.hovered ? "#5C5C5D" : (button.checked ? "#3D3D3E" : "#222222"))
+        radius: 8
+    }
+
+    IconsSkylight {
+        id: iconsSkylight
+        x: 36
+        y: 16
+        width: 48
+        height: 48
+        clip: true
+        state: parent.iconState
+    }
+
+    Button {
+        id: button
+        opacity: 0
+        text: qsTr("")
+        anchors.fill: parent
+        highlighted: false
+        checkable: true
+        display: AbstractButton.TextOnly
+        checked: buttonTabs.activeBtn == buttonWithIcon.buttonName
+        Connections {
+            target: button
+            onClicked: buttonTabs.activeBtn = buttonWithIcon.buttonName
+        }
+    }
+    states: [
+        State {
+            name: "state_state_Idle"
+        },
+        State {
+            name: "state_state_Pressed"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#b8b8b9"
+            }
+        },
+        State {
+            name: "state_state_Hover"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#5c5c5d"
+            }
+        },
+        State {
+            name: "state_state_Active"
+            extend: "state_state_Idle"
+
+            PropertyChanges {
+                target: bg
+                color: "#3d3d3e"
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"daca4806-5c88-522d-b47b-15bd86594c91"}D{i:1;uuid:"a14d30f6-0e64-5340-9fc4-e3bd2e100934"}
+D{i:2;uuid:"e5a917fb-bf37-5bf0-ae35-642da89b0bcf"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/IconsSkylight.ui.qml b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/IconsSkylight.ui.qml
new file mode 100644
index 000000000..2738901b5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/IconsSkylight.ui.qml
@@ -0,0 +1,78 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.Components
+
+Item {
+    id: iconsSkylight
+    width: 48
+    height: 48
+    state: "state_icon_SkyMidday"
+
+    SvgPathItem {
+        id: vector
+        x: 7
+        y: 7
+        width: 35
+        height: 35
+        visible: false
+        antialiasing: true
+        strokeWidth: 1.33333
+        strokeColor: "transparent"
+        fillColor: "#ffffff"
+        path: "M 5.106040954589844 7.854960918426514 C 4.3466808795928955 7.069640934467316 4.346680760383606 5.8390408754348755 5.132447242736816 5.079640865325928 C 5.891807317733765 4.320280909538269 7.148367643356323 4.3202807903289795 7.9077677726745605 5.1060471534729 L 10.002448081970215 7.226686954498291 C 10.761808156967163 7.98604691028595 10.761808276176453 9.242607474327087 9.976041793823242 10.002007484436035 C 9.216681718826294 10.761367440223694 7.9601218700408936 10.734966576099396 7.200721740722656 9.975600242614746 L 5.106040954589844 7.854960918426514 Z M 4.9748406410217285 15.342960357666016 C 6.074520707130432 15.342960357666016 6.938600540161133 16.207040786743164 6.938600540161133 17.306720733642578 C 6.938600540161133 18.380000710487366 6.074520707130432 19.270483016967773 4.9748406410217285 19.270483016967773 L 1.963760495185852 19.270483016967773 C 0.8904803991317749 19.270483016967773 0 18.380000710487366 0 17.306720733642578 C 0 16.207040786743164 0.8904803991317749 15.342960357666016 1.963760495185852 15.342960357666016 L 4.9748406410217285 15.342960357666016 Z M 7.200040817260742 24.742563247680664 C 7.959400773048401 23.957243263721466 9.215959906578064 23.957240521907806 9.975359916687012 24.716154098510742 C 10.76067990064621 25.4755140542984 10.76067978143692 26.732076048851013 10.001766204833984 27.49147605895996 L 7.907086372375488 29.61211585998535 C 7.14772641658783 30.39743584394455 5.891166806221008 30.397434771060944 5.1317667961120605 29.638521194458008 C 4.3464468121528625 28.87916123867035 4.346446931362152 27.622603058815002 5.105360507965088 26.863203048706055 L 7.200040817260742 24.742563247680664 Z M 19.374839782714844 29.79536247253418 L 19.374839782714844 32.75412368774414 C 19.374839782714844 33.82740378379822 18.510759353637695 34.7178840637207 17.41107940673828 34.7178840637207 C 16.337799429893494 34.7178840637207 15.447319030761719 33.82740378379822 15.447319030761719 32.75412368774414 L 15.447319030761719 29.79536247253418 C 15.447319030761719 28.695682406425476 16.337799429893494 27.831602096557617 17.41107940673828 27.831602096557617 C 18.510759353637695 27.83175833657151 19.374839782714844 28.695682406425476 19.374839782714844 29.79536247253418 Z M 24.8204402923584 27.49135971069336 C 24.06108021736145 26.731999695301056 24.061081051826477 25.475439727306366 24.846847534179688 24.716039657592773 C 25.606207609176636 23.95667964220047 26.862767457962036 23.956680476665497 27.622167587280273 24.742446899414062 L 29.716848373413086 26.863086700439453 C 30.476208448410034 27.622446715831757 30.476207613945007 28.879006683826447 29.690441131591797 29.63840675354004 C 28.93108105659485 30.397766768932343 27.67452120780945 30.397765934467316 26.91512107849121 29.61199951171875 L 24.8204402923584 27.49135971069336 Z M 32.85844421386719 15.44736099243164 C 33.931724190711975 15.44736099243164 34.82220458984375 16.337841272354126 34.82220458984375 17.411121368408203 C 34.82220458984375 18.510801434516907 33.931724190711975 19.374879837036133 32.85844421386719 19.374879837036133 L 29.84736442565918 19.374879837036133 C 28.747684478759766 19.374879837036133 27.883604049682617 18.510801434516907 27.883604049682617 17.411121368408203 C 27.883604049682617 16.337841272354126 28.747684478759766 15.44736099243164 29.84736442565918 15.44736099243164 L 32.85844421386719 15.44736099243164 Z M 29.716440200805664 7.8549604415893555 L 27.62175941467285 9.97559928894043 C 26.862399399280548 10.734959244728088 25.605839431285858 10.760921061038971 24.846439361572266 10.002007484436035 C 24.061119318008423 9.242647528648376 24.06112039089203 7.986086487770081 24.82003402709961 7.226686477661133 L 26.91471290588379 5.106046676635742 C 27.674072921276093 4.320726692676544 28.930632889270782 4.320726811885834 29.690032958984375 5.0796403884887695 C 30.47583305835724 5.839000344276428 30.475833892822266 7.069800496101379 29.716440200805664 7.8549604415893555 Z M 22.621641159057617 17.35896110534668 C 22.621641159057617 14.478960990905762 20.291159629821777 12.148560523986816 17.411239624023438 12.148560523986816 C 14.531319618225098 12.148560523986816 12.20083999633789 14.47904086112976 12.20083999633789 17.35896110534668 C 12.20083999633789 20.2388813495636 14.531319618225098 22.56936264038086 17.411239624023438 22.56936264038086 C 20.291159629821777 22.56936264038086 22.621641159057617 20.2388813495636 22.621641159057617 17.35896110534668 Z M 26.548521041870117 17.35896110534668 C 26.548521041870117 22.41176128387451 22.464121341705322 26.49616050720215 17.41132164001465 26.49616050720215 C 12.358521938323975 26.49616050720215 8.274120330810547 22.41176128387451 8.274120330810547 17.35896110534668 C 8.274120330810547 12.306160926818848 12.358521938323975 8.221760749816895 17.41132164001465 8.221760749816895 C 22.464121341705322 8.221760749816895 26.548521041870117 12.306160926818848 26.548521041870117 17.35896110534668 Z M 19.374839782714844 1.9637597799301147 L 19.374839782714844 4.922519207000732 C 19.374839782714844 6.0221991539001465 18.48435938358307 6.886280536651611 17.41107940673828 6.886280536651611 C 16.311399459838867 6.886280536651611 15.447319030761719 6.0221991539001465 15.447319030761719 4.922519207000732 L 15.447319030761719 1.9637597799301147 C 15.447319030761719 0.8904798030853271 16.311399459838867 0 17.41107940673828 0 C 18.48435938358307 0 19.374839782714844 0.8904798030853271 19.374839782714844 1.9637597799301147 Z"
+    }
+
+    Image {
+        id: icon_Colorful
+        visible: false
+        source: "file:content/images/Icons/Icon_Colorful.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        id: icon_Dark
+        visible: false
+        source: "file:content/images/Icons/Icon_Dark.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Image {
+        id: icon_Light
+        visible: false
+        source: "file:content/images/Icons/Icon_Light.png"
+        fillMode: Image.PreserveAspectFit
+    }
+    states: [
+        State {
+            name: "state_icon_SkyMidday"
+            PropertyChanges {
+                target: icon_Dark
+                visible: true
+            }
+        },
+        State {
+            name: "state_icon_SkySunset"
+            PropertyChanges {
+                target: icon_Colorful
+                visible: true
+            }
+        },
+        State {
+            name: "state_icon_SkySunrise"
+
+            PropertyChanges {
+                target: icon_Light
+                visible: true
+            }
+        }
+    ]
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"b5674341-5d32-596d-ab2f-731adefeb8f6"}D{i:1;uuid:"126fd8d6-aff0-5cbf-9cd3-3627e8bc2a73"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/Layout.ui.qml b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/Layout.ui.qml
new file mode 100644
index 000000000..a84f73180
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/Layout.ui.qml
@@ -0,0 +1,30 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    id: layout
+    width: 1920
+    height: 1080
+    color: "#00ffffff"
+    border.color: "#00000000"
+    border.width: 0
+    property alias dotBtns: buttonTabs
+
+    ButtonTabs {
+        id: buttonTabs
+        x: 780
+        y: 972
+        width: 360
+        height: 80
+        state: "state_state_Default"
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;uuid:"4afa61f1-f47a-5131-a122-bc39511354ce"}
+}
+##^##*/
+
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Colorful.svg b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Colorful.svg
new file mode 100644
index 000000000..2ca69ba0a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Colorful.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9998 36H26.3332V31C26.3332 29.7115 25.2885 28.6668 23.9998 28.6668C22.7113 28.6668 21.6665 29.7115 21.6665 31V36H19V31C19 28.2386 21.2386 26 23.9998 26C26.7612 26 28.9998 28.2386 28.9998 31V36ZM33.9998 36H31.3332V31C31.3332 26.95 28.05 23.6666 23.9998 23.6666C19.9499 23.6666 16.6664 26.9499 16.6664 31V36H13.9999V31C13.9999 25.4773 18.477 21 23.9999 21C29.5226 21 33.9999 25.4771 33.9999 31L33.9998 36ZM38.9998 36H36.333V31C36.333 24.1885 30.8114 18.6669 23.9999 18.6669C17.1884 18.6669 11.6668 24.1885 11.6668 31V36H9.00021V31C9.00021 22.716 15.7159 16.0003 23.9999 16.0003C32.2845 16.0003 38.9997 22.716 38.9997 31L38.9998 36ZM43.9998 36H41.333V31C41.333 21.4271 33.573 13.6666 23.9996 13.6666C14.4268 13.6666 6.66676 21.4271 6.66676 31V36H4V31C4 19.9546 12.9541 11 24 11C35.0459 11 44 19.9541 44 31L43.9998 36Z" fill="white"/>
+</svg>
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Dark.svg b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Dark.svg
new file mode 100644
index 000000000..41a5b2020
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Dark.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9089 13.9044C19.6289 14.9 19.4889 15.9422 19.4889 17C19.4889 23.3467 24.6533 28.5111 31 28.5111C32.0578 28.5111 33.1 28.3711 34.0956 28.0911C32.4778 32.0733 28.5578 34.8889 24 34.8889C17.9956 34.8889 13.1111 30.0044 13.1111 24C13.1111 19.4422 15.9267 15.5222 19.9089 13.9044ZM24 10C16.2689 10 10 16.2689 10 24C10 31.7311 16.2689 38 24 38C31.7311 38 38 31.7311 38 24C38 23.2844 37.9378 22.5689 37.8444 21.8844C36.32 24.0156 33.8311 25.4 31 25.4C26.3644 25.4 22.6 21.6356 22.6 17C22.6 14.1844 23.9844 11.68 26.1156 10.1556C25.4311 10.0622 24.7156 10 24 10Z" fill="white"/>
+</svg>
diff --git a/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Light.svg b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Light.svg
new file mode 100644
index 000000000..b94c26d6b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Pocket_Demo_SkylightUI/images/Icon_Light.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5 18.9545C26.275 18.9545 28.5455 21.225 28.5455 24C28.5455 26.775 26.275 29.0455 23.5 29.0455C20.725 29.0455 18.4545 26.775 18.4545 24C18.4545 21.225 20.725 18.9545 23.5 18.9545ZM23.5 15.5909C18.8582 15.5909 15.0909 19.3582 15.0909 24C15.0909 28.6418 18.8582 32.4091 23.5 32.4091C28.1418 32.4091 31.9091 28.6418 31.9091 24C31.9091 19.3582 28.1418 15.5909 23.5 15.5909ZM6.68182 25.6818H10.0455C10.9705 25.6818 11.7273 24.925 11.7273 24C11.7273 23.075 10.9705 22.3182 10.0455 22.3182H6.68182C5.75682 22.3182 5 23.075 5 24C5 24.925 5.75682 25.6818 6.68182 25.6818ZM36.9545 25.6818H40.3182C41.2432 25.6818 42 24.925 42 24C42 23.075 41.2432 22.3182 40.3182 22.3182H36.9545C36.0295 22.3182 35.2727 23.075 35.2727 24C35.2727 24.925 36.0295 25.6818 36.9545 25.6818ZM21.8182 7.18182V10.5455C21.8182 11.4705 22.575 12.2273 23.5 12.2273C24.425 12.2273 25.1818 11.4705 25.1818 10.5455V7.18182C25.1818 6.25682 24.425 5.5 23.5 5.5C22.575 5.5 21.8182 6.25682 21.8182 7.18182ZM21.8182 37.4545V40.8182C21.8182 41.7432 22.575 42.5 23.5 42.5C24.425 42.5 25.1818 41.7432 25.1818 40.8182V37.4545C25.1818 36.5295 24.425 35.7727 23.5 35.7727C22.575 35.7727 21.8182 36.5295 21.8182 37.4545ZM13.3923 11.5209C12.7364 10.865 11.66 10.865 11.0209 11.5209C10.365 12.1768 10.365 13.2532 11.0209 13.8923L12.8036 15.675C13.4595 16.3309 14.5359 16.3309 15.175 15.675C15.8141 15.0191 15.8309 13.9427 15.175 13.3036L13.3923 11.5209ZM34.1964 32.325C33.5405 31.6691 32.4641 31.6691 31.825 32.325C31.1691 32.9809 31.1691 34.0573 31.825 34.6964L33.6077 36.4791C34.2636 37.135 35.34 37.135 35.9791 36.4791C36.635 35.8232 36.635 34.7468 35.9791 34.1077L34.1964 32.325ZM35.9791 13.8923C36.635 13.2364 36.635 12.16 35.9791 11.5209C35.3232 10.865 34.2468 10.865 33.6077 11.5209L31.825 13.3036C31.1691 13.9595 31.1691 15.0359 31.825 15.675C32.4809 16.3141 33.5573 16.3309 34.1964 15.675L35.9791 13.8923ZM15.175 34.6964C15.8309 34.0405 15.8309 32.9641 15.175 32.325C14.5191 31.6691 13.4427 31.6691 12.8036 32.325L11.0209 34.1077C10.365 34.7636 10.365 35.84 11.0209 36.4791C11.6768 37.1182 12.7532 37.135 13.3923 36.4791L15.175 34.6964Z" fill="white"/>
+</svg>
diff --git a/examples/demos/FX_Material_Showroom/content/RainEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/RainEffect.ui.qml
new file mode 100644
index 000000000..96554ce60
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/RainEffect.ui.qml
@@ -0,0 +1,191 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: rain
+    ParticleEmitter3D {
+
+        enabled: rain.visible
+        id: modelShapeEmitter1
+        y: 500
+        particleScale: 1.5
+        particleScaleVariation: modelShapeEmitter1.particleScale
+        particleEndScale: modelShapeEmitter1.particleScale
+        system: rain
+        ModelParticle3D {
+            id: particleRed1
+            color: "#ffffff"
+            alignMode: Particle3D.AlignTowardsStartVelocity
+            alignTargetPosition: sceneCamera.position
+            maxAmount: 50000
+            hasTransparency: true
+            fadeOutDuration: 100
+            unifiedColorVariation: true
+            sortMode: Particle3D.SortDistance
+            fadeInDuration: 1000
+        }
+        shape: targetShape1
+        particleRotationVariation.y: 360
+        particle: particleRed1
+        emitRate: 100
+        lifeSpan: 3000
+        particleEndScaleVariation: modelShapeEmitter1.particleScale
+    }
+
+    ParticleModelShape3D {
+        id: targetShape1
+        fill: false
+        delegate: Model {
+            source: "#Rectangle"
+            scale.x: 15
+            eulerRotation.x: -90
+            scale.y: 15
+        }
+    }
+
+    Gravity3D {
+        id: gravity1
+        direction.y: -1
+        magnitude: 98 * 5
+    }
+
+    Model {
+        source: "#Cube"
+        castsReflections: true
+        receivesShadows: true
+        materials: rainMat
+        instancing: particleRed1.instanceTable
+        castsShadows: true
+        receivesReflections: true
+    }
+
+    ParticleSystem3D {
+        id: ripples
+        y: 0
+        ParticleEmitter3D {
+            id: modelShapeEmitter5
+            lifeSpanVariation: 250
+
+            enabled: rain.visible
+            particleScale: 0
+            lifeSpan: 250
+            system: ripples
+            ModelParticle3D {
+                id: particleRed5
+                color: "#ffffff"
+                alignMode: Particle3D.AlignTowardsStartVelocity
+                maxAmount: 50000
+                colorVariation.y: 0
+                sortMode: Particle3D.SortDistance
+                fadeInDuration: 20
+                fadeOutDuration: 80
+                unifiedColorVariation: true
+                colorVariation.w: 0
+                hasTransparency: true
+                colorVariation.x: 0
+                colorVariation.z: 0
+            }
+            particle: particleRed5
+            particleRotationVelocityVariation.y: 0
+            particleScaleVariation: 0
+            particleRotationVelocityVariation.z: 0
+            shape: targetShape5
+            particleEndScale: 0.25
+            emitRate: 5000
+            particleRotationVariation.x: 0
+            particleRotationVariation.z: 0
+            particleEndScaleVariation: 0.25
+            particleRotationVelocityVariation.x: 0
+            particleRotationVariation.y: 360
+        }
+
+        ParticleModelShape3D {
+            id: targetShape5
+            fill: false
+            delegate: Model {
+                source: "#Rectangle"
+                eulerRotation.x: -90
+                scale.x: 15
+                scale.y: 15
+            }
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            scale.x: 1
+            scale.y: 1
+            instancing: particleRed5.instanceTable
+            materials: splashMat
+            receivesReflections: true
+            castsShadows: true
+            scale.z: 1
+            receivesShadows: true
+        }
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: rainMat
+            fragmentShader: "shaders/raindrop.frag"
+            objectName: "New Material"
+            property color baseColor: "white"
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            sourceBlend: CustomMaterial.SrcAlpha
+            vertexShader: "shaders/raindrop.vert"
+            depthDrawMode: Material.NeverDepthDraw
+            cullMode: Material.BackFaceCulling
+            property TextureInput rainmap: texture_rain
+            TextureInput {
+                id: texture_rain
+                texture: raintex
+                enabled: true
+            }
+
+            Texture {
+                id: raintex
+                source: "file:content/images/raindrops_multi.tga"
+                scaleV: 3
+                scaleU: 3
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+        }
+
+        CustomMaterial {
+            id: splashMat
+            fragmentShader: "shaders/rainsplash.frag"
+            objectName: "New Material"
+            property color baseColor: "white"
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            sourceBlend: CustomMaterial.SrcAlpha
+            vertexShader: "shaders/raindrop.vert"
+            depthDrawMode: Material.NeverDepthDraw
+            cullMode: Material.BackFaceCulling
+            property TextureInput rainmap: texture_splash
+            TextureInput {
+                id: texture_splash
+                texture: splashtex
+                enabled: true
+            }
+
+            Texture {
+                id: splashtex
+                source: "file:content/images/rainsplash.png"
+                scaleV: 3
+                scaleU: 3
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/Screen01.ui.qml b/examples/demos/FX_Material_Showroom/content/Screen01.ui.qml
new file mode 100644
index 000000000..33823e78c
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/Screen01.ui.qml
@@ -0,0 +1,1478 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick3D
+import QtQuick3D.Effects
+import PocketDemo
+import ComponentBundles.MaterialBundle
+import "Figma_Assets"
+import "Pocket_Demo_SkylightUI"
+
+Rectangle {
+    id: rectangle1
+    width: Constants.width
+    height: Constants.height
+    color: "#000000"
+    border.width: 0
+    layer.format: ShaderEffectSource.RGB
+    property bool settingsopen: true
+    property string oldstate: "state_type_Materials"
+    property Material matChoice: silver
+    property string matselText: material_pop_up.matSelection
+
+    View3D {
+        id: view3D
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        camera: sceneCamera
+        anchors.leftMargin: 636 * menutransition_open.phase
+        layer.format: ShaderEffectSource.RGB
+
+        environment: layout.dotBtns.sceneState
+                     == 2 ? colorful : (layout.dotBtns.sceneState == 1 ? studio : bright)
+
+        Node {
+            id: scene
+
+            Node {
+                id: lightGroups
+
+                Node {
+                    id: brightLights
+                    visible: layout.dotBtns.sceneState == 0
+                    DirectionalLight {
+                        visible: true
+                        shadowBias: 0.02
+                        shadowMapQuality: Light.ShadowMapQualityHigh
+                        shadowFilter: 5
+                        shadowMapFar: 5000
+                        shadowFactor: 100
+                        eulerRotation.y: 0.20483
+                        brightness: 0.5
+                        castsShadow: true
+                        eulerRotation.x: -40.00001
+                        eulerRotation.z: 89.99592
+                    }
+
+                    DirectionalLight {
+                        x: -6
+                        y: -6
+                        z: -6
+                        shadowBias: 0.02
+                        shadowFilter: 5
+                        shadowMapFar: 5000
+                        eulerRotation.y: 178.69228
+                        brightness: 0.5
+                        castsShadow: true
+                        shadowFactor: 100
+                        eulerRotation.x: -19.04617
+                        eulerRotation.z: 89.4164
+                        shadowMapQuality: Light.ShadowMapQualityHigh
+                    }
+                }
+
+                Node {
+                    id: colorfulLights
+                    visible: layout.dotBtns.sceneState == 2
+                    DirectionalLight {
+                        shadowMapFar: 5000
+                        shadowBias: 0.02
+                        shadowMapQuality: Light.ShadowMapQualityHigh
+                        eulerRotation.y: 25.32839
+                        brightness: 0.5
+                        castsShadow: true
+                        shadowFactor: 100
+                        eulerRotation.x: -40.00002
+                        eulerRotation.z: 89.99591
+                    }
+                }
+            }
+
+            FloorComponent {
+                id: floor
+                receivesReflections: true
+                aoState: material_pop_up.modelsL.selection
+                         == "None" ? 3 : (material_pop_up.modelsL.selection
+                                          == "Dragon" ? 1 : (material_pop_up.modelsL.selection
+                                                             == "Rabbit" ? 2 : 0))
+                scale.x: 150
+                scale.y: 150
+                scale.z: 150
+                source: "file:content/Meshes/floor.mesh"
+                eulerRotation.z: 0
+                eulerRotation.y: 0
+                eulerRotation.x: 0
+                visible: true
+                y: 4
+            }
+
+            Model {
+                id: studioFloor
+                y: -1
+                visible: layout.dotBtns.sceneState == 1
+                opacity: 1
+                source: "#Rectangle"
+                eulerRotation.z: 0
+                eulerRotation.x: -90
+                materials: floorMat
+                eulerRotation.y: 0
+                scale.y: 35
+                scale.z: 35
+
+                Model {
+                    id: areaLight
+                    source: "#Rectangle"
+                    materials: lightMaterial
+                    eulerRotation.z: 0
+                    eulerRotation.y: 0
+                    scale.y: 0.05
+                    scale.x: 0.25
+                    eulerRotation.x: 180
+                    z: 20
+                }
+
+                Model {
+                    id: pillar
+                    source: "#Cube"
+                    materials: asphalt
+                    x: 0
+                    y: 38
+                    receivesReflections: true
+                    scale.z: 0.2
+                    z: 10.02753
+                    scale.y: 0.05
+                    scale.x: 0.05
+                }
+
+                Model {
+                    id: pillar1
+                    source: "#Cube"
+                    materials: asphalt
+                    x: 38
+                    y: 0
+                    receivesReflections: true
+                    z: 9.57775
+                    scale.z: 0.2
+                    scale.y: 0.05
+                    scale.x: 0.05
+                }
+
+                Model {
+                    id: pillar2
+                    source: "#Cube"
+                    materials: asphalt
+                    x: -38
+                    y: 0
+                    z: 10.03454
+                    receivesReflections: true
+                    scale.z: 0.2
+                    scale.y: 0.05
+                    scale.x: 0.05
+                }
+
+                Model {
+                    id: pillar3
+                    source: "#Cube"
+                    materials: asphalt
+                    x: 0
+                    y: -38
+                    z: 9.60788
+                    receivesReflections: true
+                    scale.z: 0.2
+                    scale.y: 0.05
+                    scale.x: 0.05
+                }
+
+                Node {
+                    id: groupLights
+
+                    Model {
+                        id: areaLight1
+                        x: 0
+                        y: 35
+                        source: "#Rectangle"
+                        eulerRotation.z: 0
+                        materials: lightMaterial
+                        eulerRotation.y: 0
+                        z: 20
+                        scale.x: 0.7
+                        eulerRotation.x: 90
+                        scale.y: 0.01
+                    }
+
+                    Model {
+                        id: areaLight2
+                        x: 35
+                        y: 0
+                        source: "#Rectangle"
+                        eulerRotation.z: 90
+                        materials: lightMaterial
+                        eulerRotation.y: -90
+                        z: 20
+                        scale.x: 0.7
+                        eulerRotation.x: 0
+                        scale.y: 0.01
+                    }
+
+                    Model {
+                        id: areaLight3
+                        x: 0
+                        y: -35
+                        source: "#Rectangle"
+                        eulerRotation.z: 0
+                        materials: lightMaterial
+                        eulerRotation.y: 0
+                        z: 20
+                        scale.x: 0.7
+                        eulerRotation.x: -90
+                        scale.y: 0.01
+                    }
+
+                    Model {
+                        id: areaLight4
+                        x: -35
+                        y: 0
+                        source: "#Rectangle"
+                        eulerRotation.z: 90
+                        materials: lightMaterial
+                        eulerRotation.y: 90
+                        z: 20
+                        scale.x: 0.7
+                        eulerRotation.x: 0
+                        scale.y: 0.01
+                    }
+                }
+
+                ReflectionProbe {
+                    id: reflectionProbe
+                    x: 0
+                    y: 0
+                    boxOffset.y: 990
+                    debugView: false
+                    z: 0
+                    boxSize.z: 3000
+                    timeSlicing: ReflectionProbe.None
+                    clearColor: "#000000"
+                    boxSize.x: 3000
+                    refreshMode: ReflectionProbe.EveryFrame
+                    parallaxCorrection: true
+                    quality: ReflectionProbe.Low
+                    boxSize.y: 2000
+                }
+                scale.x: 35
+                receivesReflections: true
+            }
+
+            Node {
+                id: cameraRoot
+                eulerRotation.z: 0
+                eulerRotation.y: 35.26906
+                eulerRotation.x: -24.99024
+
+                PerspectiveCamera {
+                    id: sceneCamera
+                    x: -0
+                    y: 95.285
+                    z: 530.90942
+                }
+            }
+
+            Node {
+                id: effects
+
+                HeatwaveEffect {
+                    id: heatwave
+                    visible: material_pop_up.effectsL.selection == "Heatwave"
+                }
+
+                RainEffect {
+                    id: rain
+                    visible: material_pop_up.effectsL.selection == "Rain"
+                }
+
+                SmokeEffect {
+                    id: smoke
+                    visible: material_pop_up.effectsL.selection == "Smoke"
+                }
+
+                SteamEffect {
+                    id: steam
+                    y: 100
+                    visible: material_pop_up.effectsL.selection == "Steam"
+                    z: 100
+                }
+
+                SnowEffect {
+                    id: snow
+                    visible: material_pop_up.effectsL.selection == "Snow"
+                }
+
+                FireEffect {
+                    id: fire
+                    visible: material_pop_up.effectsL.selection == "Flames"
+                }
+
+                Node {
+                    id: group
+                    eulerRotation.y: sparkrotation.phase
+
+                    SparksEffect {
+                        id: sparks
+                        visible: material_pop_up.effectsL.selection == "Sparks"
+                        y: 100
+                        z: 250
+                    }
+                }
+
+                ShockwaveEffect {
+                    id: shockwave
+                    visible: material_pop_up.effectsL.selection == "Shockwave"
+                }
+
+                DustEffect {
+                    id: dust
+                    visible: material_pop_up.effectsL.selection == "Dust"
+                }
+
+                FlashEffect {
+                    id: flash
+                    visible: material_pop_up.effectsL.selection == "Flash"
+                }
+
+                ExplosionEffect {
+                    id: explosion
+                    visible: material_pop_up.effectsL.selection == "Explosion"
+                }
+
+                BubblesEffect {
+                    id: bubbles
+                    x: 0
+                    y: 125.976
+                    visible: material_pop_up.effectsL.selection == "Bubbles"
+                    z: 62.12978
+                }
+
+                CloudEffect {
+                    id: cloud
+
+                    y: 100
+                    visible: material_pop_up.effectsL.selection == "Clouds"
+                    time: 10000
+                    startTime: 0
+                }
+            }
+
+            Model {
+                id: sphere
+                visible: false
+                materials: [skyboxMaterial]
+                source: "#Sphere"
+                receivesShadows: false
+                castsShadows: false
+                scale.z: 100
+                scale.y: 100
+                scale.x: 100
+            }
+
+            Model {
+                id: dragon1
+                x: 1
+                y: -9
+                visible: false
+                source: "file:content/Meshes/stanford_Dragon.mesh"
+                depthBias: 0
+                eulerRotation.x: -90
+                receivesReflections: true
+                z: 1
+                scale.y: 200
+                scale.x: 200
+                castsReflections: false
+                materials: [bubbleMat1]
+                scale.z: 200
+            }
+
+            Node {
+                id: models
+                visible: true
+
+                Model {
+                    id: materialBall
+                    y: 4
+
+                    visible: material_pop_up.modelsL.selection == "Qt material ball"
+                    source: "file:content/Meshes/materialBall.mesh"
+                    castsReflections: false
+                    receivesReflections: true
+                    scale.z: 150
+                    scale.y: 150
+                    scale.x: 150
+                    materials: [rectangle1.matChoice]
+                }
+
+                Model {
+                    id: bunny
+                    x: 50
+                    y: -75
+                    visible: material_pop_up.modelsL.selection == "Rabbit"
+                    source: "file:content/Meshes/bunnyUV.mesh"
+                    castsReflections: false
+                    z: -50
+                    eulerRotation.x: -90
+                    receivesReflections: true
+                    scale.z: 2000
+                    scale.y: 2000
+                    scale.x: 2000
+                    materials: [rectangle1.matChoice]
+                }
+
+                Model {
+                    id: dragon
+                    y: -10
+                    visible: material_pop_up.modelsL.selection == "Dragon"
+                    source: "file:content/Meshes/stanford_Dragon.mesh"
+                    eulerRotation.x: -90
+                    castsReflections: false
+                    receivesReflections: true
+                    depthBias: 0
+                    scale.z: 200
+                    scale.y: 200
+                    materials: [rectangle1.matChoice]
+                    scale.x: 200
+                }
+            }
+        }
+
+        Node {
+            id: environments
+
+            View3D {
+                id: darkLoader
+                width: 0
+                height: 0
+                environment: dark
+                SceneEnvironment {
+                    id: dark
+                    //effects: [hDRBloomTonemap]
+                    specularAAEnabled: true
+                    tonemapMode: SceneEnvironment.TonemapModeLinear
+                    probeExposure: 1
+                    probeHorizon: 1
+                    clearColor: "#000000"
+                    antialiasingQuality: SceneEnvironment.VeryHigh
+                    temporalAAEnabled: false
+                    depthTestEnabled: true
+                    backgroundMode: SceneEnvironment.Color
+                    antialiasingMode: SceneEnvironment.MSAA
+                    depthPrePassEnabled: false
+                }
+            }
+
+            View3D {
+                id: brightLoader
+                x: -8
+                y: -8
+                width: 400
+                height: 400
+                environment: bright
+                SceneEnvironment {
+                    id: bright
+                    fog: fog
+                    tonemapMode: SceneEnvironment.TonemapModeLinear
+                    skyboxBlurAmount: 0
+                    probeHorizon: 0.5
+                    clearColor: "#000000"
+                    specularAAEnabled: true
+                    backgroundMode: SceneEnvironment.SkyBox
+                    lightProbe: dreamstime_xl_182890747
+                    antialiasingQuality: SceneEnvironment.High
+                    antialiasingMode: SceneEnvironment.MSAA
+
+                    Texture {
+                        id: dreamstime_xl_182890747
+                        source: "file:content/images/HDR/dreamstime_xl_182890747.png"
+                    }
+
+                    Fog {
+                        id: fog
+                        color: "#608080"
+                        transmitCurve: 10
+                        transmitEnabled: false
+                        heightEnabled: false
+                        depthFar: 1000
+                        depthNear: 0
+                        density: 0
+                        depthEnabled: true
+                        enabled: false
+                    }
+                }
+            }
+
+            View3D {
+                id: colorLoader
+                x: -14
+                y: -14
+                width: 400
+                height: 400
+                environment: colorful
+                SceneEnvironment {
+                    id: colorful
+                    fog: fog
+                    tonemapMode: SceneEnvironment.TonemapModeLinear
+                    probeHorizon: 0.5
+                    clearColor: "#000000"
+                    backgroundMode: SceneEnvironment.SkyBox
+                    specularAAEnabled: true
+                    lightProbe: dreamstime_xl_119184006
+                    antialiasingQuality: SceneEnvironment.High
+                    antialiasingMode: SceneEnvironment.MSAA
+
+                    Texture {
+                        id: dreamstime_xl_119184006
+                        source: "file:content/images/HDR/dreamstime_xl_119184006.png"
+                    }
+                }
+            }
+
+            View3D {
+                id: studioLoader
+                width: 400
+                height: 400
+
+                SceneEnvironment {
+                    id: studio
+                    fog: fog
+                    specularAAEnabled: true
+                    tonemapMode: SceneEnvironment.TonemapModeLinear
+                    probeExposure: 1
+                    probeHorizon: 1
+                    effects: [hDRBloomTonemap9, colorMaster]
+                    clearColor: "#000000"
+                    antialiasingQuality: SceneEnvironment.VeryHigh
+                    temporalAAEnabled: false
+                    depthTestEnabled: true
+                    HDRBloomTonemap {
+                        id: hDRBloomTonemap9
+                        blurFalloff: 1
+                        channelThreshold: 1
+                        bloomThreshold: 0
+                        exposure: 0
+                        gamma: 1
+                        tonemappingLerp: 0
+                    }
+
+                    ColorMaster {
+                        id: colorMaster
+                        greenStrength: 1
+                    }
+                    backgroundMode: SceneEnvironment.Color
+                    antialiasingMode: SceneEnvironment.MSAA
+                    depthPrePassEnabled: false
+                }
+            }
+        }
+
+        DebugBox {
+            id: debugView
+            x: 1615
+            y: 840
+            color: "#99000000"
+
+            //scale: 1
+            radius: 8
+            width: 250
+
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            sView: view3D
+            fpsSize: 24
+            secondaryinfoSize: 18
+            visible: layoutFull.debugOn
+            anchors.bottomMargin: 121
+            anchors.rightMargin: 27
+        }
+    }
+
+    MouseRotatorAndWASD {
+        id: mouseRotatorAndWASD
+        anchors.top: parent.top
+        anchors.fill: parent
+        anchors.leftMargin: 636 * menutransition_open.phase
+        anchors.topMargin: 0
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        preventStealing: false
+        cursorShape: Qt.SizeAllCursor
+        anchors.leftMargin: 636 * menutransition_open.phase
+        drag.axis: Drag.YAxis
+
+        Connections {
+            target: mouseArea
+
+            onWheel: (wheel) => sceneCamera.fieldOfView += wheel.angleDelta.y * 0.04
+                             * (sceneCamera.fieldOfView + wheel.angleDelta.y * 0.04 > 0.0)
+                             * (sceneCamera.fieldOfView + wheel.angleDelta.y * 0.04 < 60.0)
+        }
+
+        PinchArea {
+            id: pinchArea
+            anchors.fill: parent
+
+            Connections {
+                target: pinchArea
+                onPinchUpdated: if (pinch.previousScale - pinch.scale > 0.008
+                                        || pinch.previousScale - pinch.scale < -1 * 0.008) {
+                                    let velocity = (pinch.previousScale
+                                                    - pinch.scale) > 0 ? 1.25 : -1.25
+                                    sceneCamera.fieldOfView += velocity
+                                            * (sceneCamera.fieldOfView + velocity > 0.0)
+                                            * (sceneCamera.fieldOfView + velocity < 60.0)
+                                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: rectangle
+        width: 904
+        height: 80
+        visible: false
+        color: "#ffffff"
+        anchors.top: parent.top
+        anchors.topMargin: 0
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        RoundButton {
+            id: rainBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Rain"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.leftMargin: 8
+            anchors.topMargin: 8
+            checkable: true
+            highlighted: true
+        }
+
+        RoundButton {
+            id: snowBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Snow"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 136
+        }
+
+        RoundButton {
+            id: smokeBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Smoke"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            checked: true
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 264
+        }
+
+        RoundButton {
+            id: heatwaveBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Heatwave"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 392
+        }
+
+        RoundButton {
+            id: fireBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Fire"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 520
+            checkable: true
+        }
+
+        RoundButton {
+            id: sparkBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Sparks"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 648
+            checkable: true
+        }
+
+        RoundButton {
+            id: dustBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Dust"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 776
+            checkable: true
+        }
+    }
+
+    Item {
+        id: __materialLibrary__
+        DefaultMaterial {
+            id: principledMaterial
+            opacity: 0.5
+            cullMode: Material.NoCulling
+            vertexColorsEnabled: true
+            objectName: "Default Material"
+            diffuseColor: "#ffffff"
+        }
+
+        CustomMaterial {
+            id: skyboxMaterial
+            property TextureInput skyboxTexture: skyboxTex
+            property color fogColor: fog.color
+            property real fogAmount: fog.density
+
+            cullMode: Material.FrontFaceCulling
+            vertexShader: "shaders/sky.vert"
+            fragmentShader: "shaders/sky.frag"
+            objectName: "Skybox Material"
+
+            TextureInput {
+                id: skyboxTex
+                texture: view3D.environment.lightProbe
+                enabled: true
+            }
+        }
+
+        GoldMaterial {
+            id: gold
+            objectName: "Gold"
+        }
+
+        AsphaltMaterial {
+            id: asphalt
+            objectName: "Asphalt"
+        }
+
+        PrincipledMaterial {
+            id: silver
+            cullMode: Material.NoCulling
+            specularAmount: 1
+            baseColor: "#fefefd"
+            objectName: "Silver"
+            metalness: 1
+            roughness: 0.05
+            clearcoatAmount: 0
+        }
+
+        PrincipledMaterial {
+            id: steelBrushed
+            normalMap: metal009_2K_NormalGL
+            cullMode: Material.NoCulling
+            baseColor: "#d9d7d2"
+            clearcoatAmount: 0
+            roughness: 1
+            objectName: "Brushed Steel"
+            metalness: 1
+            specularAmount: 1
+            roughnessMap: metal009_2K_Roughness
+
+            Texture {
+                id: metal009_2K_NormalGL
+                source: "file:content/images/Metal009_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: metal009_2K_Roughness
+                source: "file:content/images/Metal009_2K_Roughness.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+        }
+
+        PrincipledMaterial {
+            id: copper
+            cullMode: Material.NoCulling
+            baseColor: "#ffbd7f"
+            objectName: "Copper"
+            metalness: 1
+            roughness: 0.15
+            clearcoatAmount: 0
+        }
+
+        PrincipledMaterial {
+            id: wood
+            normalMap: wood048_2K_NormalGL
+            roughnessMap: wood048_2K_Roughness
+            baseColorMap: wood048_2K_Color
+            cullMode: Material.NoCulling
+            transmissionFactor: 0
+            roughnessChannel: Material.B
+            metalness: 0
+            specularAmount: 1
+            roughness: 1
+            clearcoatAmount: 0
+            objectName: "Wood"
+            baseColor: "#ffffff"
+
+            Texture {
+                id: wood048_2K_Color
+                source: "file:content/images/woodtextures/Wood048_2K-PNG/Wood048_2K_Color.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: wood048_2K_Roughness
+                source: "file:content/images/woodtextures/Wood048_2K-PNG/Wood048_2K_Roughness.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: wood048_2K_NormalGL
+                source: "file:content/images/woodtextures/Wood048_2K-PNG/Wood048_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+        }
+
+        PrincipledMaterial {
+            id: stone
+            roughnessMap: rock023_2K_Roughness
+            occlusionMap: rock023_2K_AmbientOcclusion
+            normalMap: rock023_2K_NormalGL
+            baseColorMap: rock023_2K_Color
+            normalStrength: 1
+            cullMode: Material.NoCulling
+            roughness: 1
+            objectName: "Stone"
+            baseColor: "#ffffff"
+            specularAmount: 1
+            clearcoatAmount: 0
+            metalness: 0
+
+            Texture {
+                id: rock023_2K_Color
+                source: "file:content/images/stonetextures/Rock023_2K_Color.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: rock023_2K_NormalGL
+                source: "file:content/images/stonetextures/Rock023_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: rock023_2K_AmbientOcclusion
+                source: "file:content/images/stonetextures/Rock023_2K_AmbientOcclusion.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: rock023_2K_Roughness
+                source: "file:content/images/stonetextures/Rock023_2K_Roughness.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+        }
+
+        PrincipledMaterial {
+            id: carbonFiber
+            cullMode: Material.NoCulling
+            normalMap: fabric004_2K_NormalGL
+            objectName: "CarbonFiber"
+            metalness: 0
+            baseColor: "#050505"
+            transmissionFactor: 0
+            roughnessChannel: Material.B
+            specularAmount: 1
+            clearcoatAmount: 1
+            roughness: 0
+
+            Texture {
+                id: fabric004_2K_NormalGL
+                source: "file:content/images/Fabric004_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 30
+                scaleU: 30
+            }
+        }
+
+        PrincipledMaterial {
+            id: plasticTextured
+            normalStrength: 0.06125
+            normalMap: noisenormal
+            clearcoatAmount: 0
+            objectName: "Textured Plastic"
+            roughness: 0.3
+            specularAmount: 0.93
+            transmissionFactor: 0
+            metalness: 0
+            cullMode: Material.NoCulling
+            baseColor: "#ff0000"
+            roughnessChannel: Material.B
+
+            Texture {
+                id: noisenormal
+                source: "file:content/images/noisenormal.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 10
+                scaleU: 10
+            }
+        }
+
+        PrincipledMaterial {
+            id: fabric
+            baseColorMap: fabric031_2K_Color
+            normalStrength: 0.5
+            occlusionMap: fabric031_2K_Detail
+            roughnessMap: fabric031_2K_Roughness
+            normalMap: fabric031_2K_NormalGL
+            clearcoatAmount: 0
+            objectName: "Fabric"
+            roughness: 1
+            specularAmount: 1
+            cullMode: Material.NoCulling
+            metalness: 0
+            transmissionFactor: 0
+            alphaMode: PrincipledMaterial.Opaque
+            occlusionAmount: 0.75
+            baseColor: "#d7c9b5"
+            depthDrawMode: Material.AlwaysDepthDraw
+            roughnessChannel: Material.R
+
+            Texture {
+                id: fabric031_2K_NormalGL
+                source: "file:content/images/Fabric031_2K_NormalGL.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: fabric031_2K_Roughness
+                source: "file:content/images/Fabric031_2K_Roughness.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: fabric031_2K_Displacement
+                source: "file:content/images/Fabric031_2K_Displacement.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: fabric031_2K_Detail
+                source: "file:content/images/Fabric031_2K_Detail.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: fabric031_2K_Color
+                source: "file:content/images/Fabric031_2K_Color.png"
+                scaleV: 3
+                scaleU: 3
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+        }
+
+        PrincipledMaterial {
+            id: leather
+            roughnessMap: leather037_2K_Roughness
+            normalMap: leather037_2K_NormalGL
+            baseColorMap: leather037_2K_Color
+            cullMode: Material.NoCulling
+            roughness: 1
+            roughnessChannel: Material.R
+            baseColor: "#ffa983"
+            specularAmount: 1
+            metalness: 0
+            objectName: "Steel"
+            clearcoatAmount: 0
+            transmissionFactor: 0
+
+            Texture {
+                id: leather037_2K_Color
+                source: "file:content/images/leathertextures/Leather037_2K-PNG/Leather037_2K_Color.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: leather037_2K_NormalGL
+                source: "file:content/images/leathertextures/Leather037_2K-PNG/Leather037_2K_NormalGL.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+
+            Texture {
+                id: leather037_2K_Roughness
+                source: "file:content/images/leathertextures/Leather037_2K-PNG/Leather037_2K_Roughness.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+                scaleV: 3
+                scaleU: 3
+            }
+        }
+
+        CustomMaterial {
+            id: waxMat
+            fragmentShader: "shaders/SSS.frag"
+            destinationBlend: CustomMaterial.NoBlend
+            depthDrawMode: Material.OpaqueOnlyDepthDraw
+            vertexShader: "shaders/SSS.vert"
+            sourceBlend: CustomMaterial.NoBlend
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#ffffff"
+            property color subsurfaceColor: "#fcdfc8"
+            property real specular: 0.5
+            property real density: 0
+            property real opacity: 1
+            property real roughness: 0.25
+            property real clearcoat: 1
+            property real metalness: 0.0
+            property real sssDistortion: 0.0
+            property real sssPower: 10
+            property real sssScale: 2
+            shadingMode: CustomMaterial.Shaded
+            objectName: "New Material"
+        }
+
+        CustomMaterial {
+            id: floorMat
+            fragmentShader: "shaders/floor.frag"
+            destinationBlend: CustomMaterial.NoBlend
+            depthDrawMode: Material.OpaqueOnlyDepthDraw
+            vertexShader: "shaders/floor.vert"
+            sourceBlend: CustomMaterial.NoBlend
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#ffffff"
+            property color subsurfaceColor: "#fcdfc8"
+            property real specular: 0
+            property real density: 1
+            property real opacity: 1
+            property real roughness: 0.0
+            property real clearcoat: 1
+            property real metalness: 0.0
+            property real sssDistortion: 0.0
+            property real sssPower: 10
+            property real sssScale: 2
+            property vector2d aoMaskScale: Qt.vector2d(0.9, 0.9)
+            property vector2d aoMaskPos: Qt.vector2d(0.01, 0.01)
+            shadingMode: CustomMaterial.Shaded
+            objectName: "New Material"
+
+            property color aoMask: "#0000ff"
+            property TextureInput aoTexture: aoTexInput
+            TextureInput {
+                id: aoTexInput
+                texture: aoTex
+                enabled: true
+            }
+
+            Texture {
+                id: aoTex
+                source: "file:content/images/AOBake.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+        }
+
+        CustomMaterial {
+            id: bubbleMat1
+            objectName: "New Material"
+            destinationBlend: CustomMaterial.NoBlend
+            property color baseColor: "#ffffff"
+            property real stepSize: 0.01
+            property real densityFalloff: 0.01
+            fragmentShader: "shaders/smokerm.frag"
+            shadingMode: CustomMaterial.Shaded
+            depthDrawMode: Material.NeverDepthDraw
+            vertexShader: "shaders/smokerm.vert"
+            sourceBlend: CustomMaterial.NoBlend
+            cullMode: Material.BackFaceCulling
+        }
+
+        PrincipledMaterial {
+            id: lightMaterial
+            emissiveFactor.z: 1
+            emissiveFactor.y: 1
+            emissiveFactor.x: 1
+            objectName: "Default Material"
+            cullMode: Material.NoCulling
+        }
+
+        DefaultMaterial {
+            id: newMaterial
+            objectName: "New Material"
+        }
+    }
+
+    LayoutFull {
+        id: layoutFull
+    }
+
+    Layout {
+        id: layout
+    }
+
+    Material_pop_up {
+        id: material_pop_up
+    }
+
+    Rectangle {
+        id: rectangle2
+        width: 776
+        height: 80
+        visible: false
+        color: "#ffffff"
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        RoundButton {
+            id: flashBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Flash"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            checkable: true
+            anchors.leftMargin: 8
+            highlighted: true
+        }
+
+        RoundButton {
+            id: shockwaveBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Shockwave"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            checkable: true
+            anchors.leftMargin: 136
+            highlighted: true
+        }
+
+        RoundButton {
+            id: explosionBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Explosion"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            checkable: true
+            anchors.leftMargin: 264
+            highlighted: true
+        }
+
+        RoundButton {
+            id: bubblesBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Bubbles"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            checkable: true
+            anchors.leftMargin: 392
+            highlighted: true
+        }
+
+        RoundButton {
+            id: cloudBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Cloud"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 8
+            checkable: true
+            anchors.leftMargin: 520
+            highlighted: true
+        }
+
+        RoundButton {
+            id: steamBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Steam"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.leftMargin: 648
+            checkable: true
+            anchors.topMargin: 8
+            highlighted: true
+        }
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    NumberAnimation {
+        id: menutransition_open
+        target: menutransition_open
+        property: "phase"
+        easing.bezierCurve: [0.445, 0.05, 0.55, 0.95, 1, 1]
+        duration: 1000
+        to: 1
+        from: 0
+        property real phase: 0.0
+    }
+
+    NumberAnimation {
+        id: menutransition_close
+        target: menutransition_open
+        property: "phase"
+        easing.bezierCurve: [0.445, 0.05, 0.55, 0.95, 1, 1]
+        duration: 1000
+        to: 0
+        from: 1
+    }
+
+    Rectangle {
+        id: rectangle3
+        width: 136
+        height: 224
+        visible: false
+        color: "#ffffff"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        RoundButton {
+            id: bunnyBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Bunny"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 8
+            anchors.leftMargin: 8
+        }
+
+        RoundButton {
+            id: bustBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Bust"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            checked: true
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 80
+            anchors.leftMargin: 8
+        }
+
+        RoundButton {
+            id: dragonBtn
+            width: 120
+            height: 64
+            radius: checked ? 32 : 8
+            text: "Dragon"
+            anchors.left: parent.left
+            anchors.top: parent.top
+            highlighted: true
+            checkable: true
+            anchors.topMargin: 152
+            anchors.leftMargin: 8
+        }
+    }
+
+    Timer {
+        id: timer
+    }
+
+    NumberAnimation {
+        id: sparkrotation
+        target: sparkrotation
+        property: "phase"
+        running: material_pop_up.effectsL.selection == "Sparks"
+        loops: -1
+        easing.bezierCurve: [0.2, 0.2, 0.8, 0.8, 1, 1]
+        duration: 10000
+        property real phase: 0
+        to: 360
+        from: 0
+    }
+
+    NumberAnimation {
+        id: lineRotation
+        target: lineRotation
+        property: "phase"
+        running: true
+        loops: -1
+        easing.bezierCurve: [0.2, 0.2, 0.8, 0.8, 1, 1]
+        duration: 10000
+        property real phase: 0
+        to: 360
+        from: 0
+    }
+
+    states: [
+        State {
+            name: "silverState"
+            when: rectangle1.matselText == "Silver"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: silver
+            }
+        },
+        State {
+            name: "steelState"
+            when: rectangle1.matselText == "Brushed Steel"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: steelBrushed
+            }
+        },
+        State {
+            name: "copperState"
+            when: rectangle1.matselText == "Copper"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: copper
+            }
+        },
+        State {
+            name: "glassState"
+            when: rectangle1.matselText == "Wax"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: waxMat
+            }
+        },
+        State {
+            name: "woodState"
+            when: rectangle1.matselText == "Wood"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: wood
+            }
+        },
+        State {
+            name: "stoneState"
+            when: rectangle1.matselText == "Stone"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: stone
+            }
+        },
+        State {
+            name: "carbonfiberState"
+            when: rectangle1.matselText == "Carbon Fiber"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: carbonFiber
+            }
+        },
+        State {
+            name: "plasticState"
+            when: rectangle1.matselText == "Plastic"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: plasticTextured
+            }
+        },
+        State {
+            name: "fabricState"
+            when: rectangle1.matselText == "Fabric"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: fabric
+            }
+        },
+        State {
+            name: "leatherState"
+            when: rectangle1.matselText == "Leather"
+            PropertyChanges {
+                target: rectangle1
+                matChoice: leather
+            }
+        }
+    ]
+}
diff --git a/examples/demos/FX_Material_Showroom/content/ShockwaveEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/ShockwaveEffect.ui.qml
new file mode 100644
index 000000000..17f54e249
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/ShockwaveEffect.ui.qml
@@ -0,0 +1,375 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: shockwave
+    visible: true
+    ParticleEmitter3D {
+        id: pressurewaveemitter
+
+        enabled: shockwave.visible
+        particleScale: 0
+        particleEndScaleVariation: 0
+        particleEndScale: 30
+        emitRate: 0
+        lifeSpan: 100
+        velocity: burstDirection
+
+        ModelParticle3D {
+            id: modelParticle
+            sortMode: Particle3D.SortDistance
+            fadeOutDuration: 50
+            fadeInDuration: 50
+        }
+
+        VectorDirection3D {
+            id: burstDirection
+            direction.y: 0
+            directionVariation.x: 0
+            directionVariation.z: 0
+            directionVariation.y: 0
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            receivesReflections: true
+            materials: shockwaveMat
+            receivesShadows: true
+            scale.y: 1
+            castsShadows: true
+            instancing: modelParticle.instanceTable
+            scale.z: 1
+            scale.x: 1
+        }
+
+        DynamicBurst3D {
+            id: dynamicBurst6
+            enabled: true
+            duration: 0
+            amount: 1
+            time: 0
+            triggerMode: DynamicBurst3D.TriggerTime
+        }
+
+        particle: modelParticle
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: shockwave.reset()
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: pressurewave1.reset()
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: debris.reset()
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: debris.startTime = debris.time
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: debris1.reset()
+    }
+
+    Connections {
+        target: shockwaveTimer
+        onTriggered: debris1.startTime = debris1.time
+    }
+
+    Timer {
+        id: shockwaveTimer
+        running: shockwave.visible
+        repeat: true
+        interval: 5000
+        triggeredOnStart: true
+    }
+
+    ParticleSystem3D {
+        id: debris
+        visible: true
+        ParticleEmitter3D {
+            id: pressurewaveemitter1
+            emitBursts: dynamicBurst7
+            shape: targetShape10
+            particleScaleVariation: 0.5
+            particleRotationVelocityVariation.z: 0
+            particleRotationVelocityVariation.x: 0
+            lifeSpanVariation: 0
+            system: debris
+
+            enabled: shockwave.visible
+            particle: modelParticle7
+            particleScale: 0.5
+            particleEndScale: 0
+            lifeSpan: 3000
+            ModelParticle3D {
+                id: modelParticle7
+                colorVariation.w: 0
+                colorVariation.z: 0
+                colorVariation.y: 0
+                colorVariation.x: 0
+                alignMode: Particle3D.AlignTowardsTarget
+                sortMode: Particle3D.SortDistance
+                maxAmount: 500000
+                fadeInDuration: 1500
+                fadeOutDuration: 1500
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: shockwavedebrisMat
+                receivesShadows: true
+                scale.y: 1
+                castsShadows: true
+                instancing: modelParticle7.instanceTable
+                scale.z: 5
+                scale.x: 3
+            }
+
+            Attractor3D {
+                id: particleAttractor
+                y: 0
+                useCachedPositions: false
+                durationVariation: (debris.time - debris.startTime) * 0.5
+                hideAtEnd: false
+                shape: targetShape10
+                particles: modelParticle7
+                system: debris
+                duration: (debris.time - debris.startTime) * 0.5
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst7
+                enabled: true
+                duration: 10
+                amount: 500
+                time: 100
+                triggerMode: DynamicBurst3D.TriggerTime
+            }
+
+            particleEndScaleVariation: 0
+            emitRate: 0
+        }
+
+        ParticleModelShape3D {
+            id: targetShape10
+            fill: true
+            delegate: Model {
+                source: "#Sphere"
+                eulerRotation.z: 0
+                scale.y: 0.01
+                eulerRotation.y: 0
+                eulerRotation.x: 0
+                scale.z: (debris.time - debris.startTime) * 0.01
+                scale.x: (debris.time - debris.startTime) * 0.01
+            }
+        }
+    }
+
+    ParticleSystem3D {
+        id: debris1
+        ParticleEmitter3D {
+            id: pressurewaveemitter2
+            system: debris1
+
+            enabled: shockwave.visible
+            particle: modelParticle8
+            particleScale: 1
+            particleScaleVariation: 0.0
+            particleRotationVelocityVariation.x: 0
+            particleEndScale: 0
+            lifeSpan: 3000
+            particleRotationVelocityVariation.z: 0
+            emitBursts: dynamicBurst8
+            ModelParticle3D {
+                id: modelParticle8
+                colorVariation.w: 0
+                colorVariation.z: 0
+                colorVariation.y: 0
+                colorVariation.x: 0
+                alignTargetPosition.y: 1
+                maxAmount: 500000
+                fadeInDuration: 1500
+                alignMode: Particle3D.AlignTowardsTarget
+                sortMode: Particle3D.SortDistance
+                fadeOutDuration: 1500
+            }
+
+            Model {
+                source: "#Sphere"
+                castsReflections: true
+                receivesReflections: true
+                materials: shockwavedebrisMat
+                receivesShadows: true
+                scale.y: 1
+                castsShadows: true
+                instancing: modelParticle8.instanceTable
+                scale.z: 1
+                scale.x: 2
+            }
+
+            Attractor3D {
+                id: particleAttractor1
+                y: 0
+                system: debris1
+                durationVariation: (debris1.time - debris1.startTime) * 0.5
+                hideAtEnd: false
+                duration: (debris1.time - debris1.startTime) * 0.5
+                useCachedPositions: false
+                particles: modelParticle8
+                shape: targetShape11
+            }
+
+            DynamicBurst3D {
+                id: dynamicBurst8
+                enabled: true
+                duration: 10
+                amount: 500
+                time: 0
+                triggerMode: DynamicBurst3D.TriggerTime
+            }
+            particleEndScaleVariation: 0
+            lifeSpanVariation: 3000
+            emitRate: 0
+            shape: targetShape11
+        }
+
+        ParticleModelShape3D {
+            id: targetShape11
+            fill: true
+            delegate: Model {
+                source: "#Sphere"
+                eulerRotation.z: 0
+                scale.y: 0.01
+                eulerRotation.x: 0
+                eulerRotation.y: 0
+                scale.z: (debris1.time - debris1.startTime) * 0.05
+                scale.x: (debris1.time - debris1.startTime) * 0.05
+            }
+        }
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: shockwaveMat
+            fragmentShader: "shaders/shockwave.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#ffffff"
+            sourceBlend: CustomMaterial.One
+            vertexShader: "shaders/shockwave.vert"
+            objectName: "Shockwave Material"
+        }
+
+        CustomMaterial {
+            id: shockwaveMat2
+            fragmentShader: "shaders/shockwave.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.One
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#85e1fc"
+            sourceBlend: CustomMaterial.One
+            vertexShader: "shaders/shockwave.vert"
+            objectName: "Shockwave Material"
+        }
+
+        CustomMaterial {
+            id: shockwavedebrisMat
+            fragmentShader: "shaders/debris.frag"
+            depthDrawMode: Material.NeverDepthDraw
+            property real brightness: 10
+            property TextureInput dfMask: debristexinput
+            shadingMode: CustomMaterial.Shaded
+            destinationBlend: CustomMaterial.One
+            cullMode: Material.NoCulling
+            property color baseColor: "#3355ff"
+            sourceBlend: CustomMaterial.SrcAlpha
+            TextureInput {
+                id: debristexinput
+                enabled: true
+                texture: debristex
+            }
+
+            Texture {
+                id: debristex
+                source: "images/debris.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            vertexShader: "shaders/debris.vert"
+            objectName: "Debris Material"
+        }
+    }
+
+    ParticleSystem3D {
+        id: pressurewave1
+        y: 9
+        ParticleEmitter3D {
+            particleRotationVariation.y: 90
+            particleRotationVelocityVariation.y: 360
+            emitBursts: diskburst
+            velocity: flatdiskdir
+            emitRate: 0
+            enabled: shockwave.visible
+            particle: flatshockwave
+            ModelParticle3D {
+                id: flatshockwave
+                maxAmount: 100
+                fadeOutDuration: 1500
+                fadeInDuration: 0
+                sortMode: Particle3D.SortDistance
+            }
+
+            VectorDirection3D {
+                id: flatdiskdir
+                direction.y: 1
+                directionVariation.z: 1
+            }
+
+            Model {
+                source: "#Sphere"
+                instancing: flatshockwave.instanceTable
+                receivesReflections: true
+                castsReflections: true
+                receivesShadows: true
+                materials: shockwaveMat2
+                scale.y: 0.05
+                castsShadows: true
+            }
+
+            DynamicBurst3D {
+                id: diskburst
+                time: 0
+                duration: 0
+                enabled: true
+                triggerMode: DynamicBurst3D.TriggerTime
+                amount: 2
+            }
+            particleEndScaleVariation: 10
+            particleEndScale: 40
+            particleScale: 0
+            lifeSpan: 1500
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/SmokeEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/SmokeEffect.ui.qml
new file mode 100644
index 000000000..372ee0758
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/SmokeEffect.ui.qml
@@ -0,0 +1,145 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: smoke
+    ParticleEmitter3D {
+        id: modelShapeEmitter2
+
+        enabled: smoke.visible
+        x: 0
+        y: 25.243
+        particleScale: 10
+        particleScaleVariation: 5
+        particleRotationVelocity.z: 30
+        particleRotationVelocity.y: 30
+        particleRotationVelocity.x: 30
+        particleRotation.z: 360
+        particleRotation.y: 360
+        particleRotation.x: 360
+        z: -5.27116
+        particleEndScaleVariation: 10
+        lifeSpan: 6000
+        particleRotationVariation.y: 360
+        shape: targetShape2
+        particleRotationVariation.x: 360
+        emitRate: 10
+        particleRotationVelocityVariation.y: 30
+        system: smoke
+        particleRotationVelocityVariation.z: 30
+        particleEndScale: 20
+        particleRotationVariation.z: 360
+        particleRotationVelocityVariation.x: 30
+        particle: particleRed2
+        ModelParticle3D {
+            id: particleRed2
+            color: "#ffffff"
+            sortMode: Particle3D.SortDistance
+            colorVariation.w: 1
+            unifiedColorVariation: false
+            maxAmount: 150
+            fadeInDuration: 2000
+            alignMode: Particle3D.AlignNone
+            hasTransparency: true
+            fadeOutDuration: 2000
+        }
+        lifeSpanVariation: 0
+    }
+
+    ParticleModelShape3D {
+        id: targetShape2
+        delegate: Model {
+            source: "#Rectangle"
+            eulerRotation.x: -90
+        }
+        fill: false
+    }
+
+    Gravity3D {
+        id: gravity2
+        magnitude: 20
+        direction.y: 1
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        scale.x: .1
+        castsShadows: true
+        instancing: particleRed2.instanceTable
+        scale.y: .1
+        receivesShadows: false
+        materials: smokeMat
+        scale.z: .1
+        receivesReflections: true
+    }
+
+    Wander3D {
+        id: wander1
+        uniqueAmount.z: 10
+        globalPace.x: 0.1
+        globalPace.y: 0.1
+        uniqueAmount.x: 10
+        uniquePaceVariation: 1
+        globalAmount.x: 5
+        uniquePace.x: 0.1
+        globalPace.z: 0.1
+        uniqueAmountVariation: 1
+        globalPaceStart.x: 0.1
+        globalAmount.z: 5
+        system: smoke
+        globalPaceStart.y: 0.1
+        particles: particleRed2
+        uniquePace.z: 0.1
+        uniquePace.y: 0.1
+        globalPaceStart.z: 0.1
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: smokeMat
+            TextureInput {
+                id: smoketexinput
+                enabled: true
+                texture: smoketex
+            }
+
+            Texture {
+                id: smoketex
+                source: "file:content/images/smoke.png"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            cullMode: Material.BackFaceCulling
+
+            property real specular: 0
+            property real density: 0.0
+            property real opacity: 1
+            property real roughness: 1
+            property real clearcoat: 1
+            property real metalness: 0.0
+            property real sssDistortion: 0.1
+            property real sssPower: 1
+            property real sssScale: 3
+            property color baseColor: "#808080"
+            property color sssColor: "#737d80"
+            property TextureInput dfMask: smoketexinput
+            alwaysDirty: false
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            fragmentShader: "shaders/smoke.frag"
+            sourceBlend: CustomMaterial.SrcAlpha
+            vertexShader: "shaders/smoke.vert"
+            shadingMode: CustomMaterial.Shaded
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "Smoke Material"
+        }
+    }
+    staticFlags: 0
+}
diff --git a/examples/demos/FX_Material_Showroom/content/SnowEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/SnowEffect.ui.qml
new file mode 100644
index 000000000..791f41b4c
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/SnowEffect.ui.qml
@@ -0,0 +1,126 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: snow
+    ParticleEmitter3D {
+        id: modelShapeEmitter3
+
+        enabled: snow.visible
+        y: 400
+        particleScale: 0.3
+        z: 0.00002
+        particleEndScaleVariation: 0.3
+        lifeSpan: 15000
+        particleScaleVariation: 0.3
+        particleRotationVariation.y: 360
+        shape: targetShape3
+        particleRotationVariation.x: 360
+        emitRate: 1000
+        particleRotationVelocityVariation.y: 90
+        system: snow
+        particleRotationVelocityVariation.z: 90
+        particleEndScale: 0.3
+        particleRotationVariation.z: 360
+        particleRotationVelocityVariation.x: 90
+        particle: particleRed3
+        ModelParticle3D {
+            id: particleRed3
+            color: "#ffffff"
+            fadeOutEffect: Particle3D.FadeNone
+            fadeInEffect: Particle3D.FadeNone
+            colorVariation.z: 1
+            sortMode: Particle3D.SortDistance
+            unifiedColorVariation: false
+            maxAmount: 10000
+            fadeInDuration: 500
+            colorVariation.x: 1
+            colorVariation.y: 1
+            hasTransparency: true
+            fadeOutDuration: 500
+        }
+    }
+
+    ParticleModelShape3D {
+        id: targetShape3
+        delegate: Model {
+            source: "#Rectangle"
+            eulerRotation.x: -90
+            scale.x: 10
+            scale.y: 10
+        }
+        fill: false
+    }
+
+    Gravity3D {
+        id: gravity3
+        magnitude: 10
+        direction.y: -0.1
+    }
+
+    Model {
+        source: "#Cube"
+        castsReflections: true
+        castsShadows: true
+        instancing: particleRed3.instanceTable
+        receivesShadows: true
+        materials: snowMat
+        receivesReflections: true
+    }
+
+    Wander3D {
+        id: wander
+        globalPaceStart.y: 0
+        globalPace.y: 0
+        uniqueAmountVariation: 1
+        uniquePaceVariation: 1
+        uniquePace.z: 0.3
+        uniquePace.y: 0
+        uniquePace.x: 0.3
+        uniqueAmount.z: 10
+        uniqueAmount.x: 10
+        globalPaceStart.z: 0.3
+        globalPaceStart.x: 0.3
+        globalPace.z: 0
+        globalPace.x: 0
+        globalAmount.z: 0
+        globalAmount.x: 0
+        particles: particleRed3
+        system: snow
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: snowMat
+            cullMode: Material.BackFaceCulling
+            property color baseColor: "#ffffff"
+            property TextureInput dfMask: dfMask_snow
+            TextureInput {
+                id: dfMask_snow
+                texture: dfMask_snowtex
+                enabled: true
+            }
+
+            Texture {
+                id: dfMask_snowtex
+                source: "file:content/images/snowflake_DF_multi.tga"
+                generateMipmaps: true
+                mipFilter: Texture.Linear
+            }
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            fragmentShader: "shaders/snow.frag"
+            sourceBlend: CustomMaterial.SrcAlpha
+            shadingMode: CustomMaterial.Shaded
+            vertexShader: "shaders/snow.vert"
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "Snow Material"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/SparksEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/SparksEffect.ui.qml
new file mode 100644
index 000000000..f7a5e77ae
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/SparksEffect.ui.qml
@@ -0,0 +1,222 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: sparks
+
+    ParticleEmitter3D {
+        id: lineSpark
+        particleScale: 0
+        lifeSpan: 100
+        velocity: targetDirection
+        enabled: sparks.visible
+        lifeSpanVariation: 100
+        particleEndScaleVariation: 1
+        particleEndScale: 1
+        emitRate: 2500
+        particle: sparkParticle
+        system: sparks
+
+        ModelParticle3D {
+            id: sparkParticle
+            color: "#ffffff"
+
+            unifiedColorVariation: false
+            fadeInDuration: 50
+            hasTransparency: true
+            sortMode: Particle3D.SortDistance
+            fadeOutDuration: 50
+            alignMode: Particle3D.AlignTowardsStartVelocity
+            maxAmount: 50000
+        }
+
+        TargetDirection3D {
+            id: targetDirection
+            position.x: -3
+            magnitudeVariation: 100
+            magnitude: 100
+            positionVariation.z: 1
+            positionVariation.y: 1
+            positionVariation.x: 1
+        }
+    }
+
+    Gravity3D {
+        id: gravity5
+        direction.y: -1
+        magnitude: 8.9
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        scale.z: 0.75
+        receivesShadows: true
+        castsShadows: true
+        instancing: sparkParticle.instanceTable
+        materials: sparkMat
+        scale.y: .1
+        receivesReflections: true
+        scale.x: .1
+    }
+
+    Wander3D {
+        id: wander3
+        uniqueAmount.y: 0
+        uniqueAmount.x: 0
+        globalAmount.z: 0
+        globalPaceStart.z: 0.1
+        uniquePace.x: 0.1
+        system: sparks
+        uniquePaceVariation: 1
+        globalPace.y: 0.1
+        uniquePace.y: 0.1
+        uniquePace.z: 0.1
+        globalPaceStart.y: 0.1
+        uniqueAmount.z: 0
+        globalPaceStart.x: 0.1
+        globalPace.x: 0.1
+        uniqueAmountVariation: 1
+        globalAmount.x: 0
+        globalPace.z: 0.1
+    }
+
+    staticFlags: 0
+
+    ParticleSystem3D {
+        id: dotSparks
+        ParticleEmitter3D {
+            id: lineSpark1
+            enabled: sparks.visible
+            shape: targetShape16
+            velocity: vectorDirection8
+            particleRotationVariation.z: 360
+            particleRotationVariation.y: 360
+            particleRotationVariation.x: 360
+            lifeSpan: 100
+            particleEndScale: 1
+            system: dotSparks
+            emitRate: 100
+            ModelParticle3D {
+                id: sparkParticle1
+                color: "#ffffff"
+                alignMode: Particle3D.AlignTowardsStartVelocity
+
+                property bool castsReflections: true
+                maxAmount: 50000
+                sortMode: Particle3D.SortDistance
+                fadeInDuration: 50
+                fadeOutDuration: 50
+                unifiedColorVariation: false
+                hasTransparency: true
+            }
+            particle: sparkParticle1
+            particleRotationVelocityVariation.y: 360
+            particleScaleVariation: 1
+            particleRotationVelocityVariation.z: 360
+            particleEndScaleVariation: 1
+            lifeSpanVariation: 100
+            particleRotationVelocityVariation.x: 360
+        }
+
+        Gravity3D {
+            id: gravity12
+            magnitude: 8.9
+            direction.y: -1
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            scale.x: 0.3
+            scale.y: 0.1
+            instancing: sparkParticle1.instanceTable
+            materials: sparkMat
+            receivesReflections: true
+            castsShadows: true
+            scale.z: 0.1
+            receivesShadows: true
+        }
+
+        VectorDirection3D {
+            id: vectorDirection8
+            direction.x: -100
+            direction.z: 0
+            directionVariation.z: 100
+            directionVariation.y: 100
+            directionVariation.x: 100
+            direction.y: 0
+        }
+
+        Wander3D {
+            id: wander11
+            system: dotSparks
+            uniquePaceVariation: 1
+            uniquePace.z: 0.1
+            globalPaceStart.x: 0.1
+            globalAmount.x: 0
+            uniqueAmount.y: 10
+            uniquePace.x: 0.1
+            globalPace.x: 0.1
+            uniqueAmount.z: 10
+            uniqueAmount.x: 10
+            uniquePace.y: 0.1
+            uniqueAmountVariation: 1
+            globalAmount.z: 0
+            globalPaceStart.z: 0.1
+            globalPace.z: 0.1
+            globalPace.y: 0.1
+            globalPaceStart.y: 0.1
+        }
+
+        ParticleModelShape3D {
+            id: targetShape16
+            fill: true
+            delegate: Model {
+                source: "#Sphere"
+                eulerRotation.x: -90
+                scale.x: 1
+                scale.y: 1
+                scale.z: 1
+            }
+        }
+
+        staticFlags: 0
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: sparkMat
+            cullMode: Material.NoCulling
+            property color baseColor: "#e5b16d"
+            property real brightness: 10
+            property TextureInput dfMask: sparktexinput
+            depthDrawMode: Material.NeverDepthDraw
+            objectName: "New Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            destinationBlend: CustomMaterial.One
+            TextureInput {
+                id: sparktexinput
+                texture: sparktex
+                enabled: true
+            }
+
+            Texture {
+                id: sparktex
+                source: "file:content/images/spark.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+            vertexShader: "shaders/spark.vert"
+            fragmentShader: "shaders/spark.frag"
+            shadingMode: CustomMaterial.Shaded
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/SteamEffect.ui.qml b/examples/demos/FX_Material_Showroom/content/SteamEffect.ui.qml
new file mode 100644
index 000000000..452142b66
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/SteamEffect.ui.qml
@@ -0,0 +1,363 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick3D
+import QtQuick3D.Particles3D
+import QtQuick3D.Helpers
+
+ParticleSystem3D {
+    id: steam
+    ParticleEmitter3D {
+        id: modelShapeEmitter10
+
+        enabled: steam.visible
+        x: 0
+        particleScale: 0
+        velocity: vectorDirection5
+        system: steam
+        lifeSpan: 500
+        particleRotation.y: 0
+        ModelParticle3D {
+            id: particleRed13
+            color: "#ffffff"
+            alignMode: Particle3D.AlignTowardsStartVelocity
+            maxAmount: 1500
+            sortMode: Particle3D.SortNone
+            fadeInDuration: 250
+            fadeOutDuration: 250
+            unifiedColorVariation: true
+            colorVariation.w: 1
+            hasTransparency: true
+        }
+        particleRotation.z: 0
+        particle: particleRed13
+        particleRotationVelocity.x: 0
+        particleRotationVelocityVariation.y: 0
+        particleScaleVariation: 0
+        particleRotationVelocityVariation.z: 0
+        shape: targetShape14
+        particleEndScale: 10
+        emitRate: 75
+        particleRotation.x: 0
+        particleRotationVariation.x: 0
+        particleRotationVelocity.z: 0
+        particleRotationVelocity.y: 0
+        particleRotationVariation.z: 0
+        particleEndScaleVariation: 10
+        lifeSpanVariation: 500
+        particleRotationVelocityVariation.x: 0
+        particleRotationVariation.y: 0
+    }
+
+    ParticleModelShape3D {
+        id: targetShape14
+        fill: false
+        delegate: Model {
+            source: "#Rectangle"
+            eulerRotation.x: -90
+            scale.x: 0.1
+            scale.y: 0.1
+        }
+    }
+
+    Model {
+        source: "#Sphere"
+        castsReflections: true
+        scale.x: 0.01
+        scale.y: 0.01
+        instancing: particleRed13.instanceTable
+        materials: steamMat
+        receivesReflections: true
+        castsShadows: true
+        scale.z: 0.1
+        receivesShadows: true
+    }
+
+    Wander3D {
+        id: wander9
+        globalAmount.y: 5
+        uniqueAmount.y: 10
+        system: steam
+        uniquePaceVariation: 1
+        particles: particleRed13
+        uniquePace.z: 0.1
+        globalPaceStart.x: 0.1
+        globalAmount.x: 5
+        uniquePace.x: 0.1
+        globalPace.x: 0.1
+        uniqueAmount.z: 10
+        uniqueAmount.x: 10
+        uniquePace.y: 0.1
+        uniqueAmountVariation: 1
+        globalPaceStart.z: 0.1
+        globalAmount.z: 5
+        globalPace.z: 0.1
+        globalPace.y: 0.1
+        globalPaceStart.y: 0.1
+    }
+
+    VectorDirection3D {
+        id: vectorDirection5
+        directionVariation.z: 10
+        directionVariation.y: 50
+        directionVariation.x: 10
+        direction.z: 0
+        direction.y: 100
+    }
+    staticFlags: 0
+
+    ParticleSystem3D {
+        id: steamJet_thick
+        y: 25
+        ParticleEmitter3D {
+            id: modelShapeEmitter11
+            x: 0
+
+            enabled: steam.visible
+            particleScale: 2.5
+            system: steamJet_thick
+            lifeSpan: 5000
+            particleRotation.y: 0
+            ModelParticle3D {
+                id: particleRed14
+                color: "#ffffff"
+                alignMode: Particle3D.AlignTowardsStartVelocity
+                maxAmount: 1500
+                colorVariation.y: 0
+                sortMode: Particle3D.SortNone
+                fadeInDuration: 2500
+                fadeOutDuration: 2500
+                unifiedColorVariation: true
+                colorVariation.w: 1
+                colorVariation.z: 0
+                colorVariation.x: 0
+                hasTransparency: true
+            }
+            particleRotation.z: 0
+            z: -5.27116
+            particle: particleRed14
+            velocity: vectorDirection7
+            particleRotationVelocity.x: 0
+            particleRotationVelocityVariation.y: 15
+            particleScaleVariation: 2.5
+            particleRotationVelocityVariation.z: 15
+            shape: targetShape15
+            particleEndScale: 10
+            emitRate: 50
+            particleRotation.x: 0
+            particleRotationVariation.x: 0
+            particleRotationVelocity.z: 0
+            particleRotationVelocity.y: 0
+            particleRotationVariation.z: 0
+            particleEndScaleVariation: 5
+            lifeSpanVariation: 5000
+            particleRotationVelocityVariation.x: 15
+            particleRotationVariation.y: 0
+        }
+
+        ParticleModelShape3D {
+            id: targetShape15
+            fill: false
+            delegate: Model {
+                source: "#Rectangle"
+                eulerRotation.x: -90
+                scale.x: 0.6
+                scale.y: 0.6
+            }
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            scale.x: 0.1
+            scale.y: 0.1
+            instancing: particleRed14.instanceTable
+            materials: steamMat
+            receivesReflections: true
+            castsShadows: true
+            scale.z: 0.1
+            receivesShadows: true
+        }
+
+        Wander3D {
+            id: wander10
+            uniqueAmount.y: 10
+            globalAmount.y: 5
+            system: steamJet_thick
+            uniquePaceVariation: 1
+            particles: particleRed14
+            globalAmount.x: 5
+            globalPaceStart.x: 0.1
+            uniquePace.z: 0.1
+            globalPace.x: 0.1
+            uniquePace.x: 0.1
+            uniqueAmount.z: 10
+            uniqueAmount.x: 10
+            uniquePace.y: 0.1
+            uniqueAmountVariation: 1
+            globalAmount.z: 5
+            globalPaceStart.z: 0.1
+            globalPace.z: 0.1
+            globalPace.y: 0.1
+            globalPaceStart.y: 0.1
+        }
+
+        VectorDirection3D {
+            id: vectorDirection7
+            directionVariation.x: 5
+            direction.y: 75
+            direction.z: 0
+            directionVariation.z: 5
+            directionVariation.y: 25
+        }
+
+        Gravity3D {
+            id: gravity12
+            particles: particleRed14
+            system: steamJet_thick
+            magnitude: 1
+            direction.y: -8.9
+        }
+        staticFlags: 0
+    }
+
+    ParticleSystem3D {
+        id: steamCloud
+        y: 50
+        ParticleEmitter3D {
+            id: modelShapeEmitter9
+
+            enabled: steam.visible
+            x: 0
+            velocity: vectorDirection6
+            particleScale: 5
+            system: steamCloud
+            lifeSpan: 10000
+            particleRotation.y: 360
+            ModelParticle3D {
+                id: particleRed12
+                color: "#ffffff"
+                maxAmount: 1500
+                sortMode: Particle3D.SortNone
+                fadeInDuration: 5000
+                fadeOutDuration: 5000
+                unifiedColorVariation: true
+                colorVariation.w: 1
+                hasTransparency: true
+            }
+            particleRotation.z: 360
+            particle: particleRed12
+            particleRotationVelocity.x: 0
+            particleRotationVelocityVariation.y: 30
+            particleScaleVariation: 5
+            particleRotationVelocityVariation.z: 30
+            shape: targetShape13
+            particleEndScale: 20
+            emitRate: 25
+            particleRotation.x: 360
+            particleRotationVariation.x: 360
+            particleRotationVelocity.z: 0
+            particleRotationVelocity.y: 0
+            particleRotationVariation.z: 360
+            particleEndScaleVariation: 10
+            lifeSpanVariation: 10000
+            particleRotationVelocityVariation.x: 30
+            particleRotationVariation.y: 360
+        }
+
+        ParticleModelShape3D {
+            id: targetShape13
+            fill: false
+            delegate: Model {
+                source: "#Rectangle"
+                eulerRotation.x: -90
+                scale.x: 1
+                scale.y: 1
+            }
+        }
+
+        Gravity3D {
+            id: gravity11
+            particles: particleRed12
+            system: steamCloud
+            magnitude: 1
+            direction.y: -8.9
+        }
+
+        Model {
+            source: "#Sphere"
+            castsReflections: true
+            scale.x: 0.1
+            scale.y: 0.1
+            instancing: particleRed12.instanceTable
+            materials: steamMat
+            receivesReflections: true
+            castsShadows: true
+            scale.z: 0.1
+            receivesShadows: true
+        }
+
+        Wander3D {
+            id: wander8
+            globalAmount.y: 1
+            uniqueAmount.y: 10
+            system: steamCloud
+            uniquePaceVariation: 1
+            particles: particleRed12
+            globalAmount.x: 0
+            globalPaceStart.x: 0.1
+            uniquePace.z: 0.1
+            globalPace.x: 0.1
+            uniquePace.x: 0.1
+            uniqueAmount.z: 10
+            uniqueAmount.x: 10
+            uniquePace.y: 0.1
+            uniqueAmountVariation: 1
+            globalAmount.z: 0
+            globalPaceStart.z: 0.1
+            globalPace.z: 0.1
+            globalPace.y: 0.1
+            globalPaceStart.y: 0.1
+        }
+
+        VectorDirection3D {
+            id: vectorDirection6
+            directionVariation.x: 10
+            direction.y: 50
+            direction.z: 0
+            directionVariation.z: 10
+            directionVariation.y: 50
+        }
+    }
+
+    Node {
+        id: __materialLibrary__
+
+        CustomMaterial {
+            id: steamMat
+            fragmentShader: "shaders/steam.frag"
+            TextureInput {
+                id: steamtexinput
+                texture: steamtex
+                enabled: true
+            }
+
+            Texture {
+                id: steamtex
+                source: "images/steam.png"
+                mipFilter: Texture.Linear
+                generateMipmaps: true
+            }
+            objectName: "Steam Material"
+            sourceBlend: CustomMaterial.SrcAlpha
+            depthDrawMode: Material.NeverDepthDraw
+            destinationBlend: CustomMaterial.OneMinusSrcAlpha
+            property color baseColor: "#ffffff"
+            property TextureInput dfMask: steamtexinput
+            cullMode: Material.BackFaceCulling
+            shadingMode: CustomMaterial.Shaded
+            vertexShader: "shaders/steam.vert"
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/content/color_table.png b/examples/demos/FX_Material_Showroom/content/color_table.png
new file mode 100644
index 000000000..ecac519fa
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/color_table.png
diff --git a/examples/demos/FX_Material_Showroom/content/color_table2.png b/examples/demos/FX_Material_Showroom/content/color_table2.png
new file mode 100644
index 000000000..6b12c0623
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/color_table2.png
diff --git a/examples/demos/FX_Material_Showroom/content/fonts/fonts.txt b/examples/demos/FX_Material_Showroom/content/fonts/fonts.txt
new file mode 100644
index 000000000..ab9612206
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/fonts/fonts.txt
@@ -0,0 +1 @@
+Fonts in this folder are loaded automatically.
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/SSS.frag b/examples/demos/FX_Material_Showroom/content/shaders/SSS.frag
new file mode 100644
index 000000000..656e7cdf1
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/SSS.frag
@@ -0,0 +1,122 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+vec3 diff = vec3(0.0);
+vec4 albedo = vec4(0.0);
+float specVal = 0.0;
+vec3 spec = vec3(0.0);
+vec3 sss = vec3(0.0);
+vec3 fNormal = vec3(0.0);
+vec3 fView = vec3(0.0);
+float fresnel = 0.0;
+float fresnelBase = 0.0;
+float rough = 0.0;
+vec3 flakeNormal = vec3(0.0);
+
+float curvature = 0.0;
+
+VARYING vec3 vColor;
+VARYING vec3 vPos;
+
+vec3 testCol = vec3(0.0);
+
+void MAIN()
+{
+    fNormal = normalize(VAR_WORLD_NORMAL);
+    fView = normalize(VIEW_VECTOR);
+    fresnelBase = 1.0 - max(0.0, dot(fNormal, fView));
+    FRESNEL_POWER = 5.0;
+    fresnel = pow(1.0 - fresnelBase, FRESNEL_POWER);
+    specVal = mix(mix(fresnel * specular, specular, specular), 1.0, metalness + fresnelBase * clearcoat);
+    SPECULAR_AMOUNT = specVal;
+    albedo = baseColor;
+    BASE_COLOR = albedo;
+
+    vec3 vNormalWsDdx = dFdx(VAR_WORLD_NORMAL.xyz);
+    vec3 vNormalWsDdy = dFdy(VAR_WORLD_NORMAL.xyz);
+    float flGeometricRoughnessFactor = pow(clamp(max(dot(vNormalWsDdx, vNormalWsDdx), dot(vNormalWsDdy, vNormalWsDdy)), 0.0, 1.0), 0.333);
+    METALNESS = mix(metalness, 0.0, fresnelBase * clearcoat);
+    ROUGHNESS = mix(mix(roughness, 0.0, fresnel), 1.0, flGeometricRoughnessFactor);
+    rough = ROUGHNESS;
+
+    curvature = length(fwidth(fNormal));
+}
+
+void AMBIENT_LIGHT()
+{
+    diff += TOTAL_AMBIENT_COLOR;
+}
+
+const float PI = 3.141592;
+const float e = 2.71828;
+float r2 = roughness * roughness;
+
+float sssDepth = 1.0-density;
+float sssHalf = sssDepth*0.5;
+
+float PixarBRDF(vec3 normalWS, vec3 lightDirectionWS, vec3 viewDirectionWS)
+{
+    vec3 H = normalize(lightDirectionWS + viewDirectionWS);
+    float NH = dot(normalWS, H) * (1.0 - sssHalf) + sssHalf;
+    float VH = dot(viewDirectionWS, H) * (1.0 - sssHalf) + sssHalf;
+    float LN = max(0.0, dot(normalWS, lightDirectionWS) * (1.0 - sssHalf) + sssHalf);
+
+    float NH2 = NH * NH;
+    float step1 = NH2 - 1.0;
+    float secondStepExp = (step1 / (r2 * NH2));
+    float step2 = (exp(secondStepExp));
+    float step3 = (4.0 * PI * r2 * NH2 * NH * VH);
+    float BRDF = max(0.0, step2 / step3) * LN;
+
+    return BRDF;
+}
+
+float DisneyDiffuse(vec3 l, vec3 n, vec3 v)
+{
+    float a = 1.0 - 0.5 * (r2 / (r2 + 0.57));
+    float b = 0.45 * (r2 / (r2 + 0.09));
+
+    float nl = max(0.0, dot(n, l) * (1.0 - sssHalf) + sssHalf);
+    float nv = max(0.0, dot(n, v) * (1.0 - sssHalf) + sssHalf);
+
+    float ga = dot(v - n * nv, n - n * nl);
+    ga = max(0.0, ga);
+
+    return nl * mix(1.0, (a + b * ga * sqrt((1.0 - nv * nv) * (1.0 - nl * nl)) / max(nl, nv)), roughness);
+}
+
+float DICE_SSS(vec3 l, vec3 n, vec3 v)
+{
+    vec3 vLTLight = (l + n);
+    float fLTDot = max(0.0, dot(-vLTLight, v) * (1.0 - sssHalf) + sssHalf);
+
+    return fLTDot;
+}
+
+void DIRECTIONAL_LIGHT()
+{
+    float lightDot = smoothstep(1.0 - density, 1.0, dot(-fNormal, TO_LIGHT_DIR));
+    lightDot = smoothstep(.650, 0.350, dot(-fNormal, TO_LIGHT_DIR));
+    float shadow = mix(SHADOW_CONTRIB, 1.0, lightDot);
+
+    vec3 diffuse = LIGHT_COLOR * DisneyDiffuse(TO_LIGHT_DIR, fNormal, fView);
+    vec3 specular = LIGHT_COLOR * PixarBRDF(fNormal, TO_LIGHT_DIR, fView);
+    vec3 subsurface = LIGHT_COLOR * DICE_SSS(TO_LIGHT_DIR, fNormal, fView);
+
+    diff += diffuse * shadow;
+    spec += specular * shadow;
+    sss += subsurface;
+}
+
+void POST_PROCESS()
+{
+    vec3 specularAcc = SPECULAR.rgb + spec;
+    vec3 diffuseAcc = albedo.rgb * (DIFFUSE.rgb + diff);
+    vec3 totalLight = mix(diffuseAcc, mix(specularAcc, mix(albedo.rgb * specularAcc, specularAcc + diffuseAcc * fresnel, fresnel), metalness), specVal);
+    totalLight = (totalLight + subsurfaceColor.rgb * sss * (1.0 - density) * 0.5) * vColor.rgb;
+    vec3 clearcoatAcc = specularAcc;
+    COLOR_SUM = vec4((totalLight + specularAcc * fresnelBase * clearcoat) + EMISSIVE, opacity);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/SSS.vert b/examples/demos/FX_Material_Showroom/content/shaders/SSS.vert
new file mode 100644
index 000000000..1633ecd94
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/SSS.vert
@@ -0,0 +1,20 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+VARYING vec3 vColor;
+VARYING vec3 vPos;
+VARYING vec3 vNormal;
+VARYING vec3 vViewVec;
+VARYING vec2 vTexcoord;
+
+void MAIN()
+{
+    vColor = COLOR.rgb;
+    vPos = VERTEX.xyz;
+    vNormal = normalize(NORMAL);
+    vTexcoord = UV0;
+    vViewVec = normalize(CAMERA_POSITION - (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/bubble.frag b/examples/demos/FX_Material_Showroom/content/shaders/bubble.frag
new file mode 100644
index 000000000..fc35819f6
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/bubble.frag
@@ -0,0 +1,61 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewNormal;
+VARYING vec3 vNormal;
+
+float fresnel = 0.0;
+vec3 fViewNormal = vec3(0.0);
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+    fresnel = 1.0 - max(0.0,dot(VAR_WORLD_NORMAL, VIEW_VECTOR));
+    fViewNormal = normalize(vViewNormal);
+    ROUGHNESS = 0.25;
+    METALNESS = 0.0;
+    SPECULAR_AMOUNT = 1.0;
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = fViewNormal.xy;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy/textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    vec2 refractionCoord = screenCoord;
+    refractionCoord.x = fViewNormal.x > 0.0 ? mix(refractionCoord.x, 1.0, fViewNormal.x) : mix(refractionCoord.x, 0.0, -fViewNormal.x);
+    refractionCoord.y = fViewNormal.y > 0.0 ? mix(refractionCoord.y, 0.0, fViewNormal.y) : mix(refractionCoord.y, 1.0, -fViewNormal.y);
+    vec3 sceneSample_refr = texture(SCREEN_TEXTURE, refractionCoord).rgb;
+
+    vec2 reflectionCoord = screenCoord;
+    reflectionCoord.x = fViewNormal.x > 0.0 ? mix(reflectionCoord.x, 0.0, fViewNormal.x) : mix(reflectionCoord.x, 1.0, -fViewNormal.x);
+    reflectionCoord.y = fViewNormal.y > 0.0 ? mix(reflectionCoord.y, 1.0, fViewNormal.y) : mix(reflectionCoord.y, 0.0, -fViewNormal.y);
+
+    float aberrAmount = (1.0 - abs(fViewNormal.x));
+
+    vec2 chromAberr_A = reflectionCoord;
+    chromAberr_A.x += (screenCoord.x*2.0-1.0) * aberrAmount;
+
+    vec2 chromAberr_B = reflectionCoord;
+    chromAberr_B.y += (screenCoord.y*2.0-1.0) * aberrAmount;
+
+    vec2 chromAberr_C = reflectionCoord;
+    chromAberr_C.xy += ((gl_FragCoord.z/gl_FragCoord.y) * 2.0 - 1.0) * aberrAmount;
+
+    float sceneSample_refl_x = texture(SCREEN_TEXTURE, chromAberr_A).r;
+    float sceneSample_refl_y = texture(SCREEN_TEXTURE, chromAberr_B).g;
+    float sceneSample_refl_z = texture(SCREEN_TEXTURE, chromAberr_C).b;
+
+    vec3 sceneSample_refl = vec3(sceneSample_refl_x,sceneSample_refl_y,sceneSample_refl_z);
+
+    vec3 fColor = (sceneSample_refr + sceneSample_refl / 2.0);
+    float a = vColor.a * max(0.25, fresnel);
+
+    vec3 lighting = vec3(DIFFUSE.rgb + SPECULAR.rgb + EMISSIVE.rgb);
+    COLOR_SUM = vec4(fColor+lighting, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/bubble.vert b/examples/demos/FX_Material_Showroom/content/shaders/bubble.vert
new file mode 100644
index 000000000..6e7d2359f
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/bubble.vert
@@ -0,0 +1,15 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewNormal;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vViewNormal = normalize((VIEW_MATRIX * vec4(NORMAL, 0.0)).xyz);
+    vNormal = normalize(NORMAL_MATRIX * NORMAL);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/cloud.frag b/examples/demos/FX_Material_Showroom/content/shaders/cloud.frag
new file mode 100644
index 000000000..d07ad0f45
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/cloud.frag
@@ -0,0 +1,50 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = 0.0;
+    ROUGHNESS = 0.50;
+    METALNESS = 0.0;
+
+    fresnel = smoothstep(0.0, 1.0, abs(dot(VIEW_VECTOR,VAR_WORLD_NORMAL)));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord*2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    float a = vColor.a*dfDot;
+    a *= mix(smoothstep(0.50, 1.0, dfDot * fresnel), 1.0, pow(fresnel, 3.0));
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR.rgb) * mix(0.50, 1.0, a), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/cloud.vert b/examples/demos/FX_Material_Showroom/content/shaders/cloud.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/cloud.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/debris.frag b/examples/demos/FX_Material_Showroom/content/shaders/debris.frag
new file mode 100644
index 000000000..ac7a368ac
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/debris.frag
@@ -0,0 +1,49 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+
+    fresnel = abs(dot(VIEW_VECTOR, VAR_WORLD_NORMAL));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    vec3 fColor = baseColor.rgb;
+    float a = baseColor.a * vColor.a;
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+
+    a *= pow(fresnel,5.0) * 0.1;
+    a += smoothstep(0.9975, 1.0, fresnel) * brightness;
+    a *= depthFade;
+    COLOR_SUM = vec4(fColor * a, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/debris.vert b/examples/demos/FX_Material_Showroom/content/shaders/debris.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/debris.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.frag b/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.frag
new file mode 100644
index 000000000..d411bc8a5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.frag
@@ -0,0 +1,52 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = 0.0;
+    ROUGHNESS = 0.50;
+    METALNESS = 0.0;
+
+    fresnel = smoothstep(0.0, 1.0, abs(dot(VIEW_VECTOR, VAR_WORLD_NORMAL)));
+}
+
+
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord*2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    float a = vColor.a * dfDot;
+    a *= mix(smoothstep(0.50, 1.0, dfDot * fresnel), 1.0, pow(fresnel, 3.0));
+
+    float depthFade = smoothstep(0.0, 0.01, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR.rgb) * mix(0.50, 1.0, a), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.vert b/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/dustcloud.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/fire.frag b/examples/demos/FX_Material_Showroom/content/shaders/fire.frag
new file mode 100644
index 000000000..f73690d73
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/fire.frag
@@ -0,0 +1,46 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+
+    fresnel = smoothstep(0.0, 1.0, abs(dot(VIEW_VECTOR,VAR_WORLD_NORMAL)));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    vec3 fColor = mix(baseColor.rgb, baseColor.rgb * 2.250, vColor.a);
+    float a = baseColor.a * dfDot * vColor.a;
+    a *= smoothstep(0.0, 1.0, dfDot * fresnel);
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+    a *= depthFade;
+    COLOR_SUM = vec4(fColor * a, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/fire.vert b/examples/demos/FX_Material_Showroom/content/shaders/fire.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/fire.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/flash.frag b/examples/demos/FX_Material_Showroom/content/shaders/flash.frag
new file mode 100644
index 000000000..50c3c5e2a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/flash.frag
@@ -0,0 +1,41 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+
+    float fresnelBase = abs(dot(VAR_WORLD_NORMAL, VIEW_VECTOR));
+    fresnel = smoothstep(0.0, 1.0, fresnelBase);
+    fresnel *= vColor.a;
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    float distortion = centerDist * 0.5;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fColor = sceneSample.rgb * baseColor.rgb;
+    float a = baseColor.a;
+
+    float depthFade = smoothstep(0.0, 0.05, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+    a *= fresnel;
+
+    COLOR_SUM = vec4((fColor + a) * a * a, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/flash.vert b/examples/demos/FX_Material_Showroom/content/shaders/flash.vert
new file mode 100644
index 000000000..2101421ea
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/flash.vert
@@ -0,0 +1,11 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/floor.frag b/examples/demos/FX_Material_Showroom/content/shaders/floor.frag
new file mode 100644
index 000000000..a158b0eda
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/floor.frag
@@ -0,0 +1,159 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+vec3 diff = vec3(0.0);
+vec4 albedo = vec4(0.0);
+float specVal = 0.0;
+vec3 spec = vec3(0.0);
+vec3 sss = vec3(0.0);
+vec3 fNormal = vec3(0.0);
+float fresnel = 0.0;
+float fresnelBase = 0.0;
+float rough = 0.0;
+vec3 flakeNormal = vec3(0.0);
+
+float curvature = 0.0;
+
+VARYING vec3 vColor;
+VARYING vec3 vPos;
+VARYING vec2 vTexcoord;
+
+VARYING vec3 vNormal;
+VARYING vec3 vBinormal;
+VARYING vec3 vTangent;
+VARYING mat3 TBNMat;
+
+float ao = 0.0;
+vec3 testCol = vec3(0.0);
+
+void MAIN()
+{
+    vec3 aoSrc = texture(aoTexture,(((UV0 - 0.5) * (1.0 / aoMaskScale.xy)) + 0.5)+aoMaskPos.xy).rgb;
+    ao = dot(aoMask.rgb, aoSrc);
+
+    mat3 fTBN = mat3(normalize(vTangent), normalize(vBinormal), normalize(vNormal));
+
+    vec4 matParams = texture(paramsTexture, vPos.xz * 0.2);
+
+    fNormal = texture(normalsTexture, vPos.xz * 0.1).rgb * 2.0 - 1.0;
+    fNormal.xy *= 0.25;
+    fNormal = normalize(fNormal);
+    fNormal = normalize(fTBN * fNormal);
+    fresnelBase = 1.0 - max(0.0, dot(fNormal, VIEW_VECTOR));
+
+    NORMAL = fNormal;
+
+    fresnel = 1.0-max(0.0, dot(fNormal, VIEW_VECTOR));
+    FRESNEL_POWER = 5.0;
+    fresnel = pow(fresnel, FRESNEL_POWER);
+
+    specVal = mix(mix(mix(fresnel * specular, specular, specular), 1.0, metalness), 1.0, fresnelBase * clearcoat);
+    SPECULAR_AMOUNT = specVal;
+    albedo = baseColor;
+    BASE_COLOR = albedo;
+
+    vec3 vNormalWsDdx = dFdx(fNormal.xyz);
+    vec3 vNormalWsDdy = dFdy(fNormal.xyz);
+    float flGeometricRoughnessFactor = pow(clamp(max(dot(vNormalWsDdx, vNormalWsDdx), dot(vNormalWsDdy, vNormalWsDdy)), 0.0, 1.0), 0.333);
+    METALNESS = mix(metalness, 0.0, fresnelBase * clearcoat);
+    ROUGHNESS = mix(mix(mix(matParams.r*roughness, 0.0, fresnel), 0.0, fresnelBase*clearcoat), 1.0, flGeometricRoughnessFactor);
+    rough = ROUGHNESS;
+
+    curvature = length(fwidth(fNormal));
+}
+
+float shadowAcc = 1.0;
+
+void AMBIENT_LIGHT()
+{
+    diff += TOTAL_AMBIENT_COLOR * ao;
+}
+
+const float PI = 3.141592;
+const float e = 2.71828;
+float r2 = roughness * roughness;
+
+float sssDepth = 1.0 - density;
+float sssHalf = sssDepth * 0.5;
+
+void SPECULAR_LIGHT()
+{
+}
+
+float PixarBRDF(vec3 normalWS, vec3 lightDirectionWS, vec3 viewDirectionWS)
+{
+    vec3 H = normalize(lightDirectionWS + viewDirectionWS);
+    float NH = (dot(normalWS, H));
+    NH = NH * (1.0 - sssHalf) + sssHalf;
+    float NH2 = NH * NH;
+    float NH3 = NH2 * NH;
+    float VH = (dot(viewDirectionWS, H));
+    VH = VH * (1.0 - sssHalf) + sssHalf;
+    float LN = dot(normalWS, lightDirectionWS);
+    LN = LN * (1.0 - sssHalf) + sssHalf;
+    LN=max(0.0, LN);
+
+    float step1 = NH2 - 1.0;
+    float secondStepExp = (step1 / (r2 * NH2));
+    float step2 = (pow(e, secondStepExp));
+    float step3 = (4.0 * PI * r2 * NH3 * VH);
+    float BRDF = max(0.0,step2 / step3) * LN;
+
+    return BRDF;
+}
+
+float DisneyDiffuse(vec3 l, vec3 n, vec3 v)
+{
+    float a = 1.0 - 0.5 * (r2 / (r2 + 0.57));
+    float b = 0.45 * (r2 / (r2 + 0.09));
+
+    float nl = dot(n, l);
+    nl = nl * (1.0 - sssHalf) + sssHalf;
+    float nv = (dot(n, v));
+    nv = nv * (1.0 - sssHalf) + sssHalf;
+
+    float ga = dot(v - n * nv, n - n * nl);
+
+    return max(0.0, nl) * mix(1.0, (a + b * max(0.0, ga) * sqrt((1.0 - nv * nv) * (1.0 - nl * nl)) / max(nl, nv)), roughness);
+}
+
+float DICE_SSS(vec3 l, vec3 n, vec3 v)
+{
+    vec3 vLTLight = (l + n * sssDistortion);
+    float fLTDot = pow(max(dot(v, -vLTLight), 0.0), sssPower) * sssScale;
+    float flt = 1.0 / length(l) * fLTDot * sssDepth;
+
+    return flt;
+}
+
+
+void DIRECTIONAL_LIGHT()
+{
+    float lightDot = smoothstep(1.0, density, dot(-fNormal, TO_LIGHT_DIR));
+    float shadow = mix(SHADOW_CONTRIB, 1.0, lightDot * sssDepth);
+    shadowAcc *= shadow;
+    diff += LIGHT_COLOR * DisneyDiffuse(TO_LIGHT_DIR, fNormal, VIEW_VECTOR) * shadow;
+    spec += LIGHT_COLOR * PixarBRDF(fNormal, TO_LIGHT_DIR, VIEW_VECTOR) * shadow;
+    sss += LIGHT_COLOR * DICE_SSS(TO_LIGHT_DIR, fNormal, VIEW_VECTOR);
+}
+
+void POST_PROCESS()
+{
+    vec3 specularAcc = SPECULAR.rgb + spec;
+    vec3 diffuseAcc = albedo.rgb * (DIFFUSE.rgb + diff);
+    vec3 totalLight = (mix(diffuseAcc, mix(specularAcc, mix(albedo.rgb * specularAcc, specularAcc + diffuseAcc * fresnel, fresnel), metalness), specVal) + subsurfaceColor.rgb * sss * (1.0 - density) * 0.5) * vColor.rgb;
+    vec3 clearcoatAcc = specularAcc;
+
+    float brightAO = ao * 0.5;
+    float darkAO = ao;
+    float aoRefined = mix(darkAO, brightAO, shadowAcc);
+
+    float a = smoothstep(0.50, .750, length(UV0 * 2.0 - 1.0));
+    vec3 col = (totalLight + specularAcc * fresnelBase * clearcoat * shadowAcc) + EMISSIVE;
+    col = mix(col.rgb, vec3(0.0), aoRefined);
+
+    COLOR_SUM = vec4(col, 1.0);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/floor.vert b/examples/demos/FX_Material_Showroom/content/shaders/floor.vert
new file mode 100644
index 000000000..238d1631c
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/floor.vert
@@ -0,0 +1,46 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+VARYING vec3 vColor;
+VARYING vec3 vPos;
+VARYING vec3 vNormal;
+VARYING vec3 vBinormal;
+VARYING vec3 vTangent;
+VARYING vec3 vViewVec;
+VARYING vec2 vTexcoord;
+VARYING mat3 TBNMat;
+
+vec3 calculateTangent(vec3 normal)
+{
+    // Calculate the tangent vector
+    vec3 Q1 = vec3(1.0, 0.0, 0.0);
+    vec3 Q2 = vec3(0.0, 1.0, 0.0);
+    vec3 tangent = normalize(Q1 * Q2.y - Q1.y * Q2);
+
+    // Calculate the handedness of the tangent basis
+    float handedness = (dot(cross(normal, tangent), Q2) < 0.0) ? -1.0 : 1.0;
+
+    return handedness * tangent;
+}
+
+vec3 calculateBinormal(vec3 normal, vec3 tangent)
+{
+    return normalize(cross(normal, tangent));
+}
+
+void MAIN()
+{
+    vColor = COLOR.rgb;
+    vPos = VERTEX.xyz;
+    vNormal = normalize(NORMAL_MATRIX * NORMAL);
+    vTangent = calculateTangent(vNormal);
+    vBinormal = calculateBinormal(vNormal, vTangent);
+
+    TBNMat = mat3(vTangent, vBinormal, vNormal);
+
+    vTexcoord = UV0;
+    vViewVec = normalize(CAMERA_POSITION - (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/heatwave.frag b/examples/demos/FX_Material_Showroom/content/shaders/heatwave.frag
new file mode 100644
index 000000000..b2a204f6d
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/heatwave.frag
@@ -0,0 +1,49 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+VARYING vec3 vViewVec;
+VARYING float vFresnel;
+float fFresnel;
+
+vec3 fNormal = vec3(0.0);
+
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+    fNormal = normalize(VAR_WORLD_NORMAL);
+    fFresnel = dot(fNormal, normalize(vViewVec));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    float ripple = (sin(fNormal.y * 5.0));
+
+    float fd = smoothstep(0.0, 1.0, fFresnel) * ripple;
+    float distortion = .05 * fd;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+
+    screenCoord.x = centerCoord.x > 0.0 ? mix(screenCoord.x, 0.0, centerCoord.x*distortion) : mix(screenCoord.x, 1.0, -centerCoord.x * distortion);
+    screenCoord.y = centerCoord.y > 0.0 ? mix(screenCoord.y, 0.0, centerCoord.y*distortion) : mix(screenCoord.y, 1.0, -centerCoord.y * distortion);
+
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fColor = sceneSample.rgb;
+    float a = min(max(0.0,centerDist*smoothstep(0.0, 1.0, vColor.a)), 1.0);
+
+    float depthFade = smoothstep(0.0, 0.01, abs(depthSample - gl_FragCoord.z));
+    float fa = smoothstep(0.50, 1.0, fFresnel);
+    a *= depthFade * fa;
+
+    COLOR_SUM = vec4(fColor, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/heatwave.vert b/examples/demos/FX_Material_Showroom/content/shaders/heatwave.vert
new file mode 100644
index 000000000..5a6810425
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/heatwave.vert
@@ -0,0 +1,17 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+VARYING vec3 vViewVec;
+VARYING float vFresnel;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = normalize(NORMAL_MATRIX * NORMAL);
+    vViewVec = normalize(CAMERA_POSITION - (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz);
+    vFresnel = -dot(vViewVec, vNormal);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/raindrop.frag b/examples/demos/FX_Material_Showroom/content/shaders/raindrop.frag
new file mode 100644
index 000000000..b79719b81
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/raindrop.frag
@@ -0,0 +1,58 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewDir;
+
+float fresnel = 1.0;
+
+vec4 rainTex = vec4(1.0);
+
+vec3 blend_rnm(vec3 n1, vec3 n2)
+{
+    vec3 t = n1.xyz * vec3( 2,  2, 2) + vec3(-1, -1,  0);
+    vec3 u = n2.xyz * vec3(-2, -2, 2) + vec3( 1,  1, -1);
+    vec3 r = t * dot(t, u) - u * t.z;
+
+    return normalize(r);
+}
+
+void MAIN()
+{
+    rainTex = texture(rainmap, UV0 * 1.0);
+    fresnel = abs(dot(normalize(vViewDir), normalize(VAR_WORLD_NORMAL)));
+    fresnel *= 1.0 - abs(VAR_WORLD_NORMAL.y);
+
+    BASE_COLOR = vec4(0.0);
+    SPECULAR_AMOUNT = 1.0;
+    ROUGHNESS = 0.250;
+    METALNESS = 0.0;
+    NORMAL = blend_rnm(normalize(VAR_WORLD_NORMAL) * 0.5 + 0.5, rainTex.xyz);
+    rainTex.rgb = rainTex.rgb * 2.0 - 1.0;
+}
+
+void POST_PROCESS()
+{
+    float a = rainTex.a * vColor.a * fresnel;
+    if (a <= 0.0)
+        discard;
+
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(rainTex.rg));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    float distortion = 1. * centerDist;
+
+    screenCoord.x = centerCoord.x > 0.0 ? mix(screenCoord.x, 0.0, centerCoord.x*distortion) : mix(screenCoord.x, 1.0, -centerCoord.x * distortion);
+    screenCoord.y = centerCoord.y > 0.0 ? mix(screenCoord.y, 0.0, centerCoord.y*distortion) : mix(screenCoord.y, 1.0, -centerCoord.y * distortion);
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fColor = sceneSample.rgb * (1.0 + centerDist);
+
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR + fColor), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/raindrop.vert b/examples/demos/FX_Material_Showroom/content/shaders/raindrop.vert
new file mode 100644
index 000000000..b0e946211
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/raindrop.vert
@@ -0,0 +1,15 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewDir;
+VARYING vec3 vViewNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vViewDir = normalize(CAMERA_POSITION - (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz);
+    vViewNormal = normalize((VIEW_MATRIX * vec4(NORMAL, 0.0)).xyz);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/rainsplash.frag b/examples/demos/FX_Material_Showroom/content/shaders/rainsplash.frag
new file mode 100644
index 000000000..ca31ca8bd
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/rainsplash.frag
@@ -0,0 +1,58 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewDir;
+VARYING vec3 vViewNormal;
+
+float fresnel = 1.0;
+
+vec4 rainTex = vec4(1.0);
+vec3 normals = vec3(0.0);
+
+vec3 blend_rnm(vec3 n1, vec3 n2)
+{
+    vec3 t = n1.xyz * vec3( 2,  2, 2) + vec3(-1, -1,  0);
+    vec3 u = n2.xyz * vec3(-2, -2, 2) + vec3( 1,  1, -1);
+    vec3 r = t * dot(t, u) - u * t.z;
+
+    return normalize(r);
+}
+
+void MAIN()
+{
+    rainTex = texture(rainmap, vViewNormal.zy * 0.5 + 0.5);
+    fresnel = abs(dot(normalize(vViewDir), normalize(VAR_WORLD_NORMAL)));
+
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = .0;
+    ROUGHNESS = 0.50;
+    METALNESS = 0.0;
+    NORMAL = normalize(VAR_WORLD_NORMAL);
+    normals = normalize(VAR_WORLD_NORMAL);
+    rainTex.rgb = rainTex.rgb * 2.0 - 1.0;
+}
+
+void POST_PROCESS()
+{
+    float a = rainTex.g * vColor.a;
+
+    vec2 centerCoord = vViewNormal.zy;
+    float centerDist = smoothstep(1.0, 0.0, length(vViewNormal.zy));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    float distortion = 1. * centerDist;
+
+    screenCoord.x = centerCoord.x > 0.0 ? mix(screenCoord.x, 0.0, centerCoord.x*distortion) : mix(screenCoord.x, 1.0, -centerCoord.x * distortion);
+    screenCoord.y = centerCoord.y > 0.0 ? mix(screenCoord.y, 0.0, centerCoord.y*distortion) : mix(screenCoord.y, 1.0, -centerCoord.y * distortion);
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fColor = sceneSample.rgb*(1.0 + centerDist);
+
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR + fColor), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/shockwave.frag b/examples/demos/FX_Material_Showroom/content/shaders/shockwave.frag
new file mode 100644
index 000000000..aac1c498a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/shockwave.frag
@@ -0,0 +1,64 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+
+float fresnel = 1.0;
+float diskmask = 1.0;
+float streaks = 1.0;
+vec3 fn = vec3(0.0);
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+
+    fn = normalize(VAR_WORLD_NORMAL);
+
+    float dmbase = length(fn.xz);
+    diskmask = smoothstep(.0, .05, dmbase);
+    diskmask *= smoothstep(.05, .025, dmbase);
+
+    streaks = atan(fn.x, fn.z);
+    streaks = sin(streaks * 7.0) * 0.5 + 0.5;
+    streaks += sin(streaks * 13.0) * 0.5 + 0.5;
+    streaks += sin(streaks * 17.0) * 0.5 + 0.5;
+    streaks += sin(streaks * 23.0) * 0.5 + 0.5;
+    streaks += sin(streaks * 29.0) * 0.5 + 0.5;
+    streaks /= 5.0;
+    streaks = smoothstep(.0, 1.0, streaks);
+
+    streaks *= diskmask;
+    streaks += diskmask;
+
+    float fresnelBase = abs(dot(fn, VIEW_VECTOR));
+    fresnel = smoothstep(0.0, .50, fresnelBase);
+    fresnel *= smoothstep(1.0, .50, fresnelBase);
+    fresnel *= vColor.a;
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = vec2(screenPos);
+
+    float distortion = diskmask * 0.25;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+
+    screenCoord.x = centerCoord.x > 0.0 ? mix(screenCoord.x, 0.0, centerCoord.x * distortion) : mix(screenCoord.x, 1.0, -centerCoord.x * distortion);
+    screenCoord.y = centerCoord.y > 0.0 ? mix(screenCoord.y, 0.0, centerCoord.y * distortion) : mix(screenCoord.y, 1.0, -centerCoord.y * distortion);
+
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fColor = baseColor.rgb * sceneSample.rgb;
+
+    float depthFade = smoothstep(0.0, 0.05, abs(depthSample - gl_FragCoord.z));
+
+    float a = streaks * smoothstep(0.25,1.0, vColor.a);
+
+    COLOR_SUM = vec4(fColor * 2.0 * a, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/shockwave.vert b/examples/demos/FX_Material_Showroom/content/shaders/shockwave.vert
new file mode 100644
index 000000000..2101421ea
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/shockwave.vert
@@ -0,0 +1,11 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/sky.frag b/examples/demos/FX_Material_Showroom/content/shaders/sky.frag
new file mode 100644
index 000000000..5e73415d5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/sky.frag
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+vec3 fView = vec3(0.0);
+
+void MAIN()
+{
+    fView = normalize(VIEW_VECTOR);
+}
+
+void POST_PROCESS()
+{
+    vec2 skyCoord = fView.xy;
+    skyCoord.y = -skyCoord.y * 0.5 + 0.5;
+    skyCoord.x = degrees(atan(fView.x, fView.z)) / 360.0 + 0.5;
+    vec3 sky = texture(skyboxTexture, skyCoord.xy).rgb;
+    float horizonmask = (1.0 - abs(fView.y)) * fogAmount;
+    float mask = mix(horizonmask, 1.0, max(0.0, (fogAmount - 0.5)) * 2.0);
+    sky = mix(sky, fogColor.rgb, mask);
+
+    COLOR_SUM = vec4(sky, 1.0);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/sky.vert b/examples/demos/FX_Material_Showroom/content/shaders/sky.vert
new file mode 100644
index 000000000..56eddaab8
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/sky.vert
@@ -0,0 +1,9 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+precision lowp int;
+precision lowp float;
+
+void MAIN()
+{
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/smoke.frag b/examples/demos/FX_Material_Showroom/content/shaders/smoke.frag
new file mode 100644
index 000000000..578155a88
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/smoke.frag
@@ -0,0 +1,62 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+vec3 fRefVec = vec3(0.0);
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = 0.0;
+    ROUGHNESS = 0.50;
+    METALNESS = 0.0;
+
+    fresnel = smoothstep(0.0, 1.0, abs(dot(VIEW_VECTOR, VAR_WORLD_NORMAL)));
+}
+
+void AMBIENT_LIGHT()
+{
+    DIFFUSE += TOTAL_AMBIENT_COLOR;
+}
+
+void IBL_PROBE()
+{
+    vec3 smpDir = IBL_ORIENTATION * NORMAL;
+    DIFFUSE += BASE_COLOR.rgb * textureLod(IBL_TEXTURE, smpDir, IBL_MAXMIPMAP / 2).rgb;
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord*2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    float a = vColor.a * dfDot;
+    a *= mix(smoothstep(0.50, 1.0, dfDot * fresnel), 1.0, pow(fresnel, 3.0));
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR.rgb) * mix(0.50, 1.0, a), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/smoke.vert b/examples/demos/FX_Material_Showroom/content/shaders/smoke.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/smoke.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/smokerm.frag b/examples/demos/FX_Material_Showroom/content/shaders/smokerm.frag
new file mode 100644
index 000000000..7186621df
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/smokerm.frag
@@ -0,0 +1,87 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vPos;
+
+float fresnel = 0.0;
+vec3 fView = vec3(1.0);
+vec3 fNormal = vec3(0.0);
+float a = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+    fView = normalize(VIEW_VECTOR);
+    fNormal = normalize(VAR_WORLD_NORMAL);
+    fresnel = smoothstep(0.0, 1.0, abs(dot(fView, fNormal)));
+    ROUGHNESS = 1.;
+    METALNESS = 0.0;
+    SPECULAR_AMOUNT = 0.0;
+
+    float depthSample = texture(DEPTH_TEXTURE, gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0)).x;
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.5, 1.0, gl_FragCoord.z);
+
+    a = depthFade;
+}
+
+#define MAX_MARCHING_STEPS 100
+#define MIN_DISTANCE 0.01
+#define MAX_DENSITY 10.0
+
+vec3 smokeSource = vec3(1.0);
+
+float hash(float n)
+{
+    return fract(sin(n) * 1399763.5453123);
+}
+
+float noise3D(vec3 x)
+{
+    vec3 p = floor(x);
+    vec3 f = fract(x);
+    f = f * f * (3.0 - 2.0 * f);
+    float n = p.x + p.y * 157.0 + 113.0 * p.z;
+
+    return mix(mix(mix(hash(n + 0.0),   hash(n + 1.0),f.x),
+                   mix(hash(n + 157.0), hash(n + 158.0),f.x), f.y),
+               mix(mix(hash(n + 113.0), hash(n + 114.0),f.x),
+                   mix(hash(n + 270.0), hash(n + 271.0),f.x), f.y), f.z);
+}
+
+float smokeDensity(vec3 position)
+{
+    float dist = length(position);
+    float noise = noise3D(position * .10) * 0.5 + 0.5;
+
+    return clamp(densityFalloff / pow(dist, 2.0), 0.0, MAX_DENSITY) * noise;
+}
+
+vec4 smokeColor(vec3 position, vec3 ray)
+{
+    float totalDensity = 0.0;
+    float fstep = MIN_DISTANCE;
+    for (int i = 0; i < MAX_MARCHING_STEPS; i++) {
+        vec3 samplePos = position + ray * fstep;
+        float density = smokeDensity(samplePos);
+        totalDensity += density;
+        fstep += density * stepSize;
+    }
+
+    return vec4(vec3(totalDensity), 1.0);
+}
+
+void POST_PROCESS()
+{
+    vec3 ray = fView;
+    vec4 smoke = smokeColor(vPos, ray);
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenPos);
+
+    a = (smoke.r / MAX_DENSITY) * baseColor.a;
+
+    COLOR_SUM = vec4(baseColor.rgb, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/smokerm.vert b/examples/demos/FX_Material_Showroom/content/shaders/smokerm.vert
new file mode 100644
index 000000000..9488a9229
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/smokerm.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vPos;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vPos = (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/snow.frag b/examples/demos/FX_Material_Showroom/content/shaders/snow.frag
new file mode 100644
index 000000000..ab895eee5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/snow.frag
@@ -0,0 +1,59 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewDir;
+vec3 fRefVec = vec3(0.0);
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = 0.0;
+    ROUGHNESS = 0.01;
+    METALNESS = 0.0;
+    fresnel = abs(dot(normalize(vViewDir), normalize(VAR_WORLD_NORMAL)));
+    fRefVec = normalize(reflect(normalize(vViewDir), normalize(VAR_WORLD_NORMAL)));
+}
+
+void AMBIENT_LIGHT()
+{
+    DIFFUSE += TOTAL_AMBIENT_COLOR;
+}
+
+void IBL_PROBE()
+{
+    vec3 smpDir = IBL_ORIENTATION * NORMAL;
+    DIFFUSE += textureLod(IBL_TEXTURE, smpDir, IBL_MAXMIPMAP/2).rgb;
+    SPECULAR += textureLod(IBL_TEXTURE, fRefVec, 0).rgb;
+}
+
+void DIRECTIONAL_LIGHT()
+{
+    DIFFUSE += LIGHT_COLOR * SHADOW_CONTRIB * vec3(smoothstep(-1.0, 1.0, abs(dot(normalize(VAR_WORLD_NORMAL), TO_LIGHT_DIR))));
+}
+
+void POST_PROCESS()
+{
+    vec4 df = texture(dfMask, vTexCoord);
+    float dfMaskDot = dot(vColor.rgb,df.rgb);
+    float dfAdjust = smoothstep(0.0, 1.0, dfMaskDot);
+    float a = dfAdjust*vColor.a;
+    a *= fresnel;
+    if (a <= 0.0)
+        discard;
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+
+    float depthSample = texture(DEPTH_TEXTURE, screenPos).x;
+
+    vec3 fColor = vec3(1.0);
+
+    float depthFade = smoothstep(0.0, 0.025, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR.rgb), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/snow.vert b/examples/demos/FX_Material_Showroom/content/shaders/snow.vert
new file mode 100644
index 000000000..e0072bbfb
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/snow.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vViewDir;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vViewDir = normalize(CAMERA_POSITION - (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/spark.frag b/examples/demos/FX_Material_Showroom/content/shaders/spark.frag
new file mode 100644
index 000000000..22ddd3d94
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/spark.frag
@@ -0,0 +1,48 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = vec4(0.0);
+
+    fresnel = abs(dot(normalize(VIEW_VECTOR), normalize(VAR_WORLD_NORMAL)));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    vec3 fColor = baseColor.rgb;
+    float a = baseColor.a * vColor.a;
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+
+    a *= pow(fresnel, 1.0) * 0.1;
+    a += smoothstep(0.9975, 1.0, fresnel) * brightness;
+    COLOR_SUM = vec4(fColor * a, a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/spark.vert b/examples/demos/FX_Material_Showroom/content/shaders/spark.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/spark.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/steam.frag b/examples/demos/FX_Material_Showroom/content/shaders/steam.frag
new file mode 100644
index 000000000..e26255e5f
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/steam.frag
@@ -0,0 +1,50 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+float fresnel = 1.0;
+
+void MAIN()
+{
+    BASE_COLOR = baseColor;
+    SPECULAR_AMOUNT = 0.0;
+    ROUGHNESS = 0.0;
+    METALNESS = 0.0;
+
+    fresnel = smoothstep(0.0, 1.0, abs(dot(VIEW_VECTOR, VAR_WORLD_NORMAL)));
+}
+
+void POST_PROCESS()
+{
+    vec2 centerCoord = vTexCoord * 2.0 - 1.0;
+    float centerDist = smoothstep(1.0, 0.0, length(centerCoord));
+
+    vec2 screenPos = gl_FragCoord.xy / textureSize(SCREEN_TEXTURE, 0);
+    vec2 screenCoord = screenPos;
+
+    float distortion = 1. * centerDist;
+
+    float depthSample = texture(DEPTH_TEXTURE, screenCoord).x;
+    vec4 sceneSample = texture(SCREEN_TEXTURE, screenCoord);
+
+    vec3 fNormal = normalize(vNormal);
+    vec3 normalCoord = fNormal * 0.5 + 0.5;
+
+    vec3 df = vec3(0.0);
+    df.x = texture(dfMask, normalCoord.yz).x;
+    df.y = texture(dfMask, normalCoord.xz).y;
+    df.z = texture(dfMask, normalCoord.yx).z;
+
+    float dfDot = dot(abs(fNormal), df);
+
+    float a = vColor.a * dfDot;
+    a *= mix(smoothstep(0.50, 1.0, dfDot * fresnel), 1.0, pow(fresnel, 3.0));
+
+    float depthFade = smoothstep(0.0, 0.0025, abs(depthSample - gl_FragCoord.z));
+    depthFade *= smoothstep(0.50, 1.0, gl_FragCoord.z);
+    a *= depthFade;
+    COLOR_SUM = vec4((DIFFUSE.rgb + SPECULAR.rgb) * mix(0.50, 1.0, a), a);
+}
diff --git a/examples/demos/FX_Material_Showroom/content/shaders/steam.vert b/examples/demos/FX_Material_Showroom/content/shaders/steam.vert
new file mode 100644
index 000000000..9878ea170
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/content/shaders/steam.vert
@@ -0,0 +1,13 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+VARYING vec2 vTexCoord;
+VARYING vec4 vColor;
+VARYING vec3 vNormal;
+
+void MAIN()
+{
+    vTexCoord = UV0;
+    vColor = COLOR;
+    vNormal = NORMAL.xyz;
+}
diff --git a/examples/demos/FX_Material_Showroom/doc/images/FX_Material_Showroom.png b/examples/demos/FX_Material_Showroom/doc/images/FX_Material_Showroom.png
new file mode 100644
index 000000000..9289002ce
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/doc/images/FX_Material_Showroom.png
diff --git a/examples/demos/FX_Material_Showroom/doc/src/FX_Material_Showroom.qdoc b/examples/demos/FX_Material_Showroom/doc/src/FX_Material_Showroom.qdoc
new file mode 100644
index 000000000..35fd47e34
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/doc/src/FX_Material_Showroom.qdoc
@@ -0,0 +1,22 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \example demos/Showroom
+    \ingroup qtquickdemos
+    \title FX & Material Showroom
+    \examplecategory {Application Examples}
+    \meta {tag} {demo,quick}
+    \brief Demonstrates material and effects capabilities of Qt Quick 3D.
+    This example demonstrates how you can use particle effects and materials in
+    \l{Qt Quick 3D}.
+
+    \image FX_Material_Showroom.jpg
+
+    The example consists of an interactive 3D scene with a 3D model. You can
+    change the model's material and toggle between a couple of different
+    environments for the scene.
+
+    In addition to the material functionality, you can also add particle-based
+    effects such as snow, smoke, and fire to the scene.
+*/
diff --git a/examples/demos/FX_Material_Showroom/imports/CMakeLists.txt b/examples/demos/FX_Material_Showroom/imports/CMakeLists.txt
new file mode 100644
index 000000000..ef02038ee
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/CMakeLists.txt
@@ -0,0 +1 @@
+add_subdirectory(PocketDemo)
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/CMakeLists.txt b/examples/demos/FX_Material_Showroom/imports/PocketDemo/CMakeLists.txt
new file mode 100644
index 000000000..3496dca5a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/CMakeLists.txt
@@ -0,0 +1,15 @@
+set_source_files_properties(Constants.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE true
+)
+
+qt_add_library(PocketDemo STATIC)
+qt_add_qml_module(PocketDemo
+    URI "PocketDemo"
+    VERSION 1.0
+    QML_FILES
+        Constants.qml
+        DirectoryFontLoader.qml
+        EventListModel.qml
+        EventListSimulator.qml
+)
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/Constants.qml b/examples/demos/FX_Material_Showroom/imports/PocketDemo/Constants.qml
new file mode 100644
index 000000000..eea5d9018
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/Constants.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+pragma Singleton
+
+import QtQuick
+import QtQuick.Studio.Application
+
+QtObject {
+    readonly property int width: 1920
+    readonly property int height: 1080
+
+    property string relativeFontDirectory: "fonts"
+
+    /* Edit this comment to add your custom font */
+    readonly property font font: Qt.font({
+                                             family: Qt.application.font.family,
+                                             pixelSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: Qt.application.font.family,
+                                                  pixelSize: Qt.application.font.pixelSize * 1.6
+                                              })
+
+    readonly property color backgroundColor: "#c2c2c2"
+
+
+    property StudioApplication application: StudioApplication {
+        fontPath: Qt.resolvedUrl("../../content/" + relativeFontDirectory)
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/DirectoryFontLoader.qml b/examples/demos/FX_Material_Showroom/imports/PocketDemo/DirectoryFontLoader.qml
new file mode 100644
index 000000000..412e5e79b
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/DirectoryFontLoader.qml
@@ -0,0 +1,34 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import Qt.labs.folderlistmodel
+
+QtObject {
+    id: loader
+
+    property url fontDirectory: Qt.resolvedUrl("../../content/" + relativeFontDirectory)
+    property string relativeFontDirectory: "fonts"
+
+    function loadFont(url) {
+        var fontLoader = Qt.createQmlObject('import QtQuick; FontLoader { source: "' + url + '"; }',
+                                            loader,
+                                            "dynamicFontLoader");
+    }
+
+    property FolderListModel folderModel: FolderListModel {
+        id: folderModel
+        folder: loader.fontDirectory
+        nameFilters: [ "*.ttf", "*.otf" ]
+        showDirs: false
+
+        onStatusChanged: {
+            if (folderModel.status == FolderListModel.Ready) {
+                var i
+                for (i = 0; i < count; i++) {
+                    loadFont(folderModel.get(i, "fileURL"))
+                }
+            }
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListModel.qml b/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListModel.qml
new file mode 100644
index 000000000..1f55f76c7
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListModel.qml
@@ -0,0 +1,15 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+ListModel {
+    id: eventListModel
+
+    ListElement {
+        eventId: "enterPressed"
+        eventDescription: "Emitted when pressing the enter button"
+        shortcut: "Return"
+        parameters: "Enter"
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListSimulator.qml b/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListSimulator.qml
new file mode 100644
index 000000000..526555093
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/EventListSimulator.qml
@@ -0,0 +1,25 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Studio.EventSimulator
+import QtQuick.Studio.EventSystem
+
+QtObject {
+    id: simulator
+    property bool active: true
+
+    property Timer __timer: Timer {
+        id: timer
+        interval: 100
+        onTriggered: {
+            EventSimulator.show()
+        }
+    }
+
+    Component.onCompleted: () => {
+        EventSystem.init(Qt.resolvedUrl("EventListModel.qml"))
+        if (simulator.active)
+            timer.start()
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/designer/plugin.metainfo b/examples/demos/FX_Material_Showroom/imports/PocketDemo/designer/plugin.metainfo
new file mode 100644
index 000000000..b6b499710
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/designer/plugin.metainfo
@@ -0,0 +1,13 @@
+MetaInfo {
+    Type {
+        name: "PocketDemo.EventListSimulator"
+        icon: ":/qtquickplugin/images/item-icon16.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeDroppedInView3D: false
+        }
+    }
+}
diff --git a/examples/demos/FX_Material_Showroom/imports/PocketDemo/qmldir b/examples/demos/FX_Material_Showroom/imports/PocketDemo/qmldir
new file mode 100644
index 000000000..a7e9ef3f6
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/imports/PocketDemo/qmldir
@@ -0,0 +1,6 @@
+Module PocketDemo
+singleton Constants 1.0 Constants.qml
+EventListSimulator 1.0 EventListSimulator.qml
+EventListModel 1.0 EventListModel.qml
+DirectoryFontLoader 1.0 DirectoryFontLoader.qml
+
diff --git a/examples/demos/FX_Material_Showroom/main.qml b/examples/demos/FX_Material_Showroom/main.qml
new file mode 100644
index 000000000..bd50dcad1
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/main.qml
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import content
+
+App {
+}
diff --git a/examples/demos/FX_Material_Showroom/qmlcomponents b/examples/demos/FX_Material_Showroom/qmlcomponents
new file mode 100644
index 000000000..7fc87c276
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/qmlcomponents
@@ -0,0 +1,33 @@
+### This file is automatically generated by Qt Design Studio.
+### Do not change
+
+message("Building designer components.")
+
+set(QT_QML_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/qml")
+
+include(FetchContent)
+FetchContent_Declare(
+    ds
+    GIT_TAG qds-4.1
+    GIT_REPOSITORY https://code.qt.io/qt-labs/qtquickdesigner-components.git
+)
+
+FetchContent_GetProperties(ds)
+FetchContent_Populate(ds)
+
+target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE
+    QuickStudioComponentsplugin
+    QuickStudioEffectsplugin
+    QuickStudioApplicationplugin
+    FlowViewplugin
+    QuickStudioLogicHelperplugin
+    QuickStudioMultiTextplugin
+    QuickStudioEventSimulatorplugin
+    QuickStudioEventSystemplugin
+)
+
+add_subdirectory(${ds_SOURCE_DIR} ${ds_BINARY_DIR})
+
+target_compile_definitions(${CMAKE_PROJECT_NAME} PRIVATE
+    BULD_QDS_COMPONENTS=true
+)
diff --git a/examples/demos/FX_Material_Showroom/qmlmodules b/examples/demos/FX_Material_Showroom/qmlmodules
new file mode 100644
index 000000000..61187d4ab
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/qmlmodules
@@ -0,0 +1,16 @@
+qt_add_qml_module(FxMaterialShowroomApp
+    URI "Main"
+    VERSION 1.0
+    NO_PLUGIN
+    QML_FILES main.qml
+)
+
+add_subdirectory(content)
+add_subdirectory(imports)
+add_subdirectory(asset_imports)
+
+target_link_libraries(FxMaterialShowroomApp PRIVATE
+    contentplugin
+    PocketDemoplugin
+    ComponentBundles_MaterialBundleplugin
+)
diff --git a/examples/demos/FX_Material_Showroom/qtquickcontrols2.conf b/examples/demos/FX_Material_Showroom/qtquickcontrols2.conf
new file mode 100644
index 000000000..87a95d011
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/qtquickcontrols2.conf
@@ -0,0 +1,6 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Basic
diff --git a/examples/demos/FX_Material_Showroom/src/app_environment.h b/examples/demos/FX_Material_Showroom/src/app_environment.h
new file mode 100644
index 000000000..cc243900a
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/src/app_environment.h
@@ -0,0 +1,11 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QGuiApplication>
+
+void set_qt_environment()
+{
+    qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2.conf");
+    qputenv("QT_ENABLE_HIGHDPI_SCALING", "0");
+    qputenv("QT_AUTO_SCREEN_SCALE_FACTOR", "1");
+}
diff --git a/examples/demos/FX_Material_Showroom/src/imagedownloader.cpp b/examples/demos/FX_Material_Showroom/src/imagedownloader.cpp
new file mode 100644
index 000000000..a83012d86
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/src/imagedownloader.cpp
@@ -0,0 +1,98 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include "imagedownloader.h"
+
+#include <QCoreApplication>
+#include <QDir>
+#include <QFile>
+#include <QNetworkReply>
+#include <QNetworkRequest>
+
+ImageDownloader::ImageDownloader(QObject *parent)
+    : QObject(parent)
+    , m_baseLocal(QCoreApplication::applicationDirPath() + "/content/")
+{}
+
+void ImageDownloader::downloadImages()
+{
+    m_downloadedCount = 0;
+
+    m_downloadPaths = getDownloadList();
+    if (m_downloadPaths.isEmpty())
+        emit finished();
+    else
+        downloadNextAsset();
+}
+
+void ImageDownloader::downloadNextAsset()
+{
+    if (m_downloadedCount < m_downloadPaths.size()) {
+        emit downloadStart(m_downloadedCount + 1);
+
+        const QString &assetUrl = m_downloadPaths[m_downloadedCount];
+        QUrl url(BASE_REMOTE + assetUrl);
+        QNetworkRequest request(url);
+
+        QNetworkReply *reply = m_manager.get(request);
+
+        connect(reply, &QNetworkReply::finished, this, &ImageDownloader::onDownloadFinished);
+        connect(reply, &QNetworkReply::downloadProgress,
+                this, &ImageDownloader::onDownloadProgress);
+    }
+}
+
+QStringList ImageDownloader::getDownloadList() const
+{
+    QStringList downloadList;
+    std::copy_if(assetsList.begin(), assetsList.end(), std::back_inserter(downloadList),
+                 [&](const QString &imgPath) {
+        QString localPath = m_baseLocal + imgPath;
+        return !QFile(localPath).exists();
+    });
+
+    return downloadList;
+}
+
+int ImageDownloader::downloadCount() const
+{
+    return m_downloadPaths.size();
+}
+
+void ImageDownloader::onDownloadProgress(qint64 bytesReceived, qint64 bytesTotal)
+{
+    emit downloadProgress(double(bytesReceived)/double(bytesTotal));
+}
+
+void ImageDownloader::onDownloadFinished()
+{
+    QNetworkReply *reply = qobject_cast<QNetworkReply *>(sender());
+    reply->deleteLater();
+
+    if (reply->error() == QNetworkReply::NoError) {
+        QByteArray imageData = reply->readAll();
+
+        QFileInfo fi(m_baseLocal + m_downloadPaths[m_downloadedCount]);
+        QDir dir (fi.path());
+        if (!dir.exists()) {
+            if (!dir.mkpath("."))
+                qWarning() << "Failed to create save path:" << fi.path();
+        }
+        QFile file(fi.filePath());
+        if (file.open(QIODevice::WriteOnly)) {
+            file.write(imageData);
+            file.close();
+        } else {
+            qWarning() << "Failed to save image:" << file.errorString();
+        }
+    } else {
+        qWarning() << "Download failed:" << reply->errorString();
+    }
+
+    ++m_downloadedCount;
+
+    if (m_downloadedCount == m_downloadPaths.size())
+        emit finished();
+    else
+        downloadNextAsset();
+}
diff --git a/examples/demos/FX_Material_Showroom/src/imagedownloader.h b/examples/demos/FX_Material_Showroom/src/imagedownloader.h
new file mode 100644
index 000000000..ae3d8d541
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/src/imagedownloader.h
@@ -0,0 +1,141 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QNetworkAccessManager>
+#include <QString>
+
+class ImageDownloader : public QObject
+{
+    Q_OBJECT
+
+public:
+    ImageDownloader(QObject *parent = nullptr);
+
+    int downloadCount() const;
+
+public slots:
+    void downloadImages();
+
+signals:
+    void finished();
+    void downloadStart(int num);
+    void downloadProgress(double progress);
+
+private slots:
+    void onDownloadProgress(qint64 bytesReceived, qint64 bytesTotal);
+    void onDownloadFinished();
+
+private:
+    void downloadNextAsset();
+    QStringList getDownloadList() const;
+
+    QStringList m_downloadPaths;
+    QString m_savePath;
+    int m_downloadedCount = 0;
+    QNetworkAccessManager m_manager;
+    QString m_baseLocal;
+
+    const static inline QString BASE_REMOTE = "https://download.qt.io/learning/examples/FX_Material_Showroom_Assets/";
+
+    const static inline QStringList assetsList {
+        "images/_Desert.hdr",
+        "images/ambientdot.tif",
+        "images/AOBake.png",
+        "images/Asphalt010_2K_NormalGL.png",
+        "images/Asphalt010_2K_Roughness.png",
+        "images/BubblesIcon.png",
+        "images/CheckEmptyVector.png",
+        "images/CheckFilledVector.png",
+        "images/cloud.png",
+        "images/CloudsIcon.png",
+        "images/debris.png",
+        "images/dotsprite.tif",
+        "images/dreamstime_xl_241509362.hdr",
+        "images/dreamstime_xxl_216322508.hdr",
+        "images/dust.png",
+        "images/DustIcon.png",
+        "images/Environment_2K_NIGHT.png",
+        "images/ExplosionIcon.png",
+        "images/Fabric004_2K_NormalGL.png",
+        "images/Fabric031_2K_Color.png",
+        "images/Fabric031_2K_Detail.png",
+        "images/Fabric031_2K_Displacement.png",
+        "images/Fabric031_2K_NormalGL.png",
+        "images/Fabric031_2K_Roughness.png",
+        "images/FabricmatIcon.png",
+        "images/fire.png",
+        "images/FlameIcon.png",
+        "images/FlashIcon.png",
+        "images/HeatwaveIcon.png",
+        "images/LeathermatIcon.png",
+        "images/LighttrailIcon.png",
+        "images/lineSprite.tif",
+        "images/Metal009_2K_NormalGL.png",
+        "images/Metal009_2K_Roughness.png",
+        "images/Metal029_2K_Displacement.jpg",
+        "images/Metal029_2K_Displacement.png",
+        "images/noisenormal.png",
+        "images/NoneIcon.png",
+        "images/ParticleIcon.png",
+        "images/raindrops_multi.tga",
+        "images/RainIcon.png",
+        "images/rainsplash.png",
+        "images/ShockwaveIcon.png",
+        "images/smoke.png",
+        "images/SmokeIcon.png",
+        "images/snowflake_DF.tga",
+        "images/snowflake_DF_multi.tga",
+        "images/SnowIcon.png",
+        "images/spark.png",
+        "images/SparkIcon.png",
+        "images/steam.png",
+        "images/SteamIcon.png",
+        "images/HDR/dreamstime_xl_119184006.png",
+        "images/HDR/dreamstime_xl_182890747.png",
+        "images/HDR/dreamstime_xl_224613382.png",
+        "images/HDR/dreamstime_xxl_241783592.png",
+        "images/Icons/BrushedSteelmatIcon.png",
+        "images/Icons/CarbonFibermatIcon.png",
+        "images/Icons/CheckboxImagesfxIcon-1.png",
+        "images/Icons/CheckboxImagesfxIcon-10.png",
+        "images/Icons/CheckboxImagesfxIcon-2.png",
+        "images/Icons/CheckboxImagesfxIcon-3.png",
+        "images/Icons/CheckboxImagesfxIcon-4.png",
+        "images/Icons/CheckboxImagesfxIcon-4.tif",
+        "images/Icons/CheckboxImagesfxIcon-5.png",
+        "images/Icons/CheckboxImagesfxIcon-6.png",
+        "images/Icons/CheckboxImagesfxIcon-7.png",
+        "images/Icons/CheckboxImagesfxIcon-8.png",
+        "images/Icons/CheckboxImagesfxIcon-9.png",
+        "images/Icons/CheckboxImagesfxIcon.png",
+        "images/Icons/CheckboxImagesmodelIcon-1.png",
+        "images/Icons/CheckboxImagesmodelIcon-2.png",
+        "images/Icons/CheckboxImagesmodelIcon-3.png",
+        "images/Icons/CheckboxImagesmodelIcon.png",
+        "images/Icons/CoppermatIcon.png",
+        "images/Icons/FabricmatIcon.png",
+        "images/Icons/GlassmatIcon.png",
+        "images/Icons/Icon_Colorful.png",
+        "images/Icons/Icon_Dark.png",
+        "images/Icons/Icon_Light.png",
+        "images/Icons/LeathermatIcon.png",
+        "images/Icons/PlasticTexturedmatIcon.png",
+        "images/Icons/SilvermatIcon.png",
+        "images/Icons/StonematIcon.png",
+        "images/Icons/WoodmatIcon.png",
+        "images/leathertextures/Leather037_2K-PNG/Leather037_2K_Color.png",
+        "images/leathertextures/Leather037_2K-PNG/Leather037_2K_NormalGL.png",
+        "images/leathertextures/Leather037_2K-PNG/Leather037_2K_Roughness.png",
+        "images/stonetextures/Rock023_2K_AmbientOcclusion.png",
+        "images/stonetextures/Rock023_2K_Color.png",
+        "images/stonetextures/Rock023_2K_NormalGL.png",
+        "images/stonetextures/Rock023_2K_Roughness.png",
+        "images/woodtextures/Wood048_2K-PNG/Wood048_2K_Color.png",
+        "images/woodtextures/Wood048_2K-PNG/Wood048_2K_NormalGL.png",
+        "images/woodtextures/Wood048_2K-PNG/Wood048_2K_Roughness.png",
+        "Meshes/bunnyUV.mesh",
+        "Meshes/floor.mesh",
+        "Meshes/materialBall.mesh",
+        "Meshes/stanford_Dragon.mesh"
+    };
+};
diff --git a/examples/demos/FX_Material_Showroom/src/import_qml_plugins.h b/examples/demos/FX_Material_Showroom/src/import_qml_plugins.h
new file mode 100644
index 000000000..9a31eefd5
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/src/import_qml_plugins.h
@@ -0,0 +1,8 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QQmlExtensionPlugin>
+
+Q_IMPORT_QML_PLUGIN(contentPlugin)
+Q_IMPORT_QML_PLUGIN(PocketDemoPlugin)
+Q_IMPORT_QML_PLUGIN(ComponentBundles_MaterialBundlePlugin)
diff --git a/examples/demos/FX_Material_Showroom/src/main.cpp b/examples/demos/FX_Material_Showroom/src/main.cpp
new file mode 100644
index 000000000..890170f91
--- /dev/null
+++ b/examples/demos/FX_Material_Showroom/src/main.cpp
@@ -0,0 +1,54 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+#include "imagedownloader.h"
+#include "app_environment.h"
+#include "import_qml_plugins.h"
+
+using namespace Qt::Literals::StringLiterals;
+
+int main(int argc, char *argv[])
+{
+    set_qt_environment();
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    const QUrl url(u"qrc:Main/main.qml"_qs);
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app,
+                [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    }, Qt::QueuedConnection);
+
+    engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
+    engine.addImportPath(":/");
+
+    engine.load(url);
+
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    ImageDownloader downloader;
+
+    QObject::connect(&downloader, &ImageDownloader::downloadProgress, &app, [&] (double progress) {
+        QMetaObject::invokeMethod(engine.rootObjects().at(0), "downloadProgress",
+                                  Q_ARG(QVariant, progress));
+    });
+
+    QObject::connect(&downloader, &ImageDownloader::downloadStart, &app, [&] (int num) {
+        QMetaObject::invokeMethod(engine.rootObjects().at(0), "downloadStart",
+                                  Q_ARG(QVariant, num),
+                                  Q_ARG(QVariant, downloader.downloadCount()));
+    });
+
+    QObject::connect(&downloader, &ImageDownloader::finished, &app, [&] {
+        QMetaObject::invokeMethod(engine.rootObjects().at(0), "downloadComplete");
+    });
+
+    downloader.downloadImages();
+
+    return app.exec();
+}
diff --git a/tests/auto/quick/examples/tst_examples.cpp b/tests/auto/quick/examples/tst_examples.cpp
index a40ff7c74..4c07b110c 100644
--- a/tests/auto/quick/examples/tst_examples.cpp
+++ b/tests/auto/quick/examples/tst_examples.cpp
@@ -64,6 +64,7 @@ tst_examples::tst_examples()
     excludedFiles << "examples/quick/shapes/content/interactive.qml"; // relies on resources
     excludedFiles << "examples/demos/addressbook/qml/main.qml"; // relies on resources
     excludedFiles << "examples/demos/robotarm/main.qml"; // relies on custom import
+    excludedFiles << "examples/demos/FX_Material_Showroom/main.qml"; // relies on custom import
 
 #ifdef QT_NO_XMLPATTERNS
     excludedDirs << "demos/twitter";
author	Mahmoud Badri <mahmoud.badri@qt.io>	2023-06-09 22:11:20 +0300
committer	Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>	2023-06-19 23:59:01 +0000
commit	42c611f9a347fac5923143c6b3d7b7b991e2f121 (patch)
tree	897223f83ad9f94bc6db09cb643055ef5d311e41
parent	59acfb1b4ad59a2edea4d09b9c9602b1c35fea82 (diff)