CN106709863B - 一种基于gpu的高效2d矢量图形渲染方法 - Google Patents

Abstract

本发明公开了一种基于GPU的高效2D矢量图形渲染方法，具体包括数据预处理步骤、图形去复合层步骤、三角形网格数据步骤、添加渲染效果步骤；使得通用性增加，渲染效率高，降低了CPU负载。

Description

一种基于GPU的高效2D矢量图形渲染方法

技术领域

本发明涉及图像处理领域，更具体的说，其涉及用于一种基于GPU的高效2D矢量图形渲染方法。

背景技术

矢量图形是计算机图形学中用点、线、多边形等基于数学方程的几何图元表示图像，在工业图形设计、游戏视频特效、文字处理等方面有着广泛应用。由于矢量图元本身的复杂度，其渲染时大多采用CPU光栅化算法。为了提高绘制效率，现有的2D渲染引擎如Skia,Cario等采用CPU和GPU相结合的算法，在CPU中对矢量图元进行三角剖分，再利用GPU渲染。然而该方法的CPU负载仍较大。英伟达(NVidia)公司提出了一种基于CUDA的2D矢量路径渲染方法，但由于该算法所需的硬件专用性，其广泛度和通用性比较有限。

另外，对于2D和3D相结合场景，通常需要使用2D渲染引擎(Skia,Cario等)将矢量图形渲染成光栅位图，然后再把其作为纹理贴图在3D流水线中处理。2D和3D是相互分离的过程，需要在内存和显存之间拷贝数据，渲染效率不够高。

发明内容

本发明的目的在于提供一种基于GPU的高效2D矢量图形渲染方法，使得通用性增加，渲染效率高，降低了CPU负载。

为了解决上述技术问题，本发明的技术方案如下：

一种基于GPU的高效2D矢量图形渲染方法，具体包括如下步骤：

101)数据预处理步骤：加载矢量图形文件，并解析转换成矢量基本图元构成的2D矢量形状；

102)图形去复合层级变换步骤：经步骤101)处理的图形建立3D空间变换矩阵，判断所述图形是否存在父子层级关系，如果有则进行递归叠加变换矩阵，以应用复合空间变换；

103)三角形网格数据步骤：经步骤102)处理后的图形，由GPU即图像处理器按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据；

104)添加渲染效果步骤：根据步骤103)生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域，由GPU根据指定的形状着色特效渲染三角形网格数据，并将渲染后的矢量图形呈现给用户，或者将结果作为其他模型的贴图，在GPU流水线中进一步处理。

进一步的，所述步骤101)中的解析转换是将矢量图形文件转换成由点、线、贝塞尔曲线基本图元进行表示，同时加载渲染参数包括描绘线宽、连接线形、填充模式和着色样式。

进一步的，所述步骤102)的每个矢量形状的复合空间变换参数，若当前矢量形状存在父子层级复合变换，则递归获取父亲层的空间变换矩阵，并采用矩阵乘法将其叠加到当前形状中。

进一步的，所述步骤103)的GPU建立三角形网格数据，先由图形处理中GPU的顶点着色器，对2D基本图元的位置应用空间变换矩阵，再由GPU的剖分着色器和几何形状着色器，对空间变换后的矢量基本图元，按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据。

进一步的，所述步骤104)的特效渲染包括结合模板缓存确定的边缘区域做抗锯齿或羽化效果处理。

进一步的，所述101)数据预处理步骤包括图形处理和动画图形处理。

进一步的，所述动画图形处理的具体步骤如下：

701)确定数据动画插值系数步骤：根据动画时间映射方式将当前时刻映射到动画整体时间范围内，由此查找相邻的两个动画时间关键点，并按照线性方式获取插值系数；

702)拷贝参数和动画路径步骤：根据步骤701)的插值系数确定的时间关键点，找到剪裁动画参数对应的关键帧，再使用线性方式获得当前时刻剪裁路径的动画参数，并以所获得的动画参数范围内的路径片段构造形状路径。

本发明相比现有技术优点在于：

1，充分利用GPU强大的并行流水线处理能力，将大部分的渲染过程放到GPU中处理，大大提高了2D矢量图形的渲染效率，降低了CPU负载。

2，矢量图形渲染放到GPU流水线处理过程中，统一2D和3D处理过程，二者紧密结合，同时运用3D技术，对矢量图形进行空间变换、剪裁、着色、贴图等。

3，原生支持矢量图形的3D空间变换、复合层级变换、形状剪裁、路径动画、偏移拷贝动画、自定义特效着色等。

