一种提高前端页面加载3D模型速度的方法、系统

摘要

本发明涉及计算机数据处理领域，特别是涉及一种提高前端页面加载3D模型速度的方法、系统，以及执行该方法的计算机设备。该方法包括如下步骤：步骤一：获取待加载的3D模型的源文件，对源文件进行转码；步骤二：通过转码后的模型文件进行压缩，缩小文件体积；步骤三：对解压后的glTF格式的新模型文件进行优化，得到js格式的脚本文件；步骤四：将封装好的js格式的脚本文件通过渲染引擎实现加载；步骤五：在浏览器中为文件提供3D加速渲染，实现在前端页面加载3D模型的任务。该系统包括：文件转码模块、文件压缩模块、文件优化模块、文件加载模块，以及加速渲染模块。本发明解决了3D模型文件在前端页面加载过程中速度太慢，耗时过长的问题。

说明书

技术领域

本发明涉及计算机数据处理领域，特别是涉及一种提高前端页面加载3D模型速度的方法、系统，以及执行该方法的计算机设备。

背景技术

在现有的某些应用场景下，需要通过浏览器打开各种不同格式的3D模型文件，实现在网页上展示3D模型的效果。由于受到互联网带宽等多个方面的影响，前端页面在加载3D模型时的速度比较慢，用户等待的时间比较长。

出现3D模型加载速度较慢的原因除了文件的网络传输速率限制之外，还与3D模型文件以及加载文件的方法和系统的限制有关。现有的3D模型有成百上千种不同的文件格式可以选择，每种文件格式有不同的功能和用途，这些文件格式的复杂程度也不同。而需要同时支持这么多不同的文件格式，这对文件加载引擎的性能提出挑战。此外，一些相对小众或特殊的文件格式难以使用或者没有得到支持，也会对3D模型的加载过程带来难度。并且在通常情况下，通过引擎将3D模型解码成可展示的件格式，解码后的文件体积越小，3D模型的加载速度就越快，而部分文件在解码后的往往会出现文件体积较大的现象。最后，浏览器本身也是3D模型在网页中加载速度慢的一个重要原因。

发明内容

基于此，有必要针对3D模型文件在前端页面加载过程中速度太慢，耗时过长的问题，提供一种提高前端页面加载3D模型速度的方法、系统。满意日益增长的客户需求，提高用户的使用体验。

本发明提供了一种提高前端页面加载3D模型速度的方法，该方法包括如下步骤：

步骤一：获取待加载的3D模型的源文件，将源文件转换成通用的obj格式的模型文件，并将obj格式的模型文件转码得到glTF格式的模型文件。

步骤二：通过三维图像编辑软件或插件对glTF格式的模型文件进行压缩，然后对压缩后的文件进行解压得到一个体积减小的glTF格式的新模型文件。

步骤三：对解压后的glTF格式的新模型文件进行优化，保留3D模型加载过程中的必要插件；并将不同浏览器中用于加载3D模型的必要适配文件封装到优化后的glTF格式的新模型文件中，得到js格式的脚本文件。

步骤四：将封装好的js格式的脚本文件通过渲染引擎实现加载，并输出为基于HTML5 Canwas的图片格式的文件。

步骤五：在浏览器中，采用WebGL绘图协议为基于HTML5 Canwas的图片格式的文件提供3D加速渲染，展示图片格式的文件；实现在前端页面加载3D模型的任务。

本发明通过对不同格式的额3D模型文件两步解码，实现在不改变原始文件内容的前提下，对最终用于加载的模型文件的格式进行统一，并通过压缩和解压过程将模型文件的的体积减小，进而能够有效提高模型文件的加载速度，为了进一步提升模型文件的加载速率，本发明还对glTF格式的模型文件进行优化，解封模型文件后的对文件内容进行有针对性的增减，并在优化完成后重新封装。最终优化后的模型文件经渲染后能够在各种不同类型的浏览器上展现，模型记载速率明显提升，对不同浏览器的兼容性也更好。

作为本发明进一步地改进，步骤一通过Blender软件完成，利用Blender软件中的格式转码功能模块，实现将不同格式的3D模型的源文件转码为通用的obj格式的模型文件，再转码得到glTF格式的模型文件的过程。

作为本发明进一步地改进，步骤二中对glTF格式的模型文件进行压缩的过程通过Blender软件或名为“Draco”的3D图形开源压缩库完成，并通过JavaScript 3D library引擎里的DRACOLoader加载器进行解压，得到新模型文件。

