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加速器能够执行基本的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 | 无 | 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字节。
例如，对于分辨率480x480，色深24bpp的帧缓存，则模板缓冲区必须为480*480=230.400字节。 为了获得最佳性能，最好是把模板缓冲区放在内部SRAM中。
模版缓冲区由ToughGFX 生成器分配。 请参阅 本 指南。
使用NeoChrom改善渲染时间.
以下示例说明NeoChrom在DMA2D和软件渲染方面提供的加速。 我们利用设计器创建了两个项目。 第一个项目是在方框背景上显示Image。 第二个项目在Box背景上显示TextureMapper Widget。 控件在每一帧中都会重新绘制。 这两种情况下，位图大小为128x128，采用ARGB888格式，并存储在内部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信号。 我们看到，显示器以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 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. Image的渲染时间为 0.7 ms。 我们看到Image控件比STM32F746套件更快。
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 |
| 图像 | 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.
对于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.03ms），但其并非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倍。
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. 该应用可对由矢量定义绘制的地图进行缩放、旋转和平移（用不同颜色填充并描边的多个多边形）。 视频在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中的“生成代码”。 重新生成目标配置代码。 然后，在TouchGFX 设计器中打开项目并在那里生成代码（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.