CN113487708B - 基于图形学的流动动画实现方法、存储介质及终端设备 - Google Patents

Abstract

本申请公开了基于图形学的流动动画实现方法、存储介质及终端设备，所述的方法包括：获取目标对象中的待配置流动动画的目标部件；获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。本实施例通过将纹理图像映射到待配置流动动画的目标部件上，并设置纹理偏移参数，这样在基于纹理偏移参数调整渲染所述纹理图像时，可以在目标部件形成流动动画材质，从而可以突显目标部件的可视化效果。

Description

基于图形学的流动动画实现方法、存储介质及终端设备

技术领域

本申请涉及计算机技术领域，特别涉及一种基于图形学的流动动画实现方法、存储介质及终端设备。

背景技术

随着可视化技术的不断发展，可以实现城市可视化以及应急可视化展示等。目前的可视化中业务展示模型普遍存在显示效果单调的问题，无法突显3D模型的显示效果，从而无法满足智慧城市可视化以及应急可视化等需要突显3D模型显示效果的可视化领域的需求。例如，在一个区域内有一片需要突出显示的建筑模型，或者是需要突显一个片区域时，现有可视化方法无法将该需要突显的建筑模型或区域与其他建筑模型或区域区分。

因而现有技术还有待改进和提高。

发明内容

本申请要解决的技术问题在于，针对现有技术的不足，提供一种基于图形学的流动动画实现方法、存储介质及终端设备。

为了解决上述技术问题，本申请实施例第一方面提供了一种基于图形学的流动动画实现方法，所述的方法包括：

获取目标对象中的待配置流动动画的目标部件；

获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；

获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。

所述基于图形学的流动动画实现方法，其中，所述获取目标对象中的待配置流动动画的目标部件之前，所述方法包括：

预先建立所述目标对象对应的三维模型，其中，所述三维模型包括若干网格模型对象；

在所述三维模型中选取待配置流动动画的网格模型对象，并为选取到的网络模型对象配置预设标识。

所述基于图形学的流动动画实现方法，其中，所述获取目标对象中的待配置流动动画的目标部件具体包括：

获取目标对象对应的三维模型中携带有预设标识的网络模型对象，并将获取到网格模型对象作为待配置流动动画的目标部件。

所述基于图形学的流动动画实现方法，其中，所述待配置流动动画的目标部件包括若干目标部件，并且若干目标部件中的各目标部件均携带有预设标识。

所述基于图形学的流动动画实现方法，其中，所述将所述纹理图像映射至所述目标部件的外表面具体包括：

对于目标部件的外表面上的每个部件点，在所述纹理图像中选取该部件点对应的纹理坐标；

获取该纹理坐标对应的RGB值，并通过着色器将所述RGB值渲染至该部件点，以将所述纹理图像映射至所述目标部件的外表面。

所述基于图形学的流动动画实现方法，其中，所述纹理偏移参数包括纹理横向渲染方式、纹理纵向渲染方式、纹理重复渲染次数以及纹理偏移量。

所述基于图形学的流动动画实现方法，其中，所述纹理横向渲染方式和纹理纵向渲染方式均为重复模式，所述纹理偏移量配置有预设步长。

本申请实施例第二方面提供了一种基于图形学的流动动画实现装置，所述的装置包括：

获取模块，用于获取目标对象中的待配置流动动画的目标部件；

映射模块，用于获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；

渲染模块，用于获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。

本申请实施例第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上任一所述的基于图形学的流动动画实现方法中的步骤。

本申请实施例第四方面提供了一种终端设备，其包括：处理器、存储器及通信总线；所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如上任一所述的基于图形学的流动动画实现方法中的步骤。

有益效果：与现有技术相比，本申请提供了一种基于图形学的流动动画实现方法，所述的方法包括：获取目标对象中的待配置流动动画的目标部件；获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。本实施例通过将纹理图像映射到待配置流动动画的目标部件上，并设置纹理偏移参数，这样在基于纹理偏移参数调整渲染所述纹理图像时，可以在目标部件形成流动动画材质，从而可以突显目标部件的可视化效果。

