概要

Qt Quick Ultraliteは、デフォルトでは、ディスプレイに表示されるすべてのピクセルに対して単一のハードウェアレイヤーを使用します。これは、ハードウェアアクセラレーションによるレイヤー処理をサポートしているプラットフォームでは、最適な解決策ではない可能性があります。そのようなプラットフォームでパフォーマンスを向上させるには、複数のレイヤーを使用し、ハードウェアにそれらを合成させて最終的な画像を生成させることができます。

複数のレイヤーは、CPU または GPU メモリ内のフレームバッファにレンダリングされる動的な UI コンテンツや、変化しない静的な画像データを表現するために使用できます。ハードウェア・レイヤー合成ユニットは、複数の独立したレイヤーから、ディスプレイに送信される最終的な画像を合成します。

Qt Quick Ultralite アプリケーションでは、ハードウェアレイヤーを使用することで、メモリ使用量や CPU・GPU の使用率を低減したり、負荷の高いレンダリング操作によって引き起こされるフレームスキップを防止したりできます。UI の変更頻度の低い部分を個別のレイヤーに分離しておくことで、メインのアニメーション UI コンテンツをより高速にレンダリングできるようになります。

メモリ使用量の削減

画面全体を覆う単一の背景画像を持つ動的に更新されるUIを表示するために、2つのフルスクリーンフレームバッファを使用する代わりに、画像レイヤーを使用することができます：

Screen {
    width: 800
    height: 480

    ImageLayer {
        anchors.fill: parent
        source: "background.png"
    }

    ItemLayer {
        anchors.fill: parent
        depth: ItemLayer.Bpp32Alpha

        // UI items here
    }
}

背景画像がFlash内に格納されている場合、追加のフレームバッファメモリは不要となり、CPUやGPUのメモリ使用量を削減できます。

複数のアイテムレイヤーを使用することで、ビット深度を下げたり、単一のアイテムレイヤーの代わりに小さなアイテムレイヤーを使用したりすることで、メモリ使用量を削減することもできます。後者の方法は、UI内にコンテンツのない大きな隙間がある場合に使用されます。

レンダリング時間の短縮

透視変換やエフェクトが適用された画像など、レンダリングに負荷がかかるグラフィックもあります。可能であれば、それらを別のアイテムレイヤーに配置し、ItemLayer::refreshInterval プロパティを2 に設定します。これにより、レイヤーの内容は2フレームに1回のみ再描画されるようになり、CPUおよびGPUの使用率を節約できるほか、メインUIのアニメーションが滑らかに動作しなくなるリスクを低減できます。

Screen {
    width: 800
    height: 480

    ItemLayer {
        anchors.fill: parent

        // Main UI items here
    }

    ItemLayer {
        anchors.centerIn: parent
        width: 400
        height: 240

        refreshInterval: 2

        // Expensive to render graphics here
    }
}

スプライトレイヤーの使用

ハードウェアレイヤーユニットは通常、ルートレイヤーの数を比較的少なく（例えば4つや5つ程度）に制限しています。スプライトハードウェアレイヤーがサポートされている場合、スプライトレイヤーをコンテナとして使用し、複数の小さなアイテムレイヤーや画像レイヤーを格納することが可能です。

ただし、スプライトレイヤーの使用にはいくつかの制限があり、これらはSpriteLayer のドキュメントに記載されています。重なり合うサブレイヤーは互いにブレンドされず、すべてのサブレイヤーは同じ色深度を持つ必要があります。

例

この例では、アプリケーションの UI を複数の独立したレイヤーで構成する方法を示しています。

背景レイヤー

背景レイヤーは、UI の最下部に静的で変化のないコンテンツを含むImageLayer であり、その下には動的なコンテンツが存在しません。

動的コンテンツレイヤー

動的コンテンツレイヤーは、UI の主要なアニメーション部分を格納する `ItemLayer ` であり、フレームごとに変化します。これらの部分のみを単一のレイヤーにまとめることで、アプリケーションの絶えず、あるいは頻繁にアニメーションする部分を再描画する際の描画コールのオーバーヘッドを削減できます。

静的コンテンツレイヤー

静的コンテンツレイヤーは、1つ以上のItemLayer およびImageLayer インスタンスで構成され、場合によっては1つ以上のSpriteLayer インスタンス内に含まれることもあります。

これらのレイヤーには、ほとんどの場合静的なままである UI の部分が含まれます。 アニメーションの頻度が低いコンテンツもここに配置できるため、フレームごとに再描画される必要がなくなり、頻繁または常にアニメーションが行われるコンテンツのパフォーマンス低下を抑えることができます。ItemLayer::refreshInterval プロパティは 2 から 4 の間で設定でき、アニメーションが発生した場合でも、表示の更新のたびに再描画されるのではなく、再描画の頻度を抑えて行われます。

最終的な合成結果

これが、ディスプレイ上に表示される最終的な合成結果の見た目です。

プラットフォーム固有のガイド

Infineon 対応のTRAVEO T2Gボードについては、「 Infineon 対応TRAVEO T2GボードのレイヤーおよびVRAM最適化ガイド」も併せて参照してください。