跳轉到主要內容

NeoChrom/NeoChromVG上的TouchGFX

本節將討論如何在具備NeoChrom圖形加速器的硬體上使用TouchGFX。 本圖形加速器可大幅提升紋理映射、影像縮放和旋轉等操作效能。 這表示可建立更多進階UI,同時維持高畫面播放速率。

NeoChrom圖形加速器目前僅於STM32U5x9及STM32H7R/S提供使用。 開發板則於兩個系列提供使用。

STM32U5A9探索開發板

NeoChrom加速器以GPU2D為名出現在開放原始碼及CubeMX之中。

NeoChrom及NeoChromVG

NeoChrom加速器已導入STM32U5G9進行更新,提供各項額外功能。 強化後的加速器名為NeoChromVG。 加速器包含各項延伸功能,可允許使用硬體加速向量圖形。

微控制器加速器
STM32U599NeoChrom
STM32U5A9NeoChrom
STM32U5F9NeoChromVG
STM32U5G9NeoChromVG
STM32H7RxNeoChrom
STM32H7SxNeoChrom

NeoChrom圖形功能

NeoChrom加速器可執行基本區塊傳輸(繪圖)、混合、縮放、旋轉和紋理映射。 在含有NeoChrom的微控制器上執行時,TouchGFX會自動使用所有前述操作。

與DMA2D圖形加速器相比,NeoChrom可針對更多圖形操作進行加速,且具備更豐富的功能集:

圖形功能DMA2DGPU2D
支援格式(含TouchGFX)ARGB8888、RGB888、RGB565、A8、A4、L8ARGB8888、RGB888、RGB565、A8、A4、A2、A1
以指令表為主
繪圖矩形矩形、像素、線條、三角形、四邊形及多重取樣抗鋸齒(MSAA)
區塊傳輸複製、Alpha混合、像素格式轉換複製、Alpha混合、像素格式轉換、色彩鍵入
紋理映射
向量圖形無*

* 硬體加速向量圖形以NeoChromVG提供使用。

這些功能可讓NeoChrom針對更多TouchGFX小工具進行加速:

小工具DMA2DGPU2D
方框、帶邊框的方框
圖像、動畫圖像、平鋪點陣圖、快照工具
按鈕、帶圖示的按鈕、帶標籤的按鈕、切換按鈕
按鈕選單
像素數據小工具
文字方塊、文字卡、鍵盤部分
可縮放圖像
紋理映射器、動畫紋理映射器
圓圈、線條、圖像、測量儀無*無*
SVG無**

* 將像素繪製/混合至影像緩衝區是由DMA2D完成,但形狀計算則是在軟體內完成。 ** 硬體加速SVG以NeoChromVG提供使用。

未使用硬體加速的操作會以軟體來進行渲染(代表CPU負載增加且效能降低)。 如以上表格所示,NeoChrom可加速可縮放圖像 及紋理映射器等小工具。 這代表我們可以擴大使用這類小工具,並同時維持高效能。

向量圖形

新款NeoChromVG加速器可加速向量圖形。 此功能是在以TouchGFX渲染SVG圖像時使用。 GPU2D圖形加速器需要使用名為模板緩衝區的額外緩衝區。 此緩衝區與影像緩衝區的尺寸相同,不過每像素只有1個位元組。

例如,若您的影像緩衝區為480 x 480 (24bpp),模板緩衝區就必須為480 * 480 = 230,400位元組。 請務必將模板緩衝區分配至快速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更快。

渲染時間摘要

下表顯示渲染時間:

元素STM32F746STM32U5A9增速
頻率200 MHz160 MHz0.8
圖像1.3 ms0.7 ms~2倍
紋理映射器4.5 ms1.7 ms~3倍

我們可以發現即使減少時脈頻率,STM32U5A9仍然大幅超越STM32F746,特別是在執行紋理映射器的時候。

