Qt QMLプログラミングで知る!textureMirroringのエラーと解決策

2025-06-06

Item.layer.textureMirroring は、Qt Quick の Item 型のプロパティで、アイテムをオフスクリーンテクスチャとしてレンダリングする際に、そのテクスチャがどのようにミラーリング(反転)されるかを制御します。

layer.enabledlayer.textureMirroring の関係

まず、Item.layer.textureMirroring を使用するには、そのアイテムの layer.enabled プロパティを true に設定して、アイテムとそのサブツリーをオフスクリーンサーフェス(テクスチャ)にレンダリングするように有効にする必要があります。通常、Qt Quick のアイテムは直接ウィンドウに描画されますが、layer.enabledtrue にすると、一度オフスクリーンのテクスチャに描画され、そのテクスチャがウィンドウに描画されます。

この「オフスクリーンテクスチャに描画する」という動作は、シェーダーエフェクトの適用、複雑なアイテム階層のキャッシュ、グループとしての不透明度制御など、特定の視覚効果やパフォーマンス最適化のために利用されます。

textureMirroring の役割

textureMirroring は、この生成されたテクスチャが OpenGL などで使用される際に、どの軸に沿って反転されるかを指定します。デフォルトの動作は、使用されるグラフィックAPIのテクスチャ座標の原点(通常は左下)と、QMLのアイテムの座標系(通常は左上)との違いを考慮して自動的に調整されます。

しかし、カスタムシェーダー(ShaderEffect など)でこのテクスチャを直接利用する場合など、特定のケースでは、この自動ミラーリングが意図しない結果を生むことがあります。textureMirroring プロパティを使用することで、このテクスチャのミラーリング動作を明示的に制御できます。

指定できる値(列挙型)

Item.layer.textureMirroring には、以下の列挙型が指定できます。

  • Item.MirrorVertically: テクスチャを垂直方向(Y軸に沿って)に反転させます。これが多くの環境でのデフォルト値に近い動作となります。
  • Item.MirrorHorizontally: テクスチャを水平方向(X軸に沿って)に反転させます。
  • Item.NoMirroring: ミラーリングを行いません。テクスチャはそのままの向きで使用されます。

使用例

import QtQuick 2.0

Item {
    width: 200
    height: 200

    Rectangle {
        id: myRectangle
        width: 100
        height: 100
        color: "blue"
        anchors.centerIn: parent

        // レイヤーを有効にする
        layer.enabled: true
        // テクスチャの垂直方向のミラーリングを無効にする(デフォルトとは異なる動作にする場合)
        layer.textureMirroring: Item.NoMirroring 

        // 例としてシェーダーエフェクトを適用する場合
        // layer.effect: ShaderEffect { ... }
    }
}

注意点

layer.enabledtrue にすると、GPUメモリが width x height x 4 のサイズで割り当てられ、レンダリングパスが増えるため、パフォーマンスとメモリ使用量に影響を与える可能性があります。そのため、必要な場合にのみ layer.enabled を使用し、特に textureMirroring のような詳細な設定は、特定の視覚効果やカスタムシェーダーの要件がある場合に検討すると良いでしょう。



Item.layer.textureMirroring は、Qt Quick のアイテムをオフスクリーンテクスチャとしてレンダリングする際のミラーリング(反転)挙動を制御するプロパティです。この機能自体が直接エラーを引き起こすことは稀ですが、関連する設定や環境によって意図しない表示になったり、パフォーマンスの問題が発生したりすることがあります。

想定と異なるテクスチャの向き

問題
layer.textureMirroring を設定したにもかかわらず、テクスチャが意図した方向(水平、垂直、なし)にミラーリングされない、または予期せぬ反転が発生する。