4，支持Adobe Illustrator、SVG等常见矢量图形格式，扩展支持Adobe AfterEffects矢量图形数据格式，无缝衔接设计与渲染过程。

附图说明

图1为本发明一种基于GPU的高效2D矢量图形渲染方法的流程图；

图2为本发明一种基于GPU的高效2D矢量图形渲染方法的动画图形渲染流程图。

具体实施方式

下面结合附图和具体实施方式对本发明进一步说明。

2D矢量图形使用点、线段、圆弧、多边形、不规则曲线等基本图元来描述矢量图形，然后通过指定基本图元的描绘线宽、连接线形、填充模式和着色样式等来确定图形的显示效果。在GPU流水线中，通过定义三角形顶点的索引、位置、法线、纹理坐标、贴图等来渲染3D模型，而基于GPU的2D矢量图形渲染方法利用现代GPU可编程管线的特点和强大的并行数据处理能力，使用GPU着色器处理矢量图形绝大部分过程，极大地减少CPU负载，无缝地集成到3D流水线中，大大提高了渲染效率，并且为了极大化渲染效率和最大化通用性，该方法首先会根据具体GPU的能力和不同操作系统，选择最优GPU编程语言。在微软的Windows系统中使用Direct3D，在谷歌的Android系统中使用OpenGL ES/Vulkan，而在苹果的iOS系统中则使用OpenGL ES/Metal。然后使用相应的编程着色语言具体实现矢量图形渲染的每个数据处理过程。如图1所示，基于GPU的高效2D矢量图形渲染方法，具体包括如下步骤：

101)数据预处理步骤：加载图形文件，按特定文件格式解析矢量数据，并解析转换成使用矢量基本图元构成的2D矢量形状。解析转换是将图形文件转换成由点、线、贝塞尔曲线等基本图元进行表示，使用2D矢量图形中的基本原语(MoveTo,LineTo,QuadTo,CubicTo，是计算机术语，专用来画线)构成矢量形状，同时加载渲染参数包括描绘线宽、连接线形、填充模式和着色样式。

102)图形去复合层级空间变换步骤：经步骤101)处理的每个矢量形状图像计算3D空间变换参数，若当前矢量形状存在父子层级复合层级变换，则递归获取父亲层的3D空间变换矩阵，并采用矩阵乘法将其叠加到当前形状中，以应用图像的复合层级变换。此过程循环进行，直至图像无复合层。

103)三角形网格数据步骤：经步骤102)处理后得出来的3D空间变换矩阵和矢量图形的基本图元信息传入先由GPU的顶点着色器，对2D基本图元的位置应用空间变换矩阵，即通过编写自定义的空间变换代码，对基本图元的空间坐标进行处理。再由GPU的剖分着色器和几何形状着色器，对空间变换后的矢量基本图元，按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据。也就是说由GPU中对空间变换后的矢量基本图元进行三角剖分，将其转换成GPU 3D流水线的基本原语。在该过程中，根据填充或描边方式，通过编写不同的自定义剖分着色代码和几何着色代码，由GPU生成渲染所需的三角形网格数据。

104)添加渲染效果步骤：根据步骤103)生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域。其中填充或描绘区域的确定，首先把生成的三角形网格数据传入下一级流水线，然后根据奇偶填充规则或非零回转规则，确定矢量图形的内外区域，并记录其结果到GPU的模板缓存中。再根据指定的形状着色特效生成片段着色代码，即由GPU根据指定的形状、矢量图形的绘制样式编写特定的片段着色代码，进行着色特效渲染三角形网格数据，即将所需的纹理贴图、颜色、梯度等信息传入GPU，然后结合确定的矢量图形内外区域，绘制矢量图上的每个像素，并结合模板缓存确定的区域，对其边缘区域做抗锯齿或羽化效果处理。最后将渲染后的矢量图形呈现给用户，或者将结果作为其他模型的贴图，在GPU流水线中进一步处理。

综上所述为对图形处理，当处理动画图形时只需在该步骤前，增加动画图形(路径动画或偏移拷贝动画)中拷贝参数和动画路径的处理步骤即可。如图2所示，具体步骤如下：

701)确定数据动画插值系数步骤：根据动画时间映射方式将当前时刻映射到动画整体时间范围内，由此查找相邻的两个动画时间关键点，并按照线性方式获取插值系数。具体结合数据如下：

假设渲染的当前时刻为t，动画参数包含N个时间关键点则表述为T1,…,Tn，动画的总时间为T，动画时间映射方式为m，需要计算的动画插值系数为c。