附图说明

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

图1为本申请提供的基于图形学的流动动画实现方法的流程图。

图2为本申请提供的基于图形学的流动动画实现方法中映射纹理图像后的目标部件的示意图。

图3为本申请提供的基于图形学的流动动画实现装置的结构原理图。

图4为本申请提供的终端设备的结构原理图。

具体实施方式

本申请提供一种基于图形学的流动动画实现方法、存储介质及终端设备，为使本申请的目的、技术方案及效果更加清楚、明确，以下参照附图并举实施例对本申请进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

具体实现中，本申请实施例中描述的终端设备包括但不限于诸如具有触摸敏感表面(例如，触摸显示屏和/或触摸板)的移动电话，膝上形计算机或平板计算机之类的其他便携式设备。还应该理解的是，在某些实施例中，所述设备并非便携式通讯设备，而是具有触摸敏感表面(例如，触摸显示屏和/或触摸板)的台式计算机。

在接下来的讨论中，描述了包括显示器和触摸敏感表面的终端设备。然而，应当理解的是，终端设备还可以包括诸如物理键盘、鼠标和/或控制杆的一个或多个其他物理用户接口设备。

终端设备支持各种应用程序，例如以下中的一个或多个：绘图应用程序、演示应用程序、文字处理应用程序、视频会议应用程序、盘刻录应用程序、电子表格应用程序、游戏应用程序、电话应用程序、视频会议应用程序、电子邮件由于程序、即时消息收发应用程序、锻炼支持应用程序、照片管理应用程序、数据相机应用程序、数字摄像机应用程序、web浏览应用程序、数字音乐播放器应用程序和/或数字视频播放应用程序等。

可以在终端设备上执行的各种应用程序可以使用诸如触摸敏感表面的至少一个公共物理用户接口设备。可以在应用程序之间和/或相应应用程序内调整和/或改变触摸敏感表面的第一或多个功能以及终端上显示的相应信息。这样，终端的公共物理框架(例如，触摸敏感表面)可以支持具有对用户而言直观且透明的用户界面的各种应用程序。

应理解，本实施例中各步骤的序号和大小并不意味着执行顺序的先后，各过程的执行顺序以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

发明人经过研究发现，随着可视化技术的不断发展，可以实现城市可视化以及应急可视化展示等。目前的可视化中业务展示模型普遍存在显示效果单调的问题，无法突显3D模型的显示效果，从而无法满足智慧城市可视化以及应急可视化等需要突显3D模型显示效果的可视化领域的需求。例如，在一个区域内有一片需要突出显示的建筑模型，或者是需要突显一个片区域时，现有可视化方法无法将该需要突显的建筑模型或区域与其他建筑模型或区域区分。

为了解决上述问题，在本申请实施例中，获取目标对象中的待配置流动动画的目标部件；获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。本实施例通过将纹理图像映射到待配置流动动画的目标部件上，并设置纹理偏移参数，这样在基于纹理偏移参数调整渲染所述纹理图像时，可以在目标部件形成流动动画材质，从而可以突显目标部件的可视化效果。

下面结合附图，通过对实施例的描述，对申请内容作进一步说明。

本实施例提供了一种基于图形学的流动动画实现方法，所述方法可以应用mapboxgl.js、three.js和blender，其中，mapboxgl.js和three.js均是世界级开源图形引擎，mapboxgl.js是webgis领域的地图开源引擎，用作地理信系统。three.js是web端通用引擎，有丰富的社区开发组件和积累，高度抽象的图形绘制和拓展丰富的接口。Blender是一个开源的跨平台全能三维动画制作软件，具备直接导出在web端兼容性很高的.glb格式模型的能力，并且提供良好的稳定材质输出。这样采用开源技术能够在最短时间内搭建webgis系统，具备很好的扩展性。mapboxgl.js可以将three.js作为一个图层单独渲染在地图中，而three.js丰富的接口支持图形学底层接口webgl的开发，利用webgl的管线编程可以调用GPU(图形加速器)的并行渲染力量计算模拟出逼真的水体模拟特效，从而使mapboxgl.js搭建的webgis系统拥有直通底层的能力，利用GPU(图形加速器)渲染出高效稳定特效。

