CN109358852B - 一种使用shader实现车载GUI换肤的方法 - Google Patents

Abstract

本发明涉及图像处理技术领域，具体公开了一种使用shader实现车载GUI换肤的方法，包括以下步骤：采用Opengl着色语言GLSL编写着色器shader，使得一个着色器shader并行运行于GPU上，实现GUI颜色换肤；在Opengl ES中创建两种着色器：顶点着色器vertex shaders和片元着色器fragment shaders，本发明采用GPU处理数据，基于Opengl ES完成任意图形任意颜色的皮肤实时换肤的效果，提高对所有像素、顶点、纹理的位置、色调、饱和度、明度、对比度实时绘制图像的速度，大幅度提高转化效率，达到投入小修改少的要求。

Description

一种使用shader实现车载GUI换肤的方法

技术领域

本发明涉及图像处理技术领域，尤其涉及一种使用shader实现车载GUI换肤的方法。

背景技术

现有的车载中控设备，除了中央处理器（CPU）性能不断提高之外，大多也相应的配备了专业的图形处理器（GPU）。图形处理器（GPU）和中央处理器（CPU）相比：CPU需要很强的通用性来处理各种不同的数据类型，同时又有逻辑判断，会因此引入大量的分支跳转和中断的处理，这些都使得CPU的内部结构异常复杂。而GPU面对的则是类型高度统一的、相互无依赖的大规模数据和不需要被打断的纯净的计算环境。

目前市面上，出现了GUI换肤新需求，即显示的部分图片颜色变化，针对这一需求，虽然可以使用C++代码编写，但是需要循环遍历每个像素点，提取 2D 图像上每个像素点的颜色值并做对应变化，同时是在CPU上运行的，势必会抢占资源，且采用这种方式的话，GUI代码就需要大的修改，需要浪费大量的人力来对代码进行重新编写。

发明内容

针对上述技术问题，本发明提供了一种采用GPU处理数据，基于Opengl ES完成任意图形任意颜色的皮肤实时换肤的效果，提高对所有像素、顶点、纹理的位置、色调、饱和度、明度、对比度实时绘制图像的速度，大幅度提高转化效率，达到投入小修改少要求的使用shader实现车载GUI换肤的方法。

为了解决上述技术问题，本发明提供的具体方案如下：一种使用shader实现车载GUI换肤的方法，包括以下步骤：采用Opengl着色语言GLSL编写着色器shader，使得一个着色器shader并行运行于GPU上，实现GUI颜色换肤；

在Opengl ES中创建两种着色器：顶点着色器vertex shaders和片元着色器fragment shaders。

优选的，所述GUI颜色换肤具体为：对UI上任意图形进行任意颜色变化设置，满足不同的换肤需求。

优选的，所述UI上图形的图标数据来自图片资源。

优选的，所述UI上图形的图像格式为png格式，具有压缩比高，生成文件体积小的优点。

优选的，所述对UI上任意图形进行任意颜色变化设置具体包括以下过程：所述顶点着色器vertex shaders设置图形顶点的位置，并且把位置和纹理坐标参数传递到片元着色器fragment shaders，片元着色器fragment shaders对图形的每一个像素进行计算，得出每个像素的最终颜色。

优选的，所述片元着色器fragment shaders在对像素进行计算时，通过RGB的某一通道，对实际图形进行拾取。

优选的，所述片元着色器，提供被系统自动调用的主函数接口main，设定纹理采样坐标vTexCoord，设定顶点着色器中默认精度为precision mediump float，设定背景纹理单元SliderTextureBg，设定Mask纹理单元SliderMaskedTexture，使背景图像上传到SliderTextureBg纹理单元，使蒙版图像上传到SliderMaskedTexture纹理单元，通过纹理采样坐标vTexCoord，对SliderTextureBg纹理单元和SliderMaskedTexture纹理单元分别采样，得到两个4维颜色向量color和maskcolor，所述4维颜色向量color，取蒙版RGB的某一通道截取出图形形状，所述4维颜色向量maskcolor，取其RGB的某一通道用于填充任意颜色FillColor。

优选的，所述图形最后的颜色是对蒙版形状和填充颜色的叠加混合，得到一个RGB像素输出显示。

与现有技术相比，本发明的有益效果在于：本发明采用GPU处理数据，基于OpenglES完成任意图形任意颜色的皮肤实时换肤的效果，提高对所有像素、顶点、纹理的位置、色调、饱和度、明度、对比度实时绘制图像的速度，大幅度提高转化效率，达到投入小修改少的要求。

具体实施方式

为了详细说明本发明的技术方案，下面将对本发明实施例的技术方案进行清楚、完整的描述。显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于所描述的本发明的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供的一种使用shader实现车载GUI换肤的方法，具体包括以下步骤：采用Opengl着色语言GLSL编写着色器shader，使得一个着色器shader并行运行于GPU上，实现GUI颜色换肤，提高任意图形任意颜色实时切换的速度和效率，GUI颜色换肤具体为，对UI上任意图形进行任意颜色变化设置，满足不同的换肤需求；在Opengl ES中创建两种着色器：顶点着色器vertex shaders和片元着色器fragment shaders。