原因

  • 環境によるデフォルトの挙動の違い
    一部のグラフィックドライバーやプラットフォームでは、テクスチャのロードやレンダリングにおいて、デフォルトのミラーリング挙動が異なる場合があります。
  • シェーダー内の誤った座標変換
    ShaderEffect などで source プロパティを使って Item.layer のテクスチャを参照する場合、シェーダー内でテクスチャ座標を間違って計算していると、意図しない反転や歪みが発生します。
  • グラフィックAPIのテクスチャ座標系との不一致
    OpenGLのようなグラフィックAPIでは、テクスチャ座標系の原点が左下であることが一般的ですが、QMLの座標系は左上です。textureMirroring はこの違いを吸収するために存在しますが、カスタムシェーダー(ShaderEffect など)でテクスチャを直接扱う場合、シェーダー内でさらにミラーリング処理が必要になることがあります。
  • layer.enabled が true になっていない
    textureMirroring は、アイテムがオフスクリーンテクスチャとしてレンダリングされる場合にのみ効果があります。layer.enabledfalse の場合、アイテムは直接レンダリングされ、textureMirroring は無視されます。

トラブルシューティング

  • Qt のバージョンとグラフィックドライバーの確認
    使用しているQtのバージョンとグラフィックドライバーが最新であるかを確認します。古いバージョンやドライバーに既知の問題がある場合があります。
  • シンプルなアイテムでテスト
    問題の切り分けのため、複雑なアイテムではなく、単色の Rectangle などシンプルなアイテムで layer.enabledlayer.textureMirroring の挙動を確認します。
  • カスタムシェーダーの確認
    ShaderEffect を使用している場合、シェーダーコード内でテクスチャ座標(通常 qt_TexCoord0 など)がどのように扱われているかを確認し、必要に応じて 1.0 - qt_TexCoord0.y のようにY座標を反転させるなどの調整を行います。
  • textureMirroring の各値を試す
    Item.NoMirroringItem.MirrorHorizontallyItem.MirrorVertically の全てを試して、最も意図に近い結果が得られるか確認します。
  • layer.enabled: true を確認
    まず、対象のアイテムの layer.enabledtrue に設定されていることを確認してください。

パフォーマンスの低下

問題
layer.enabledtrue に設定することで、アプリケーションの動作が重くなる、フレームレートが低下する。

原因

  • 不必要なレイヤー化
    視覚的な効果のために必ずしも必要ではないにもかかわらず、安易に layer.enabledtrue にしている場合。
  • バッチ処理の無効化
    レイヤー化されたアイテムは、Qt Scene Graph のバッチ処理の恩恵を受けられなくなります。これにより、描画呼び出しの回数が増え、パフォーマンスに悪影響を与えることがあります。
  • オフスクリーンレンダリングのオーバーヘッド
    layer.enabledtrue にすると、アイテムが一度オフスクリーンのテクスチャに描画され、そのテクスチャがさらにメインのシーンに描画されます。この「二段階レンダリング」にはGPUリソースとメモリの追加使用が発生し、複雑なアイテムや多数のレイヤー化されたアイテムがある場合にパフォーマンスが低下します。

トラブルシューティング

  • グラフィックドライバーの更新
    グラフィックドライバーが古い場合、パフォーマンスが低下する可能性があります。最新のドライバーに更新してください。
  • Qt Quick Scene Graph Analyzer の利用
    Qt Quick Scene Graph Analyzer などのツールを使用して、レンダリングパスやバッチ処理の状況を確認し、パフォーマンスのボトルネックを特定します。
  • layer.textureSize の調整
    Item のサイズが非常に大きく、その一部しかレイヤー化する必要がない場合、layer.sourceRectlayer.textureSize を使用して、テクスチャのサイズを小さく抑えることができます。
  • 一時的な有効化
    アニメーションやエフェクトのために一時的にレイヤーが必要な場合は、効果が終了したらすぐに layer.enabledfalse に戻すようにします。
  • 必要最小限の使用
    layer.enabled は、シェーダーエフェクトの適用、複雑なアイテムのキャッシュ、グループとしての不透明度制御など、特定の目的のためにのみ使用します。不要な場合は無効にしてください。

テクスチャの粗さやエイリアシング

問題
レイヤー化されたアイテムのテクスチャが粗く見えたり、ギザギザ(エイリアシング)が発生したりする。

