Add documentation for several layer effects

Adding documentation for Chromatic Aberration, Desaturate, Distortion
Ripple, Distortion Sphere, Distortion Spiral and Edge Detect effects.

Task-number: Qt3DS-3938
Change-Id: Ie572acda1aae9bf379ce7f8db50fbc98e4593bec
Reviewed-by: Tomi Korpipää <tomi.korpipaa@qt.io>

19 files changed, 410 insertions, 6 deletions

diff --git a/doc/src/10-best-practices/80-effects.qdoc b/doc/src/10-best-practices/80-effects.qdoc
index 9b564ed7..17316b35 100644
--- a/doc/src/10-best-practices/80-effects.qdoc
+++ b/doc/src/10-best-practices/80-effects.qdoc
@@ -84,21 +84,51 @@ lower in the scene graph will be applied before effects that are above them.
   \li
       \div {align="center"}
       \image color-master-icon.png
-      \b {\l{Color Master}}
+      \b {\l{Color master}}
       \enddiv
 \row
   \li
       \div {align="center"}
+      \image chromatic-aberration-icon.png
+      \b {\l{Chromatic aberration}}
+      \enddiv
+  \li
+      \div {align="center"}
       \image depth-of-field-icon.png
       \b {\l{Depth of field HQ blur}}
       \enddiv
-
+  \li
+      \div {align="center"}
+      \image desaturate-icon.png
+      \b {\l{Desaturate}}
+      \enddiv
+  \li
+      \div {align="center"}
+      \image distortion-ripple-icon.png
+      \b {\l{Distortion ripple}}
+      \enddiv
+\row
+  \li
+      \div {align="center"}
+      \image distortion-sphere-icon.png
+      \b {\l{Distortion sphere}}
+      \enddiv
+  \li
+      \div {align="center"}
+      \image distortion-spiral-icon.png
+      \b {\l{Distortion spiral}}
+      \enddiv
+  \li
+      \div {align="center"}
+      \image edge-detect-icon.png
+      \b {\l{Edge detect}}
+      \enddiv
   \li
       \div {align="center"}
       \image fxaa-icon.png
       \b {\l{FXAA}}
       \enddiv
-
+\row
   \li
       \div {align="center"}
       \image gaussian-blur-icon.png
@@ -109,7 +139,6 @@ lower in the scene graph will be applied before effects that are above them.
       \image hdr-bloom-tonemap-icon.png
       \b {\l{HDR bloom tonemap}}
       \enddiv
-\row
   \li
       \div {align="center"}
       \image motion-blur-icon.png
@@ -120,8 +149,6 @@ lower in the scene graph will be applied before effects that are above them.
       \image tiltshift-icon.png
       \b{\l{Tilt shift}}
       \enddiv
-  \li
-  \li
 \endtable
 \enddiv
 
