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