このページでは

ShadertoyのエフェクトをQt Quick Effect Makerに移植する

Shadertoyで作成したエフェクトをQt Quick Effect Makerで使用できます。Shadertoyのエフェクトを使用する際は、以下の点にご注意ください:

  • Qt Quick Effect Makerでは、以下のShadertoyの機能に対応していません:
    • マルチパスエフェクト(「Buffer」タブ)
    • オーディオ
    • キューブマップ
    • 3Dテクスチャ
  • Shadertoyはフラグメントシェーダーと組み込みテクスチャのみをサポートしています。Qt Quick Effect Makerでのエフェクトのパフォーマンスを向上させるには、一部の計算を頂点シェーダーに移し、カスタム画像を使用してシェーダーコードを簡略化してください。
  • ShadertoyとQt Quick Effect Makerでは座標系の設定が異なります。Shadertoyでは原点 (0,0) が左下隅に位置しますが、Qt Quick Effect Makerでは原点が左上隅にあります。

Qt Quick Effect MakerでのShadertoyエフェクトの使用

Qt Quick Effect MakerでShadertoyのエフェクトを使用するには:

  1. Qt Quick Effect Makerで、新しいエフェクトを作成します。
  2. ノードエディタで「Add node 」を選択し、次に「Common 」の下にある「Custom 」を選択します。これにより、空のノードが作成されます。

    「Common」カテゴリで「Custom」が選択されている「エフェクトノードの追加」ダイアログ

  3. Shadertoyで、「Image 」タブ内のコードをすべてコピーします。
  4. 「Qt Quick Effect Maker」で、ノードエディタ内の「Custom 」ノードをダブルクリックします。これにより、コードエディタが開きます。
  5. Shadertoyのコードを「Frag 」タブに貼り付けます。
  6. コード内で「Main 」関数を探します。次のような記述になっています:
    void mainImage( out vec4 fragColor, in vec2 fragCoord )
  7. この行を次のように置き換えてください:
    @main

    注: @main と、その直後の { を同じ行に記述することは できません。

  8. オプション。エフェクトが座標系に依存している場合、エフェクトが上下反転して表示されることがあります。これを解決するには、y座標を反転させる必要があります:
    1. 「Vert 」タブに移動します。

      VERTタブが選択され、頂点シェーダーが表示されているコードエディタ

    2. ドロップダウンメニューから「Main 」を選択します。
    3. 「fragCoord 」という行を探してください。次のような表示になっているはずです:
      fragCoord = qt_Vertex.xy;
    4. この行を次のように置き換えてください:
      fragCoord = vec2(qt_Vertex.x, iResolution.y - qt_Vertex.y);
    5. 同様に、「texCoord 」および「iMouse 」の設定を調整する必要がある場合があります。

これで、エフェクトが実行され、Shadertoyのエフェクトと同じ見た目になります。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.