原因

  • スムージングの不足
    テクスチャのフィルタリングが適切でない場合。
  • テクスチャサイズが小さい
    アイテムの実際の表示サイズに対して、生成されるテクスチャの解像度が低い場合。
  • GPUの制限
    環境によっては、GPUがサポートするテクスチャサイズに上限がある場合があります。
  • layer.textureSize の確認
    もし layer.textureSize を明示的に設定している場合、それがアイテムの表示サイズに対して十分な大きさであることを確認します。通常、明示的に設定しない限り、アイテムのサイズに合わせて自動的にテクスチャサイズが決定されます。
  • Item.antialiasing: true の設定
    アイテム自体に antialiasing: true を設定することで、レンダリングされるピクセルがより滑らかになります。
  • layer.smooth: true の設定
    デフォルトでは true ですが、明示的に layer.smooth: true を設定し、テクスチャのスムージングが有効になっていることを確認します。


基本的な考え方

  1. layer.enabled: true: まず、対象の Item をオフスクリーンテクスチャとしてレンダリングするように有効にする必要があります。これを設定しないと、textureMirroring は効果がありません。
  2. layer.textureMirroring の設定: Item.NoMirroringItem.MirrorHorizontallyItem.MirrorVertically のいずれかを指定します。

例1:基本的なミラーリングの確認

この例では、Rectangle をオフスクリーンテクスチャとしてレンダリングし、異なる textureMirroring の設定でどのように表示が変わるかを確認します。

main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 600
    height: 400
    visible: true
    title: "Texture Mirroring Example"

    Column {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        // オリジナルのイメージ(比較用)
        Text {
            text: "オリジナルイメージ"
            font.pixelSize: 18
        }
        Image {
            id: originalImage
            source: "qml_logo.png" // 任意の画像ファイルに置き換えてください
            width: 100
            height: 100
            fillMode: Image.PreserveAspectFit
        }

        // ミラーリングなし
        Text {
            text: "No Mirroring"
            font.pixelSize: 18
        }
        Rectangle {
            width: 100
            height: 100
            color: "lightgray"
            border.color: "black"
            border.width: 1

            // レイヤーを有効にする
            layer.enabled: true
            // ミラーリングなし
            layer.textureMirroring: Item.NoMirroring

            Image {
                source: "qml_logo.png" // 任意の画像ファイルに置き換えてください
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
            }
        }

        // 水平方向のミラーリング
        Text {
            text: "Mirror Horizontally"
            font.pixelSize: 18
        }
        Rectangle {
            width: 100
            height: 100
            color: "lightgray"
            border.color: "black"
            border.width: 1

            // レイヤーを有効にする
            layer.enabled: true
            // 水平方向にミラーリング
            layer.textureMirroring: Item.MirrorHorizontally

            Image {
                source: "qml_logo.png"
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
            }
        }

        // 垂直方向のミラーリング
        Text {
            text: "Mirror Vertically (多くの環境でのデフォルトに近い挙動)"
            font.pixelSize: 18
        }
        Rectangle {
            width: 100
            height: 100
            color: "lightgray"
            border.color: "black"
            border.width: 1

            // レイヤーを有効にする
            layer.enabled: true
            // 垂直方向にミラーリング
            layer.textureMirroring: Item.MirrorVertically

            Image {
                source: "qml_logo.png"
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
            }
        }
    }
}

解説

  • 多くの場合、Qt Quick のアイテムは左上が原点(0,0)ですが、OpenGL のテクスチャ座標は左下を原点とすることが一般的です。そのため、layer.enabledtrue にすると、デフォルトで垂直方向にミラーリングされたように見えることがあります。Item.MirrorVertically はこの一般的な挙動に対応するものです。
  • layer.textureMirroringItem.NoMirroring, Item.MirrorHorizontally, Item.MirrorVertically をそれぞれ指定することで、テクスチャがどのように反転されるかを確認できます。
  • Rectanglelayer.enabled: true を設定することで、内部の Image をオフスクリーンテクスチャとしてレンダリングします。

layer.textureMirroring は、特に ShaderEffect でアイテムのレイヤーをテクスチャとして利用する際に重要になります。カスタムシェーダーでテクスチャの座標を直接扱う場合、textureMirroring の設定がテクスチャの正しい向きに影響を与えます。

