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: