CN109814970A - 一种基于OpenGL-ES的动态进度条绘制方法 - Google Patents

Abstract

本发明涉及一种基于OpenGL‑ES的动态进度条绘制方法，包括以下步骤：步骤一：在指定位置绘制着色器，包含顶点着色器和片段着色器；步骤二：读取纹理图片，将其以数组形式存储在代码中；步骤三：将读取的纹理与着色器进行纹理绑定；步骤四：将绘制的画面渲染到屏幕上，刷新屏幕；步骤五：读取实时数据；步骤六：根据读取的实时数据，变换纹理对应的映射矩阵，并跳转至步骤三。本发明相对于现有技术对于动态进度条的绘制方法，显著降低了CPU以及GPU的占有率，释放了处理器资源；并减少了嵌入式系统中数字仪表盘UI的开发难度以及代码量，降低了开发成本，提高了开发效率；且相比于OpenGL‑ES默认的抗锯齿功能，本方法绘制的线条无锯齿且效果可控。

Description

一种基于OpenGL-ES的动态进度条绘制方法

技术领域

本发明涉及数字仪表盘领域，特别涉及一种基于OpenGL-ES的动态进度条绘制方法。

背景技术

随着时代的进步，汽车驾驶、航空航天等领域也得到了飞速的发展，其智能化程度越来越高，仪表盘中所需要包含的信息也越来越多；而传统机械仪表盘可视区域有限，难以包含日益增长的显示信息，因此数字仪表盘作为一种可视区域以及显示信息可编程更改的方案，必定是未来相关领域的发展趋势。而在众多的信息中，速度、油量以及温度等信息优先级较高，面对大量的显示信息，使用者的注意力常会被低优先级的信息所分散，影响使用者的驾驶安全。

OpenGL-ES是一种免授权费，跨平台的图形应用程序接口，主要应用于嵌入式平台上，是一个功能强大，调用方便的底层图形API。虽然它提供了一系列的功能函数，但是对于数字仪表盘显示相关的技术还没有直接的显示方法，一般采用图1的流程进行绘制。但是这种方法有着诸多缺陷，一是绘制动态进度条效率低，帧率刷新速度和CPU/GPU占用率之间相互制衡，不适合实时性强且任务众多的数字仪表盘的绘制；二是面对数字仪表盘上众多的显示信息，代码绘制量大，处理复杂，开发效率低。

发明内容

本发明的目的是提出一种基于OpenGL-ES的动态进度条绘制方法，以解决目前在使用OpenGL-ES绘制数字仪表盘中动态进度条时，直接使用原生API绘制所带来的绘制效率低，屏幕帧率低，代码量大以及开发难度复杂的问题。

为实现上述目的，本发明具体包括以下步骤：

步骤一：在指定位置绘制着色器，包含顶点着色器和片段着色器；

步骤二：读取纹理图片，将其以数组形式存储在代码中；

步骤三：将读取的纹理与着色器进行纹理绑定；

步骤四：将绘制的画面渲染到屏幕上，刷新屏幕；

步骤五：读取实时数据；

步骤六：根据读取的实时数据，变换纹理对应的映射矩阵，并跳转至步骤三。

优选地，在步骤二中，所读取的纹理图片包含进度条纹理以及掩膜纹理mask1～n(n>＝1)，将其以数组的形式存储在工程代码中。

优选地，上述所读取的进度条纹理为满量程的完整进度条图片，除了要显示的进度条部分，其他部分均为透明背景。

优选地，上述所采用的掩膜纹理mask1～n，颜色应该与屏幕背景颜色保持一致，其他部分都采用透明背景；并且所有的掩膜纹理mask1～n初始位置拼凑在一起，其大小、角度、形状应该都与满量程进度条保持一致，使其能够遮挡满量程的进度条图片纹理。

优选地，在步骤五中，实时读取的数据源可以是车速、发动机转速、油量、水量、温度信息。

作为第一优选，在步骤六中，当读取数据大小为X(0～A)时，针对满量程范围(0～B)的圆弧形进度条，掩膜纹理mask1～n的变换过程包含以下步骤：

步骤61：当数据X大于0小于A/n时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2～n保持静止；

步骤62：当数据X大于A/n小于A*2/n时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2旋转B/n度，掩膜纹理mask3～n保持静止；

以此类推，

步骤6n：数据X大于A*(n-1)/n小于A时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2旋转B*(n-1)/n度，…，掩膜纹理maskn旋转B*(n-(n-1))/n。

作为第二优选，在步骤六中，当读取数据大小为X(0～A)时，针对满量程范围(0～B)的直线形进度条，掩膜纹理mask1～n的变换过程包含以下步骤：

步骤61’：数据X大于0小于A/n时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2～n保持静止；

步骤62’：数据X大于A/n小于A*2/n时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2平行移动距离为B/n，掩膜纹理mask3～n保持静止；

以此类推，

步骤6n’：数据X大于A*(n-1)/n小于A时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2平行移动距离为B*(n-1)/n，掩膜纹理maskn平行移动距离为B*(n-(n-1))/n。

本发明为了解决现有技术中存在的性能缺陷，提出了一种基于OpenGL-ES的动态进度条绘制方法，与现有技术对比，本专利具有以下有益效果：

1.本发明采用纹理贴图进行相互遮挡的方法实现动态进度条效果，降低了对于CPU/GPU的占用率，提高了系统整体性能，实现了数字仪表中进度条响应实时性高、显示准确性高、并行任务多等优点。

2.本发明所采用的纹理图片为预先按照需求处理好的图片，加载一次即可，大大减少了数字仪表盘UI的开发难度以及代码量，降低了开发成本，提高了开发效率。

3.本发明由于采用的纹理图片像素大小可控，使得整体渲染效果可控，相比于OpenGL-ES默认的抗锯齿功能，本方法绘制的线条抗锯齿效果好，流畅度高。

附图说明

图1是传统方法绘制动态进度条的流程图；

图2是本发明基于OpenGL-ES的动态进度条的绘制流程图；

图3是本发明进度条纹理图片示意图；

图4是本发明掩膜纹理图片示意图；

图5是本发明第一实施例流程图示意图；

图6是本发明第一实施例实物效果图示意图；

图7是本发明第二实施例实物效果图示意图；

图8是本发明与传统API绘制进度条在实物上的性能测试对比图。

具体实施方式

以下结合附图对本发明进行更全面的描述。

如图2所示，本发明提出的一种基于OpenGL-ES的动态进度条绘制方法，具体包括以下步骤：

步骤一：在指定位置绘制着色器，包含顶点着色器和片段着色器；

步骤二：读取纹理图片，将其以数组形式存储在代码中，该读取的纹理图片包含进度条纹理以及掩膜纹理mask1～n(n>＝1)。其中进度条纹理为满量程的完整进度条图片，除了要显示的进度条部分，其他部分均为透明背景；掩膜纹理mask1～n颜色应该与屏幕背景颜色保持一致，其他部分都采用透明背景，并且所有的掩膜纹理mask1～n初始位置拼凑在一起，其大小、角度、形状应该都与满量程进度条保持一致，使其能够遮挡满量程的进度条图片纹理。

步骤三：将读取的纹理与着色器进行纹理绑定；

步骤四：将绘制的画面渲染到屏幕上，刷新屏幕；

步骤五：读取实时数据，实时读取的数据源可以是车速、发动机转速、油量、水量、温度等信息；

步骤六：根据读取的实时数据，变换纹理对应的映射矩阵，并跳转至步骤三。

参照说明书附图3和4，本发明以汽车数字仪表盘中圆弧形进度条以及直线型进度条两类作为较佳的实施例。但是，本发明可以应用于许多场景中，以不同的形式进行表现，并不局限于本文所描述的实施例。

如附图3所示，所读取的进度条纹理为满量程的完整进度条图片，除了要显示的进度条部分，其他部分均为透明背景；其中(a)图为直线型进度条纹理示意图，(b)图为圆弧形进度条纹理示意图。

