i.MX RT1170异构图形管线

NXP管管

i.MX RT1170异构图形管线

1引言
i.MX RT1170跨接MCU具有多种生成选项，在将图形内容发送到显示器之前进行合成和混合：
•2D矢量图形GPU：此引擎可以渲染可缩放矢量图形以及合成和处理位图。
•PXP Graphics Accelerator：此2D引擎可以操纵和混合位图，其主要功能是缩放，固定角度旋转和色彩空间转换。
•LCDIF：显示控制器允许您最多创建八个显示层，提供实时混合功能，包括多格式支持。本应用笔记简要概述了每个引擎，如何初始化它们，独立使用它们，最后，它介绍了一个如何统一使用它们以提高性能和资源的用例。每个阶段都有一个关联的软件项目使事情变得容易。
2个2D矢量图形GPU
i.MX RT1170上的GPU是Verisilicon的GC355 GPU的实例。这是平台上唯一的加速器能够根据输入的几何图形生成图形。用户使用图形API与该引擎交互。本应用笔记重点介绍VGLite API。 OpenVG将是以后可用。
2.1 VGLite
VGLite是一种轻量级的2D图形API，旨在具有较小的内存占用空间和较低的CPU开销。
VGLite上的两个主要绘图功能是vg_lite_draw和vg_lite_blit，vg_lite_draw用于渲染矢量图形基元。
渲染位图，也称为栅格图像。

2.1.1 VGLite矢量渲染管道
要渲染矢量图形，您需要以下六点信息：
1.目标：这是将保存生成的渲染图像的目标缓冲区。
2.路径数据：由一组坐标和路径段组成，这些坐标和路径段定义了将要呈现。
3.填充规则：指定选择的方案以纯色填充几何形状。
4.变换：通过3x3矩阵提供仿射变换。
5.颜色：使用32bpp值（alpha，红色，绿色和蓝色，每个使用八位）定义路径颜色。每个像素路径所覆盖的区域将具有此颜色。
6.混合规则：将根据这些规则将路径混合到扩展缓冲区内容。


从关联的软件打开NXPLogo项目：这是一个增量示例，说明如何使用信息件，在此示例中，我们将使用矢量图形渲染NXP徽标。 该代码分为七个步骤，由TEST_STEP宏。 第一步（INITIAL_LOGO）呈现NXP徽标，如下所示：

2.1.1.1路径数据
路径数据是最重要的信息。 它定义了您想要渲染的形状。 提供了路径数据作为一对结构化数据块：
1.操作码：定义操作
2.参数：操作消耗的2D坐标数据。
可以使用10个操作码来定义N字母，如下所示：
1.移至：N字母的起始点。
2.八行至操作码，定义N字母的形状。
3.关闭路径操作码，指示必须关闭打开的路径。

上面的每个操作码都使用以下坐标数据：

1.移动到：消耗两个坐标（x和y）。
2.线到：使用每两个坐标，它将定义从上一个点到新指定点的一条线。
3.关闭路径不占用任何其他数据。
该路径的信息存储在代码中的nPathData数组中。
X字母的定义类似于N字母。 移至操作码之后是一系列“行至”操作码，最后是“关闭”
路径操作码：

该路径的信息存储在代码中的xPathData数组中。
P字母更有趣。 它包含曲线和内部路径，可让我们稍后展示填充规则。
首先，将其定义为在单个路径中定义的两个轮廓，一个外部图形和一个内部图形。 外部图已定义
通过以下六个操作码：
1.移至：（514.92，0）
2.行至：（648.62，0）
3.三次曲线到：（648.62，191.07）。 三次曲线具有两个控制点：c1（740.62，0）和c2（740.62，191.07）。
4.行至：（514.92，191.07）
5.行至：（514.92，244.57）
6.行至：（440.06，121.88）
7.行至：（514.92，0）
内部图形将在相同的路径结构中定义：
8.移至：（514.92，61.14）
9.行至：（613.96，61.14）
10.三次曲线至：（613.96。130.44），控制点位于（639.4，61.14）和（639.4，130.44）
11.行至：（514.92，130.44）
12.行至：（514.92，61.14）
最后，您关闭路径：
13.封闭路径

该路径的信息存储在代码中的pPathData数组中。
准备好每个路径的信息后，下一步是初始化vg_lite_path_t结构：

1. vg_lite_init_path(&nPath, VG_LITE_FP32, VG_LITE_HIGH, sizeof(nPathData), nPathData, 0, 0, 720, 1280);
   
2. vg_lite_init_path(&xPath, VG_LITE_FP32, VG_LITE_HIGH, sizeof(xPathData), xPathData, 0, 0, 720, 1280);
   
3. vg_lite_init_path(&pPath, VG_LITE_FP32, VG_LITE_HIGH, sizeof(pPathData), pPathData, 0, 0, 720, 1280);

复制代码

将三个字母呈现给显示的代码如下：

1. vg_lite_identity(&matrix);
   
2. vg_lite_draw(rt, &nPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);
   
3. vg_lite_draw(rt, &xPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);
   
4. vg_lite_draw(rt, &pPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);

复制代码

注意我们如何调用vg_lite_draw三次（每个字母一次）。 这是因为我们的道路是分开的。 我们可以用一次绘制调用，但是当我们计划更改路径颜色时，我们从一开始就将其分为多个绘制调用。
下图是i.MXRT 1170的渲染结果的直接副本：

2.1.1.2填充规则
我们将使用P字母来展示填充规则如何影响路径中内部形状的解释方式。 改变
TEST_STEP宏到FILL_RULE。
填充规则允许您在路径中切出孔，并允许P字母在中心具有空格。
我们将P字母的填充规则从VG_LITE_FILL_EVEN_ODD更改为VG_LITE_FILL_NON_ZERO，如下所示：

1. vg_lite_draw(rt, &pPath, VG_LITE_FILL_NON_ZERO, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);

复制代码

路径中的内孔将不被考虑：

2.1.1.3转换
转换是GPU的强大功能。 它允许您为2D仿射变换定义3x3矩阵（仿射变换是线性变换，然后是平移）。 它还使我们能够描述投影变换。
VGLite上有矩阵对象和函数，但我们首先不使用它们来了解如何定义矩阵。将TEST_STEP宏更改为TRANSFORM_INTUITION。馈送到VGLite的矩阵由9个浮点值组成，并以3x3阵列排列。

矩阵按行主顺序排列，这意味着您的矩阵在内存中的外观如下：

这与创建具有九个位置的单个数组相同：
float userMatrix [9] = {1.0，0.0，0.0，0.0，1.0，0.0，0.0，0.0，1.0};
VGLite向量是列向量。 构建转换矩阵时请考虑这一点。 让我们建立一个旋转矩阵。假设我们要绕原点旋转28度。 请记住，对于VGLite的坐标系，
X轴指向右侧，Y轴指向下方，正角顺时针旋转。

现在，要构建矩阵，我们放置：
•X轴到第一列的转换坐标。
•Y轴到第二列的转换坐标。
•由于我们没有翻译，因此我们将第三列保留为（0,0,1）

这样，我们现在可以将值存储在数组位置：

1. userMatrix[0] = cosf(angleInRadians);
   
2. userMatrix[1] = -sinf(angleInRadians);
   
3. userMatrix[3] = sinf(angleInRadians);
   
4. userMatrix[4] = cosf(angleInRadians);
   
5. vg_lite_draw(rt, &nPath, VG_LITE_FILL_EVEN_ODD, (vg_lite_matrix_t *)&userMatrix,
   
6. VG_LITE_BLEND_NONE, 0xFF000000);
   
7. vg_lite_draw(rt, &xPath, VG_LITE_FILL_EVEN_ODD, (vg_lite_matrix_t *)&userMatrix,
   
8. VG_LITE_BLEND_NONE, 0xFF000000);
   
9. vg_lite_draw(rt, &pPath, VG_LITE_FILL_EVEN_ODD, (vg_lite_matrix_t *)&userMatrix,
   
10. VG_LITE_BLEND_NONE, 0xFF000000);
    

复制代码

此转换的渲染结果如下：

它完全符合我们的预期。

现在，您已经了解了实际情况，请使用vg_lite_matrix_t结构和vg_lite_rotate函数实现同一件事。 将TEST_STEP宏更改为TRANSFORM_VG_LITE。与上一步实现相同转换的代码简化如下：

1. vg_lite_rotate(28.0f, &matrix);
   
2. vg_lite_draw(rt, &nPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);
   
3. vg_lite_draw(rt, &xPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);
   
4. vg_lite_draw(rt, &pPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF000000);

复制代码

2.1.1.4颜色
绘制时，可以为每个路径指定颜色。 要将NXP徽标与其真实颜色匹配，请更改TEST_STEP宏
填色。 为每个字母指定不同的颜色：

1. vg_lite_draw(rt, &nPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF10B4E8);
   
2. vg_lite_draw(rt, &xPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFFD9AE8B);
   
3. vg_lite_draw(rt, &pPath, VG_LITE_FILL_EVEN_ODD, &matrix, VG_LITE_BLEND_NONE, 0xFF21D1C9);
   

复制代码

这种颜色配置的渲染结果如下：

等多精彩内容请查看>>>

阅读全文