其中，UI上图形的图标数据来自图片资源，UI上图形的图像格式为png格式，png格式具有压缩比高，生成文件体积小的优点。

Opengl ES（Opengl for Embedded Systems）是Opengl三维图形API的子集，针对手机、PDA和游戏主机等嵌入式设备而设计，该API由Khronos集团定义推广，Khronos是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。

着色器（shader）是用着色语言写的基于C语言的程序。在Opengl ES中需要创建两种着色器：顶点着色器vertex shaders和片元着色器fragment shaders。这两种着色器是一个完整程序的两半，不能仅仅创建其中任何一个，想创建一个完整的着色程序，两个都是必须存在。顶点着色器vertex shaders定义了在2D或者3D场景中几何图形是如何处理的，一个顶点指的是2D或者3D空间中的一个点，在图像处理中，一般有4个顶点：每一个顶点代表图像的一个角，顶点着色器vertex shaders设置顶点的位置，并且把位置和纹理坐标等参数发送到片元着色器，使用片元着色器在对象或者图片的每一个像素上进行计算，最终计算出每个像素的最终颜色。

本实施例中，对UI上任意图形进行任意颜色变化设置具体包括以下过程：顶点着色器vertex shaders设置图形顶点的位置，并且把位置和纹理坐标参数等传递到片元着色器fragment shaders，片元着色器fragment shaders对图形的每一个像素进行计算，得出每个像素的最终颜色，片元着色器fragment shaders在对像素进行计算时，通过RGB的某一通道，对实际图形进行拾取。

本实施例中，通过RGB的R通道，实现对一个图形的实际图形的拾取，具体如下：

void main()

{

precision lowp float;

vec4 color = texture2D(SliderTextureBg, vTexCoord);

vec4 maskcolor = texture2D(SliderMaskedTexture,vTexCoord);

color = color*(1.0-maskcolor.r) + FillColor*maskcolor.r;

gl_FragColor.rgba = color.rgba;

}

具体的，片元着色器提供被系统自动调用的主函数接口main；

设定纹理采样坐标vTexCoord；

设定顶点着色器中默认精度为precision mediump float；

设定背景纹理单元SliderTextureBg；

设定Mask纹理单元SliderMaskedTexture；

使背景图像上传到SliderTextureBg纹理单元；

使蒙版图像上传到SliderMaskedTexture纹理单元；

通过纹理采样坐标vTexCoord，对SliderTextureBg纹理单元和SliderMaskedTexture纹理单元分别采样，得到两个4维颜色向量color和maskcolor；

所述4维颜色向量color，取蒙版R一通道截取出图形形状；

所述4维颜色向量maskcolor，取R通道用于填充任意颜色FillColor；

图形最后的颜色是对蒙版形状和填充颜色的叠加混合，得到一个RGB像素输出显示。

上面对本发明的实施方式作了详细说明，但是本发明并不限于上述实施方式，在本领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下作出各种变化。

Claims (4)

1.一种使用shader实现车载GUI换肤的方法，其特征在于，包括以下步骤：采用Opengl着色语言GLSL编写着色器shader，使得一个着色器shader并行运行于GPU上，实现GUI颜色换肤；

在Opengl ES中创建两种着色器：顶点着色器vertex shaders和片元着色器fragmentshaders；所述GUI颜色换肤过程具体为：对UI上任意图形进行颜色变化设置；

所述对UI上任意图形进行任意颜色变化设置具体包括以下过程：所述顶点着色器vertex shaders设置图形顶点的位置，并且把位置和纹理坐标参数传递到片元着色器fragment shaders，片元着色器fragment shaders对图形的每一个像素进行计算，得出每个像素的最终颜色；

所述片元着色器fragment shaders在对像素进行计算时，通过RGB的某一通道，对实际图形进行拾取；

所述片元着色器，提供被系统自动调用的主函数接口main，设定纹理采样坐标vTexCoord，设定顶点着色器中默认精度为precision mediump float，设定背景纹理单元SliderTextureBg，设定Mask纹理单元SliderMaskedTexture，使背景图像上传到SliderTextureBg纹理单元，使蒙版图像上传到SliderMaskedTexture纹理单元，通过纹理采样坐标vTexCoord，对SliderTextureBg纹理单元和SliderMaskedTexture纹理单元分别采样，得到两个4维颜色向量color和maskcolor，所述4维颜色向量color，取蒙版RGB的某一通道截取出图形形状，所述4维颜色向量maskcolor，取其RGB的某一通道用于填充任意颜色FillColor。

2.根据权利要求1所述的使用shader实现车载GUI换肤的方法，其特征在于：所述UI上图形的图标数据来自图片资源。

3.根据权利要求1所述的使用shader实现车载GUI换肤的方法，其特征在于：所述UI上图形的图像格式为png格式。

4.根据权利要求1所述的使用shader实现车载GUI换肤的方法，其特征在于：所述图形最后的颜色是对蒙版形状和填充颜色的叠加混合，得到一个RGB像素输出显示。