NeoChrom/NeoChromVG上的TouchGFX
本節將討論如何在具備NeoChrom圖形加速器的硬體上使用TouchGFX。 本圖形加速器可大幅提升紋理映射、影像縮放和旋轉等操作效能。 這表示可建立更多進階UI，同時維持高畫面播放速率。
NeoChrom圖形加速器目前僅於STM32U5x9及STM32H7R/S提供使用。 開發板則於兩個系列提供使用。
STM32U5A9探索開發板
NeoChrom加速器以GPU2D為名出現在開放原始碼及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 | 無 | 無** |
* 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圖像時使用。 GPU2D圖形加速器需要使用名為模板緩衝區的額外緩衝區。 此緩衝區與影像緩衝區的尺寸相同，不過每像素只有1個位元組。
Example, if your frame buffer is 480 x 480 in 24bpp, the stencil buffer must be 480 * 480 = 230,400 bytes. 請務必將模板緩衝區分配至快速SRAM以獲得最佳效能。
模板緩衝區是由TouchGFX Generator負責分配。 請參閱此份指南。
利用NeoChrom縮短渲染時間。
以下範例說明NeoChrom對DMA2D及軟體渲染提供的加速效果。 我們使用Designer建立了兩個專案。 第一個專案顯示在Box背景上的Image， 第二個專案則是顯示在Box背景上的紋理映射器小工具。 小工具會在每個畫面重繪。 在以上兩個範例中，點陣圖大小為128x128、採用ARGB8888格式，並儲存於內部Flash。 影像緩衝區為RGB565格式。
圖像專案
紋理映射器專案
以上兩個專案都是在STM32F746及STM32U5A9探索開發板執行。
我們將GPIO連接至邏輯分析儀以測量渲染時間：
STM32F746執行圖像專案
上圖顯示在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執行圖像專案
以下是執行圖像專案的STM32U5A9探索套件。 STM32U5A9探索套件顯示器的顯示器畫面間隔時間為12.26 ms，相當於畫面播放速率81.6 Hz。 圖像的渲染時間為0.7 ms。 我們可以發現圖像小工具比在STM32F746套件的速度更快。
STM32U5A9執行紋理映射器專案
紋理映射器的渲染時間為1.7 ms。 紋理映射器在STM32U5A9的速度也比在STM32F746更快。
渲染時間摘要
下表顯示渲染時間：
| 元素 | STM32F746 | STM32U5A9 | 增速 |
|---|---|---|---|
| 頻率 | 200 MHz | 160 MHz | 0.8 |
| 圖像 | 1.3 ms | 0.7 ms | ~2倍 |
| 紋理映射器 | 4.5 ms | 1.7 ms | ~3倍 |
我們可以發現即使減少時脈頻率，STM32U5A9仍然大幅超越STM32F746，特別是在執行紋理映射器的時候。
以上結果是以內部Flash圖像及STM32F746外部SDRAM的影像緩衝區測量所得。 影像緩衝區位於STM32U5A9的內部SRAM之中(因為一般情境就是如此)。 將圖像移往外部Flash會對STM32F746造成不良影響，因為其中使用QSPI快閃記憶體(4位元匯流排)，而STM32U5A9使用的是更快的OSPI快閃記憶體(8位元匯流排)。
STM32F746探索套件執行時可使用內部RAM的480x272 RGB565影像緩衝區。 This improves the performance (Image down to 1.03 ms), but it is not the standard configuration for STM32F746, as it uses a very large part of the internal SRAM for the frame buffer, leaving little RAM for other application components. Running with a single frame buffers is also not suitable for all applications.
更豐富的使用者介面
渲染效能獲得提升後，可用於建立具有更多進階動畫的使用者介面， For example more scaled or rotated elements. For the STM32F746, the display refresh time was 16.8 ms. 這代表應用程式必須讓渲染時間低於前述時間，以便將畫面播放速率維持在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.
下圖顯示分別在STM32F746及STM32U5A9執行的兩個應用程式。 其中的概念是製作類似浮動切換的選單，元素會在移往中間時放大，並於遠離時縮小(我們在此僅對所有元素使用相同紋理)。
STM32F746(左側)具有480x272像素顯示，而STM32U5A9(右側)則是在480x480顯示執行以紋理映射器為基礎的浮動切換專案。
STM32F746能夠顯示三個圖示，一個是放大1.9倍的大圖示，以及兩個小圖示。 STM32U5A9能夠顯示7個圖示。 最大的圖示可放大2.7倍。
具有3個圖示的應用程式在STM32F746的渲染時間為14.38 ms。 具有7個圖示的應用程式在STM32U5A9的渲染時間為14.93 ms。 這兩項UI都能以60 fps執行，而STM32U5A9可用較高解析度顯示更多內容。
加速向量圖形
新款NeoChromVG加速器能夠加速向量圖形。 這可以開創可能性，實現各種全新類別應用程式；其中是由向量圖形扮演核心角色，而不是點陣圖。
範例之一就是地圖應用程式。 地圖可利用點陣圖建構，不過通常需要非常大的儲存容量，或是需要事先下載特定的地圖區段。
以下影片顯示在STM32U5G9執行的示範應用程式。 應用程式縮放、旋轉及平移以向量定義繪製的地圖(多個多邊形填充不同色彩及筆觸)。 影片是以800 x 480顯示搭配16bpp色彩全螢幕執行。
STM32U5G9顯示移動中的地圖。
SVG
NeoChromVG加速器可大幅提升繪製SVG圖像的效能。 TouchGFX會自動利用可用硬體。 我們將以簡易範例顯示提升的效能。 我們將繪製152x152像素大小的SVG圖像，分別在STM32F746以軟體渲染繪製、在STM32H7S以NeoChrom繪製，以及在STM32U5G9以NeoChromVG繪製：
152 x 152像素尺寸的簡易SVG繪製。
下表顯示SVG圖像的渲染時間：
| 微控制器 | 加速器 | 渲染時間/ms |
|---|---|---|
| STM32F746 | NeoChrom | 4.12 |
| STM32U5G9 | NeoChromVG | 0.97 |
| STM32H7S8 | NeoChrom | 2.8 |
請參閱SVG以進一步瞭解如何在TouchGFX之中使用SVG。
向量字型
NeoChrom及NeoChromVG也能加速繪製向量字型。 您可透過向量字型這篇文章進一步瞭解如何使用向量字型。
建立專案
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會產生與目標設定相符的資產(影像、字型及文字)和模擬器程式碼。 您現在已準備好編譯程式碼。
如果您是由Designer啟動專案，就不需要開啟CubeMX，除非您需要變更某些硬體設定。
影像緩衝區格式
STM32U5A9探索開發板支援三種影像緩衝區格式：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. 如果您以可縮放圖像或紋理映射器使用前述格式，就會使用軟體做為後援。
因此我們建議不要以具有NeoChrom/NeoChromVG加速器的微控制器使用L8圖像。
相較於NeoChromeVG，NeoChrom圖形加速器會在以「填充非零環繞數規則」繪製的圖形元素上建立次佳抗鋸齒。 這可能發生在將填充規則指定為「非零」的SVG檔案。 如果要避免這種情況，可以使用「奇偶」填充規則，但並不是對所有繪製都有效。