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
NeoChrom加速器已導入STM32U5G9進行更新，提供各項額外功能。 強化後的加速器名為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 |
| 以指令表為主 | 無 | 有 |
| 繪圖 | 矩形 | 矩形、像素、線條、三角形、四邊形及多重取樣抗鋸齒(MSAA) |
| 區塊傳輸 | 複製、Alpha混合、像素格式轉換 | 複製、Alpha混合、像素格式轉換、色彩鍵入 |
| 紋理映射 | 無 | 有 |
| 向量圖形 | 無 | 無* |
* 硬體加速向量圖形以NeoChromVG提供使用。
這些功能可讓NeoChrom針對更多TouchGFX小工具進行加速：
| 小工具 | DMA2D | GPU2D |
|---|---|---|
| 方框、帶邊框的方框 | 有 | 有 |
| 圖像、動畫圖像、平鋪點陣圖、快照工具 | 有 | 有 |
| 按鈕、帶圖示的按鈕、帶標籤的按鈕、切換按鈕 | 有 | 有 |
| 按鈕選單 | 有 | 有 |
| 像素數據小工具 | 有 | 有 |
| 文字方塊、文字卡、鍵盤 | 部分 | 有 |
| 可縮放圖像 | 無 | 有 |
| 紋理映射器、動畫紋理映射器 | 無 | 有 |
| 圓圈、線條、圖像、測量儀 | 無* | 無* |
| SVG | 無 | 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可加速可縮放圖像 及紋理映射器等小工具。 這代表我們可以擴大使用這類小工具，並同時維持高效能。
向量圖形
新款NeoChromVG加速器可加速向量圖形。 此功能是在以TouchGFX渲染SVG圖像時使用。 An extra buffer called the stencil buffer is required by the GPU2D graphics accelerator. 此緩衝區與影像緩衝區的尺寸相同，不過每像素只有1個位元組。
例如若您的影像緩衝區為480 x 480 (24bpp)，模板緩衝區就必須為480 * 480 = 230.400位元組。 請務必將模板緩衝區分配至快速SRAM以獲得最佳效能。
模板緩衝區是由TouchGFX Generator負責分配。 請參閱此份指南。
利用NeoChrom縮短渲染時間。
以下範例說明NeoChrom對DMA2D及軟體渲染提供的加速效果。 我們使用Designer建立了兩個專案。 第一個專案顯示在Box背景上的Image， 第二個專案則是顯示在Box背景上的紋理映射器小工具。 小工具會在每個畫面重繪。 在以上兩個範例中，點陣圖大小為128x128、採用ARGB8888格式，並儲存於內部Flash。 影像緩衝區為RGB565格式。
圖像專案
紋理映射器專案
Both projects have been executed on a STM32F746 and a STM32U5A9 Discovery board.
我們將GPIO連接至邏輯分析儀以測量渲染時間：
STM32F746執行圖像專案
The figure above shows the frame rate and rendering time when running on the STM32F746. 通道00顯示VSYNC訊號。 我們可以發現顯示器以16.9 ms(A1至A2)的畫面間隔時間運作，相當於畫面播放速率59.2 Hz。 通道01顯示渲染時間(渲染時偏高，B1至B2)。 圖像渲染的時間為1.3 ms。 圖像在STM32F746的渲染速度相當快。
STM32F746執行紋理映射器專案
上圖是在STM32F746執行的紋理映射器專案。 紋理映射器的渲染時間為4.5 ms。 紋理映射器小工具的速度比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套件的速度更快。
STM32U5A9 running the TextureMapper project
紋理映射器的渲染時間為1.7 ms。 The TextureMapper is also faster on STM32U5A9 than on the STM32F746.
渲染時間摘要
下表顯示渲染時間：
| 元素 | STM32F746 | STM32U5A9 | 增速 |
|---|---|---|---|
| 頻率 | 200 MHz | 160 MHz | 0.8 |
| 圖像 | 1.3 ms | 0.7 ms | ~2倍 |
| 紋理映射器 | 4.5 ms | 1.7 ms | ~3倍 |
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探索套件執行時可使用內部RAM的480x272 RGB565影像緩衝區。 這樣可以提升效能(圖像降低為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能夠顯示三個圖示，一個是放大1.9倍的大圖示，以及兩個小圖示。 The STM32U5A9 is capable of showing 7 icons. 最大的圖示可放大2.7倍。
具有3個圖示的應用程式在STM32F746的渲染時間為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. 應用程式縮放、旋轉及平移以向量定義繪製的地圖(多個多邊形填充不同色彩及筆觸)。 影片是以800 x 480顯示搭配16bpp色彩全螢幕執行。
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.