如附图4所示，所采用的掩膜纹理mask1～n，颜色应该与屏幕背景颜色保持一致，其他部分都采用透明背景；并且所有的掩膜纹理mask1～n初始位置拼凑在一起，其大小、角度、形状应该都与满量程进度条保持一致，使其能够遮挡满量程的进度条图片纹理。其中(a)图为直线型进度条所采用的掩膜纹理mask示意图，(b)图为圆弧形进度条所采用的掩膜纹理mask示意图。

实施例1

在本实施例中，取掩膜纹理mask的个数n＝4，读取数据源为汽车速度，以圆弧形进度条作为显示方式，具体包含以下步骤：

1.将要显示的进度条纹理plane.tga、掩膜纹理mask1.tga、mask2.tga、mask3.tga、mask4.tga都处理成透明背景，其中掩膜纹理mask1～4的颜色需要和仪表盘背景颜色保持一致。

此处只要图片背景为透明背景格式，且能配合后面的纹理载入函数实现图片的载入即可，并不局限于tga格式，可采用png、jpg等格式，但是由于tga格式图片是目前国际图形图像工业较为通用的文件格式，故采用tga格式图片。

2.使用OpenGL-ES原生API在指定位置绘制着色器，并采用纹理载入函数加载进度条纹理plane.tga、掩膜纹理mask1.tga、mask2.tga、mask3.tga、mask4.tga，将其存储在结构体数组中。

在所述结构体数组中，包含了图片的左下角位置坐标以及图片宽高，图片格式，以及纹理数据。

3.将所载入的进度条纹理作为纹理贴图，将其与着色器一起渲染到屏上，同时读取实时的速度值X，将其作为参数传给指针绘制函数以及掩膜纹理绘制函数，这两个函数将变换指针以及掩膜的视角矩阵，其纹理位置矩阵与视角矩阵相乘之后的值作为指针以及掩膜贴图的坐标，然后将指针以及掩膜共同渲染到屏幕上，具体处理流程如图5所示。

如下表所示为掩膜纹理mask1～4的角度位置θ与传入速度值X之间的对应关系，其中θ＝θ₀+Δθ，θ₀为掩膜纹理初始角度位置，Δθ为掩膜纹理旋转角度，速度值X大小范围为0～A，取A＝240km/h，掩膜纹理mask角度位置范围为0～B，取B＝240°。

参照图6，掩膜纹理mask1～4的位置随着传入速度值实时变换。速度X在0～60km/h时，mask1随速度值做圆周旋转，旋转角度值为X，而mask2～4处于初始位置不动；速度X在60～120km/h时，mask1继续随速度值做圆周旋转，旋转角度值为X，而mask2直接旋转60度，与mask3重合，此时mask3～4处于初始位置不动；在速度X在120～160km/h时，mask1随速度值做圆周旋转，旋转角度值为X，而mask2与mask3分别旋转120度和60度，与mask4重合，而mask4处于初始位置不动；在速度X在180～240km/h时，mask1随速度值做圆周旋转，旋转角度值为X，而mask2～4分别旋转180度、120度和60度，位于进度条的满量程之外。

4.将上述进度条纹理以及掩膜纹理mask同步渲染到屏幕上，在指定帧率的情况下，实时刷新屏幕。

经过上述过程，由于mask颜色与屏幕背景颜色保持一致，且与进度条纹理渲染在同一位置，就能实现对进度条的动态掩盖，而所有纹理的其他部分均为透明背景，则不会对其他位置的绘制有掩盖效果，就能实现进度条跟随指针动态移动的效果，其实物合成效果如图6所示。

实施例2

同样的，在本实施例中，其纹理载入以及纹理绑定步骤类似于实施例1中所述，读取数据源为汽车水温，掩膜纹理mask个数取n＝1，以直线型进度条作为显示方式。

在直线型进度条中，掩膜纹理mask与进度条纹理进行平行移动实现动态遮挡效果，读取的水温值X范围为0～A，取A＝100；进度条满量程范围为0～B，取B＝100；则掩膜纹理mask移动距离为X*B/A，即X个刻度。

由于掩膜纹理mask颜色与屏幕背景颜色一致，且其与完整的直线型进度条纹理位于同一位置，当其按照数据大小做平行移动时，将会对进度条纹理进行实时的遮挡，从而实现进度条动态增减的效果。其实物合成效果如图7所示。

参照图8，经过实物测试，使用OpenGL-ES原生API进行直接绘制时，其CPU占用率为15.4％，其GPU占用率为61％；而使用本发明的进度条绘制方法时，其CPU和GPU的占用率仅为7.3％和36％，可知本发明可以显著的降低绘制动态进度条时CPU和GPU的占用率，释放处理器资源。并且由于本方法使用的纹理图片均为预处理过的纹理图片，使得其抗锯齿性能较好且可控，添加静态控件方便，代码量以及工程开发难度得到了显著的降低。

本发明的保护内容不局限于以上实施例。在不脱离本发明构思的前提下，还可以做出若干变化和应用，这些都属于本发明的保护范围。

Claims (7)

1.一种基于OpenGL-ES的动态进度条绘制方法，其特征在于，包括以下步骤：

步骤一：在指定位置绘制着色器，包含顶点着色器和片段着色器；

步骤二：读取纹理图片，将其以数组形式存储在代码中；

步骤三：将读取的纹理与着色器进行纹理绑定；

步骤四：将绘制的画面渲染到屏幕上，刷新屏幕；

步骤五：读取实时数据；

步骤六：根据读取的实时数据，变换纹理对应的映射矩阵，并跳转至步骤三。

2.如权利要求1中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，在步骤二中，所读取的纹理图片包含进度条纹理以及掩膜纹理mask1～n(n>＝1)。

3.如权利要求2中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，所读取的进度条纹理为满量程的完整进度条图片，除了要显示的进度条部分，其他部分均为透明背景。

4.如权利要求2中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，所采用的掩膜纹理mask1～n，颜色应该与屏幕背景颜色保持一致，其他部分都采用透明背景；并且所有的掩膜纹理mask1～n初始位置拼凑在一起，其大小、角度、形状应该都与满量程进度条保持一致，使其能够遮挡满量程的进度条图片纹理。

5.如权利要求1中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，在步骤五中，实时读取的数据源可以是车速或发动机转速或油量或水量或温度。

6.如权利要求2中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，在步骤六中，当读取数据大小为X(0～A)时，针对满量程范围(0～B)的圆弧形进度条，掩膜纹理mask1～n的变换过程包含以下步骤：

步骤61：当数据X大于0小于A/n时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2～n保持静止；

步骤62：当数据X大于A/n小于A*2/n时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2旋转B/n度，掩膜纹理mask3～n保持静止；

以此类推，

步骤6n：数据X大于A*(n-1)/n小于A时，其掩膜纹理mask1旋转角度为B*X/A度，掩膜纹理mask2旋转B*(n-1)/n度，…，掩膜纹理maskn旋转B*(n-(n-1))/n。

7.如权利要求2中所述的基于OpenGL-ES的动态进度条绘制方法，其特征在于，在步骤六中，当读取数据大小为X(0～A)时，针对满量程范围(0～B)的直线形进度条，掩膜纹理mask1～n的变换过程包含以下步骤：

步骤61’：数据X大于0小于A/n时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2～n保持静止；

步骤62’：数据X大于A/n小于A*2/n时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2平行移动距离为B/n，掩膜纹理mask3～n保持静止；

以此类推，

步骤6n’：数据X大于A*(n-1)/n小于A时，其掩膜纹理mask1在进度条同方向上平行移动距离为B*X/A，掩膜纹理mask2平行移动距离为B*(n-1)/n，…，掩膜纹理maskn平行移动距离为B*(n-(n-1))/n。