当m是单向单次模式时，若t>T，则t＝T，反之，则t保持不变；当m是单向循环模式时，若t>T，则t以T为单位取余数，即t＝t％T，反之，则t保持不变；当m是双向循环模式时，对t以2T为单位取余数，即t＝t％2T，若t<T，则t保持不变，反之，则t＝2T–t。由此根据动画时间映射方式得出当前时刻t映射到动画整体时间范围内。再由在N个动画时间参数中搜索相邻的两个时间关键点为Tp和Tq，使得Tp<t<Tq。最后按照线性方式计算插值系数c，公式如下：

c＝(t–Tp)/(Tq–Tp)。 公式(1)

702)拷贝参数和动画路径步骤：根据步骤701)的插值系数确定的时间关键点，找到剪裁动画参数对应的关键帧，再使用线性方式获得当前时刻剪裁路径的动画参数，并以所获得的动画参数范围内的路径片段构造形状路径。具体结合数据如下：

拷贝参数即图形拷贝动画，其参数有拷贝数量CN(Copy Number)、缩放CS(CopyScale)、位置CP(Copy Position)、旋转CR(Copy Rotation)、中心CC(Copy Center)和透明度CA(Copy Alpha)。每个参数都包含N个关键帧值，定义拷贝数量CN的关键帧数列为CN1,CN2,…CNn，缩放CS的关键帧数列为CS1,CS2,…，CSn，位置CP的关键帧数列为CP1,CP2,…,CPn，旋转CR的关键帧数列为CR1,CR2,…,CRn，中心CC的关键帧数列为CC1,CC2,…,CCn，透明度CA的关键帧数列为CA1,CA2,…,CAn。

计算当前时刻t图形拷贝的参数，根据动画插值系数计算过程中确定的Tp和Tq找到图形拷贝动画参数CN、CP、CR、CC、CA分别对应的关键帧为CNp和CNq，CPp和CPq，CRp和CRq，CCp和CCq，CAp和CAq。并使用线性方式计算当前时刻t图形拷贝的动画参数CN、CP、CR、CC和CA分别为CNt、CPt、CRt、CCt和CAt。计算公式如下：

CNt＝CNp+(CNq–CNp)*c 公式(2)

CPt＝CPp+(CPq–CPp)*c 公式(3)

CRt＝CRp+(CRq–CRp)*c 公式(4)

CCt＝CCp+(CCq–CCp)*c 公式(5)

CAt＝CAp+(CAq–CAp)*c 公式(6)

对于剪裁路径动画，其参数有剪裁起点TS(Trim Start)、剪裁终点TE(TrimEnded)和剪裁偏移TO(Trim Offset)，每个参数都包含N个关键帧值，定义剪裁起点TS的关键帧数列为TS1,TS2,…,TSn，剪裁终点TE的关键帧数列为TE1,TE2,…,TEn，剪裁偏移TO1,TO2,…,TOn。

计算当前时刻t的剪裁路径参数，要根据动画插值系数计算过程中确定的Tp和Tq找到剪裁动画参数TS、TE和TO分别对应的关键帧TSp和TSq、TEp和TEq、TOp和TOq。

使用线性方式计算当前时刻t剪裁路径的动画参数TS、TE和TO分别为TSt、TEt和TOt。计算公式如下：

TSt＝TSp+(TSq–TSp)*c 公式(7)

TEt＝TEp+(TEq–TEp)*c 公式(8)

TOt＝TOp+(TOq–TOp)*c 公式(9)

以所有属于[TSt+TOt、TEt+TOt]范围内的路径片段构造形状路径。接着只要按照普通图形的处理流程渲染每个拷贝图形或动画路径即可，即回到步骤101)开始渲染具体矢量图形的步骤来操作。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员，在不脱离本发明构思的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明保护范围内。

Claims (5)

1.一种基于 GPU 的高效 2D 矢量图形渲染方法，其特征在于，具体包括如下步骤：

101）数据预处理步骤：加载图形文件，并解析转换成矢量基本图元构成的 2D 矢量形状；

102）图形去复合层级变换步骤：经步骤 101）处理的图形建立 3D 空间变换矩阵，判断所述图形是否存在父子层级关系，如果有则进行递归叠加变换矩阵，以应用复合空间变换；

103）三角形网格数据步骤：经步骤 102）处理后的图形，由 GPU 即图像处理器按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据；

104）添加渲染效果步骤：根据步骤 103）生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域，由 GPU 根据指定的形状着色特效渲染三角形网格数据，并将渲染后的矢量图形呈现给用户，或者将结果作为其他模型的贴图，在 GPU流水线中进一步处理；

