Qt クイックサンプル - シェーダーエフェクト

Qt Quick のサンプルで、シェーダーエフェクトの使い方を説明します。

この例では、Qt Quick のシェーダを使った視覚効果をいくつか紹介します。テキストと画像に5つの異なるエフェクトを適用します。詳しくは、「Qt Quickの重要な概念 - グラフィカル・エフェクト」をご覧ください。

サンプルを実行する

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

ShaderEffect の使用

ShaderEffect 型は通常、ShaderEffectSource を使用して他の型を操作します:

ShaderEffectSource {
    id: theSource
    sourceItem: theItem
}

上記のスニペットでは、theItem はファイル内の複合QMLオブジェクトのIDです。

ShaderEffectsは、このShaderEffectSource をフラグメントシェーダーのテクスチャとして使用することができます:

fragmentShader: "content/shaders/wobble.frag.qsb"

OpenGLだけでなく、複数のグラフィックスAPIをサポートするために、シェーダーソースはQMLに埋め込まれていません。参照される.qsb ファイルは、シェーダーコードの複数のバリアントを含む、事前に生成されたシェーダーパックです。その後、実行時に使用されるグラフィックス API(Vulkan、Metal、Direct3D 11、または OpenGL)に応じて、実行時に Qt Quick によって適切なシェーダーが選択されます。.qsb ファイルはオフラインで生成され、Qt Resource System を介して実行ファイルにバンドルされます。

ShaderEffect の任意のカスタムプロパティをシェーダで使用できます。これにより、アニメーションシェーダーのコードが非常に簡単になります:

property variant source: theSource
property real bend
property real minimize
property real side: genieSlider.value
SequentialAnimation on bend {
    loops: Animation.Infinite
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1600 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
}
SequentialAnimation on minimize {
    loops: Animation.Infinite
    PauseAnimation { duration: 300 }
    NumberAnimation { to: 1; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1000 }
    NumberAnimation { to: 0; duration: 700; easing.type: Easing.InOutSine }
    PauseAnimation { duration: 1300 }
}

ShaderEffects は、カスタムバーテキストシェーダを持つこともできます。メッシュ・プロパティをShaderEffect に設定すると、操作できる頂点が増え、より多くのエフェクトが可能になります。

mesh: Qt.size(10, 10)
vertexShader: "content/shaders/genie.vert.qsb"

プロジェクト例 @ code.qt.io

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。 ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。