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

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

An efficient 2D vector graphics rendering method based on GPU

The invention discloses a method for rendering vector graphics GPU, based on 2D, including data pre-processing, graphics to the composite layer step, triangle mesh data step, add rendering steps; the general increase rendering efficiency is high, reducing the CPU load.

【技术实现步骤摘要】
一种基于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，支持AdobeIllustrator、SVG等常见矢量图形格式，扩展支持AdobeAfterEffects矢量图形数据格式，无缝衔接设计与渲染过程。附图说明图1为本专利技术一种基于GPU的高效2D矢量图形渲染方法的流程图；图2为本专利技术一种基于GPU的高效2D矢量图形渲染方法的动画图形渲染流程图。具体实施方式下面结合附图和具体实施方式对本专利技术进一步说明。2D矢量图形使用点、线段、圆弧、多边形、不规则曲线等基本图元来描述矢量图形，然后通过指定基本图元的描绘线宽、连接线形、填充模式和着色样式等来确定图形的显示效果。在GPU流水线中，通过定义三角形顶点的索引、位置、法线、纹理坐标、贴图等来渲染3D模型，而基于GPU的2D矢量图形渲染方法利用现代GPU可编程管线的特点和强大的并行数据处理能力，使用GPU着色器处理矢量图形绝大部分过程，极大地减少CPU负载，无缝地集成到3D流水线中，大大提高了渲染效率，并且为了极大化渲染效率和最大化通用性，该方法首先会根据具体GPU的能力和不同操作系统，选择最优GPU编程语言。在微软的Windows系统中使用Direct3D，在谷歌的Android系统中使用OpenGLES/Vulkan，而在苹果的iOS系统中则使用OpenGLES/Metal。然后使用相应的编程着色语言具体实现矢量图形渲染的每个数据处理过程。如图1所示，基于GPU的高效2D矢量图形渲染方法，具体包括如下步骤：101）数据预处理步骤：加载图形文件，按特定文件格式解析矢量数据，并解析转换成使用矢量基本图元构成的2D矢量形状。解析转换是将图形文件转换成由点、线、贝塞尔曲线等基本图元进行表示，使用2D矢量图形中的基本原语(MoveTo,LineTo,QuadTo,CubicTo，是计算机术语，专用来画线)构成矢量形状，同时加载渲染参数包括描绘线宽、连接线形、填充模式和着色样式。102）图形去复合层级空间变换步骤：经步骤101）处理的每个矢量形状图像计算3D空间变换参数，若当前矢量形状存在父子层级复合层级变换，则递归获取父亲层的3D空间变换矩阵，并采用矩阵乘法将其叠加到当前形状中，以应用图像的复合层级变换。此过程循环进行，直至图像无复合层。103）三角形网格数据步骤：经步骤102）处理后得出来的3D空间变换矩阵和矢量图形的基本图元信息传入先由GPU的顶点着色器，对2D基本图元的位置应用空间变换矩阵，即通过编写自定义的空间变换代码，对基本图元的空间坐标进行处理。再由GPU的剖分着色器和几何形状着色器，对空间变换后的矢量基本图元，按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据。也就是说由GPU中对空间变换后的矢量基本图元进行三角剖分，将其转换成GPU3D流水线的基本原语。在该过程中，根据填充或描边方式，通过编写不同的自定义剖分着色代码和几何着色代码，由GPU生成渲染所需的三角形网格数据。104）添加渲染效果步骤：根据步骤103）生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域。其中填充或描绘区域的确定，首先把生成的三角形网格数据传入下一级流水线，然后根据奇偶填充规则或非零回转规则，确定矢量图形的内外区域，并记录其结果到GPU的模板缓存中。再根据指定的形状着色特效生成片段着本文档来自技高网...

【技术保护点】
一种基于GPU的高效2D矢量图形渲染方法，其特征在于，具体包括如下步骤：101）数据预处理步骤：加载图形文件，并解析转换成矢量基本图元构成的2D矢量形状；102）图形去复合层级变换步骤：经步骤101）处理的图形建立3D空间变换矩阵，判断所述图形是否存在父子层级关系，如果有则进行递归叠加变换矩阵，以应用复合空间变换；103）三角形网格数据步骤：经步骤102）处理后的图形，由GPU即图像处理器按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据；104）添加渲染效果步骤：根据步骤103）生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域，由GPU根据指定的形状着色特效渲染三角形网格数据，并将渲染后的矢量图形呈现给用户，或者将结果作为其他模型的贴图，在GPU流水线中进一步处理。

【技术特征摘要】
1.一种基于GPU的高效2D矢量图形渲染方法，其特征在于，具体包括如下步骤：101）数据预处理步骤：加载图形文件，并解析转换成矢量基本图元构成的2D矢量形状；102）图形去复合层级变换步骤：经步骤101）处理的图形建立3D空间变换矩阵，判断所述图形是否存在父子层级关系，如果有则进行递归叠加变换矩阵，以应用复合空间变换；103）三角形网格数据步骤：经步骤102）处理后的图形，由GPU即图像处理器按照矢量图形构成类型和剪裁形状生成对应的三角形网格数据；104）添加渲染效果步骤：根据步骤103）生成的三角形网格数据和矢量形状的绘制样式，填充模板缓存，确定矢量图形的填充或描绘区域，由GPU根据指定的形状着色特效渲染三角形网格数据，并将渲染后的矢量图形呈现给用户，或者将结果作为其他模型的贴图，在GPU流水线中进一步处理。2.根据权利要求1所述的一种基于GPU的高效2D矢量图形渲染方法，其特征在于，所述步骤101）中的解析转换是将图像转换成由点、线、贝塞尔曲线基本图元进行表示，同时加载渲染参数包括描绘线宽、连接线形、填充模式和着色样式。3.根据权利要求1所述的一种基于GPU的高效2D矢量图形渲染方法，其特征在于，所述步骤102）的每个矢量形状的设置空间变换参数，若当前矢量形状存在父子层级复合变换，则递归获取父亲层的空...

【专利技术属性】
技术研发人员：张金矿，熊永春，
申请(专利权)人：杭州趣维科技有限公司，
类型：发明
国别省市：浙江,33