以上結果是以內部Flash圖像及STM32F746外部SDRAM的影像緩衝區測量所得。 影像緩衝區位於STM32U5A9的內部SRAM之中(因為一般情境就是如此)。 將圖像移往外部Flash會對STM32F746造成不良影響,因為其中使用QSPI快閃記憶體(4位元匯流排),而STM32U5A9使用的是更快的OSPI快閃記憶體(8位元匯流排)。

STM32F746探索套件執行時可使用內部RAM的480x272 RGB565影像緩衝區。 這樣可以提升效能(圖像降低為1.03 ms),但這並不是STM32F746的標準設定,因為其中使用非常大部分的內部SRAM作為影像緩衝區,只留下很少的RAM用於其他應用程式元件。 以單一影像緩衝區執行也不適用於所有的應用程式。

更豐富的使用者介面

渲染效能獲得提升後,可用於建立具有更多進階動畫的使用者介面, 例如,更多縮放或旋轉的元素。 STM32F746的顯示刷新時間為16.8 ms。 這代表應用程式必須讓渲染時間低於前述時間,以便將畫面播放速率維持在60 fps。 因此我們在這樣的複雜度情況下(16.8ms/4.48 ms),畫面上最多可有3.75個紋理映射器,或是尺寸247 x 247的單一大型紋理映射器(像素數相同,渲染時間大致相同)。 如果我們假設畫面刷新率相同,但使用STM32U5A9 CPU,就可以有14.36個紋理映射器(16.8 ms/1.17 ms),或是尺寸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
STM32F746NeoChrom4.12
STM32U5G9NeoChromVG0.97
STM32H7S8NeoChrom2.8

請參閱SVG以進一步瞭解如何在TouchGFX之中使用SVG。

向量字型

NeoChrom及NeoChromVG也能加速繪製向量字型。 您可透過向量字型這篇文章進一步瞭解如何使用向量字型。

建立專案

CubeMX及TouchGFX Generator支援NeoChrom。 在CubeMX之中,加速器是以其程式碼名稱GPU2D為名。 如果在CubeMX的TouchGFX設定中啟用GPU2D,則GPU2D加速器就只會提供給TouchGFX使用。 如果您使用TouchGFX Designer提供的TouchGFX TBS(範本專案),則前述設定已經完成。 如果您製作自己的客製專案,請務必如以下所示啟用GPU2D加速器:

在CubeMX啟用GPU2D (NeoChrom)

啟用GPU2D之後,請在CubeMX按下「Generate Code」(產生程式碼)。 這樣會重新產生目標設定程式碼。 現在請於TouchGFX Designer開啟專案,並也在其中產生程式碼(F4)。

Designer會產生與目標設定相符的資產(影像、字型及文字)和模擬器程式碼。 您現在已準備好編譯程式碼。

如果您是由Designer啟動專案,就不需要開啟CubeMX,除非您需要變更某些硬體設定。

影像緩衝區格式

STM32U5A9探索開發板支援三種影像緩衝區格式:RGB565、RGB888、ARGB8888。 這些格式可由CubeMX設定。

NeoChrom的限制

NeoChrom及NeoChromVG圖形加速器並不支援TouchGFX的L8圖像格式(L8_RGB565、L8_RGB888、L8_ARGB8888)。 如果您在STM32U5A9執行的TouchGFX應用程式使用前述圖像格式,就會使用DMA2D繪製圖像。 如果您以可縮放圖像或紋理映射器使用前述格式,就會使用軟體做為後援。

因此我們建議不要以具有NeoChrom/NeoChromVG加速器的微控制器使用L8圖像。

相較於NeoChromeVG,NeoChrom圖形加速器會在以「填充非零環繞數規則」繪製的圖形元素上建立次佳抗鋸齒。 這可能發生在將填充規則指定為「非零」的SVG檔案。 如果要避免這種情況,可以使用「奇偶」填充規則,但並不是對所有繪製都有效。