diff --git a/doc/src/10-best-practices/chromatic-aberration.qdoc b/doc/src/10-best-practices/chromatic-aberration.qdoc
new file mode 100644
index 00000000..f212c14e
--- /dev/null
+++ b/doc/src/10-best-practices/chromatic-aberration.qdoc
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Chromatic Aberration
+\page chromatic-aberration.html
+\ingroup qt3dstudio-best-practices
+
+In real life, chromatic aberration is an optical phenomenon causing color fringes in high contrast
+areas. These color fringes are caused by different colors refracting at different angels
+splitting white light into a spectrum. This is called dispersion.
+
+In the image below, the effect is applied in the right picture.
+
+\image effects-chromatic-aberration.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Aberration amount
+    \li
+      Amount of aberration. A negative value inverses the effect.
+  \row
+    \li
+      Focus depth
+    \li
+      Dispersion scales in relation to the distance from this value.
+  \row
+    \li
+      Effect mask
+    \li
+      A grayscale texture to control position and strength of the effect. The effect is
+      strongest in white areas, and weakest in black areas.
+  \row
+    \li
+      Debug dispersion amount
+    \li
+      Allows you to see exactly how the effect works.
+\endtable
+
+\section1 Usage
+
+To make it easier to set up this effect, enable \uicontrol {Debug dispersion amount}. When enabled,
+the scene view switches to a mode showing the amount of dispersion to be applied.
+Black objects will disperse less, and white objects will disperse more.
+
+*/
diff --git a/doc/src/10-best-practices/desaturate.qdoc b/doc/src/10-best-practices/desaturate.qdoc
new file mode 100644
index 00000000..a83f474e
--- /dev/null
+++ b/doc/src/10-best-practices/desaturate.qdoc
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Desaturate
+\page desaturate.html
+\ingroup qt3dstudio-best-practices
+
+With the desaturate effect, you can decrease the intensity of all colors in the scene.
+
+\image effects-desaturate.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Effect strength
+    \li
+      Amount of desaturation. A value of 1.0 desaturates the scene entirely. Everything is
+      completely grayscale.
+\endtable
+
+*/
diff --git a/doc/src/10-best-practices/distortion-ripple.qdoc b/doc/src/10-best-practices/distortion-ripple.qdoc
new file mode 100644
index 00000000..fe720da7
--- /dev/null
+++ b/doc/src/10-best-practices/distortion-ripple.qdoc
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Distortion Ripple
+\page distortion-ripple.html
+\ingroup qt3dstudio-best-practices
+
+The distortion ripple effect adds circular ripples, moving away from the center of the effect.
+
+\image effects-distortion-ripple.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Radius
+    \li
+      The spread between the ripples.
+  \row
+    \li
+      Center
+    \li
+      The center of the effect. \c 0.5 and \c 0.5 is the center of the layer while \c 1.0 and \c 1.0
+      is the upper right corner of the layer.
+  \row
+    \li
+      Wave width
+    \li
+      Adjusts the amount of ripples.
+  \row
+    \li
+      Wave height
+    \li
+      Adjusts the distortion amount.
+  \row
+    \li
+      Ripple phase
+    \li
+      The offset of each ripple. Animate this property to achieve an effect of moving waves.
+\endtable
+
+*/
diff --git a/doc/src/10-best-practices/distortion-sphere.qdoc b/doc/src/10-best-practices/distortion-sphere.qdoc
new file mode 100644
index 00000000..73941bc8
--- /dev/null
+++ b/doc/src/10-best-practices/distortion-sphere.qdoc
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Distortion Sphere
+\page distortion-sphere.html
+\ingroup qt3dstudio-best-practices
+
+The distorion sphere effect creates a 3D effect of wrapping the scene around a spherical shape.
+
+\image effects-distortion-sphere.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Radius
+    \li
+      The size of the distorted area.
+  \row
+    \li
+      Height
+    \li
+      The amount of distortion.
+  \row
+    \li
+      Center
+    \li
+      The center of the effect. \c 0.5 and \c 0.5 is the center of the layer while \c 1.0 and \c 1.0
+      is the upper right corner of the layer.
+\endtable
+
+*/
diff --git a/doc/src/10-best-practices/distortion-spiral.qdoc b/doc/src/10-best-practices/distortion-spiral.qdoc
new file mode 100644
index 00000000..f9e5b66d
--- /dev/null
+++ b/doc/src/10-best-practices/distortion-spiral.qdoc
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Distortion Spiral
+\page distortion-spiral.html
+\ingroup qt3dstudio-best-practices
+
+The distortion spiral effect creates a twirl effect.
+\image effects-distortion-spiral.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Radius
+    \li
+      The size of the distorted area.
+  \row
+    \li
+      Spiral
+    \li
+      The amount of twirling.
+  \row
+    \li
+      Center
+    \li
+      The center of the effect. \c 0.5 and \c 0.5 is the center of the layer while \c 1.0 and \c 1.0
+      is the upper right corner of the layer.
+\endtable
+
+*/
diff --git a/doc/src/10-best-practices/edge-detect.qdoc b/doc/src/10-best-practices/edge-detect.qdoc
new file mode 100644
index 00000000..ac4f078c
--- /dev/null
+++ b/doc/src/10-best-practices/edge-detect.qdoc
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt 3D Studio.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+
+\title Edge Detect
+\page edge-detect.html
+\ingroup qt3dstudio-best-practices
+
+The edge detect effect turns smooth, unchanging areas of the scene black, while areas of the
+scene with sharp color changes are brightened to highlight the edges.
+
+\image effects-edge-detect.png
+
+\section1 Properties
+
+\table
+  \header
+    \li Property
+    \li Description
+  \row
+    \li
+      Amount
+    \li
+      Opacity of the effect. A value of \c 1.0 gives a fully opaque effect while \c 0.0 gives a
+      fully transparent effect.
+\endtable
+
+*/
diff --git a/doc/src/images/chromatic-aberration-icon.png b/doc/src/images/chromatic-aberration-icon.png
new file mode 100644
index 00000000..584ccdff
--- /dev/null
+++ b/doc/src/images/chromatic-aberration-icon.png
diff --git a/doc/src/images/desaturate-icon.png b/doc/src/images/desaturate-icon.png
new file mode 100644
index 00000000..454b5baa
--- /dev/null
+++ b/doc/src/images/desaturate-icon.png
diff --git a/doc/src/images/distortion-ripple-icon.png b/doc/src/images/distortion-ripple-icon.png
new file mode 100644
index 00000000..c9f3a92f
--- /dev/null
+++ b/doc/src/images/distortion-ripple-icon.png
diff --git a/doc/src/images/distortion-sphere-icon.png b/doc/src/images/distortion-sphere-icon.png
new file mode 100644
index 00000000..0a01e33a
--- /dev/null
+++ b/doc/src/images/distortion-sphere-icon.png
diff --git a/doc/src/images/distortion-spiral-icon.png b/doc/src/images/distortion-spiral-icon.png
new file mode 100644
index 00000000..66458fe2
--- /dev/null
+++ b/doc/src/images/distortion-spiral-icon.png
diff --git a/doc/src/images/edge-detect-icon.png b/doc/src/images/edge-detect-icon.png
new file mode 100644
index 00000000..e2a0dfbf
--- /dev/null
+++ b/doc/src/images/edge-detect-icon.png
diff --git a/doc/src/images/effects-chromatic-aberration.png b/doc/src/images/effects-chromatic-aberration.png
new file mode 100644
index 00000000..92f0305e
--- /dev/null
+++ b/doc/src/images/effects-chromatic-aberration.png
diff --git a/doc/src/images/effects-desaturate.png b/doc/src/images/effects-desaturate.png
new file mode 100644
index 00000000..0a01bea5
--- /dev/null
+++ b/doc/src/images/effects-desaturate.png
diff --git a/doc/src/images/effects-distortion-ripple.png b/doc/src/images/effects-distortion-ripple.png
new file mode 100644
index 00000000..16acd406
--- /dev/null
+++ b/doc/src/images/effects-distortion-ripple.png
diff --git a/doc/src/images/effects-distortion-sphere.png b/doc/src/images/effects-distortion-sphere.png
new file mode 100644
index 00000000..26918d55
--- /dev/null
+++ b/doc/src/images/effects-distortion-sphere.png
diff --git a/doc/src/images/effects-distortion-spiral.png b/doc/src/images/effects-distortion-spiral.png
new file mode 100644
index 00000000..16a72ed0
--- /dev/null
+++ b/doc/src/images/effects-distortion-spiral.png
diff --git a/doc/src/images/effects-edge-detect.png b/doc/src/images/effects-edge-detect.png
new file mode 100644
index 00000000..b5033849
--- /dev/null
+++ b/doc/src/images/effects-edge-detect.png