如图1所示，本实施例提供的基于图形学的流动动画实现方法具体包括：

S10、获取目标对象中的待配置流动动画的目标部件。

具体地，所述目标部件包含于目标对象内，目标部件可以为一个，也可以为多个。可以理解的时，目标对象可以存在一个需要配置流动动画的部件，也可以存在多个需要配置流动动画的部件。由此，在获取目标对象中的待配置流动动画的目标部件时，选取目标对象中所有需要配置流动动画的目标部件，其中，目标对象包括的所有目标部件均携带有预设标识，以便于可以通过预设标识来选取目标对象中的待配置流动动画的目标部件。可以理解的是，所述待配置流动动画的目标部件可以包括若干目标部件，并且若干目标部件中的各目标部件均携带有预设标识。

在本实施例的一个实现方式中，所述预设标识为预先配置于目标部件。相应的，所述获取目标对象中的待配置流动动画的目标部件之前，所述方法包括：

预先建立所述目标对象对应的三维模型，其中，所述三维模型包括若干网格模型对象；

在所述三维模型中选取待配置流动动画的网格模型对象，并为选取到的网络模型对象配置预设标识。

具体地，三维模型为目标对象的数据模型，三维模型包括若按网格模型对象，若干网格模型对象中的每个网格模型对象对应目标对象中的一个部件。预设标识用于反映网络模型对象的材质，例如，预设标识可以采用网络模型对象的材质名称，那么所有待配置流动动画的网络模型对象均配置有相同的材质名称，这样在选取目标对象时，可以使用three.js进行材质名称调用，以调取所有配置有预设标识的网络模型对象，从而可以选取到待配置流动动画的网格模型对象。在本实施例的一个具体实现方式中，如图2所示，可以在待配置流动动画的网络模型对象的材质名称后面添加预设后缀，通过预设后缀作为预设标识，在选取目标部件时，可以使用blender导出成glb格式之后，使用mesh.children[]即可查找到带有预设后缀的材质名称，从而得到待配置流动动画的网络模型对象。

基于此，在本实施例的一个实现方式中，所述获取目标对象中的待配置流动动画的目标部件具体包括：

获取目标对象对应的三维模型中携带有预设标识的网络模型对象，并将获取到网格模型对象作为待配置流动动画的目标部件。

具体地，三维模型可以是通过Blender制作的，并且三维模型包括若干网络模型对象。在三维模型中选取携带预设标识的网络模型对象时，可以或者3D模型材质的属性信息，例如，材质名称；若获取到的属性信息中携带有预设标识，那么该网络模型对象为待配置流动动画的网格模型对象；反之，若获取到的属性信息中未携带有预设标识，那么该网络模型对象不为待配置流动动画的网格模型对象。例如，预设标识为texanim，那么包含有texanim的属性信息对应给的网络模型对象为待配置流动动画的网格模型对象。由此，通过遍历三维模型中的各网络模型对象的属性信息可以选取到三维模型中所有待配置流动动画的网格模型对象。

S20、获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面。

具体地，所述纹理图像为待映射至目标部件外表面的图像，纹理图像可以为一个，也可以为多个，当纹理图像为一个时，该纹理图像覆盖目标部件的外表面，当纹理图像为多个时，多张纹理图像均覆盖于目标部件的外表面，并且多张纹理图像形成的覆盖区域与目标部件的外表面区域相同，以使得目标部件的外表面上的每个区域点均存在一个纹理图像点与该区域点相匹配，并且该多张纹理图像中仅存在一张纹理图像包含该纹理像素点。此外，在实际应用中，当目标部件为若干目标部件时，各目标部件均各自对应有纹理图像，并且各目标部件各自对应的纹理图像可以相同，或者是，部分目标部件对应的纹理图像相同，部分目标部件对应的纹理图像不同，或者时，各目标部件各自对应的纹理图像互不相同等。例如，如图2所示，目标部件为由两个三角形组成的矩形区域，那么可以选取一张真实时间的图片作为目标部件对应的纹理图像，将纹理图像贴到矩形区域，以使得矩形区域的外表面呈现该纹理图像。

在本实施例的一个实现方式中，所述将所述纹理图像映射至所述目标部件的外表面具体包括：

对于目标部件的外表面上的每个部件点，在所述纹理图像中选取该部件点对应的纹理坐标；

获取该纹理坐标对应的RGB值，并通过着色器将所述RGB值渲染至该部件点，以将所述纹理图像映射至所述目标部件的外表面。

具体地，纹理图像中的每个纹理像素点的颜色均使用RGB格式编码，并且每个纹理像素点均对应一纹理坐标，并且各纹理像素点各自对应的纹理坐标互不相同。此外，目标部件的材质中可以配置有配置参数，例如，map参数，在Three.js的材质中为配置参数赋值，并通过异步加载纹理图像资源，并将纹理图像中纹理坐标对应的RGB值赋予该配置参数，这样在着色器渲染中可以获取到该纹理坐标对应的RGB值，以便于基于RGB值对纹理坐标对应的部件点进行渲染。

S30、获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理，以在所述目标部件表面形成流动动画。

具体地，所述纹理偏移参数包括纹理横向渲染方式、纹理纵向渲染方式、纹理重复渲染次数以及纹理偏移量，其中，所述纹理横向渲染方式和纹理纵向渲染方式均为重复模式，例如，在THREE中设置纹理的wrapS或者wrapT参数为THREE.RepeatWrapping，便于后续对纹理进行偏移。纹理重复渲染次数可以通过在THREE中设置纹理的repeat.x或者repeat.y参数来设置的，所述纹理偏移量用于配置动画流动方向和流动速度，其中，纹理偏移量可以横向x和纵向y，并且在全局动画中的每一帧渲染过程中给纹理的offset参数值增加固定步长，换句话说，所述纹理偏移量配置有预设步长。

综上所述，本实施例提供了一种基于图形学的流动动画实现方法，所述的方法包括：获取目标对象中的待配置流动动画的目标部件；获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。本实施例通过将纹理图像映射到待配置流动动画的目标部件上，并设置纹理偏移参数，这样在基于纹理偏移参数调整渲染所述纹理图像时，可以在目标部件形成流动动画材质，从而可以突显目标部件的可视化效果。

基于上述基于图形学的流动动画实现方法，本实施例提供了一种基于图形学的流动动画实现装置，如图3所示，所述的装置包括：

获取模块100，用于获取目标对象中的待配置流动动画的目标部件；

映射模块200，用于获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；

渲染模块300，用于获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画。

基于上述基于图形学的流动动画实现方法，本实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如上述实施例所述的基于图形学的流动动画实现方法中的步骤。

基于上述基于图形学的流动动画实现方法，本申请还提供了一种终端设备，如图4所示，其包括至少一个处理器(processor)20；显示屏21；以及存储器(memory)22，还可以包括通信接口(Communications Interface)23和总线24。其中，处理器20、显示屏21、存储器22和通信接口23可以通过总线24完成相互间的通信。显示屏21设置为显示初始设置模式中预设的用户引导界面。通信接口23可以传输信息。处理器20可以调用存储器22中的逻辑指令，以执行上述实施例中的方法。

此外，上述的存储器22中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。

存储器22作为一种计算机可读存储介质，可设置为存储软件程序、计算机可执行程序，如本公开实施例中的方法对应的程序指令或模块。处理器20通过运行存储在存储器22中的软件程序、指令或模块，从而执行功能应用以及数据处理，即实现上述实施例中的方法。

