NeoChrom/NeoChromVG在TouchGFX中的应用
本节讨论如何在具有NeoChrom图形加速器的硬件上使用TouchGFX。 该图形加速器显著提高了纹理映射、图像缩放和旋转等操作的性能。 这意味着可以在保持高帧速率的同时构建更高级的UI。
NeoChrom图形加速器目前仅在STM32U5x9和STM32H7R/S微控制器中提供。 两个系列均有开发板。
STM32U5A9探索板
NeoChrom加速器在源代码和STM32CubeMX中被称为GPU2D。
NeoChrom和NeoChromVG
随着STM32U5G9的推出，NeoChrom加速器更新了额外的功能。 改良版加速器命名为NeoChromVG。 加速器包含允许硬件加速矢量图形的扩展功能。
| 微控制器 | 加速器 |
|---|---|
| STM32U599 | NeoChrom |
| STM32U5A9 | NeoChrom |
| STM32U5F9 | NeoChromVG |
| STM32U5G9 | NeoChromVG |
| STM32H7Rx | NeoChrom |
| STM32H7Sx | NeoChrom |
NeoChrom图形功能
NeoChrom加速器能够执行基本的blitting（绘制图像）、混合、缩放、旋转和纹理映射。 有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 |
|---|---|---|
| Box, BoxWithBorder | 有 | 有 |
| Image, AnimatedImage, TiledImage, SnapshotWidget | 有 | 有 |
| Button, ButtonWithIcon, ButtonWithLabel, ToggleButton | 有 | 有 |
| RadioButton, RepeatButton | 有 | 有 |
| PixelDataWidget | 有 | 有 |
| TextArea, TextAreaWithWildcard, Keyboard | Partly | 有 |
| ScalableImage | 无 | 有 |
| TextureMapper, AnimatedTextureMapper | 无 | 有 |
| Circle, Line, Graph, Gauge | 无* | 无* |
| 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能加速ScalableImage和纹TextureMapper等控件。 这意味着我们可以在保持高性能的同时更大程度地使用这些控件。
矢量图形
新型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中。
模版缓冲区由ToughGFX 生成器分配。 请参阅 本 指南。
使用NeoChrom改善渲染时间.
以下示例说明NeoChrom在DMA2D和软件渲染方面提供的加速。 我们利用设计器创建了两个项目。 第一个项目是在方框背景上显示Image。 第二个项目在Box背景上显示TextureMapper Widget。 控件在每一帧中都会重新绘制。 这两种情况下，位图大小为128x128，采用ARGB888格式，并存储在内部Flash中。 帧缓存采用RGB565格式。
Image项目
TextureMapper项目
两个项目在STM32F746和STM32U5A9探索板上执行。
我们将GPIO连接到逻辑分析仪来测量渲染时间：
STM32F746运行Image项目
上图显示了在STM32F746上运行时的帧速率和渲染时间。 通道00显示VSYNC信号。 我们看到，显示器以16.9ms（A1至A2）的帧间隔运行，对应59.2Hz帧速率。 通道01显示渲染时间（渲染时较高，B1到B2）。 因此，渲染Image的时间为1.3 ms。 STM32F746上的Image渲染速度快。
STM32F746运行TextureMapper项目
上图为STM32F746上运行的TextureMapper项目。 TextureMapper的渲染时间为 4.5 ms。 TextureMapper控件比Image慢得多。
STM32U5A9运行Image项目
此为运行Image项目的STM32U5A9探索套件。 STM32U5A9探索套件显示屏的显示帧间隔为12.26 ms，对应81.6 Hz帧速率。 Image的渲染时间为 0.7 ms。 我们看到Image控件比STM32F746套件更快。
STM32U5A9运行TextureMapper项目
TextureMapper的渲染时间为 1.7 ms。 与STM32F746相比，STM32U5A9上的TextureMapper速度更快。
渲染时间总结
下表显示了渲染时间：
| 元素 | STM32F746 | STM32U5A9 | 加快 |
|---|---|---|---|
| 频率 | 200 MHz | 160 MHz | 0.8 |
| 图像 | 1.3 ms | 0.7 ms | ~2x |
| TextureMapper | 4.5 ms | 1.7 ms | ~3x |
我们看到，即使时钟频率降低，STM32U599也大大优于STM32F746，TextureMapper尤为如此。
对于STM32F746，使用内部闪存中的图像和外部SDRAM中的帧缓存进行此类测量。 STM32U5A9的帧缓冲器位于内部SRAM中（此为典型应用场景）。 将图像放在外部Flash对比会更加降低STM32F746性能，因其使用QSPI Flash（4位总线），而STM32U5A9使用更快的OSPI Flash（8位总线）。
STM32F746 Discovery套件可在内部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. 这意味着应用程序必须将渲染时间保持在该时间以下，以保持60fps的帧速率。 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倍。
STM32F746上3图标应用程序的渲染时间为14.38 ms。 STM32U5A9上7图标应用程序的渲染时间为14.93ms。 因此，两种UI均能以60 fps的速度运行，STM32U5A9以更高的分辨率显示更多内容。
加速矢量图形
新型NeoChromVG加速器可加速矢量图形。 该功能开启了新型应用程序的可能性，其中基于矢量的图形起着核心作用，而非位图。
地图应用程序便是一个例子。 地图可以从位图中构建，但这通常需要非常大的存储空间，或者需要提前下载特定的地图部分。
以下视频显示了STM32U5G9上运行的演示应用程序。 该应用可对由矢量定义绘制的地图进行缩放、旋转和平移（用不同颜色填充并描边的多个多边形）。 视频在800 x 480的16bpp彩色显示屏上全屏播放。
STM32U5G9显示移动地图。
SVG
NeoChromVG加速器极大地提高了绘制SVG图像的性能。 TouchGFX自动利用可用硬件。 一个简单的例子会展示改进成果。 以下是我们在带有软件渲染的STM32F746、带有NeoChrom的STM32H7S和带有NeoChromVG的STM32U5G9上绘制152x152像素的SVG图像：
尺寸为152 x 152像素的简单SVG绘图。
SVG图像的渲染时间如下表所示：
| 微控制器 | 加速器 | 渲染时间/ms |
|---|---|---|
| STM32F746 | NeoChrom | 4.12 |
| STM32U5G9 | NeoChromVG | 0.97 |
| STM32H7S8 | NeoChrom | 2.8 |
点击此处了解TouchGFX中使用SVG的更多信息：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中的“生成代码”。 重新生成目标配置代码。 然后，在TouchGFX 设计器中打开项目并在那里生成代码（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. 如果将这些格式与ScalableImage或TextureMapper一起使用，将使用软件回退。
因此，建议不要将L8图像与带有NeoChrom/NeoChromVG加速器的微控制器一起使用。
与NeoChromeVG相比，NeoChrom图形加速器在使用“非零填充规则”绘制的图形元素上创建了次优抗锯齿。 这种情况可能发生在将填充规则指定为“非零”的SVG文件中。 解决方法是使用“偶数”填充规则，但并非对所有图形有效。