一种基于Three.js引擎网页三维大场景动画演示性能优化装置及方法

技术领域

本发明涉及三维动画演示技术领域，尤其涉及一种基于Three.js引擎网页三维大场景动画演示性能优化装置及方法。

背景技术

在网页中进行三维场景动画演示时，通常会加载多个不同类型的三维模型，同一种三维模型会使用到多次，最终组合形成一个三维场景。在动画演示过程中系统实时刷新渲染三维场景，刷新场景中每一个模型都需要经历一次Draw Call(绘图指令)，当场景中使用的模型数量上千时，Three.js就会经历上千次Draw Call，如果每次Draw Call需要2ms的时间，最终渲染一次一千个模型的场景需要2s，当模型数量到达一万个时候，需要20s时间，这种渲染方式整个场景在大场景下会导致动画卡顿，只能进行简单场景演示，在复杂场景下用户无法正常使用系统。

发明内容

本发明的目的在于：针对现有技术的不足，提供一种对非动画模型进行冻结处理，减少系统位置更新计算，提升系统性能的基于Three.js引擎网页三维大场景动画演示性能优化装置及方法。

本发明的技术方案如下：

本发明公开了一种基于Three.js引擎网页三维大场景动画演示性能优化的方法，包括以下步骤：

建立双场景调度中心、动画调度中心、模型场景和渲染场景；

系统调用场景加载模块将模型加载至模型场景，模型场景对模型进行存储和物料模型位置进行更新计算；

所述动画调度中心生成演示动画，利用动画调度中心判断场景中的模型，动画调度中心对没有动画任务的模型进行冻结，对动画模型进行位置实时更新计算并根据物料数量创建合并模型；

所述双场景调度中心将合并模型加载到渲染模型进行渲染。

进一步地，具体包括以下步骤：

S1、加载模型，判定场景中已存在模型进行克隆复制，新加载的模型和已有模型公用几何面数据和材质数据；

S2、建立双场景进行渲染，利用Three.js引擎进行系统开发，利用双场景调度中心对模型场景实现模型的存储和物料模型位置更新计算，渲染场景实现对合并模型的渲染处理；

S3、判断场景中的模型是否为动画模型，动画模型需要进行位置实时更新计算，对其他模型系统判断模型和合并模式，利用双场景调度中心将合并后构建的新模型对象加载到渲染场景，渲染场景再进行渲染，同时对没有动画执行的模型进行冻结；

S4、进行三维动画演示。

进一步地，所述步骤S1加载模型中根据用户在系统选择保存的场景方案，系统发送网络请求加载服务器中的场景文件。

进一步地，所述步骤S3中，系统调用场景加载模块，解析场景文件，利用动画调度中心遍历场景动画路径集合中的模型，判断模型类型，如果是输送类型模型，判断模型中是否设置动画属性，对没有动画属性的模型，系统设置冻结标识，将模型加入冻结模型集合Blocking_List[]中；对有动画属性的模型，动画调度中心遍历模型中的子模型，提取子模型共用的三维几何体和每个子模型的世界坐标，将模型加入动画合并集合Animation_List[]中。

进一步地，所述没有动画属性的模型包括货架、轨迹线和文字类型；所述有动画属性的模型包括单机设备、机器人设备、AGV设备。

进一步地，所述场景中的模型根据是否为动画模型加入相应集合之后，双场景调度中心将动画合并集合Animation_List[]中的模型进行合并，生成合并序列号，将序列号绑定到原始子模型属性；动画调度中心监听合并Animation_List[]集合中的模型和子模型位置坐标更新，将模型或子模型更新后坐标同步更新至合并模型中对应序号部件世界坐标。

进一步地，所述步骤S4的三维动画演示包括以下步骤：

S4.1、动画物料准备，动画调度中心根据用户设置的物料数量、物料类型，创建物料基本单元模型，再根据数量创建合并后的物料模型，双场景调度中心将合并后的物料模型加载到渲染场景中进行渲染，首次创建时每个序列的物料模型坐标设置为零，保证渲染时物料暂时不显示；

S4.2、动画运行中，双场景调度中心遍历冻结模型集合Blocking_List[]，对渲染场景中对应型号的合并模型设置冻结标识，渲染场景在执行刷新渲染时，不执行位置更新计算；动画调度中心在模型场景中提取没有冻结标识的模型集合，在执行渲染时只更新非冻结模型的位置坐标信息，冻结模型系统不再进行位置更新计算；

