CN104657097A - 一种波浪型动态图像的显示方法和设备 - Google Patents

Abstract

本发明公开了一种波浪型动态图像的显示方法和设备，该方法包括：移动终端将目标3D图像转换为能够显示的二维图像；所述移动终端将所述二维图像传入纹理坐标；所述移动终端利用一致变量扰动所述纹理坐标；所述移动终端基于扰动后的二维图像，获得具有动态波纹效果的图形；所述移动终端基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。本发明实施例中，基于Vertex Shader技术和Pixel Shader技术实现在移动终端上显示波浪型动态图像，即实现立体3D动态波浪效果，从而渲染出真实动态波浪效果，实现动态实时渲染，减轻CPU运算压力，减少内存消耗。

Description

一种波浪型动态图像的显示方法和设备

技术领域

本发明涉及通信领域，尤其涉及一种波浪型动态图像的显示方法和设备。

背景技术

随着移动终端技术的不断发展，用户对移动平台的图形界面的要求也进一步提高，普通的二维界面已经不能够满足用户体验要求，用户开始追求更高层次的立体3D效果，裸眼3D屏幕的出现也让立体3D技术应用到移动终端上成为了现实，越来越多的移动终端上已经使用了裸眼3D屏幕。进一步的，在移动终端支持GPU（Graphic Processing Unit，图形处理器）之后，复杂立体3D场景画面的实时显示成为可能。目前用户已经能够在移动终端上体验例如立体翻页、渐入渐出等具有视觉冲击的动画效果。动态壁纸目前已经成为智能移动终端的标准配置，其用于提升用户使用智能移动终端的体验。

目前为了在移动终端上实现动画效果，常见的方法包括：（1）Tween（中间）动画，Tween动画是建立在View（视图）级别上的，在View类中有一个接口startAnimation（开始动画）是动画开始，startAnimation会将一个Animation（动画）类别的函数传给View，Animation用于指定使用的是哪种动画，并指定平移、缩放、旋转以及变换等内容。（2）Frame（帧）动画，Frame动画是指顺序播放事先做好的图像，通过Movie这个类来对Gif文件进行读取和解码，同时在onDraw函数中不断的绘制每一帧图片；至于选出哪一帧图片进行绘制，则是传入系统当前时间给Movie类，然后让其根据时间顺序选出帧图片。

在上述Tween动画方案中，支持的动画类型单调，只是简单的旋转、淡入淡出等效果，不能满足用户的体验要求。在上述Frame动画方案中，比较消耗资源，给CPU（Central Processing Unit，中央处理器）带来很大的运算压力，会造成开机延迟等现象，并且需要大量的Gif图片，比较消耗内存。

发明内容

本发明实施例提供一种波浪型动态图像的显示方法和设备，以实现立体3D动态波浪效果，并减轻CPU的运算压力，减少内存消耗。

为了达到上述目的，本发明实施例提供一种波浪型动态图像的显示方法，该方法包括以下步骤：移动终端将目标3D图像转换为能够显示的二维图像；所述移动终端将所述二维图像传入纹理坐标；所述移动终端利用一致变量扰动所述纹理坐标；所述移动终端基于扰动后的二维图像，获得具有动态波纹效果的图形；所述移动终端基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。

优选的，所述移动终端利用一致变量扰动所述纹理坐标的过程，具体包括：所述移动终端利用所述一致变量生成正弦函数，并通过所述正弦函数扰动所述纹理坐标；其中，所述正弦函数的正弦值在[-π/2，π/2]之间。

优选的，所述一致变量具体包括：扰动频率；扰动振幅；扰动因子。

优选的，所述扰动频率具体为：（4，4）；所述扰动振幅具体为：（0.05，0.05）；所述扰动因子的初始值具体为：1。

优选的，所述移动终端基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像，具体包括：所述移动终端将左眼对应的具有动态波纹效果的图形和右眼对应的具有动态波纹效果的图形输入到所述移动终端的3D屏幕上，以在所述移动终端上显示波浪型动态图像。

优选的，该方法进一步包括：所述移动终端将坐标（x，y，z）一次性放入到本移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。

