Effect Composer

Use Effect Composer to create post-processing effect compositions that can be applied to 2D components or 3D views. The compositions created with Effect Composer are shader effects, which can be used in any Qt Design Studio 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.

The Effect Composer view in Qt Design Studio.

Creating an effect composition

To create a new effect composition, do one of the following:
- Right-click anywhere in the Assets view (1) and select New Effect. Name your effect composition and select Create.
- Open the Effect Composer view (2). If Effect Composer shows a previous effect composition, select to create a new one.
To add effects to your composition, select Add Effect, and then select the effects you wish to use from the dropdown menu. You can also add a 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, however, add more than one custom effect to the same composition.
Adjust the effect parameters to modify your effect composition. View the preview panel (4) to see how the composition affects a component before assigning it to one. Use the preview panel toolbar to select the preview image and the preview panel background color.
Finally, select to save your effect composition. If the composition is still Untitled, name it, and then select Save. Select to save the custom effect under a different name, for example, to create variations of the effect composition.

Effect Composer and the Assets view

The saved effect compositions appear in the Assets > Effects. To delete an effect composition, right-click it in the Assets view, and then select Delete File.

Using a custom effect in 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 Effect Composer composition:

Open the Effect Composer view (2), select Add Effect, and then select Custom to add an empty effect node to your effect.
Select Add Properties or Show Code to customize the custom effect.

Adding custom properties to an effect

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.

To add a custom property to any effect in your effect composition:

Select to enable the advanced mode.
Select Add Property.
Edit the property and select Apply.

To make properties effective, use them in the shader code. For more information, see Modifying the shader code of an effect.

You can edit the custom properties you create and also customize the properties of pre-made effects. To edit a property, select > Edit.

To remove a property from your effect composition, select > Remove.

Modifying the shader code of an effect

You can modify the shader code of an effect in your effect composition using Shaders Code Editor.

Shaders Code Editor

To open Shaders Code Editor:

Select to enable advanced mode.
Select Show Code.

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 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).

To automatically update the effect as you edit it, select Live Update (5). If Live Update is not selected, select Apply (6) to update the effect composition with the latest changes.

If there are issues or errors in the code, they are visible in the Effect Composer view.

To close Shaders Code Editor, select Close (7).

Using tags in shader code

The following table describes @-tags in shader code.

Tag	Description
@main	Indicates that code before this tag is inserted before the main function in the shader code. Code after this tag is inserted inside the main function at the position of the @nodes tag.
@nodes	Specifies the location of node specific shader code inside the main function.
@mesh	Specifies the size of the mesh in effects that modify vertices, such as the Swirl effect.
@requires	Indicates that the effect depends on another node, typically used to include a helper node, such as BlurHelper or NoiseHelper.

Using shaders from Shadertoy

Copy shaders as code from Shadertoy and use them as a part of your effect composition.

First, add a custom effect to your effect composition. Then, copy the shader code and paste it to Shaders Code Editor:

Copy the functions of the shader and paste them to before the @main tag.
Copy the code inside mainImage and paste it after the @main tag, inside {}.

Effect Composer doesn't support all the features of Shadertoy:

Effects with multipass (buffer tabs) can't be created. Instead, you must build them separately and bind the output of the buffer shader effect to the source of the next shader effect.
Audio, cubemaps and 3D textures are not supported.
Currently iMouse has not been implemented

For more information, see Using a shader from Shadertoy in Effect Composer.

Note: Shadertoy only supports fragment shaders and built-in textures. To improve the performance of the effect, move some of the calculations into a vertex shader and use custom images to simplify the fragment shader.

Note: The origin (0,0) of the Qt coordinate system is in top-left corner, while it is in the bottom-left corner in the Shadertoy and OpenGL coordinate systems. If this is important for the effect, consider flipping the y-coordinate of the shader in a suitable way. For example, to flip fragCoord in Main node, switch to fragCoord = vec2(qt_Vertex.x, iResolution.y - qt_Vertex.y). You may need to adjust texCoord in a similar manner.

Assigning an effect composition to a component

To assign your newly created effect composition to a component, do one of the following:

Select a component in Navigator or the 2D view, and then select in Effect Composer.
Drag the composition from Assets to the component in Navigator or the 2D view.

Note: To assign a composition to a component, you need to save it first.

Editing effect compositions

To edit an effect composition in Effect Composer, do one of the following:

In the Assets view, double-click the name of the effect composition.
In the Navigator or Assets view, right-click and select Edit in Effect Composer.
Drag the composition from the Navigator or Assets view to the Effect Composer view.

Stacking effects

To create complex effect compositions, add multiple effects to your stack in Effect Composer. The order of effects in the Effect Composer stack determines the order they are rendered, which affects the final output of the effect composition.

To change the position of an effect in the stack, drag the effect by the handle ( Dragmarks ) to the desired position.

Some pre-made effects, such as effects with blur, always operate on the original item ignoring any effect nodes before them.

To determine whether or not each of the effects in the stack is rendered, toggle the visibility on ( the Visibility on button ) and off ( the Visibility off button ).

To clear the effect stack, select the Clear the Effect Stack button .

Using animated effects

Some of the effects in Effect Composer are animated. Preview the animation in the preview panel using the play, pause, and restart animation buttons.

When a composition including an animated effect has been applied to a component, the animation plays by default in Live Preview and when you run the project. To define whether the animation plays or not, select the assigned effect in Navigator, and in Properties > Exposed Custom Properties, select or clear the Running checkbox. To specify the exact point in time in the animation that is shown, set the Time property. You cannot set the Time property if the Running checkbox is selected.

Using opacity mask effects

Use Opacity Mask effects as a part of your effect composition to mask components in your scene with an image or another component.

To use a component as the source for the Opacity Mask effect:

The structure of a scaled opacity mask effect in the Navigator view.

In the Effect Composer view, create an Opacity Mask effect (1) with a placeholder image as Source.
Save the effect (1) and assign it to a component in your scene (2).
In the Navigator view, select the effect (1).
In Properties > Opacity Mask > Source Item, select a component (3) in your scene.
In the Navigator view, select the Source Item (3) component.
In Properties > Visibility, clear the Visibility checkbox to hide the Source Item component (3).

The Source Item component is automatically scaled to fit the component the effect is assigned to.

To use an unscaled component as the Source Item:

The structure of an unscaled opacity mask effect in the Navigator view.

In Components > Default Components, add an Item component (1) to your scene as a child to the component (2) that the effect (3) is applied to.
In Properties > Visibility, clear the Visibility checkbox to set the Item component (1) as not visible.
In Properties > Layout > Anchors, select to fill the parent component.
In the Navigator view, drag the Source Item component (4) as the child of the Item component (1).
In Properties > Visibility, select the Visibility checkbox to show the Source Item component (4).
In the Navigator view, select the effect (3).
In Properties > Opacity Mask, set the Item (1) added in the first step as Source Item.

See also Effect Composer example.

Curves File System

Available under certain Qt licenses.
Find out more.