ウィグリー

Wigglyは、Qt Quick Effect Maker (QQEM) で作成されたシェーダ効果を、Qt Quick アプリケーションで使用する方法を示します。シンプルなQt Quick ユーザーインターフェイスで、くねくねしたテキストや波の大きさを変更したり、電気雲の効果を適用したりできます。

例の実行

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

アプリケーションの基本

サンプルのほとんどは、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)
    }
}

アイテムはRectangle 、中にText 。矩形の大きさは、アプリケーションウィンドウにうまく収まるように、テキストの文字数によって決めます。ここでの重要な行は、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 ControlsRow を使用します。最初のものは、TextField 、くねくねテキストを変更するために使用できます。次にSlider 要素があり、波の大きさを X 座標と Y 座標で制御します。最後のコントロールは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 のインストールについての詳細は、InstallingQt 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 、頂点位置をsin波で移動するように設定します。次の行では、くねくねした虹の赤、緑、青のチャンネルを設定します。最後の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