Qt Quick 3D - Blend Modes Example | Qt Quick 3D 5.14.2

Qt 5.14 | Qt Quick 3D | Qt Quick 3D - Blend Modes Example

Qt 5.14.2 Reference Documentation

# 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:

- blendmodes/BackgroundView.qml
- blendmodes/ForegroundView.qml
- blendmodes/blendmodes.pro
- blendmodes/main.cpp
- blendmodes/main.qml
- blendmodes/qml.qrc