本发明实施例提供一种移动终端，包括：转换模块，用于将目标3D图像转换为能够显示的二维图像；处理模块，用于将所述二维图像传入纹理坐标；扰动模块，用于利用一致变量扰动所述纹理坐标；获得模块，用于基于扰动后的二维图像，获得具有动态波纹效果的图形；显示模块，用于基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。

优选的，所述扰动模块，具体用于利用所述一致变量生成正弦函数，通过所述正弦函数扰动所述纹理坐标；其中，所述正弦函数的正弦值在[-π/2，π/2]之间。

优选的，所述一致变量具体包括：扰动频率；扰动振幅；扰动因子。

优选的，所述扰动频率具体为：（4，4）；所述扰动振幅具体为：（0.05，0.05）；所述扰动因子的初始值具体为：1。

优选的，所述显示模块，具体用于将左眼对应的具有动态波纹效果的图形和右眼对应的具有动态波纹效果的图形输入到所述移动终端的3D屏幕上，以在所述移动终端上显示波浪型动态图像。

优选的，所述处理模块，还用于将坐标（x，y，z）一次性放入到所述移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。

与现有技术相比，本发明实施例至少具有以下优点：本发明实施例中，基于Vertex Shader（顶点着色）技术和Pixel Shader（像素着色）技术实现在移动终端上显示波浪型动态图像，即实现立体3D动态波浪效果，从而渲染出真实动态波浪效果，实现动态实时渲染，减轻CPU运算压力，减少内存消耗。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例一提供的一种波浪型动态图像的显示方法流程图；

图2是本发明实施例一中提出的Vertex Shader技术涉及矢量的示意图；

图3是本发明实施例二提供的一种波浪型动态图像的显示设备结构图。

具体实施方式

下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

针对现有技术中存在的问题，本发明实施例一提供一种波浪型动态图像的显示方法，如图1所示，该波浪型动态图像的显示方法包括以下步骤：

步骤101，移动终端将目标3D图像转换为能够显示的二维图像。

其中，可以经过一系列的变换将目标3D图像（即最终需要显示的波浪型动态图像）转换为可以显示的二维图像，该转换过程在此不再详加赘述。

步骤102，基于Vertex Shader技术，移动终端将二维图像传入纹理坐标。

其中，纹理实际上是一个二维数组，其元素是一些颜色值，单个的颜色值被称为纹理元素或纹理像素，每一个纹理像素在纹理中都有一个唯一的地址，这个地址可以被认为是一个列和行的值；纹理坐标位于纹理空间中，即纹理坐标与纹理中的（0，0）位置相对应，在将一个纹理应用于一个图元时，其纹理像素地址需要映射到对象坐标系中，然后再被平移到屏幕坐标系或像素位置上。基于此纹理坐标相关特征，可以直接将二维图像传入纹理坐标。

步骤103，基于Pixel Shader技术，移动终端利用一致变量扰动纹理坐标。

本发明实施例中，基于Pixel Shader技术，移动终端利用一致变量扰动纹理坐标的过程，具体包括：基于Pixel Shader技术，移动终端利用一致变量生成正弦函数，并通过该正弦函数扰动纹理坐标；其中，正弦函数的正弦值在[-π/2，π/2]之间。

在本发明实施例的一种具体实现方式中，该一致变量具体包括但不限于：扰动频率；扰动振幅；扰动因子。其中，该扰动频率具体为：（4，4）；该扰动振幅具体为：（0.05，0.05）；该扰动因子的初始值具体为：1。

步骤104，基于扰动后的二维图像，移动终端获得具有动态波纹效果的图形。

在得到扰动后的二维图像后，由于扰动后的二维图像为动态波纹效果的图形，因此基于扰动后的二维图像可直接得到具有动态波纹效果的图形。

步骤105，基于具有动态波纹效果的图形，移动终端在本移动终端上显示波浪型动态图像，即在移动终端的裸眼3D屏幕上显示出波浪型动态图像。

本发明实施例中，基于具有动态波纹效果的图形，移动终端在本移动终端上显示波浪型动态图像的过程，具体包括：移动终端获得左眼对应的具有动态波纹效果的图形以及右眼对应的具有动态波纹效果的图形，并将左眼对应的具有动态波纹效果的图形以及右眼对应的具有动态波纹效果的图形输入到移动终端的裸眼3D屏幕上，从而在移动终端的裸眼3D屏幕上显示波浪型动态图像。

