NeoChrom / NeoChromVG上でのTouchGFXの使用
このセクションでは、NeoChromグラフィック･アクセラレータを搭載したハードウェア上でTouchGFXを使用する方法について説明します。 このグラフィック･アクセラレータは、テクスチャ･マッピング、画像のスケーリングや回転などの操作性能を著しく向上します。 これはつまり、高いフレームレートを維持しながら、より高度なUIを構築できるということです。
The NeoChrom graphics accelerator is currently only available in the STM32U5x9 and STM32H7R/S microcontrollers. Development boards are available for both families.
STM32U5A9 Discovery Board
The NeoChrom accelerator is known by the name GPU2D in source code and in CubeMX.
NeoChromとNeoChromVG
STM32U5G9の導入により、NeoChromアクセラレータが更新され、機能が追加されました。 この機能が向上したアクセラレータは、NeoChromVGといいます。 また、このアクセラレータには、ハードウェア･アクセラレーションによるベクタ･グラフィックスを可能にする拡張機能が搭載されています。
| マイクロコントローラ | アクセラレータ |
|---|---|
| STM32U599 | NeoChrom |
| STM32U5A9 | NeoChrom |
| STM32U5F9 | NeoChromVG |
| STM32U5G9 | NeoChromVG |
| STM32H7Rx | NeoChrom |
| STM32H7Sx | NeoChrom |
NeoChromのグラフィック機能
NeoChromアクセラレータは、基本のビットマップ転送（画像描画）、ブレンディング、スケーリング、回転、およびテクスチャ･マッピングを実行できます。 このような操作はすべて、NeoChromを内蔵したマイクロコントローラ上で実行されるTouchGFXによって自動的に利用されます。
DMA2Dグラフィック･アクセラレータと比べ、NeoChromはより多くのグラフィック処理を高速化できるだけでなく、より豊富な機能セットも組み込まれています。
| グラフィック機能 | DMA2D | GPU2D |
|---|---|---|
| サポート対象フォーマット（TouchGFX使用時） | ARGB8888、RGB888、RGB565、A8、A4、L8 | ARGB8888、RGB888、RGB565、A8、A4、A2、A1 |
| コマンドリスト･ベース | No | Yes |
| 描画 | 長方形 | マルチサンプリング･アンチエイリアシング（MSAA）を使用した長方形、ピクセル、ライン、三角形、四辺形 |
| ビットマップ転送 | コピー、アルファブレンディング、ピクセル･フォーマット変換 | コピー、アルファブレンディング、ピクセル･フォーマット変換、カラー･キーイング |
| テクスチャ･マッピング | No | Yes |
| ベクタ･グラフィックス | No | No* |
* ハードウェア･アクセラレーションによるベクタ･グラフィックスはNeoChromVGで利用可能です。
利用可能なこれらの機能により、さらに多くのTouchGFXウィジェットがNeoChromによって高速化されます。
| ウィジェット | DMA2D | GPU2D |
|---|---|---|
| Box、BoxWithBorder | Yes | Yes |
| Image、AnimatedImage、TiledImage、SnapshotWidget | Yes | Yes |
| Button、ButtonWithIcon、ButtonWithLabel、ToggleButton | Yes | Yes |
| RadioButton、RepeatButton | Yes | Yes |
| PixelDataWidget | Yes | Yes |
| TextArea、TextAreaWithWildcard、Keyboard | 一部 | Yes |
| ScalableImage | No | Yes |
| TextureMapper、AnimatedTextureMapper | No | Yes |
| Circle、Line、Graph、Gauge | No* | No* |
| SVG | No | No** |
* The drawing/blending of pixels to the framebuffer is done by DMA2D, but the shape calculations are done in software.
** Hardware accelerated SVG is available with NeoChromVG.
ハードウェアで高速化される以外の操作は、ソフトウェアで描画されます（CPU負荷が増加し、性能が低下します）。 上記のテーブルが示すように、NeoChromはScalableImageやTextureMapperなどのウィジェットを高速化できます。 つまり、高い性能を維持しながら、これらのウィジェットをより一層使用できるようになります。
ベクタ･グラフィックス
この新しいNeoChromVGアクセラレータは、ベクタ･グラフィックスを高速化できます。 この機能は、TouchGFXでSVG画像を描画するときに使用されます。 An extra buffer called the stencil buffer is required by the GPU2D graphics accelerator. このバッファは、フレームバッファと同じサイズですが、ピクセル当たり1バイトだけです。
たとえば、フレームバッファが24bppで480 x 480の場合、ステンシル･バッファは480 x 480 = 230,400バイトである必要があります。 最適な性能を得るため、このステンシル･バッファを高速SRAMに割り当てることが重要です。
ステンシル･バッファはTouchGFX Generatorによって割り当てられます。 こちらのガイドを参照してください。
NeoChromによる描画時間の改善
次の例では、DMA2Dやソフトウェアによる描画と比較してNeoChromがもたらす高速化について説明します。 Designerを使用して、2つのプロジェクトを作成しました。 最初のプロジェクトは、ボックスのバックグラウンド上に画像を表示します。 2つ目のプロジェクトは、ボックスのバックグラウンド上にTextureMapperウィジェットを表示します。 このウィジェットはすべてのフレームで再描画されます。 どちらの場合でも、ビットマップは128x128のサイズ、ARGB8888フォーマットで、内部Flashに格納されます。 フレームバッファは、RGB565フォーマットです。
Imageプロジェクト
TextureMapperプロジェクト
Both projects have been executed on a STM32F746 and a STM32U5A9 Discovery board.
GPIOをロジック･アナライザに接続して、描画時間を測定しました。
STM32F746でImageプロジェクトを実行
The figure above shows the frame rate and rendering time when running on the STM32F746. チャネル00は、VSYNC信号を示しています。 59.2 Hzのフレームレートに対応した、16.9 msのフレーム間隔（A1～A2）で表示されていることがわかります。 チャネル01は描画時間を示しており、描画時（B1～B2）は高くなります。 したがって、画像の描画時間は1.3 msです。 STM32F746では画像描画は高速で実行されます。
STM32F746でTextureMapperプロジェクトを実行
上図は、STM32F746で実行中のTextureMapperプロジェクトです。 TextureMapperの描画時間は4.5 msです。 TextureMapperウィジェットは、Imageの場合よりも大幅に時間がかかります。
STM32U5A9 running the Image project
Here is the STM32U5A9 Discovery kit running the Image project. The STM32U5A9 Discovery kit display has a display frame interval of 12.26 ms corresponding to a frame rate of 81.6 Hz. 画像の描画時間は0.7 msです。 STM32F746キットの場合よりも、Imageウィジェットが高速であることがわかります。
STM32U5A9 running the TextureMapper project
TextureMapperの描画時間は1.7 msです。 The TextureMapper is also faster on STM32U5A9 than on the STM32F746.
描画時間のまとめ
次の表に、描画時間を示します。
| 要素 | STM32F746 | STM32U5A9 | 速度向上 |
|---|---|---|---|
| 周波数 | 200 MHz | 160 MHz | 0.8 |
| Image | 1.3 ms | 0.7 ms | ~2x |
| TextureMapper | 4.5 ms | 1.7 ms | ~3x |
We see that even with a reduced clock frequency the STM32U5A9 greatly outperforms the STM32F746, especially with the TextureMapper.
これらの測定は、内部Flash内の画像と、STM32F746の場合は外部SDRAMのフレームバッファを使用して行われます。 The framebuffer is in internal SRAM for the STM32U5A9 (as this will be typical scenario). Moving the image to external flash hurts the STM32F746 as it uses QSPI flash (4-bit bus), whereas the STM32U5A9 uses a faster OSPI flash (8-bit bus).
STM32F746 Discoveryキットは、内部RAMで480x272 RGB565フレームバッファを使用して実行できます。 これにより性能は向上しますが（Imageは1.03 msまで短縮）、これはSTM32F746の標準設定ではありません。内部SRAMの大半がフレームバッファ用に使用されるため、他のアプリケーション･コンポーネントに使用できるRAMはほとんど残らないからです。
単一フレームバッファでの実行もまた、すべてのアプリケーションに適しているわけではありません。
より豊富なユーザ･インタフェース
描画パフォーマンスの向上により、より高度なアニメーションを組み込んだユーザ･インタフェースを作成できます。 For example more scaled or rotated elements.
For the STM32F746, the display refresh time was 16.8 ms. This means that the application must keep the render time below this time to keep a frame rate of 60 fps. We can therefore have at most 3.75 texture mappers of that complexity (16.8 ms / 4.48 ms) on the screen, or a single larger texture mapper of size 247 x 247 (the same number of pixels and approximately the same rendering time).
If we assume the same screen refresh rate, but use the STM32U5A9 CPU, we can have 14.36 texture mappers (16.8 ms / 1.17 ms), or a single texture mapper of size 485 x 485.
The following figure shows two applications running on respectively the STM32F746 and the STM32U5A9. ここでは、中央に近づくにつれて要素が拡大され、遠ざかると縮小される、カルーセルのようなメニューを作成することを意図しています（ここでは、すべての要素に対して同じテクスチャを使用しています）。
STM32F746 (left) with a 480x272 pixels display and STM32U5A9 (right) running the texture mapper based carousel project on a 480x480 display.
STM32F746は、3つのアイコン、つまり、係数1.9で拡大された大きいアイコン1つと、2つの小さいアイコンを表示できます。 The STM32U5A9 is capable of showing 7 icons. 最大のアイコンは、係数2.7で拡大されています。
STM32F746で、3つのアイコンを持つアプリケーションの描画時間は14.38 msです。 The rendering time of the application with 7 icons on the STM32U5A9 is 14.93 ms. Both UIs can thus run in 60 fps, with the STM32U5A9 showing much more content in a higher resolution.
アクセラレータ･ベクタ･グラフィックス
この新しいNeoChromVGアクセラレータは、ベクタ･グラフィックスを高速化できます。 これにより、アプリケーションの新しいクラスの可能性が開かれ、ビットマップではなく、ベクタ･ベースのグラフィックスが中心的な役割を担うことになります。
その一例がマップ･アプリケーションです。 マップはビットマップから作成できますが、非常に大きなストレージや特定のマップ･セクションの事前ダウンロードが必要な場合がよくあります。
The video below shows a demonstration application running on a STM32U5G9. このアプリケーションでは、ベクタ定義（さまざまな色で塗りつぶされ、ストロークされた複数のポリゴン）から描画されたマップをズーム、回転、パンしています。 このビデオは色深度が16bppの800 x 480ディスプレイの全画面で実行されています。
STM32U5G9 showing a moving map.
SVG
The NeoChromVG accelerator drastically improves the performance of drawing SVG images. TouchGFX automatically leverages the available hardware. A simple example will show the improvements. Here is an SVG image that we will draw in size 152x152 pixels on a STM32F746 with software rendering, a STM32H7S with NeoChrom, and a STM32U5G9 with NeoChromVG:
Simple SVG drawing in size 152 x 152 pixels.
The render time of the SVG image is shown in the table below:
| マイクロコントローラ | アクセラレータ | Render time /ms |
|---|---|---|
| STM32F746 | NeoChrom | 4.12 |
| STM32U5G9 | NeoChromVG | 0.97 |
| STM32H7S8 | NeoChrom | 2.8 |
Read more about using SVG in TouchGFX here: SVG.
Vector fonts
The NeoChrom and NeoChromVG also accelerates drawing of vector fonts. You can read more about how to use vector fonts in this article: Vector fonts.
プロジェクトの作成
CubeMXとTouchGFX Generatorは、NeoChromに対応しています。 CubeMXでは、このアクセラレータはGPU2Dというコード名で知られています。 The GPU2D accelerator is only available to TouchGFX if GPU2D is enabled in the TouchGFX configuration in CubeMX.
If you use any of the TouchGFX TBS's (template projects) provided with the TouchGFX Designer this is already done. 独自のカスタム･プロジェクトを作成する場合は、以下に示すように、GPU2Dアクセラレータを必ず有効にしてください。
CubeMXでのGPU2D（NeoChrom）の有効化
GPU2Dを有効化したら、CubeMXの［Generate Code］を押します。 これにより、対象の設定コードが再生成されます。 TouchGFX Designerでプロジェクトを開き、そこでもコードを生成します（F4）。
Designerによりアセット（画像、フォント、テキスト）と、対象の設定に適合するシミュレータ･コードが生成されます。 You are now ready to compile the code.
Designerからプロジェクトを開始している場合は、何らかのハードウェア設定を変更する必要がないかぎり、CubeMXを開く必要はありません。
フレームバッファのフォーマット
The STM32U5A9 discovery board supports three framebuffer formats: RGB565, RGB888, ARGB8888. これらは、CubeMXから設定可能です。
NeoChromの制約
The NeoChrom and NeoChromVG graphics accelerators does not support the L8 image formats (L8_RGB565, L8_RGB888, L8_ARGB8888) with TouchGFX.
If you use these image formats in a TouchGFX application running on STM32U5A9 the images will be drawn using DMA2D. If you use these formats with ScalableImage or TextureMapper a software fall-back will be used.
It is therefore recommended to not use L8 images with micro controllers with NeoChrom/NeoChromVG accelerators.
The NeoChrom graphics accelerator creates suboptimal anti-aliasing on graphics elements drawn with the "Non-zero fill-rule" compared to NeoChromeVG. This may happen with SVG files that can specify the fill-rule as "nonzero". A work-around is to use "evenodd" fill-rule, but it is not valid for all drawings.