Wiggly

「Wiggly」は、Qt Quick Effect Maker（QQEM）で作成されたシェーダーエフェクトを、Qt Quick アプリケーションでどのように使用するかを実演しています。シンプルなQt Quick ユーザーインターフェースにより、揺れるテキストや波のサイズを変更したり、電雲エフェクトを適用したりすることができます。

例の動作

このサンプルは、以下の手順で実行できます。

• Qt Creator

  Welcome モードを開き、Examples からこのサンプルを選択します。詳細については、『Qt Creator ：チュートリアル：ビルドと実行』を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から「Qt: Open Qt examples 」コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル：ビルドと実行」を参照してください。

アプリケーションの基礎

例の大部分はmain.qmlファイルに含まれており、そこで設定されています。まず、エフェクトのソースとして使用されるアイテムを作成します。

Rectangle {
    id: sourceItem
    anchors.centerIn: parent
    width: textItem.width + 60 * mainWindow.px
    height: textItem.height + 30 * mainWindow.px
    color: "#d0d0d0d0"
    border.color: "#d0ffffff"
    border.width: 4 * mainWindow.px
    radius: 20 * mainWindow.px
    layer.enabled: true
    layer.smooth: true
    visible: false
    Text {
        id: textItem
        anchors.centerIn: parent
        text: wigglyTextField.text
        font.family: font1.font.family
        font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
    }
}

このアイテムは、内部にText 要素を含むRectangle です。矩形のサイズは、テキストの文字数に応じて、アプリケーションウィンドウにきれいに収まるように調整します。 ここで重要なのは、エフェクト用のオフスクリーンテクスチャを作成する `layer.enabled: true` と、エフェクトがその内容を置き換えるためこの要素を非表示にする `visible: false` です。アイテムが表示されている場合、揺れエフェクトがない状態では次のように表示されます：

次に、エフェクトの制御に使用する設定ツールバーを作成します。

TextField {
    id: wigglyTextField
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.3
    text: "Wiggly"
}
Slider {
    id: wigglyAmountYSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 40
}
Slider {
    id: wigglyAmountXSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 20
}
Switch {
    id: electricSwitch
    anchors.verticalCenter: parent.verticalCenter
}

これらのコンポーネントは、Qt Quick Controlsを使用しており、Row 要素内に積み重ねられています。最初のコントロールはTextField で、これを使用して揺れ動くテキストを変更できます。次に、X座標とY座標における波の大きさを制御するための個別のSlider 要素があります。最後のコントロールはSwitch で、電気雲のようなエフェクトを有効にするためのものです。

WigglyEffect {
    id: wigglyEffect
    source: sourceItem
    anchors.fill: sourceItem
    timeRunning: true
    wigglyAmountX: wigglyAmountXSlider.value
    wigglyAmountY: wigglyAmountYSlider.value
    electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
    wigglyShadows: 0.5
}

この WigglyEffect は、先に定義したsourceItem に適用されます。コードでは、timeRunning を true に設定してエフェクトをアニメーション化しています。最後に、いくつかのシェーダーエフェクトのプロパティを制御コンポーネントに接続しています。

エフェクトの詳細については、WigglyEffect.qml ファイルを確認することもできます。ただし、このファイルはQQEMツールによって生成されたものであるため、通常は手動で変更すべきではありません。代わりに、次のセクションで説明するように、Qt Quick Effect Makerを使用してください。

QQEMでのエフェクトの編集

前述の通り、WigglyEffectは「Qt Quick Effect Maker」を使用して作成されています。QQEMのインストールに関する詳細については、「 Qt Quick Effect Makerのインストール」のドキュメントを参照してください。

エフェクトを編集するには：

1. QQEMツールでエフェクトプロジェクトファイル（qep）を開きます。
2. エフェクトノード、プロパティ、またはシェーダーコードを編集し、ライブプレビューを確認します。
3. 準備ができたら、変更したエフェクトをアプリケーションにエクスポートします。

QQEMで「WigglyEffect/WigglyEffect.qep 」プロジェクトを開くと、次のような画面が表示されます：

左側には、このエフェクトのさまざまなノードを含むNode view が表示されます。右上のビューはProperty view で、エフェクトのプロパティ（API）が表示されます。 右下には、エフェクトのLive view が表示され、現在選択されているプレビューソース項目が表示されます。実際のコンテンツを含むライブプレビューを表示するには、Edit >Preferences のソースリストに「sourceItem 」の画像を追加し、プレビューツールバーのポップアップリストからそれを選択してください。

ウィグリーエフェクトのシェーダーコードを変更するには、Wigglyノードをダブルクリックするか、それを選択して、DESIGN モードからCODE モードに切り替えます。次に、VERT タブを選択して頂点シェーダーを表示します。エフェクトコードの大部分はここにあります：

@mesh 63, 1
out vec3 wigglyColor;

float rainbowColor(float phase) {
    return abs(sin(texCoord.x * 2.0 + iTime + phase));
}

@main
{
    float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
    vertCoord.x += wigglyAmountX * wave;
    vertCoord.y += wigglyAmountY * wave;
    const float tau = 6.28318530718;
    wigglyColor.r = rainbowColor(0.0);
    wigglyColor.g = rainbowColor(1.0/3.0 * tau);
    wigglyColor.b = rainbowColor(2.0/3.0 * tau);
    float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
    wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}

最初の行では、ShaderEffect のメッシュグリッドサイズを設定しています。デフォルトでは頂点は角にのみ存在しますが、ウィグリー効果にはより多くの可動頂点が必要であるため、この設定が必要です。次に、頂点シェーダーがwigglyColor 変数を出力するように設定します。この変数は、後でフラグメントシェーダーで影を適用する際に使用されます。 次に、rainbowColor という関数を導入します。この関数は、そのフェーズにおける単一チャンネルの色を返します。

mainメソッド内では、まずvertCoord を設定して、頂点位置を正弦波に沿って移動させます。次の数行で、うねうねとした虹の赤、緑、青の各チャンネルを設定します。最後の2行では、波の動きに合わせて影を適用します。

次に、「FRAG 」タブを選択して、フラグメントシェーダーのコードを確認します。

@main
{
    fragColor.rgb *= wigglyColor * fragColor.a;
}

フラグメントシェーダーは非常に単純で、現在のソースカラーに、頂点シェーダーから受け取ったwigglyColor を乗算するだけです。

処理の多くをフラグメントシェーダー側で行うことも可能でしたが、頂点（バーテックス）の数はフラグメント（ピクセル）の数よりも著しく少ないため、コードを頂点シェーダーに記述する方が一般的にパフォーマンスが向上します。Shadertoyのような一部のツールでは、フラグメントシェーダーのみの記述しか許可されていません。しかし、Qt Quick やQQEMはカスタム頂点シェーダーもサポートしているため、それらを活用してみることをお勧めします。

これらのシェーダーを変更すると、Live view の出力が即座に変化します。変更したシェーダーをサンプルアプリケーションで有効にするには、メニューから「File 」＞「Export 」を選択してください。

これで、QQEMの機能をさらに試してみることができます。たとえば、新しいノードを追加したり、プロパティを変更・追加したり、シェーダーコード内でこれらのプロパティを利用したりなどが可能です。以下は、ノードグラフの先頭に「LedScreen 」ノードを追加した場合の効果の例です：

ファイル：

• wiggly/CMakeLists.txt
• wiggly/WigglyEffect/WigglyEffect.qml
• wiggly/main.cpp
• wiggly/main.qml
• wiggly/qml.qrc
• wiggly/wiggly.pro