[发明专利]一种基于工业场景的超大模型渲染方法

说明书

本发明提出了一种基于工业场景的超大模型渲染方法，包括以下步骤：S1.在模型建立初将工业模型解构成零件模型；S2.将零件模型存放到内容分发网络上；S3.加载零件模型的位置，前置在网页资源较少及与用户交互较少的页面，加载成功时，进入S4；S4.加载过程中，网页对应区域最先显示图片，然后显示低画质模型，最后显示高画质模型，每隔一段时间，判断当前画质是否适配浏览器性能，若适配则进入S6，否则进入S5；S5.通过引入浏览器性能监控控件，结合当前浏览器性能，选择性使用低画质模型或高画质模型，然后进入步骤S6；S6.将加载过来的零件模型，结合解构参数进行组装。本发明提高了超大模型加载及渲染的性能，使用户观看及操作超大模型更加流畅。

【技术领域】

本发明涉及web端三维模型渲染的技术领域，特别是一种基于工业场景的超大模型渲染方法。

【背景技术】

WebGL是一种3D绘图协议，可以为Canvas提供硬件3D加速渲染。Three.js是javaScript编写的WebGL第三方库，在其基础上进行了封装和简化，可用于在浏览器中绘制3D场景。

目前在工业场景中，对于超大模型的传输，加载，渲染经常出现延迟，卡顿，失真等情况。目前业界常用的渲染技术方案为超大模型整体加载，该超大模型中重复的零件有几个就会加载几次，浪费资源。另外模型的加载位置一般为模型显示的页面，这样在加载资源的过程中，会让用户长时间等待，且页面经常出现白屏或者无效loading。此外当电脑打开较多网页或软件时，切换到模型页面进行操作会十分卡顿。基于此，现提出一种基于工业场景的超大模型渲染方法。

【发明内容】

本发明的目的就是解决现有技术中工业产线模型过大时，动画卡帧、渲染加载慢等问题，提出一种基于工业场景的超大模型渲染方法。

为实现上述目的，本发明提出了一种基于工业场景的超大模型渲染方法，包括以下步骤：

S1.在模型建立初将工业模型解构成零件模型；

S2.将零件模型存放到内容分发网络上；

S3.加载零件模型的位置，前置在网页资源较少及与用户交互较少的页面，加载成功时，进入步骤S4；

S4.加载过程中，网页对应区域最先显示图片，然后显示低画质模型，最后显示高画质模型，每隔一段时间，判断当前画质是否适配浏览器性能，若适配则进入步骤S6，否则进入步骤S5；

S5.通过引入浏览器性能监控控件，结合当前浏览器性能，选择性使用低画质模型或高画质模型，然后进入步骤S6；

S6.将加载过来的零件模型，结合解构参数进行组装。

作为优选，步骤S1中，在解构工业模型时，忽略模型的部分属性，包括缩放、位置及旋转属性，将相同的模型归为一类。

作为优选，步骤S2中，存放在内容分发网络上的零件模型，在GlobalTitleBar组件中进行加载。

作为优选，步骤S3中，在归为一类模型的userData属性中将该类模型的所有个体通过参数进行描述，所述userData属性包括模型的缩放、位置及旋转属性。

作为优选，步骤S3中，对于每一个零件模型都有三种形式，第一种形式是该模型的俯视切图；第二种形式是对于该模型所制作的低画质版本；第三种形式是对于该模型所制作的高画质版本。

作为优选，步骤S4中，在加载过程中根据不同形式的模型加载完成的时间对模型预留区域进行填充。

作为优选，步骤S4加载的方式包括如下几种：

a.在http请求时对模型预留区域进行遮罩，如高画质版本模型先加载完成，则直接加载高画质版本，取消遮罩；