作为本发明进一步地改进，步骤二中的解压过程还可以通过基于javascript或phython的程序代码实现。

作为本发明进一步地改进，步骤三中，新模型文件的封装过程采用JavaScript 3Dlibrary引擎里的API完成，封装后的脚本文件运行过程中通过传参的方式对不同插件进行调用。

作为本发明进一步地改进，封装后的脚本文件中包含的用于加载所述3D模型的插件至少包括：GLTFLoader，KTXLoader，RGBELoader和Jquery。

本发明还包括一种提高前端页面加载3D模型速度的系统，该系统采用如前述的提高前端页面加载3D模型速度的方法，实现对不同格式的3D模型文件的加载过程，缩短3D模型文件中在浏览器前端页面中的加载时长；该系统包括：文件转码模块、文件压缩模块、文件优化模块、文件加载模块，以及加速渲染模块。

其中，文件转码模块用于将待加载的3D模型的源文件先转换成通用的obj格式的模型文件，然后再转码成glTF格式的模型文件进行输出。

文件压缩模块用于对文件转码模块输出glTF格式的模型文件进行压缩，然后再解压成一个体积减小的glTF格式的新模型文件。压缩过程采用Blender软件或名为“Draco”的3D图形开源压缩库完成；文件压缩模块输出解压后的新模型文件。

文件优化模块用于对文件压缩模块输出的glTF格式的新模型文件进行优化。优化过程具体包括：对新模型文件进行解封；剔除解封后的文件中浏览器加载过程中非必要的文件，保留所述3D模型加载过程中的必要插件；并将不同浏览器加载所述3D模型过程中必要的适配文件添加到解封后的文件中；最后对优化后的文件进行封装，得到js格式的脚本文件。封装过程通过JavaScript3D library引擎里的API完成，封装后的脚本文件中包含的用于加载3D模型的插件至少包括：GLTFLoader，KTXLoader，RGBELoader和Jquery。

文件加载模块用于将文件优化模块封装好的js格式的脚本文件通过渲染引擎实现加载，并输出为基于HTML5 Canwas的图片格式的文件。

加速渲染模块用于在浏览器中采用WebGL绘图协议，为文件加载模块输出的基于HTML5 Canwas的图片格式的文件提供3D加速渲染服务，并展示图片格式的文件；进而实现在前端页面加载3D模型的任务。

作为本发明进一步地改进，文件转码模块通过Blender软件完成不同格式的3D模型源文件的转码过程；文件转码模块为运行Blender软件的模块，或是调用Blender软件实现文件转码过程，并直接输出转码后的文件的模块。

作为本发明进一步地改进，文件压缩模块中的文件压缩过程通过Blender软件或名为“Draco”的3D图形开源压缩库完成，并通过JavaScript 3D library引擎里的DRACOLoader加载器进行解压，得到新模型文件；文件压缩模块为运行相应的压缩软件和解压软件的模块，或者文件压缩模块为调用相应的软件和代码实现压缩和解压功能，并输出软件和代码的压缩和解压处理结果的模块。

本发明针对设计的新的3D模型加载方法设计了专用的文件加载系统，实现对不同功能模块的快速协调应用，进而达到在不同浏览器中快速加载各种不同格式的3D模型文件的效果。其中，本发明的系统可以设计成一个封闭的系统，在系统内部完成所有加载3D模型的步骤，也可以设计成一个开放的系统，通过有序调用现有设备和软件中的功能模块，实现加载3D模型的功能。

本发明还包括一种计算机设备，该计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序。处理器执行计算机程序时实现如前述的提高前端页面加载3D模型速度的方法的步骤。

在本发明中提供的一种提高页面加载3D模型速度的方法也可以计算机设备的形成实现；通过计算机设备执行相应方法的步骤。

本发明提供的一种提高前端页面加载3D模型速度的方法和系统，具有如下有益效果：

本发明中的方法不仅实现了加速前端页面加载3D模型文件过程的效果，使得加载时间显著缩短，对于大部分采用常规方法需要加载10秒左右的的文件，只需要3-5秒即可完成加载过程。而且具有更稳定的模型展示效果；模型展现过程中的处理速度较快，模型展示流畅度高，不会出现卡屏的现象。使得用户的使用体验大大提高。

本发明提供的方法可以支持现有的各类型的3D模型文件，文件兼容性更强，同时还可以在不同的浏览器和不同终端设备以及不同的系统上实现加载，对终端、软件和系统的适配性更强。

附图说明

图1为本发明实施例1中一种提高前端页面加载3D模型速度的方法的流程图；

