概要

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フレームごとにしか再描画されなくなり、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最適化ガイド」も併せて参照してください。