Doc: Update info on the Library view

Task-number: QDS-4007
Change-Id: I981dfa54b4497b0517f1348aff8cc2d992a2cb2a
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtcreator/src/qtquick/qtquick-library.qdoc

@@ -67,6 +67,7 @@
         \li \l {Logic Helpers}
         \endif
         \li \l Animations
+        \li \l{Using 3D Components}{3D Components}
     \endlist
 
     For more information about creating your own components, see
@@ -74,14 +75,17 @@
 
     \section2 Adding and Removing Modules
 
-    When you create projects, modules typically needed in them are added by
-    default. For example, an empty application project contains only basic
-    components, while a 3D application project contains additional 3D
-    components.
+    When you \l{Creating Projects}{create projects}, modules typically needed in
+    them are added by default. For example, an empty application project
+    contains only basic components, while a 3D application project contains
+    additional 3D components.
 
-    To add modules to the project, select \inlineimage plus.png
-    , and then select the module to add from the list of available
-    modules.
+    To view the list of available modules, select \inlineimage plus.png
+    . Most commonly used modules are placed at the top of the list in
+    alphabetical order. You can search for components and modules by entering
+    search criteria in the \uicontrol Search field.
+
+    Select the module to add it to \uicontrol Library > \uicontrol Components.
 
     \image qtquick-components-tab-add.png "Select Modules to Add"
 
@@ -90,11 +94,8 @@
     \uicontrol QtQuick.Controls module, the following import statement
     is added to the code: \c {import QtQuick.Controls}.
 
-    You can search for components and modules by entering search criteria
-    in the \uicontrol Search field.
-
-    The added components and modules are packaged with your UI into the final
-    application package, so it is recommended that you select
+    Since the added components and modules are packaged with your UI into the
+    final application package, it is recommended that you select
     \uicontrol {Remove Module} to remove the ones you don't use in the project.
 
     \section1 Assets

doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc

@@ -144,13 +144,13 @@
 
     \section2 Importing the Simulink Connector
 
-    To integrate the Simulink model into \QDS, you first need to import the
-    Simulink connector in \uicontrol Library. Click the \uicontrol {QML Imports
-    Tab}, select the \uicontrol {<Add Import>} drop-down menu, and then select
-    \uicontrol SimulinkConnector. \QDS is now ready to communicate with the
+    To integrate the Simulink model into \QDS, you first need to add the
+    Simulink connector module to your project. In the \l Library view, select
+    \uicontrol Components > \inlineimage plus.png
+    > \uicontrol SimulinkConnector. \QDS is now ready to communicate with the
     Simulink model.
 
-    \image studio-qml-imports-slconnector.png "Simulink Connector in the QML Imports list"
+    \image studio-qml-imports-slconnector.png "Simulink Connector in the list of available modules."
 
     If you need to change the IP address and/or port, you need to select the
     \uicontrol SimulinkConnector item in \uicontrol Navigator and set the IP
@@ -162,8 +162,8 @@
     To communicate with a specific model in Simulink, you need to create
     properties matching the send and receive properties in the root of the
     application you are building. Select the root item in \uicontrol
-    Navigator to add the properties in the \uicontrol Properties tab in
-    \uicontrol {Connection View}.
+    Navigator to add the properties in \uicontrol {Connection View} >
+    \uicontrol Properties.
 
     See \l {Specifying Dynamic Properties} for a detailed description of how
     to add a custom property. The name of the property and the data type

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc

@@ -49,12 +49,15 @@
     two-sided polygons, index-of-refraction, and fragment cutoff (masking).
     For more information, see \l {Qt Quick 3D Custom Material Reference}.
 
-    You can use the components in \uicontrol Library > \uicontrol Components >
+    Use the components in \uicontrol Library > \uicontrol Components >
     \uicontrol QtQuick3D > \uicontrol {Qt Quick 3D Custom Shader Utils} to
-    create custom effects and materials. For more information about the shader
-    utilities and commands and their properties, see \l {Using Custom Shaders}.
-
-    \image studio-qtquick-3d-shader-utilities.png "Qt Quick 3D Custom Shader Utils tab in Library"
+    create custom effects and materials. You can find the \uicontrol Effect
+    component in \uicontrol Library > \uicontrol {QtQuick3D Effects} > \uicontrol
+    {Qt Quick 3D Custom Shader Utils}, and the \uicontrol {Custom Material}
+    component in \uicontrol Library > \uicontrol {QtQuick3D Materials} >
+    \uicontrol {Qt Quick 3D Custom Shader Utils}. For more information about the
+    shader utilities and commands and their properties, see
+    \l {Using Custom Shaders}.
 
     \note You must create the actual shader source files with some other tool
     and copy them to your project folder. You can then specify the source file
@@ -65,9 +68,9 @@
 
     \section1 Creating Custom Effects
 
-    By default, a custom effect component contains a Pass type and a Shader
-    type in the fragment stage. You can add passes, shaders, and other shader
-    utilities to the effect.
+    By default, a custom effect component contains a Pass component and a Shader
+    component in the fragment stage. You can add passes, shaders, and other
+    shader utilities to the effect.
 
     \image studio-qtquick-3d-custom-effect-navigator.png "Custom effect in Navigator"
 