其中，通过调整摄像机的位置到左眼的位置，在经过上述步骤101-步骤104的处理后，得到的是左眼对应的具有动态波纹效果的图形；进一步的，由于立体3D技术要求同时计算出左眼对应的具有动态波纹效果的图形以及右眼对应的具有动态波纹效果的图形，左右眼的图像用于渲染，因此通过调整摄像机的位置到右眼的位置，然后重复执行上述步骤101-步骤104，在经过上述步骤101-步骤104的处理后，得到的是右眼对应的具有动态波纹效果的图形。之后，将左眼对应的具有动态波纹效果的图形以及右眼对应的具有动态波纹效果的图形输入到移动终端的裸眼3D屏幕上，从而在移动终端的裸眼3D屏幕上显示波浪型动态图像，表现出立体3D动态波浪的动态壁纸效果。

以下结合具体应用对本发明实施例提出的显示方法进行进一步的说明。

本发明实施例中，利用OpenGL ES（OpenGL for Embedded Systems，嵌入式OpenGL系统）的Shader（着色）技术实现波浪型动态图像的显示，以在立体3D的屏幕上制作立体3D波浪动态壁纸。其中，OpenGL ES实现的动画效果都是在图形硬件上实现，减轻了CPU的负担，且OpenGL ES的Shader技术分为Vertex Shader技术和Pixel Shader技术。在使用Shader技术实现波浪型动态图像的显示过程中，动画效果的原理是每一帧更新顶点的位置、形状、颜色、纹理坐标和光照等，如果各个对象稍有不同，就会产生动画。

基于此，可以通过Vertex Shader技术更新每一帧的顶点的位置、形状、颜色和光照等，此外，还可以基于Vertex Shader技术更新纹理坐标。

如图2所示，为Vertex Shader技术所涉及矢量的示意图，以下结合图2对利用Vertex Shader技术实现顶点位置和光照计算的流程进行详细说明。

基于Vertex Shader技术，在获知目标3D图像之后，可以基于目标3D图像指定各个顶点的位置、法向量的位置；此外，还可以指定单独的光源位置，并指定镜面反射和漫反射的影响。进一步的，为了计算漫反射，还需要计算传入光线和表面法线之间的角度，为了计算镜面反射，还需要计算反射方向和查看方向之间的角度；因此，基于传入光线和表面法线之间的角度，以及反射方向和查看方向之间的角度，需要变换传入法向量，并进行归一化处理。

基于上述情况，将顶点的位置转换为眼睛坐标下顶点的位置，计算当前点到光源的位置的传入光线位置矢量，并利用传入法向量和入射光向量结果，计算反射矢量；查看位置矢量，即眼睛坐标取负。进一步的，假定入射光是根据一个余弦函数在所有方向上散射的，则可以建立起漫反射模型；将镜面反射的初始值设为0，如果光线方向和表面法向量之间的角度小于90°，则只计算非0的镜面值。进一步的，锐化高光效果，确保只有矢量与查看矢量几乎相同的区域才有高光效果。此外，还需要计算漫反射和镜面反射的加和。

经过上述步骤的处理后，即可以利用Vertex Shader技术实现顶点位置和光照的计算流程，从而为波浪型动态图像的显示提供顶点位置和光照信息。

本发明实施例中，在将目标3D图像转换为能够显示的二维图像之后，还需要基于Vertex Shader技术将二维图像传入纹理坐标，并计算纹理顶点的位置。进一步的，还需要基于Pixel Shader技术，利用一致变量扰动纹理坐标。

其中，Pixel Shader技术主要应用了一个正弦函数，该正弦函数会在纹理查找操作之前扰动纹理坐标。进一步的，应用程序还会为每一帧增加一个一致变量，该一致变量的值将作为Pixel Shader技术对纹理坐标进行扰动的基础；因此，通过在每一帧上增加一个一致变量，就可以实现动态波浪的效果。