存储器22可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端设备的使用所创建的数据等。此外，存储器22可以包括高速随机存取存储器，还可以包括非易失性存储器。例如，U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等多种可以存储程序代码的介质，也可以是暂态存储介质。

此外，上述存储介质以及终端设备中的多条指令处理器加载并执行的具体过程在上述方法中已经详细说明，在这里就不再一一陈述。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (4)

1.一种基于图形学的流动动画实现方法，其特征在于，所述的方法包括：

获取目标对象中的待配置流动动画的目标部件，其中，所述待配置流动动画的目标部件包括若干目标部件，并且若干目标部件中的各目标部件均携带有预设标识；

获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；

获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画，其中，所述纹理偏移参数包括纹理横向渲染方式、纹理纵向渲染方式、纹理重复渲染次数以及纹理偏移量；所述纹理横向渲染方式和纹理纵向渲染方式均为重复模式，所述纹理偏移量配置有预设步长；

其中，所述获取目标对象中的待配置流动动画的目标部件之前，所述方法包括：

预先建立所述目标对象对应的三维模型，其中，所述三维模型包括若干网格模型对象；

在所述三维模型中选取待配置流动动画的网格模型对象，并为选取到的网络模型对象配置预设标识；

所述获取目标对象中的待配置流动动画的目标部件具体包括：

获取目标对象对应的三维模型中携带有预设标识的网络模型对象，并将获取到网格模型对象作为待配置流动动画的目标部件；

所述将所述纹理图像映射至所述目标部件的外表面具体包括：

对于目标部件的外表面上的每个部件点，在所述纹理图像中选取该部件点对应的纹理坐标；

获取该纹理坐标对应的RGB值，并通过着色器将所述RGB值渲染至该部件点，以将所述纹理图像映射至所述目标部件的外表面。

2.一种基于图形学的流动动画实现装置，其特征在于，所述的装置包括：

获取模块，用于获取目标对象中的待配置流动动画的目标部件，其中，所述待配置流动动画的目标部件包括若干目标部件，并且若干目标部件中的各目标部件均携带有预设标识；

映射模块，用于获取目标部件对应的纹理图像，并将所述纹理图像映射至所述目标部件的外表面；

渲染模块，用于获取所述目标部件对应的纹理偏移参数，并基于纹理偏移参数调整渲染所述纹理图像，以在所述目标部件表面形成流动动画，其中，所述纹理偏移参数包括纹理横向渲染方式、纹理纵向渲染方式、纹理重复渲染次数以及纹理偏移量；所述纹理横向渲染方式和纹理纵向渲染方式均为重复模式，所述纹理偏移量配置有预设步长；

所述获取目标对象中的待配置流动动画的目标部件之前，所述装置还用于：

预先建立所述目标对象对应的三维模型，其中，所述三维模型包括若干网格模型对象；

在所述三维模型中选取待配置流动动画的网格模型对象，并为选取到的网络模型对象配置预设标识；

所述获取目标对象中的待配置流动动画的目标部件具体包括：

获取目标对象对应的三维模型中携带有预设标识的网络模型对象，并将获取到网格模型对象作为待配置流动动画的目标部件；

所述将所述纹理图像映射至所述目标部件的外表面具体包括：

对于目标部件的外表面上的每个部件点，在所述纹理图像中选取该部件点对应的纹理坐标；

获取该纹理坐标对应的RGB值，并通过着色器将所述RGB值渲染至该部件点，以将所述纹理图像映射至所述目标部件的外表面。

3.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现如权利要求1所述的基于图形学的流动动画实现方法中的步骤。

4.一种终端设备，其特征在于，包括：处理器、存储器及通信总线;所述存储器上存储有可被所述处理器执行的计算机可读程序；

所述通信总线实现处理器和存储器之间的连接通信；

所述处理器执行所述计算机可读程序时实现如权利要求1所述的基于图形学的流动动画实现方法中的步骤。