S4.3、动画暂停，双场景调度中心将冻结模型集合Blocking_List[]中的模型进行解冻，模型可进行编辑操作，修改完成后可继续进行动画演示；

S4.4、动画结束，双场景调度中心清空模型场景和渲染场景中的所有模型，重新执行场景文件加载，此时模型已经全部缓存在本地，系统根据模型类型进行场景模型复制，实现场景快速复原。

进一步地，所述S4.1的动画调度中心根据路径，实时更新路径模型上物料的坐标，动画调度中心根据模型场景中变化物料模型绑定的序列号，对渲染场景中的合并物料模型中指定序列号的部件进行坐标同步，同步完成后触发场景渲染。

进一步地，所述步骤S4.1动画物料准备完成后，系统遍历场景中的模型，没在路径集合范围中的模型，系统设置冻结标识，将模型加入冻结模型集合Blocking_List[]中。

本发明还公开了一种基于Three.js引擎网页三维大场景动画演示性能优化装置，其特征在于，包括场景加载模块、双场景调度中心、动画调度中心、模型场景和渲染场景，模型场景实现对模型的存储和物料模型位置更新计算，渲染场景实现对合并模型的渲染处理；所述动画调度中心独立计算模型场景的坐标位置，判断场景中的模型是否为动画模型，对没有动画执行的模型进行冻结，系统对冻结的模型不进行位置计算，对动画模型进行位置实时更新计算，并将动画模型进行合并通过双场景调度中心加载到渲染场景中进行渲染。

与现有的技术相比本发明的有益效果是：

1、本发明对非动画模型进行冻结处理，系统对这部分模型不进行位置计算，减少系统位置更新计算，提升系统动画渲染性能。

2、本发明对动画演示中的物料模型进行合并优化和独立计算处理，大大减少DrawCall次数，提升了渲染效率，保证三维场景的渲染性能，在动画演示中即使创建上千个物料模型也能够流畅运行。

3、对三维场景存在动画的模型进行提取，由动画调度中心独立计算更新模型及子模型的坐标位置，并将其实时同步更新到渲染场景的合并模型中，减少三维场景渲染时间。

附图说明

图1为本发明的流程示意图；

图2为本发明的加入冻结模型集合的模型类型示意图；

图3为本发明的加入动画合并集合的模型类型示意图；

图4为本发明三维动画演示流程示意图。

具体实施方式

需要说明的是，术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

下面结合实施例对本发明的技术方案做进一步的详细描述。

如图1所示，本发明公开一种基于Three.js引擎网页三维大场景动画演示性能优化的方法，基于Three.js引擎进行系统开发，建立双场景和动画调度中心，利用模型场景实现模型的存储和物料模型位置更新计算，渲染场景实现对合并模型的渲染处理，从而减少渲染时的Draw Call次数；所述动画调度中心判断场景中的模型是否为动画模型，对动画模型进行位置实时更新计算并进行模型合并，对没有动画执行的模型进行冻结，系统对这部分模型不进行位置计算，减少性能开销。

具体步骤如下：

S1、加载模型，判定场景中已存在模型进行克隆复制，新加载的模型和已有模型公用几何面数据和材质数据；

S2、建立双场景进行渲染，利用Three.js引擎进行系统开发，利用双场景调度中心对模型场景实现模型的存储和物料模型位置更新计算，渲染场景实现对合并模型的渲染处理；

S3、判断场景中的模型是否为动画模型，动画模型需要进行位置实时更新计算，对其他模型系统判断模型和合并模式，利用双场景调度中心将合并后构建的新模型对象加载到渲染场景，渲染场景再进行渲染，同时对没有动画执行的模型进行冻结；

S4、进行三维动画演示。

用户在系统选择保存的场景方案，系统发送网络请求加载服务器中的场景文件。系统调用场景加载模块，解析场景文件，根据模型的类型将场景加载至模型场景中。搭建优化模块遍历模型场景中的模型，根据模型类型进行合并优化处理。