基于 GPU 的高效 2D 矢量图形渲染方法， 在Windows 系统中使用 Direct3D， 在Android 系统中使用 OpenGL ES/Vulkan，在iOS 系统中则使用 OpenGL ES/Metal；

所述 101）数据预处理步骤包括动画图形处理， 所述动画图形处理具体步骤如下：

设置渲染的当前时刻为 t，动画参数包含 N 个时间关键点为T1, …, Tn，动画的总时间为 T，动画时间映射方式为 m，动画插值系数为 c；

当 m 是单向单次模式时，若 t > T，则 t = T，反之，则 t 保持不变；当 m 是单向循环模式时，若 t > T，则 t 以 T 为单位取余数，反之，则 t 保持不变；当 m 是双向循环模式时，对 t 以 2T 为单位取余数，若 t < T，则 t 保持不变，反之，则 t = 2T – t；由此得出当前时刻 t 映射到动画整体时间范围内；

在 N 个动画时间参数中设置相邻的两个时间关键点为 Tp 和 Tq，满足 Tp < t <Tq；得到插值系数 c，公式如下：

c = (t – Tp) / (Tq – Tp) 公式(1)

设置拷贝数量 CN 的关键帧数列为 CN1, CN2,…CNn，缩放 CS 的关键帧数列为 CS1,CS2, …， CSn，位置 CP 的关键帧数列为 CP1,CP2, …, CPn，旋转 CR 的关键帧数列为CR1, CR2, …, CRn，中心CC 的关键帧数列为 CC1, CC2, …, CCn，透明度 CA 的关键帧数列为CA1, CA2, …, CAn；图形拷贝动画参数 CN、 CP、 CR、 CC、 CA 分别对应的关键帧为 CNp 和 CNq， CPp 和 CPq， CRp 和 CRq， CCp 和 CCq， CAp和 CAq；得到 CNt、 CPt、CRt、 CCt 和 CAt，公式如下：

CNt = CNp + (CNq – CNp) * c 公式(2)

CPt = CPp + (CPq – CPp) * c 公式(3)

CRt = CRp + (CRq – CRp) * c 公式(4)

CCt = CCp + (CCq – CCp) * c 公式(5)

CAt = CAp + (CAq – CAp) * c 公式(6)

剪裁起点 TS 的关键帧数列为 TS1， TS2， …， TSn，剪裁终点TE 的关键帧数列为TE1， TE2， …， TEn，剪裁偏移 TO1， TO2， …，TOn； 根据动画插值系数计算过程中确定的Tp 和 Tq 找到剪裁动画参数 TS、 TE 和 TO 分别对应的关键帧 TSp 和 TSq、 TEp 和TEq、 TOp 和TOq，得到当前时刻 t 的剪裁路径参数；

当前时刻 t 剪裁路径的动画参数 TS、 TE 和 TO 分别为 TSt、 TEt和 TOt，公式如下：

TSt = TSp + (TSq – TSp) * c 公式(7)

TEt = TEp + (TEq – TEp) * c 公式(8)

TOt = TOp + (TOq – TOp) * c 公式(9)

以所有属于[TSt + TOt、 TEt + TOt]范围内的路径片段构造形状路径。

2.根据权利要求 1 所述的一种基于 GPU 的高效 2D 矢量图形渲染方法，其特征在于，所述步骤 101）中的解析转换是将图像转换成由点、线、贝塞尔曲线基本图元进行表示，同时加载渲染参数包括描绘线宽、连接线形、填充模式和着色样式。

3.根据权利要求 1 所述的一种基于 GPU 的高效 2D 矢量图形渲染方法，其特征在于，所述步骤 102）的每个矢量形状的设置空间变换参数，若当前矢量形状存在父子层级复合变换，则递归获取父亲层的空间变换矩阵，并采用矩阵乘法将其叠加到当前形状中。

4.根据权利要求 1 所述的一种基于 GPU 的高效 2D 矢量图形渲染方法，其特征在于，所述步骤 103）的 GPU 建立三角形网格数据，先由图形处理中GPU的顶点着色器，对2D基本图元的位置应用空间变换矩阵，再由 GPU 的剖分着色器和几何形状着色器，对空间变换后的矢量基本图元，按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据。

5.根据权利要求 1 所述的一种基于 GPU 的高效 2D 矢量图形渲染方法，其特征在于，所述步骤 104）的特效渲染包括结合模板缓存确定的边缘区域做抗锯齿或羽化效果处理。

Images