图2为本发明实施例2中一种提高前端页面加载3D模型速度的系统的拓扑图。

具体实施方式

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

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“或/及”包括一个或多个相关的所列项目的任意的和所有的组合。

实施例1

本实施例提供了一种提高前端页面加载3D模型速度的方法，该方法包括如下步骤：

步骤一：获取待加载的3D模型的源文件，将源文件转换成通用的obj格式的模型文件，并将obj格式的模型文件转码得到glTF格式的模型文件。

本实施例中，文件转码过程采用Blender软件实施，整个转码过程在软件内部完成。利用Blender软件中的格式转码功能模块，实现将不同格式的3D模型的源文件转码为通用的obj格式的模型文件，再转码得到glTF格式的模型文件的过程。由于Blendar是一款开源的完全免费的跨平台的三维软件，能够支持各种常用的不同格式的3D模型文件，完全可以应对文件的格式转换需求，通过本实施例中转码过程，可以保留各类不同格式文件中包含的完整信息。

步骤二：通过三维图像编辑软件或插件对glTF格式的模型文件进行压缩，然后对压缩后的文件进行解压得到一个体积减小的glTF格式的新模型文件。

本实施例中，对glTF格式的模型文件进行压缩的过程通过Blender软件完成，并通过JavaScript 3D library(three.js)引擎里的DRACOLoader加载器进行解压，得到新模型文件。经过压缩和解码后的文件，相对于格式转换后得到文件而言，体积明显减小，因此可以降低后期3D模型加载过程中的数据压力。

在其它实施例中，还可以通过Google发布的名为“Draco”的3D图形开源压缩库，实现本实施例中的压缩过程，得到glTF格式的文件，不过相对而言，第一种方式操作过程更加方便快捷。同时，本实施例中的解压过程除了采用three.js引擎之外，还可以通过基于javascript或phython的程序代码实现。本实施例中的采用的three.js引擎的内核采用的是WebGL(Web Graphics Library，一种3D绘图协议)。

步骤三：对解压后的glTF格式的新模型文件进行优化，保留3D模型加载过程中的必要插件；并将不同浏览器中用于加载3D模型的必要适配文件封装到优化后的glTF格式的新模型文件中，得到js格式的脚本文件。

步骤三中，新模型文件的封装过程采用JavaScript 3D library引擎里的API完成，封装后的脚本文件运行过程中通过传参的方式对不同插件进行调用。本实施例中，封装前的这些可以加载3D模型的插件都很杂乱，不知道在哪调用，而且调用的时候很麻烦，封装后集中在一起，就可以可以通过传参直接进行调用了。需要特别说明的是，在本实施例中，封装后的脚本文件中包含的用于加载3D模型的插件至少包括：GLTFLoader，KTXLoader，RGBELoader和Jquery。

步骤四：将封装好的js格式的脚本文件通过渲染引擎实现加载，并输出为基于HTML5 Canwas的图片格式的文件。可以发现在本实施例中并非直接导出文件。本实施例中的HTML5 Canwas是一种浏览器识别的标签，并且通过three.js引擎传参调用webGL。

步骤五：在浏览器中，采用WebGL绘图协议为基于HTML5 Canwas的图片格式的文件提供3D加速渲染，展示图片格式的文件；实现在前端页面加载3D模型的任务。

具体地，在本实施例提供多个的方案可以在现有的任意一款主流浏览器上进行展示，并且也可以在运行安卓或者苹果系统的移动端设备上的浏览器中加载3D模型。该方案对操作系统和设备的并不具有特殊限定，产品的适应性非常好。

本实施例通过对不同格式的额3D模型文件两步解码，实现在不改变原始文件内容的前提下，对最终用于加载的模型文件的格式进行统一，并通过压缩和解压过程将模型文件的的体积减小，进而能够有效提高模型文件的加载速度，为了进一步提升模型文件的加载速率，本实施例还对glTF格式的模型文件进行优化，解封模型文件后的对文件内容进行有针对性的增减，并在优化完成后重新封装。最终优化后的模型文件经渲染后能够在各种不同类型的浏览器上展现，模型记载速率明显提升，对不同浏览器的兼容性也更好。

进一步的，为了实施本实施例中的方法，本实施例还提供一种提高前端页面加载3D模型速度的系统，该系统采用如前述的提高前端页面加载3D模型速度的方法，实现对不同格式的3D模型文件的加载过程，缩短3D模型文件中在浏览器前端页面中的加载时长。如图2所示，该系统包括：文件转码模块、文件压缩模块、文件优化模块、文件加载模块，以及加速渲染模块。

