CN113505322A - 一种基于h5的3d模型加载优化的方法及系统 - Google Patents
一种基于h5的3d模型加载优化的方法及系统 Download PDFInfo
- Publication number
- CN113505322A CN113505322A CN202110803940.4A CN202110803940A CN113505322A CN 113505322 A CN113505322 A CN 113505322A CN 202110803940 A CN202110803940 A CN 202110803940A CN 113505322 A CN113505322 A CN 113505322A
- Authority
- CN
- China
- Prior art keywords
- model
- module
- loading
- different
- thread
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供了一种基于H5的3D模型加载优化的方法，所述方法包括以下步骤：步骤S1、加载模型列表，将不同的加载器封装到不同的脚本文件中；步骤S2、根据模型类型匹配不同的加载器；步骤S3、调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；步骤S4、根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图；本发明能够采用JS多线程，将大量计算移至线程内处理后再返回给主线程，优化加载3D模型。
Description
技术领域
本发明涉及计算机技术领域，特别是一种基于H5的3D模型加载优化的方法及系统。
背景技术
传统使用WebGL(全写Web Graphics Library，是一种3D绘图协议)展示3D模型时由于模型的加载需要进行大量的计算，会严重阻塞浏览器的UI交互，影响操作体验。
发明内容
为克服上述问题，本发明的目的是提供了一种能够采用JS多线程，将大量计算移至线程内处理后再返回给主线程，优化加载3D模型的方法。
本发明采用以下方案实现：一种基于H5的3D模型加载优化的方法，所述方法包括以下步骤：
步骤S1、加载模型列表，将不同的加载器封装到不同的脚本文件中；
步骤S2、根据模型类型匹配不同的加载器；
步骤S3、调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；
步骤S4、根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
进一步的，所述步骤S1进一步具体为：加载3D模型的文件集合，将不同的JS脚本文件根据3D模型类型独立封装到不同的脚本文件内。
进一步的，所述步骤S2进一步具体为：根据不同的3D模型类型匹配不同的JS脚本文件，所述3D模型类型分为人物、地图和建筑物等模型类型。
进一步的，所述步骤S3进一步具体为：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，在主副线程之间共享数据，提高图形绘制效率。
本发明还提供了一种基于H5的3D模型加载优化的系统，其特征在于：包括加载模块、匹配模块、调用模块和呈现模块，所述加载模块，即加载模型列表，将不同的加载器封装到不同的脚本文件中；所述匹配模块，即根据模型类型匹配不同的加载器；所述调用模块，即调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；所述呈现模块，即根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
进一步的，所述加载模块进一步具体为：加载3D模型的文件集合，将不同的JS脚本文件根据3D模型类型独立封装到不同的脚本文件内。
进一步的，所述匹配模块进一步具体为：根据不同的3D模型类型匹配不同的JS脚本文件，所述3D模型类型分为人物、地图和建筑物等模型类型。
进一步的，所述调用模块进一步具体为：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，在主副线程之间共享数据，提高图形绘制效率。
本发明的有益效果在于：本发明能够提高3D模型加载速度，优化加载体验；采用JS多线程，将大量计算移至线程内处理后再返回给主线程；同时因为JS的多线程在数据交互时用过程函数的来传递数据，无法使用寻址模型，影响了使用效果及便利性，而本发明采用约定封装数据格式的形式解决该问题，同时提升了效率。
附图说明
图1是本发明的方法流程示意图。
图2是本发明的系统原理框图。
具体实施方式
下面结合附图对本发明做进一步说明。
请参阅图1所示，本发明的一种基于H5的3D模型加载优化的方法，所述方法包括以下步骤：
步骤S1、加载模型列表，将不同的加载器封装到不同的脚本文件中；
步骤S2、根据模型类型匹配不同的加载器；
步骤S3、调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；
步骤S4、根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
下面通过一具体实施例对本发明作进一步说明：
一种基于H5的3D模型加载及释放方法和装置包括以下步骤(结合图1)：
步骤1：加载模型列表，可以先将不同的加载器封装到不同的脚本文件中。
模型列表是各种3D模型的文件集合，其文件后缀名是.glb(GLB文件是保存在GITF或GL传输格式的3D模型。它保存的信息，如节点层级、照相机，和材料，动画和二进制格式啮合。GLB文件基本上都是GLTF文件，这些文件被保存在一个文本格式的二进制版本)；而加载器就是一个JS(Javascript)脚本文件，会根据3D模型类型的独立封装；该脚本(加载器)的解析有浏览器(比如chrome)负责，并在浏览器中结合UI呈现加载效果，更加具体地说是“浏览器UI线程”。具体列表(多个加载器脚本的集合)如何加载，是由浏览器UI线程逐一初始化实现，方便理解，给出示例代码参考：var modelLoader1＝new Worker('./loader1.js')；var modelLoader2＝new Worker('./loader2.js')；var modelLoader3＝new Worker('./loader3.js')
总的来说，多个同类型3D模型文件(*.glb)可以通过同一种加载器(.js)进行加载并呈现。
加载器就是一个JS(Javascript)脚本文件，会根据类型的需要独立封装。比如需要加载人物的3D模型，就可以H5前端工作线程中引入该脚本文件，经过实例化(构建)后，就可以加载多个人物属性的3D模型文件，如小孩人物模型child.glb、男孩人物模型boy.glb等。
步骤2：根据模型类型匹配不同的加载器，如人物、地图、建筑物等模型类型；匹配的过程是多个同类型3D模型文件(*.glb)可以通过同一种加载器(.js)进行匹配加载并呈现；
步骤3：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，可以在主副线程之间共享数据，提高图形绘制效率。
因为要加载3D模型.glb正常都是比较大的文件，是一个耗时的操作，如果没有做异步处理，可能整个js线程会被阻塞，后面的代码不能正常运行，极大降低用户体验；本发明引入了JS多线程模块来处理这些耗时的操作。它是JS里的一个封装类，调用的方式是创建类的实例就可以使用这个多线程模块，示例代码如下var worker＝new Worker(js filepath)；构造函数的参数是加载器的js文件路径，这个js文件将会在浏览器新开的线程里运行，而与原先的js主线程并不冲突。
“这个js文件将会在浏览器新开的线程里运行，而与原先的js主线程并不冲突”，那两个线程之间联系，其实是通过消息事件的方式达成，一般的做法是实现2个函数：onPostMessage(主线程中实现)和onmessage(副线程，即加载.glb模型线程中实现)这两个函数，其中onPostMessage(data)的参数是要传递的数据，可以统一约定参数字段和代表的含义；而onmessage是一个回调函数，只有在接受到数据时，onmessage会被回调，onmessage有一个隐藏的参数，那就是event，我们可以用event.data获取到传递过来的数据来更新主线程。
步骤4：根据JS多线程模块计算得到的结果，插入H5主页中，呈现效果图。
副线程会通过约定的方式返回数据到主线程，即副线程的计算(成像)结果会在主线程中体现，主线程就是H5主界面，也是具体的场景了。
总之，本发明采用JS多线程，将大量计算移至线程内处理后再返回给主线程。同时因为JS的多线程在数据交互时用过程函数的来传递数据，无法使用寻址模型，影响了使用效果及便利性，而本发明采用约定封装数据格式的形式解决该问题，同时提升了效率。
请参阅图2所示，本发明还提供了一种基于H5的3D模型加载优化的系统，包括加载模块、匹配模块、调用模块和呈现模块，所述加载模块，即加载模型列表，将不同的加载器封装到不同的脚本文件中；所述匹配模块，即根据模型类型匹配不同的加载器；所述调用模块，即调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；所述呈现模块，即根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
所述加载模块进一步具体为：加载3D模型的文件集合，将不同的JS脚本文件根据3D模型类型独立封装到不同的脚本文件内。
所述匹配模块进一步具体为：根据不同的3D模型类型匹配不同的JS脚本文件，所述3D模型类型分为人物、地图和建筑物等模型类型。
所述调用模块进一步具体为：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，在主副线程之间共享数据，提高图形绘制效率。
以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属本发明的涵盖范围。
Claims (8)
1.一种基于H5的3D模型加载优化的方法，其特征在于，所述方法包括以下步骤：
步骤S1、加载模型列表，将不同的加载器封装到不同的脚本文件中；
步骤S2、根据模型类型匹配不同的加载器；
步骤S3、调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；
步骤S4、根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
2.根据权利要求1所述的一种基于H5的3D模型加载优化的方法，其特征在于：所述步骤S1进一步具体为：加载3D模型的文件集合，将不同的JS脚本文件根据3D模型类型独立封装到不同的脚本文件内。
3.根据权利要求1所述的一种基于H5的3D模型加载优化的方法，其特征在于：所述步骤S2进一步具体为：根据不同的3D模型类型匹配不同的JS脚本文件，所述3D模型类型分为人物、地图和建筑物等模型类型。
4.根据权利要求1所述的一种基于H5的3D模型加载优化的方法，其特征在于：所述步骤S3进一步具体为：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，在主副线程之间共享数据，提高图形绘制效率。
5.一种基于H5的3D模型加载优化的系统，其特征在于：包括加载模块、匹配模块、调用模块和呈现模块，所述加载模块，即加载模型列表，将不同的加载器封装到不同的脚本文件中；所述匹配模块，即根据模型类型匹配不同的加载器；所述调用模块，即调用JS多线程模块，通过主副线程数据交互监听函数，在主副线程之间共享数据；所述呈现模块，即根据JS多线程模块计算得到结果，插入H5主页中，呈现效果图。
6.根据权利要求5所述的一种基于H5的3D模型加载优化的系统，其特征在于：所述加载模块进一步具体为：加载3D模型的文件集合，将不同的JS脚本文件根据3D模型类型独立封装到不同的脚本文件内。
7.根据权利要求5所述的一种基于H5的3D模型加载优化的系统，其特征在于：所述匹配模块进一步具体为：根据不同的3D模型类型匹配不同的JS脚本文件，所述3D模型类型分为人物、地图和建筑物等模型类型。
8.根据权利要求5所述的一种基于H5的3D模型加载优化的系统，其特征在于：所述调用模块进一步具体为：调用JS多线程模块，通过主副线程数据交互监听函数，因为事先约定了数据格式，在主副线程之间共享数据，提高图形绘制效率。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110803940.4A CN113505322A (zh) | 2021-07-16 | 2021-07-16 | 一种基于h5的3d模型加载优化的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110803940.4A CN113505322A (zh) | 2021-07-16 | 2021-07-16 | 一种基于h5的3d模型加载优化的方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113505322A true CN113505322A (zh) | 2021-10-15 |
Family
ID=78013479
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110803940.4A Pending CN113505322A (zh) | 2021-07-16 | 2021-07-16 | 一种基于h5的3d模型加载优化的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113505322A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130326388A1 (en) * | 2012-05-31 | 2013-12-05 | State Grid Corporation Of China | Power grid visualization system and method based on three-dimensional gis technology |
| CN104102488A (zh) * | 2014-07-18 | 2014-10-15 | 无锡梵天信息技术股份有限公司 | 一种基于多线程并行化的3d引擎系统 |
| CN111080766A (zh) * | 2019-12-30 | 2020-04-28 | 中科星图股份有限公司 | 一种基于WebGL的GPU加速海量目标高效渲染方法 |
| CN112381931A (zh) * | 2020-11-23 | 2021-02-19 | 北京优锘科技有限公司 | 一种基于json数据生成3d场景的方法 |
-
2021
- 2021-07-16 CN CN202110803940.4A patent/CN113505322A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130326388A1 (en) * | 2012-05-31 | 2013-12-05 | State Grid Corporation Of China | Power grid visualization system and method based on three-dimensional gis technology |
| CN104102488A (zh) * | 2014-07-18 | 2014-10-15 | 无锡梵天信息技术股份有限公司 | 一种基于多线程并行化的3d引擎系统 |
| CN111080766A (zh) * | 2019-12-30 | 2020-04-28 | 中科星图股份有限公司 | 一种基于WebGL的GPU加速海量目标高效渲染方法 |
| CN112381931A (zh) * | 2020-11-23 | 2021-02-19 | 北京优锘科技有限公司 | 一种基于json数据生成3d场景的方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10990238B2 (en) | Software robots for programmatically controlling computer programs to perform tasks | |
| US6983357B2 (en) | Hardware accelerator for an object-oriented programming language | |
| US6330659B1 (en) | Hardware accelerator for an object-oriented programming language | |
| US8191042B2 (en) | Continuation based declarative definition and composition | |
| US9098297B2 (en) | Hardware accelerator for an object-oriented programming language | |
| US6795089B2 (en) | Dynamic, live surface and model elements for visualization and modeling | |
| US8701085B2 (en) | Graphical event and binding editor for software development | |
| US11294793B1 (en) | Robotic process automation (RPA) debugging systems and methods | |
| KR20060087995A (ko) | 작업 흐름을 모델링하는 방법 및 시스템 | |
| US8850404B2 (en) | Relational modeling for performance analysis of multi-core processors using virtual tasks | |
| CN109710218B (zh) | 一种对象自动转换方法及终端 | |
| US6560770B1 (en) | Extending the attributes of an application generated using a fourth generation programming tool | |
| CN113505322A (zh) | 一种基于h5的3d模型加载优化的方法及系统 | |
| GB2476544A (en) | Relational modeling for performance analysis of multi-core processors | |
| Noble et al. | Lazy functional components for graphical user interfaces | |
| CN109117124A (zh) | 一种多返回值的函数编程方法 | |
| Magno | Sar: Automatic generation of statistical reports using Stata and Microsoft Word for Windows | |
| CN117724719A (zh) | 基于软件平台的用户界面动态可扩展开发方法及系统 | |
| Barnwell et al. | Petri Net Analyser–Group 4 | |
| Finlay | PyGTK 2.0 Tutorial | |
| Brendel et al. | Exploring the immediate mode GUI concept for graphical user interfaces in mixed reality applications | |
| Linton et al. | A Taste of Fresco | |
| CN113778432A (zh) | 页面形成方法和装置、内容管理系统和插件 | |
| Parfyonov et al. | Using new features of Java SE 8 | |
| Allen | Self Handbook Documentation |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |