一种基于工业场景的超大模型渲染方法技术

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

【技术实现步骤摘要】
一种基于工业场景的超大模型渲染方法


[0001]本专利技术涉及web端三维模型渲染的
，特别是一种基于工业场景的超大模型渲染方法。

技术介绍

[0002]WebGL是一种3D绘图协议，可以为Canvas提供硬件3D加速渲染。Three.js是javaScript编写的WebGL第三方库，在其基础上进行了封装和简化，可用于在浏览器中绘制3D场景。
[0003]目前在工业场景中，对于超大模型的传输，加载，渲染经常出现延迟，卡顿，失真等情况。目前业界常用的渲染技术方案为超大模型整体加载，该超大模型中重复的零件有几个就会加载几次，浪费资源。另外模型的加载位置一般为模型显示的页面，这样在加载资源的过程中，会让用户长时间等待，且页面经常出现白屏或者无效loading。此外当电脑打开较多网页或软件时，切换到模型页面进行操作会十分卡顿。基于此，现提出一种基于工业场景的超大模型渲染方法。

技术实现思路

[0004]本专利技术的目的就是解决现有技术中工业产线模型过大时，动画卡帧、渲染加载慢等问题，提出一种基于工业场景的超大模型渲染方法。
[0005]为实现上述目的，本专利技术提出了一种基于工业场景的超大模型渲染方法，包括以下步骤：
[0006]S1.在模型建立初将工业模型解构成零件模型；
[0007]S2.将零件模型存放到内容分发网络上；
[0008]S3.加载零件模型的位置，前置在网页资源较少及与用户交互较少的页面，加载成功时，进入步骤S4；
[0009]S4.加载过程中，网页对应区域最先显示图片，然后显示低画质模型，最后显示高画质模型，每隔一段时间，判断当前画质是否适配浏览器性能，若适配则进入步骤S6，否则进入步骤S5；
[0010]S5.通过引入浏览器性能监控控件，结合当前浏览器性能，选择性使用低画质模型或高画质模型，然后进入步骤S6；
[0011]S6.将加载过来的零件模型，结合解构参数进行组装。
[0012]作为优选，步骤S1中，在解构工业模型时，忽略模型的部分属性，包括缩放、位置及旋转属性，将相同的模型归为一类。
[0013]作为优选，步骤S2中，存放在内容分发网络上的零件模型，在GlobalTitleBar组件中进行加载。
[0014]作为优选，步骤S3中，在归为一类模型的userData属性中将该类模型的所有个体通过参数进行描述，所述userData属性包括模型的缩放、位置及旋转属性。
[0015]作为优选，步骤S3中，对于每一个零件模型都有三种形式，第一种形式是该模型的俯视切图；第二种形式是对于该模型所制作的低画质版本；第三种形式是对于该模型所制作的高画质版本。
[0016]作为优选，步骤S4中，在加载过程中根据不同形式的模型加载完成的时间对模型预留区域进行填充。
[0017]作为优选，步骤S4加载的方式包括如下几种：
[0018]a.在http请求时对模型预留区域进行遮罩，如高画质版本模型先加载完成，则直接加载高画质版本，取消遮罩；
[0019]b.在http请求时对模型预留区域进行遮罩，如低画质版本模型先加载完成，则先加载低画质版本模型，取消遮罩；待高画质版本模型加载完成后，将已经加载的低画质版本模型替换成高画质版本模型；
[0020]c.在http请求时对模型预留区域进行遮罩，如俯视切图先加载完成，则先加载俯视图；后续如高画质版本模型先加载完成，则将已经加载的俯视切图替换成高画质版本模型，取消遮罩；
[0021]d.在http请求时对模型预留区域进行遮罩，如俯视切图先加载完成，则先加载俯视切图；后续如低画质版本模型先加载完成，则将已经加载的俯视切图替换成低画质版本模型，取消遮罩；待高画质版本模型加载完成后，将已经加载的低画质版本模型替换成高画质版本模型。
[0022]作为优选，步骤S6中，将每类模型的三种形式均存入项目的数据共享区。
[0023]作为优选，步骤S5中，选择性使用低画质模型或高画质模型的方法为：收集一段时间内的平均fps，若低于设置的阈值，则使用每类模型的低画质版本；否则，使用每类模型的高画质版本。
[0024]本专利技术的有益效果：本专利技术通过将模型整体优化，体积减少，以达到加载速度快，动画播放流畅的效果；该方法提高了超大模型加载及渲染的性能，使用户观看及操作超大模型更加流畅。通过将工业模型解构成零件模型，将相同的模型归为一类，使用数据做逻辑区分的办法，最大限度地压缩了工业模型的体积，节省了传输时间。另外将该工业模型的加载位置选择为与用户交互较少的页面，使用户几乎感受不到模型加载过程中带来的卡顿感。此外当cpu或者内存利用率过高，分配给模型页面资源较少时，还可以自动调节模型的分辨率来使用户操作更加流畅，避免出现白屏、卡顿或者页面崩溃的情况。
[0025]本专利技术的特征及优点将通过实施例结合附图进行详细说明。
【附图说明】
[0026]图1是本专利技术一种基于工业场景的超大模型渲染方法的流程图。
【具体实施方式】
[0027]参阅图1，本专利技术一种基于工业场景的超大模型渲染方法，包括以下步骤：
[0028]S1.建模工程师与前端工程师在模型建立初将工业模型解构成零件模型，并且在解构工业模型时，忽略模型的缩放、位置、旋转等属性，相同的模型归为一类。
[0029]S2.将拆分后独立的零件模型存放到内容分发网络上；本实施例中，所述内容分发
网络为cdn，并在与用户没有任何交互的GlobalTitleBar组件(当前公司名称logo等自定义组件)中进行加载。
[0030]S3.加载零件模型的位置，前置在网页资源较少及与用户交互较少的页面，加载成功时，进入步骤S4；本实施例中，在归为一类模型的userData属性中将该类模型的所有个体通过参数进行描述，如模型的缩放，位置，旋转等。此外，本实施例中，对于每一个零件模型，都有三种形式，第一种形式是建模工程师对于该模型的俯视切图，格式为svg；第二种形式是建模工程师对于该模型所制作的低画质版本，格式为glb；第三种形式是建模工程师对于该模型所制作的高画质版本，格式为glb。
[0031]S4.加载过程中，网页对应区域最先显示图片，然后显示低画质模型，最后显示高画质模型，层层递进，每隔一段时间，判断当前画质是否适配浏览器性能，若适配则进入步骤S6，否则进入步骤S5。本实施例中，在加载过程中根据不同形式的模型加载完成的时间对模型预留区域进行填充，具体算法实现方式如下：
[0032]a.在http请求时对模型预留区域进行遮罩，如高画质版本模型先加载完成，则直接加载高画质版本，取消遮罩；
[0033]b.在http请求时对模型预留区域进行遮罩，如低画质版本模型先加载完成，则先加载低画质版本模型，取消遮罩；待高画质版本模型加载完成后，将已经加载的低画质版本模型替换成高画质版本模型；
[0034]c.在http请求时对模型预留区域进行本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于工业场景的超大模型渲染方法，其特征在于：包括以下步骤：S1.在模型建立初将工业模型解构成零件模型；S2.将零件模型存放到内容分发网络上；S3.加载零件模型的位置，前置在网页资源较少及与用户交互较少的页面，加载成功时，进入步骤S4；S4.加载过程中，网页对应区域最先显示图片，然后显示低画质模型，最后显示高画质模型，每隔一段时间，判断当前画质是否适配浏览器性能，若适配则进入步骤S6，否则进入步骤S5；S5.通过引入浏览器性能监控控件，结合当前浏览器性能，选择性使用低画质模型或高画质模型，然后进入步骤S6；S6.将加载过来的零件模型，结合解构参数进行组装。2.如权利要求1所述的一种基于工业场景的超大模型渲染方法，其特征在于：步骤S1中，在解构工业模型时，忽略模型的部分属性，包括缩放、位置及旋转属性，将相同的模型归为一类。3.如权利要求1所述的一种基于工业场景的超大模型渲染方法，其特征在于：步骤S2中，存放在内容分发网络上的零件模型，在GlobalTitleBar组件中进行加载。4.如权利要求1所述的一种基于工业场景的超大模型渲染方法，其特征在于：步骤S3中，在归为一类模型的userData属性中将该类模型的所有个体通过参数进行描述，所述userData属性包括模型的缩放、位置及旋转属性。5.如权利要求1所述的一种基于工业场景的超大模型渲染方法，其特征在于：步骤S3中，对于每一个零件模型都有三种形式，第一种形式是该模型的俯视切图；第二种形式是对于该模型所制作的低画质版本；第三种形式是对于该模型所制作的高画质版本...

【专利技术属性】
技术研发人员：孟久翔，潘琳，
申请(专利权)人：杭州玖欣物联科技有限公司，
类型：发明
国别省市：