Doc: Document the effect composer example

Task-number: QDS-13028
Change-Id: Ib6c34a6ffe9c815e89ca030b2020983fa15791bd
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>

doc/qtdesignstudio/examples/doc/effectComposerExample.qdoc

@@ -0,0 +1,74 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \page effect-composer-example.html
+    \ingroup studioexamples
+
+    \title Effect Composer Example
+    \brief Illustrates how to work with the Effect Composer effects.
+
+    \image effect-composer-example.webp {The Effect Composer example project}
+
+    The \e {Effect Composer Example} illustrates how to work with the \uicontrol {Effect Composer}
+    effects. Use the example project to experiment with effects and get familiar with
+    \uicontrol {Effect Composer}. To learn more, see \l {Effect Composer}.
+
+    The example consists of a 3D model and four \uicontrol {Effect Composer} effects. You can show
+    and hide the effects from the scene with buttons. To modify the effect properties, select an
+    effect and then use the sliders. To visualize the effects better, rotate the 3D model by
+    dragging it and zoom it with the mouse wheel.
+
+    The example project has a scalable design. When you resize the window to fit your screen, some
+    components will adjust automatically.
+
+    \section1 Running the Example
+
+    To run the example in \QDS, go to the \uicontrol Welcome screen and select the example
+    from the \uicontrol Examples tab.
+
+    \section1 The Effects
+
+    The following table introduces the effects in this example.
+
+    \table
+    \header
+        \li Effect Name
+        \li Description
+    \row
+        \li \uicontrol {Displace}
+        \li A displace effect, the pixels move according to a displacement map.
+    \row
+        \li \uicontrol {Glow} and \uicontrol {Swirl}
+        \li A combination of two effects, a soft glowing effect and a swirl distortion effect.
+    \row
+        \li \uicontrol {Noise}
+        \li An animated effect with RGB noise.
+    \row
+        \li \uicontrol {Rain} and \uicontrol {Thunder}
+        \li A weather effect, a combination of a rain effect and a thunder effect.
+    \endtable
+
+    \section1 The Structure of the Example
+
+    In addition to the effects, the example project also includes the following components:
+
+    \list
+        \li A \l {3D} scene
+            \list
+                \li \l {Importing 3D Assets}{A 3D model}
+                \li \l {Lights}{A directional light}
+                \li \l {Cameras}{A scene camera}
+                \li \l {OrbitCameraController}
+            \endlist
+        \li \l {Text} components
+        \li \l {Rectangle} components
+        \li \l {Shapes#Border}{Border} components
+        \li \l {Creating Buttons}{Custom Buttons}
+        \li \l {Creating Custom Components}{Custom Sliders}
+    \endlist
+
+    The example project also uses \uicontrol States and \uicontrol Transitions. To learn more, see
+    \l {Working with States} and \l {Transitions}.
+
+*/