综上所述，本发明实施例中，基于Pixel Shader技术，可以利用一致变量生成正弦函数，并通过该正弦函数扰动纹理坐标，以实现动态波浪的效果。进一步的，为了使正弦提供更为准确的结果，正弦函数的正弦值需要确保在[-π/2，π/2]之间。此外，由于一致变量可以控制扰动的量以及频率等，因此，该一致变量具体包括但不限于：扰动频率；扰动振幅；扰动因子。

以下对扰动频率、扰动振幅以及扰动因子进行进一步的说明。

首先，计算x方向的扰动因子，为达到此目的，要先计算局部变量，该局部变量是纹理坐标s和t的线性函数，最终乘以频率的x值，以控制震动的快慢。其次，将计算的局部变量的结果转换到[-π/2，π/2]之内。其次，使用正弦泰勒级数的前两项来计算正弦值，之后通过计算结果乘以振幅的x部分；例如x为0.05，则意味着扰动改变的坐标幅度不超过±0.05。之后，计算y方向的扰动因子；其中，y方向的扰动因子和x方向的扰动因子相同，即s和t纹理坐标值的一个线性函数，但是为了避免对称，所使用函数尽可能不相同。

在本发明实施例的一种具体实现方式中，该扰动频率具体为：（4，4）；该扰动振幅具体为：（0.05，0.05）；该扰动因子的初始值具体为：1。

基于Pixel Shader技术，基于上述一致变量（如扰动频率、扰动振幅、扰动因子等），可以利用一致变量扰动纹理坐标，即执行纹理访问，并计算出片元最终的颜色值。进一步的，在得到扰动后的二维图像之后，由于扰动后的二维图像为动态波纹效果的图形，因此，基于扰动后的二维图像可直接得到具有动态波纹效果的图形，即画出图形实现动态波纹的效果。

本发明实施例中，移动终端将坐标（x，y，z）一次性放入到本移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。

具体的，随着移动终端的硬件水平的不断提高，目前绝大多数的移动终端均配备由SIMD（Single Instruction Multiple Data，单指令多数据流）指令的协处理器，例如ARM（Advanced RISC Machines，高级精简指令集制造）中的NEON指令集。基于此，本发明实施例中，在上述处理过程中，可以将坐标（x，y，z）一次性放入到协处理器的128bit寄存器中，通过SIMD指令进行计算，从而可以大幅提升效率，比如VMUL（向量乘法），VADD（向量加法）等。

综上所述，与现有技术相比，本发明实施例至少具有以下优点：

（1）现有技术中，只能实现旋转、缩放等简单效果。本发明实施例中，能够在移动终端上显示波浪型动态图像，实现立体3D动态波浪效果，从而渲染出真实动态波浪效果，并能够实现动态实时渲染。进一步的，可以实现动态壁纸的多样性、沉浸感；其只需要简单修改Shader的参数，就实现出多重动态的波浪型动态壁纸，更能满足人们的要求，提升移动终端的用户体验。

（2）现有技术中，需要占用大量的CPU控件。本发明实施例中，大部分的运算处理都是在GPU上进行的，无需担心内存不够用的问题，从而减轻CPU运算压力和负担，减少内存消耗。进一步的，使用具有可编程能力的图形硬件，可以在Shader内部指定动画效果，同时使用移动终端中的SIMD指令协处理器，可以减少CPU的负担，并减少了应用程序中的代码。

（3）现有技术中，无法根据用户的需要，实现多样的动态壁纸的方式。本发明实施例中，可以根据需要动态调整参数，例如，可以调整贴图、更换振幅、频率等，从而解决动态壁纸画面多样化的问题。进一步的，通过交互操作，用户可以任意的修改贴图、振幅等参数，甚至可以改变动态壁纸的呈现形式，从而避免审美疲劳的出现，满足了娱乐身心的需要。

实施例二

基于与上述方法同样的发明构思，本发明实施例中还提供了一种移动终端，如图3所示，该移动终端具体包括：转换模块11，用于将目标3D图像转换为能够显示的二维图像；处理模块12，用于将所述二维图像传入纹理坐标；扰动模块13，用于利用一致变量扰动所述纹理坐标；获得模块14，用于基于扰动后的二维图像，获得具有动态波纹效果的图形；显示模块15，用于基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。

