Custom Shaders

In Qt Design Studio projects created with Qt 6 as Target Qt Version, you create custom shaders in code and use custom shader utilities to create post- processing effects. In projects created with Qt 5 as Target Qt Version, you can use custom shader utilities to to create custom materials and effects.

Custom Shader Utilities in Qt 6

In projects created with Qt 6 as Target Qt Version, you create custom shaders used for custom materials in code. In Qt 6, the custom materials no longer support multipass rendering, and therefore you don't need to use the custom shader utilities to create custom materials.

Use the custom shader utilities available in Components > QtQuick3D to customize the Effect component used for post-processing effects.

Creating Shader Files

In Qt 6, you need to create custom shaders for custom materials in code using Text Editor or the Edit mode. For more information about creating custom materials, see Qt Quick 3D - Custom Materials Example in the Qt Quick 3D documentation.

The requirements set for shaders that you can use in custom effects and materials are described in Qt Quick 3D Custom Material Reference.

If you use custom uniforms in the shader files, you must specify them as QML properties for the custom effect or material component. Qt Design Studio automatically generates the uniforms based on the property values.

For example, the following code snippet shows fragment shader code that uses two uniforms: uTextureInUse and uInputTexture.

out vec4 fragColor;

in vec3 pos;
in vec3 texCoord0;

void main() {

    vec4 textCol;
    if (uTextureInUse)
        textCol = texture( uInputTexture, texCoord0.xy );

    fragColor = vec4(pos.x * 0.02 * textCol.x, pos.y * 0.02 * textCol.y, pos.z * 0.02, 1.0);
}

To use the above fragment shader in a custom effect or material component, you must remove the uniforms from the shader code and define them as properties for the component on the Properties tab in the Connections view.

For more information about adding properties, see Specifying Custom Properties.

Creating Post-Processing Effects

You can use the custom shader utilities available in Components to create custom post-processing effects.

To create a post-processing effect, drag an Effect from Components > QtQuick3D > Components to a scene environment in Navigator. To customize the effect, drag the required shader utilities from Components > QtQuick3d > Custom Shader Utils to Effect in Navigator. To define settings for a shader utility, select it in Navigator and edit its properties in the Properties view.

Custom Shaders in Qt 5

Use the 3D shader utilities and commands available in Components > Qt Quick 3D > Qt Quick 3D Custom Shader Utilities to create your own effects and materials. The Effect component, used as the base component for custom effects, is located in Qt Quick 3D Effects > Qt Quick 3D Custom Shader Utilities. To use the Effect component, you may need to add add the QtQuick3D.Effects module to your project. The Custom Material is located in Qt Quick 3D Materials > Qt Quick 3D Custom Shader Utilities. To use the Custom Material component, you may need to add the QtQuick3D.Materials module to your project.

If the custom shader utilities are not displayed in Components, add the QtQuick3D module to your project, as described in Adding and Removing Modules.

For more information about using the shaders, see Custom Effects and Materials in Qt 5.

See the following tables for available shader utilities and commands.

Available Custom Shader Utilities and Base Components

Available Custom Shader Commands