feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Doc: Update Effect Composer docs

Browse Source 
- Added info about the new Add to Library
functionality in Effect composer.
- Modified the formatting of alt-texts.

Task-number: QDS-15024
Change-Id: I6cbfb09579090015a3c0acac0fc59e006417894a
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
This commit is contained in:
Johanna Vanhatapio
2025-04-09 17:27:54 +03:00
parent 41a77c65d6
commit 768d9d248b
2 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtdesignstudio/images/studio-effect-composer-assets.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 98 KiB

75
doc/qtdesignstudio/src/views/qtquick-effect-maker-view.qdoc
View File

@@ -23,7 +23,7 @@
\QDS projects. To create an effect composition, select and adjust one or several
of the pre-made effects or customize empty effect nodes as you wish.
\image studio-effect-composer.webp The Effect Composer view in Qt Design Studio.
\image {studio-effect-composer.webp} {The Effect Composer view in Qt Design Studio.}
\section1 Creating an effect composition
@@ -38,13 +38,13 @@
select \imageplus to create a new one.
\endlist
\li To add effects to your composition, select \uicontrol {Add Effect}, and
then select the effects you wish to use from the dropdown menu. You can
also add a \l {Using a custom effect in an effect composition}{Custom} effect
then select the effects you wish to use from the effects library (3). You can
also add a \l {Creating a custom effect for an effect composition}{Custom} effect
as a part of your effect composition. The added effects appear in the effect stack
(3). You cannot add the same pre-made effect twice to the composition. You can,
(4). You cannot add the same pre-made effect twice to the composition. You can,
however, add more than one custom effect to the same composition.
\li Adjust the effect parameters to modify your effect composition. View the preview
window (4) to see how the composition affects a component before assigning it to
window (5) to see how the composition affects a component before assigning it to
one. Use the preview window toolbar to select the preview image and the preview
window background color.
\li Finally, select \imagesaveeffectcomposer to save your
@@ -54,16 +54,16 @@
composition.
\endlist
\image studio-effect-composer-assets.webp Effect Composer and the Assets view.
\image {studio-effect-composer-assets.webp} {The Effect Composer view and the Assets view.}
The saved effect compositions appear in the \uicontrol {Assets} > \uicontrol Effects.
To delete an effect composition, right-click it in the \uicontrol {Assets} view, and
then select \uicontrol {Delete File}.
\section1 Using a custom effect in an effect composition
\section1 Creating a custom effect for an effect composition
In addition to using the pre-made effects as described above, you can also add empty custom
effects in your composition. To add a custom effect to your \uicontrol {Effect Composer}
effects into your composition. To add a custom effect to your \uicontrol {Effect Composer}
composition:
\list 1
@@ -73,11 +73,26 @@
custom effect.
\endlist
\section1 Adding custom properties to an effect
You can save the custom effect to the effect library to use it in any composition. To save
the custom effect to the effect library:
\list 1
\li Select \imageedit, and name the effect.
\li Select \uicontrol {Add to Library}.
\endlist
You can use custom properties in your effect composition, for example, to modify pre-made
effects or to create completely unique effects. You can set the name, description, type, and
default value for your custom property.
The saved effect appears in the \uicontrol Custom section of the effect library.
\section1 Modifying pre-made effects
To modify the pre-made effects in the Effect Composer, edit their properties and change the
property values. You can also add custom properties to effects and save the customized
pre-made effects to the effect library.
\section2 Adding custom properties to an effect
You can add custom properties to effects in your effect composition, for example, to modify
pre-made effects or to create completely unique effects. You can set the name, description,
type, and default value for your custom property.
To add a custom property to any effect in your effect composition:
@@ -95,12 +110,23 @@
To remove a property from your effect composition, select \imagemorebutton > \uicontrol Remove.
\section2 Saving customised pre-made effects to the effect library
\list 1
\li Select \imageadvancedCodeView to enable the advanced mode.
\li Select \imageedit, and name the effect.
\li Select \uicontrol {Add to Library}.
\endlist
Similarly to custom effects, the modified pre-made effects appear in the \uicontrol Custom
section of the effect library after saving.
\section1 Modifying the shader code of an effect
You can modify the shader code of an effect in your effect composition using
\uicontrol {Shaders Code Editor}.
\image shaders-code-editor.webp Shaders Code Editor.
\image {shaders-code-editor.webp} {Shaders Code Editor.}
To open \uicontrol {Shaders Code Editor}:
@@ -109,10 +135,11 @@
\li Select \uicontrol {Show Code}.
\endlist
In the code section (1), you can switch between editing the Fragment shader and Vertex shader.
In the code section (1), you can switch between editing the Fragment shader and Vertex
shader.
To switch between the effect nodes in your effect composition, select the effect node from the
dropdown menu (2). To edit the main effect shader, select \uicontrol Main.
To switch between the effect nodes in your effect composition, select the effect node from
the dropdown menu (2). To edit the main effect shader, select \uicontrol Main.
The properties in the effect node are visible in the property table (3). To change the visible
columns in the property table, select columns from the dropdown menu (4).
@@ -163,8 +190,8 @@
\section2 Using shaders from Shadertoy
First, add a \l{Using a custom effect in an effect composition}{custom effect} to your effect
composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
First, add a \l{Creating a custom effect for an effect composition}{custom effect} to your
effect composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
tab of \uicontrol {Shaders Code Editor} with some adjustments:
\list 1
\li Copy the functions of the shader and paste them above the \c {@main} tag.
@@ -192,8 +219,8 @@
\section2 Using shaders from The Book of Shaders
First, add a \l{Using a custom effect in an effect composition}{custom effect} to your effect
composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
First, add a \l{Creating a custom effect for an effect composition}{custom effect} to your
effect composition. Then, copy the shader code and paste it to the \uicontrol {Fragment Shader}
tab of \uicontrol {Shaders Code Editor} with some adjustments:
\list 1
\li Copy the functions of the shader and paste them above the \c {@main} tag.
@@ -271,7 +298,7 @@
To use a component as the source for the \uicontrol {Opacity Mask} effect:
\image effect-composer-opacity-mask-scaled.webp The structure of a scaled opacity mask effect in the Navigator view.
\image {effect-composer-opacity-mask-scaled.webp} {The structure of a scaled opacity mask effect in the Navigator view.}
\list 1
\li In the \uicontrol {Effect Composer} view, create an \uicontrol {Opacity Mask}
@@ -290,7 +317,7 @@
To use an unscaled component as the \uicontrol {Source Item}:
\image effect-composer-opacity-mask-unscaled.webp The structure of an unscaled opacity mask effect in the Navigator view.
\image {effect-composer-opacity-mask-unscaled.webp} {The structure of an unscaled opacity mask effect in the Navigator view.}
\list 1
\li In \uicontrol Components > \uicontrol {Default Components}, add an \uicontrol Item
@@ -305,8 +332,8 @@
\li In \uicontrol Properties > \uicontrol Visibility, select the \uicontrol Visibility
checkbox to show the \uicontrol {Source Item} component (4).
\li In the \uicontrol Navigator view, select the effect (3).
\li In \uicontrol Properties > \uicontrol {Opacity Mask}, set the \uicontrol Item (1) added
in the first step as \uicontrol {Source Item}.
\li In \uicontrol Properties > \uicontrol {Opacity Mask}, set the \uicontrol Item (1)
added in the first step as \uicontrol {Source Item}.
\endlist
*/