所述扰动模块13，具体用于利用所述一致变量生成正弦函数，通过所述正弦函数扰动所述纹理坐标；其中，所述正弦函数的正弦值在[-π/2，π/2]之间。本发明实施例中，所述一致变量具体包括：扰动频率；扰动振幅；扰动因子。所述扰动频率具体为：（4，4）；所述扰动振幅具体为：（0.05，0.05）；所述扰动因子的初始值具体为：1。

本发明实施例中，所述显示模块15，具体用于将左眼对应的具有动态波纹效果的图形和右眼对应的具有动态波纹效果的图形输入到所述移动终端的3D屏幕上，以在所述移动终端上显示波浪型动态图像。

本发明实施例中，所述处理模块12，还用于将坐标（x，y，z）一次性放入到所述移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。

其中，本发明装置的各个模块可以集成于一体，也可以分离部署。上述模块可以合并为一个模块，也可以进一步拆分成多个子模块。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述的方法。

本领域技术人员可以理解附图只是一个优选实施例的示意图，附图中的模块或流程并不一定是实施本发明所必须的。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

以上公开的仅为本发明的几个具体实施例，但是，本发明并非局限于此，任何本领域的技术人员能思之的变化都应落入本发明的保护范围。

Claims (12)

1.一种波浪型动态图像的显示方法，其特征在于，该方法包括以下步骤：

移动终端将目标3D图像转换为能够显示的二维图像；

所述移动终端将所述二维图像传入纹理坐标；

所述移动终端利用一致变量扰动所述纹理坐标；

所述移动终端基于扰动后的二维图像，获得具有动态波纹效果的图形；

所述移动终端基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。

2.如权利要求1所述的方法，其特征在于，所述移动终端利用一致变量扰动所述纹理坐标的过程，具体包括：

所述移动终端利用所述一致变量生成正弦函数，并通过所述正弦函数扰动所述纹理坐标；其中，所述正弦函数的正弦值在[-π/2，π/2]之间。

3.如权利要求1或2所述的方法，其特征在于，所述一致变量具体包括：扰动频率；扰动振幅；扰动因子。

4.如权利要求3所述的方法，其特征在于，所述扰动频率具体为：（4，4）；所述扰动振幅具体为：（0.05，0.05）；所述扰动因子的初始值具体为：1。

5.如权利要求1所述的方法，其特征在于，所述移动终端基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像，具体包括：

所述移动终端将左眼对应的具有动态波纹效果的图形和右眼对应的具有动态波纹效果的图形输入到所述移动终端的3D屏幕上，以在所述移动终端上显示波浪型动态图像。

6.如权利要求1、2或5所述的方法，其特征在于，该方法进一步包括：

所述移动终端将坐标（x，y，z）一次性放入到本移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。

7.一种移动终端，其特征在于，所述移动终端包括：

转换模块，用于将目标3D图像转换为能够显示的二维图像；

处理模块，用于将所述二维图像传入纹理坐标；

扰动模块，用于利用一致变量扰动所述纹理坐标；

获得模块，用于基于扰动后的二维图像，获得具有动态波纹效果的图形；

显示模块，用于基于所述具有动态波纹效果的图形，在所述移动终端上显示波浪型动态图像。

8.如权利要求7所述的移动终端，其特征在于，

所述扰动模块，具体用于利用所述一致变量生成正弦函数，通过所述正弦函数扰动所述纹理坐标；其中，所述正弦函数的正弦值在[-π/2，π/2]之间。

9.如权利要求7或8所述的移动终端，其特征在于，所述一致变量具体包括：扰动频率；扰动振幅；扰动因子。

10.如权利要求9所述的移动终端，其特征在于，

所述扰动频率具体为：（4，4）；所述扰动振幅具体为：（0.05，0.05）；所述扰动因子的初始值具体为：1。

11.如权利要求7所述的移动终端，其特征在于，

所述显示模块，具体用于将左眼对应的具有动态波纹效果的图形和右眼对应的具有动态波纹效果的图形输入到所述移动终端的3D屏幕上，以在所述移动终端上显示波浪型动态图像。

12.如权利要求7、8、或11所述的移动终端，其特征在于，

所述处理模块，还用于将坐标（x，y，z）一次性放入到所述移动终端的单指令多数据流SIMD指令的协处理器中，并通过SIMD指令进行计算。