其中，文件转码模块用于将待加载的3D模型的源文件先转换成通用的obj格式的模型文件，然后再转码成glTF格式的模型文件进行输出。

文件压缩模块用于对文件转码模块输出glTF格式的模型文件进行压缩，然后再解压成一个体积减小的glTF格式的新模型文件。压缩过程采用Blender软件或名为“Draco”的3D图形开源压缩库完成；文件压缩模块输出解压后的新模型文件。

文件优化模块用于对文件压缩模块输出的glTF格式的新模型文件进行优化。优化过程具体包括：对新模型文件进行解封；剔除解封后的文件中浏览器加载过程中非必要的文件，保留所述3D模型加载过程中的必要插件；并将不同浏览器加载所述3D模型过程中必要的适配文件添加到解封后的文件中；最后对优化后的文件进行封装，得到js格式的脚本文件。封装过程通过JavaScript3D library引擎里的API完成，封装后的脚本文件中包含的用于加载3D模型的插件至少包括：GLTFLoader，KTXLoader，RGBELoader和Jquery。

文件加载模块用于将文件优化模块封装好的js格式的脚本文件通过渲染引擎实现加载，并输出为基于HTML5 Canwas的图片格式的文件。

加速渲染模块用于在浏览器中采用WebGL绘图协议，为文件加载模块输出的基于HTML5 Canwas的图片格式的文件提供3D加速渲染服务，并展示图片格式的文件；进而实现在前端页面加载3D模型的任务。

作为本发明进一步地改进，文件转码模块通过Blender软件完成不同格式的3D模型源文件的转码过程；文件转码模块为运行Blender软件的模块，或是调用Blender软件实现文件转码过程，并直接输出转码后的文件的模块。

作为本发明进一步地改进，文件压缩模块中的文件压缩过程通过Blender软件或名为“Draco”的3D图形开源压缩库完成，并通过JavaScript 3D library引擎里的DRACOLoader加载器进行解压，得到新模型文件；文件压缩模块为运行相应的压缩软件和解压软件的模块，或者文件压缩模块为调用相应的软件和代码实现压缩和解压功能，并输出软件和代码的压缩和解压处理结果的模块。

本发明针对设计的新的3D模型加载方法设计了专用的文件加载系统，实现对不同功能模块的快速协调应用，进而达到在不同浏览器中快速加载各种不同格式的3D模型文件的效果。其中，本发明的系统可以设计成一个封闭的系统，在系统内部完成所有加载3D模型的步骤，也可以设计成一个开放的系统，通过有序调用现有设备和软件中的功能模块，实现加载3D模型的功能。

为了测试本实施例中提供的方法和系统的有性能，本实施例还特别设计了一组对照试验，以判断本实施例中的方法在不同设备和浏览器中的应用效果。在对照试验中采用3D模型文件包括两类，分别在台式电脑、笔记本电脑和手机三类设备中进行测试，测试使用的浏览器包括Windows系统中的Google Chrome浏览器，Mac系统中的Safari浏览器，以及Android系统中的UC浏览器；测试不同设备中同样一个3D模型在采用传统方案和本实施例提供的方案的不同情况下的加载时间。对比试验中，具体的方案设计和试验结果如下表所示：

表1：本实施例与现有技术在3D模型文件加载试验中的统计结果

分析上述试验数据发现，本实施例提供的方案在不同类型的设备、操作系统和浏览器软件中，均表现出了较佳的兼容性和适配效果，性能表现较为一致。同时在测试不同的3D模型文件中发现，本实施例与现有技术方案相比，在加载速度上的提升效果平均超过64％，明显体现出了本实施例的方案在提高前端页面加载3D模型速度上的作用。

实施例2

本实施例提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如实施例1中提高前端页面加载3D模型速度的方法的步骤。该计算机设备可以是可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。本实施例的计算机设备至少包括但不限于：可通过系统总线相互通信连接的存储器、处理器。

本实施例中，存储器(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，存储器也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。当然，存储器还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，存储器通常用于存储安装于计算机设备的操作系统和各类应用软件等。此外，存储器还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器通常用于控制计算机设备的总体操作。本实施例中，处理器用于运行存储器中存储的程序代码或者处理数据，以实现上述实施例的提高前端页面加载3D模型速度的方法，在不同设备或浏览器中实现3D模型的快速加载过程。

对于本实施例中采用的提高前端页面加载3D模型速度的方法的具体过程和有益效果，本实施例中不再赘述。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明的保护范围应以所附权利要求为准。