如图2和图3所示，动画演示时，利用动画调度中心遍历场景动画路径集合中的模型，判断模型类型，如果是输送类型模型，判断模型中是否设置动画属性，对没有动画属性的模型，系统设置冻结标识，将模型加入冻结模型集合Blocking_List[]中；对有动画属性的模型，动画调度中心遍历模型中的子模型，提取子模型共用的三维几何体和每个子模型的世界坐标，将模型加入动画合并集合Animation_List[]中；所述没有动画属性的模型包括货架、轨迹线和文字类型；所述有动画属性的模型包括单机设备、机器人设备、AGV设备；同时在系统遍历场景中的模型时，对没在路径集合范围中的模型，系统设置冻结标识，将模型加入冻结模型集合Blocking_List[]中。

模型类型判断完成之后，双场景调度中心将动画合并集合Animation_List[]中的模型进行合并，生成合并序列号，将序列号绑定到原始子模型属性。动画调度中心监听合并Animation_List[]集合中的模型和子模型位置坐标更新。将模型或子模型更新后坐标同步更新至合并模型中对应序号部件世界坐标。

如图4所示，三维动画演示包括以下步骤：

S4.1、动画物料准备，动画调度中心根据用户设置的物料数量、物料类型，创建物料基本单元模型，再根据数量创建合并后的物料模型，双场景调度中心将合并后的物料模型加载到渲染场景中进行渲染，首次创建时每个序列的物料模型坐标设置为零，保证渲染时物料暂时不显示；

动画调度中心根据路径，实时更新路径模型上物料的坐标，动画调度中心根据模型场景中变化物料模型绑定的序列号，对渲染场景中的合并物料模型中指定序列号的部件进行坐标同步，同步完成后触发场景渲染；

S4.2、动画运行中，双场景调度中心遍历冻结模型集合Blocking_List[]，对渲染场景中对应型号的合并模型设置冻结标识，渲染场景在执行刷新渲染时，不执行位置更新计算；动画调度中心在模型场景中提取没有冻结标识的模型集合，在执行渲染时只更新非冻结模型的位置坐标信息。冻结模型系统不再进行位置更新计算；

S4.3、动画暂停，双场景调度中心将冻结模型集合Blocking_List[]中的模型进行解冻，模型可进行编辑操作，修改完成后可继续进行动画演示；

S4.4、动画结束，双场景调度中心清空模型场景和渲染场景中的所有模型，重新执行场景文件加载，此时模型已经全部缓存在本地，系统根据模型类型进行场景模型复制，实现场景快速复原。

所述S4.1的动画调度中心根据路径，实时更新路径模型上物料的坐标，动画调度中心根据模型场景中变化物料模型绑定的序列号，对渲染场景中的合并物料模型中指定序列号的部件进行坐标同步，同步完成后触发场景渲染，动画物料准备完成后，系统遍历场景中的模型，对没在路径集合范围中的模型，系统设置冻结标识，将模型加入冻结模型集合Blocking_List[]中。

本发明还公开了一种基于Three.js引擎网页三维大场景动画演示性能优化装置，其特征在于，包括场景加载模块、双场景调度中心、动画调度中心、模型场景和渲染场景，模型场景实现对模型的存储和物料模型位置更新计算，渲染场景实现对合并模型的渲染处理；所述动画调度中心独立计算模型场景的坐标位置，判断场景中的模型是否为动画模型，对没有动画执行的模型进行冻结，系统对冻结的模型不进行位置计算，对动画模型进行位置实时更新计算，并将动画模型进行合并通过双场景调度中心加载到渲染场景中进行渲染。

经过以上装置和方法步骤实现三维动画演示，实现渲染场景中的模型数量减少，即使是上万个模型按种类合并后渲染场景中也只存在一百多种模型，大大减少Draw Call次数，提升了渲染效率；同时对非动画模型进行冻结处理，减少系统位置更新计算，提升系统性能。

本申请的具体实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请保护范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请技术方案构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。

本实施例提供的“系统”具有以下特征及功能：

基于Three.js三维引擎开发软件，通过Three.js引擎加载外部FBX模型或调用Three.js引擎创建三维基础模型，组装成具有特定意义的模型，如：货架、轨迹线、文字等。用户在网页上传FBX格式的模型并录入模型参数，加载、创建、拖拽模型形成完整的三维场景。

需要说明的是，以上关于“系统”进行了介绍。但并不意味着这样的“系统”是必不可少的技术特征，这也不应当成为本发明的保护范围限制，本实施例仅仅为了更方便清楚说明本发明的内容而采用了利用“系统”的方法。