この例では、Rectangle をレイヤー化し、そのテクスチャを ShaderEffect で利用します。

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 400
    visible: true
    title: "Shader Effect with Texture Mirroring"

    Column {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        Text {
            text: "Shader Effect (No Mirroring)"
            font.pixelSize: 18
        }

        Rectangle {
            width: 150
            height: 150
            color: "transparent" // 背景は透明
            border.color: "black"
            border.width: 1

            // このRectangleとその中のアイテムをオフスクリーンテクスチャとしてレンダリングする
            layer.enabled: true
            layer.textureMirroring: Item.NoMirroring // ミラーリングなし

            // 内部に表示されるコンテンツ
            Rectangle {
                x: 25; y: 25
                width: 100
                height: 100
                color: "red"
                Text {
                    anchors.centerIn: parent
                    text: "QML"
                    font.pixelSize: 30
                    color: "white"
                }
            }

            // このレイヤーのテクスチャに適用するShaderEffect
            layer.effect: ShaderEffect {
                property real opacity: 1.0
                // layer.effect では source プロパティで自動的にレイヤーのテクスチャが渡される

                // シンプルなフラグメントシェーダー
                // テクスチャの色をそのまま出力する
                fragmentShader: "
                    uniform sampler2D source; // レイヤーのテクスチャ
                    varying highp vec2 qt_TexCoord0; // テクスチャ座標

                    void main() {
                        gl_FragColor = texture2D(source, qt_TexCoord0);
                    }
                "
            }
        }

        // ミラーリングあり(ShaderEffectで調整が必要な場合)
        Text {
            text: "Shader Effect (Mirror Vertically - シェーダー内で調整なし)"
            font.pixelSize: 18
        }

        Rectangle {
            width: 150
            height: 150
            color: "transparent"
            border.color: "black"
            border.width: 1

            layer.enabled: true
            layer.textureMirroring: Item.MirrorVertically // 垂直方向にミラーリング

            Rectangle {
                x: 25; y: 25
                width: 100
                height: 100
                color: "green"
                Text {
                    anchors.centerIn: parent
                    text: "QML"
                    font.pixelSize: 30
                    color: "white"
                }
            }

            layer.effect: ShaderEffect {
                property real opacity: 1.0
                fragmentShader: "
                    uniform sampler2D source;
                    varying highp vec2 qt_TexCoord0;

                    void main() {
                        // layer.textureMirroring: Item.MirrorVertically の影響を受けるため、
                        // このシェーダーでは垂直方向に反転して表示される可能性が高い
                        gl_FragColor = texture2D(source, qt_TexCoord0);
                    }
                "
            }
        }
    }
}
  • もし layer.textureMirroring: Item.MirrorVertically を使用しつつ、シェーダー内でテクスチャを正しい向きで表示したい場合は、シェーダー内でテクスチャ座標のY軸を反転させる必要があります。例えば、texture2D(source, vec2(qt_TexCoord0.x, 1.0 - qt_TexCoord0.y)) のように記述します。
  • 2番目の Rectangle では layer.textureMirroring: Item.MirrorVertically を設定しています。この場合、OpenGL のテクスチャ座標系と QML の座標系の違いにより、テクスチャが垂直方向に反転してシェーダーに渡されます。もしシェーダー内でこの反転を考慮しない場合、表示が上下逆になることがあります。
  • 最初の Rectangle では layer.textureMirroring: Item.NoMirroring を設定し、テクスチャがミラーリングされないようにしています。
  • layer.effect プロパティを使って、レイヤー化されたアイテム全体にシェーダー効果を適用しています。


  1. layer.enabled を使わずに、視覚的な反転を実現したい場合: layer.enabled を使ってオフスクリーンレンダリングを行うオーバーヘッドを避けたい場合や、単純にアイテムの見た目を反転させたい場合。
  2. layer.enabled は使うが、textureMirroring 以外の方法でテクスチャの向きを制御したい場合(特に ShaderEffect と組み合わせる際): textureMirroring が提供する機能では不十分、またはより柔軟な制御が必要な場合。

それぞれのシナリオにおける代替方法を説明します。

シナリオ1: layer.enabled を使わずに視覚的な反転を実現する方法

この場合、Item.layer.textureMirroring は全く関係ありません。代わりに、Qt Quick の通常の変換プロパティや、コンテンツ自体の向きを調整する方法を使用します。

1 Item の scale プロパティを使用する

最も一般的で簡単な方法です。Itemscale.x または scale.y-1 に設定することで、アイテムをその中心を基準に反転させることができます。

