Qt Documentation

Contents

Qt Quick 3D - Blend Modes Example

Demonstrates the use of different blend modes.

This example demonstrates a number of blend modes that can be used in a Qt Quick 3D application. Blending is done between two View3Ds using QtGraphicalEffects.

Creating Views

We create two views. The first view is the background view, and may have a non-transparent background mode and clear color set.

environment: SceneEnvironment {
    clearColor: "#848895"
    backgroundMode: SceneEnvironment.Color
}

The second view is the foreground view, and it must have transparent background mode.

environment: SceneEnvironment {
    backgroundMode: SceneEnvironment.Transparent
}

Blending

As the blending is done with QtGraphicalEffects, we need to import it into our main.qml.

import QtGraphicalEffects 1.14

The foreground view is blended on top of the background view using the Blend type.

BackgroundView {
    id: background
    anchors.fill: parent
}

ForegroundView {
    id: foreground
    anchors.fill: parent
}

Blend {
    anchors.fill: parent
    source: ShaderEffectSource {
        sourceItem: background
        hideSource: true
    }
    foregroundSource: ShaderEffectSource {
        sourceItem: foreground
        hideSource: true
    }
    // Take the blend mode from the selection in the list
    mode: modeModel.get(modeList.currentIndex).mode
}

Files:

© 2020 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.