@@ -78,7 +81,7 @@
     To create a custom effect:
 
     \list 1
-        \li Drag and drop an \uicontrol {Effect} type from the
+        \li Drag and drop an \uicontrol {Effect} component from the
             \uicontrol {Qt Quick 3D Custom Shader Utils} tab of
             \uicontrol Library to a Model component in \uicontrol Navigator.
         \li Select the custom effect component in \uicontrol Navigator to edit
@@ -90,14 +93,14 @@
             for its properties in \uicontrol Properties.
             \image studio-qtquick-3d-pass.png "Pass properties"
         \li To execute commands during the pass, drag and drop the following
-            command types from \uicontrol Library to the custom material in
+            command components from \uicontrol Library to the custom material in
             \uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
             \uicontrol {Buffer Input}, \uicontrol {Cull Mode},
             \uicontrol {Depth Input}, \uicontrol {Render State}, and
             \uicontrol {Set Uniform Value}. Then select the commands in the
             \uicontrol Commands field.
         \li To allocate a buffer for the pass, drag and drop a \uicontrol Buffer
-            type to the custom material. Then select the buffer in the
+            component to the custom material. Then select the buffer in the
             \uicontrol Buffer field.
         \li Select the shader component in \uicontrol Navigator to set the path
             to the shader files in the \uicontrol Source field in
@@ -107,9 +110,9 @@
 
     \section1 Creating Custom Materials
 
-    By default, a Custom Material component contains two Shader types, a Shader
-    Info type, and a Pass type. You can add shaders, passes, and other shader
-    utilities to the material.
+    By default, a Custom Material component contains two Shader components, a
+    Shader Info component, and a Pass component. You can add shaders, passes,
+    and other shader utilities to the material.
 
     \image studio-qtquick-3d-custom-material-navigator.png "Custom material in Navigator"
 
@@ -117,20 +120,20 @@
     the paths to the shader files. Specify the paths to the shader files to use
     in the shader properties.
 
-    The Shader Info type specifies the shader type and version, as well
-    as the options used by the shader based on the selected shader key values,
-    such as diffuse or specular lighting, refraction, transparency, displacement,
-    transmissiveness, glossiness, and alpha cutout.
+    The Shader Info component specifies the shader component and version, as
+    well as the options used by the shader based on the selected shader key
+    values, such as diffuse or specular lighting, refraction, transparency,
+    displacement, transmissiveness, glossiness, and alpha cutout.
 
-    The shaders are used with the Pass type to create the resulting material.
-    A pass can contain multiple rendering passes and other commands. You can
-    use a Buffer type to allocate a buffer for storing intermediate rendering
-    results.
+    The shaders are used with the Pass component to create the resulting
+    material. A pass can contain multiple rendering passes and other commands.
+    You can use a Buffer component to allocate a buffer for storing intermediate
+    rendering results.
 
     To create a custom material:
 
     \list 1
-        \li Drag and drop a \uicontrol {Custom Material} type from the
+        \li Drag and drop a \uicontrol {Custom Material} component from the
             \uicontrol {Qt Quick 3D Custom Shader Utils} tab of
             \uicontrol Library to a Model component in \uicontrol Navigator.
         \li Select the custom material component in \uicontrol Navigator to
@@ -143,7 +146,7 @@
         \li Select the \uicontrol {Always dirty} check box to determine that
             the material needs to be refreshed every time it is used.
         \li In the \uicontrol {Shader Info} field, select the shader info
-            type to use.
+            component to use.
         \li In the \uicontrol Passes field, select the pass components for
             the effect.
         \li In the \uicontrol Material group, select the
@@ -157,7 +160,7 @@
             for its properties in \uicontrol Properties.
             \image studio-qtquick-3d-pass.png "Pass properties"
         \li To execute commands during the pass, drag and drop the following
-            command types from \uicontrol Library to the pass component in
+            command components from \uicontrol Library to the pass component in
             \uicontrol Navigator: \uicontrol Blending, \uicontrol {Buffer Blit},
             \uicontrol {Buffer Input}, \uicontrol {Cull Mode},
             \uicontrol {Depth Input}, \uicontrol {Render State}, and
@@ -165,11 +168,11 @@
             at the same level as the pass component and automatically added to
             the \uicontrol Commands field.
         \li To allocate a buffer for the pass, drag and drop a \uicontrol Buffer
-            type to the custom material. Then select the buffer in the
+            component to the custom material. Then select the buffer in the
             \uicontrol Buffer field.
         \li To add a shader to the pass, drag and drop the \uicontrol Shader
-            type from the \uicontrol Library to the pass component in \uicontrol
-            Navigator. The shader components are created at the same
+            component from the \uicontrol Library to the pass component in
+            \uicontrol Navigator. The shader components are created at the same
             level as the pass component and automatically added to the
             \uicontrol Shaders field.
         \li Select the shader components in \uicontrol Navigator to set the

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc

@@ -38,8 +38,17 @@
 
     \image studio-qtquick-3d-shader-utilities.png
 
-    If the custom shader utilities are not displayed in \uicontrol Library, you
-    should add the \uicontrol QtQuick3D module to your project, as described in
+    Additional 3D shader utilities include the \uicontrol Effect, which you can
+    find in  \uicontrol Library > \uicontrol {QtQuick3D Effects} > \uicontrol
+    {Qt Quick 3D Custom Shader Utils}, and \uicontrol {Custom Material},
+    available in \uicontrol Library > \uicontrol {QtQuick3D Materials} >
+    \uicontrol {Qt Quick 3D Custom Shader Utils}.
+
+    \image studio-qtquick-3d-shader-effect.png
+    \image studio-qtquick-3d-shader-custom-material.png
+
+    If the custom shader utilities are not displayed in \uicontrol Library, add
+    the \uicontrol QtQuick3D module to your project, as described in
     \l {Adding and Removing Modules}.
 
     For more information on using the shaders, see
@@ -193,5 +202,4 @@
             uniform.
     \endtable
 
-
 */

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc

@@ -35,18 +35,23 @@
     \QDS provides a set of 3D effects, which are visible in \l {Form Editor}.
     To apply a visual effect to a scene, drag-and-drop an effect from \l Library
     > \uicontrol Components > \uicontrol QtQuick3D > \uicontrol {Qt Quick 3D Effects}
-    to a \uicontrol View3D component in \l Navigator. You can apply multiple
-    effects to a scene. Select the \uicontrol {Scene Environment} component in
-    \uicontrol Navigator to view the applied effects in \l Properties >
-    \uicontrol {Scene Environment} > \uicontrol Effect. If the effects are not
-    displayed in \l Library, you should add the \uicontrol QtQuick3D.Effects
-    module to your project, as described in \l {Adding and Removing Modules}.
+    to a \uicontrol View3D component in \l Navigator.
+
+    You can use the \l Effect component available in \uicontrol
+    {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as the base
+    component for creating custom post-processing effects. For more information,
+    see \l {Creating Custom Effects and Materials} and \l {Using Custom Shaders}.
+
+    You can apply multiple effects to a scene. Select the \uicontrol
+    {Scene Environment} component in \uicontrol Navigator to view the applied
+    effects in \l Properties > \uicontrol {Scene Environment} > \uicontrol Effect.
+
+    If the effects are not displayed in \l Library, you should add the
+    \uicontrol QtQuick3D.Effects module to your project, as described in
+    \l {Adding and Removing Modules}.
 
     See the following table for available effects and example images.
 
-    For more information about creating your own effects, see
-    \l {Creating Custom Effects and Materials}.
-
     \section1 Available Effects
     \table
     \header

doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc

@@ -35,23 +35,20 @@
     \QDS provides a set of pregenerated Qt Quick 3D materials that can be used
     to create good-looking \l {Adding 3D Models}{models} quickly and easily.
 
-    To apply 3D materials to models, you should first delete the default material,
-    and then drag-and-drop a new material from \l Library to a model component
-    in \l Navigator.
-
-    You can apply the same material to another component as well. Again,
-    delete the default material first. You should then select the component and
-    go to the \uicontrol Properties view. Find the \uicontrol Materials property,
-    select the \inlineimage plus.png
-    icon, and choose the new material in the dropdown menu.
-
-    To apply a 3D material to a component, drag-and-drop a material from
-    \l Library > \uicontrol Components > \uicontrol QtQuick3D >
+    To apply a 3D material to a component, you should first delete the default
+    material and then drag-and-drop a new material from \l Library >
+    \uicontrol Components > \uicontrol QtQuick3D >
     \uicontrol {Qt Quick 3D Materials} to a model component in \l Navigator.
     The materials you add to the model are listed in the model component's
-    \l Properties view. If the 3D materials are not displayed in \l Library,
-    you should add the \uicontrol QtQuick3D.Materials module to your project, as
-    described in \l {Adding and Removing Modules}.
+    \l Properties view. You can apply the same material to another component as
+    well. Again, delete the default material first. You should then select the
+    component and go to the \uicontrol Properties view. Find the
+    \uicontrol Materials property, select the \inlineimage plus.png
+    icon, and choose the new material in the dropdown menu.
+
+    If the 3D materials are not displayed in \uicontrol Library, you should add
+    the \uicontrol QtQuick3D.Materials module to your project, as described in
+    \l {Adding and Removing Modules}.
 
     Each material has its own set of properties that can be used to further
     define the appearance of the material. For each material the \uicontrol
@@ -62,6 +59,14 @@
     determine whether or not shadow mapping is used for generating realistic
     shadows. You can also select a \uicontrol Texture for shadow mapping.
 
+    \section1 Custom Material
+
+    You can use the \l {CustomMaterial}{Custom Material} component available in
+    \uicontrol {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as
+    the base component for creating custom materials used to shade models. For
+    more information, see \l {Creating Custom Effects and Materials} and
+    \l {Using Custom Shaders}.
+
     \section1 Metal Materials
 
     The following describes properties of the metal-based materials, which