利点

  • Item の全てのプロパティ(子アイテム、テキスト、画像など)に適用される。
  • パフォーマンスへの影響が少ない。
  • 非常に簡単で直感的。

欠点

  • 反転されたテキストの読みにくさなど、コンテンツによっては不向きな場合がある。
  • 反転の原点(transformOrigin)を適切に設定しないと、意図しない位置に移動する可能性がある。

コード例

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 300
    visible: true
    title: "Scale Mirroring Example"

    Row {
        anchors.centerIn: parent
        spacing: 50

        // 元の四角形とテキスト
        Rectangle {
            width: 100
            height: 100
            color: "blue"
            Text {
                anchors.centerIn: parent
                text: "Original"
                color: "white"
                font.pixelSize: 20
            }
        }

        // 水平方向に反転
        Rectangle {
            width: 100
            height: 100
            color: "red"
            // transformOrigin: Item.Center はデフォルトなので省略可能
            scale.x: -1 // 水平方向に反転
            Text {
                anchors.centerIn: parent
                text: "Mirrored X"
                color: "white"
                font.pixelSize: 20
            }
        }

        // 垂直方向に反転
        Rectangle {
            width: 100
            height: 100
            color: "green"
            // transformOrigin: Item.Center はデフォルトなので省略可能
            scale.y: -1 // 垂直方向に反転
            Text {
                anchors.centerIn: parent
                text: "Mirrored Y"
                color: "white"
                font.pixelSize: 20
            }
        }
    }
}

2 Transform エレメントを使用する (Scale Transform)

scale プロパティと同様ですが、より柔軟な変換が必要な場合に transform リスト内の Scale エレメントを使用します。

利点

  • scale プロパティと同じ効果が得られる。
  • 複数の変換(移動、回転、拡大縮小など)を組み合わせて適用できる。

欠点

  • scale プロパティより記述が少し複雑になる。

コード例

import QtQuick 2.15

// ... (Windowなどの親要素は例1と同じ)

Rectangle {
    width: 100
    height: 100
    color: "purple"
    x: 50; y: 150

    transform: [
        Scale {
            x: -1 // 水平方向に反転
            // origin.x: parent.width / 2 // 必要に応じて原点を設定
            // origin.y: parent.height / 2
        }
    ]
    Text {
        anchors.centerIn: parent
        text: "Transform Scale X"
        color: "white"
        font.pixelSize: 16
    }
}

3 Image の mirror プロパティ (画像コンテンツのみ)

もし反転させたいコンテンツが単一の Image 要素である場合、Image 型の mirror プロパティを使用できます。これは画像ファイルを水平方向に反転させます。

利点

  • 画像専用のシンプルな反転機能。

欠点

  • Image 要素にしか使えない。
  • 水平方向のみ。

コード例

import QtQuick 2.15

// ... (Windowなどの親要素は例1と同じ)

Image {
    source: "qml_logo.png" // 任意の画像ファイルに置き換え
    width: 100
    height: 100
    x: 200; y: 150
    mirror: true // 水平方向に反転
}

このシナリオは、主にカスタムシェーダー (ShaderEffect など) でレイヤーのテクスチャを直接操作する場合に役立ちます。

1 ShaderEffect 内でテクスチャ座標を直接操作する

Item.layer.textureMirroring が提供するミラーリング機能は、特定のグラフィックAPIのデフォルトのテクスチャ座標系とQMLの座標系の違いを吸収するために設計されています。しかし、より複雑な反転やテクスチャマッピングが必要な場合、シェーダー内でテクスチャ座標 (qt_TexCoord0) を直接操作することで、完全に自由にテクスチャの向きを制御できます。

利点

  • textureMirroring の設定に左右されず、シェーダー内で完結した処理が可能。
  • 最も柔軟な方法。どのような複雑なテクスチャ変換も可能。

欠点

  • デバッグが難しい場合がある。
  • GLSL(OpenGL Shading Language)の知識が必要。

コード例 (垂直反転の例)

import QtQuick 2.15

// ... (Windowなどの親要素は例1と同じ)

Rectangle {
    width: 150
    height: 150
    color: "transparent"
    border.color: "black"
    border.width: 1
    x: 50; y: 250

    layer.enabled: true
    // ここでは textureMirroring はデフォルトのままでも良いが、
    // シェーダーで制御するため、NoMirroring に設定してシンプルにするのが一般的
    layer.textureMirroring: Item.NoMirroring // またはデフォルトのままでもOK

    Rectangle {
        x: 25; y: 25
        width: 100
        height: 100
        color: "orange"
        Text {
            anchors.centerIn: parent
            text: "QML"
            font.pixelSize: 30
            color: "white"
        }
    }

    layer.effect: ShaderEffect {
        fragmentShader: "
            uniform sampler2D source;
            varying highp vec2 qt_TexCoord0;

            void main() {
                // Y座標を反転させる (0 -> 1, 1 -> 0)
                // これにより、テクスチャが垂直方向に反転して表示される
                vec2 flippedTexCoord = vec2(qt_TexCoord0.x, 1.0 - qt_TexCoord0.y);
                gl_FragColor = texture2D(source, flippedTexCoord);
            }
        "
    }
}

解説

  • この方法は、layer.textureMirroring の設定に関わらず、シェーダー内で最終的なテクスチャの向きを決定できるため、非常に強力です。
  • 1.0 - qt_TexCoord0.y とすることで、Y座標を反転させています。これにより、テクスチャの上下が逆になります。水平反転の場合は 1.0 - qt_TexCoord0.x を使用します。
  • qt_TexCoord0 は、QMLがシェーダーに渡すテクスチャ座標です。通常、左上が (0,0)、右下が (1,1) です。

2 ShaderEffectSource を使用する

ShaderEffectSource は、特定の Item をテクスチャとしてキャプチャし、そのテクスチャを他の ShaderEffectImage などで再利用するための専用のアイテムです。ShaderEffectSource 自体にも textureMirroring プロパティがあります。

利点

  • sourceItem を非表示にできる(hideSource: true)など、キャッシュ目的での機能が充実している。
  • ShaderEffectSource 自身がミラーリングプロパティを持っているため、ソーステクスチャの向きを制御できる。
  • 複雑なアイテムを一度テクスチャにキャッシュし、そのテクスチャを複数の場所で再利用できる。

欠点

  • layer.enabled と同様に、オフスクリーンレンダリングのオーバーヘッドがある。

コード例

import QtQuick 2.15

// ... (Windowなどの親要素は例1と同じ)

// キャプチャしたいアイテム
Item {
    id: sourceContent
    width: 100
    height: 100
    visible: false // ShaderEffectSourceでキャプチャするので非表示にする

    Rectangle {
        width: parent.width
        height: parent.height
        color: "blue"
        Text {
            anchors.centerIn: parent
            text: "Source"
            color: "white"
            font.pixelSize: 20
        }
    }
}

// sourceContent をテクスチャとしてキャプチャし、表示
ShaderEffectSource {
    id: textureSource
    sourceItem: sourceContent // キャプチャするアイテムを指定
    width: sourceContent.width
    height: sourceContent.height
    live: true // sourceContent の変更をリアルタイムで反映
    hideSource: true // sourceContent を非表示にする

    // ここでミラーリングを設定
    textureMirroring: ShaderEffectSource.MirrorHorizontally
    // textureMirroring: ShaderEffectSource.MirrorVertically
    // textureMirroring: ShaderEffectSource.NoMirroring

    x: 50; y: 250 // 表示位置
}

解説

  • この方法も、layer.enabled を使うのと同様にオフスクリーンレンダリングが発生します。
  • sourceItem に指定されたアイテムがテクスチャとしてレンダリングされ、ShaderEffectSource 自体がそのテクスチャを表示します。
  • ShaderEffectSourceItem.layer.textureMirroring と似た textureMirroring プロパティを持っています。

Item.layer.textureMirroring の代替方法は、目的によって大きく異なります。

  • オフスクリーンテクスチャを使用しつつ、より詳細なテクスチャの向き制御が必要な場合: ShaderEffect 内で直接テクスチャ座標を操作する方法が最も柔軟です。ShaderEffectSource は、特定のアイテムをテクスチャとしてキャプチャ・再利用する目的で有効です。
  • 単にアイテムの見た目を反転させたいだけなら: Itemscale プロパティを使用するのが最も簡単でパフォーマンスも良い方法です。Image の場合は mirror プロパティも選択肢になります。