(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210731970.3 (22)申请日 2022.06.26 (71)申请人 杭州美创科技有限公司 地址 310011 浙江省杭州市拱 墅区丰潭路 508号天行国际中心7号楼1201室 (72)发明人 李云飞　柳遵梁　谷军年　刘俊杰　 张浩　朱琴琴　 (74)专利代理 机构 杭州知学知识产权代理事务 所(普通合伙) 33356 专利代理师 张雯 (51)Int.Cl. G06T 17/00(2006.01) G06T 7/10(2017.01) G06T 15/00(2011.01) (54)发明名称 基于WEBGL的机电系统可视化方法、 装置、 计 算机设备及存 储介质 (57)摘要 本发明实施例公开了基于WEBGL的机电系统 可视化方法、 装置、 计算机设备及存储介质。 方法 包括： 搭建3D机电系统场景； 渲染3D机电系统图 片； 进行分割和编号处理， 以得到瓦片； 使用 WEBGL引擎构建3D场景； 创建瓦片加载器， 加载所 有瓦片； 加载3D 模型， 存储于瓦片加载器； 添加场 景监听事件； 判断是否是点击事件触发； 若是， 则 获取当前点击选中的瓦片以及ID； 选取3D模型， 将模型位置与2.5D视角下的瓦片 对准， 显示相关 信息； 若否， 则获取旋转角度对应的ID； 查询当前 角度对应的瓦片集合， 以得到查询结果； 判断是 否找到对应角度的瓦片集合； 若否， 则生成提示 信息。 通过 实施本发明实施例的方法可实现既包 含了3D的交互渲染 效果以及 展示形式， 又包含了 2D加载速度快性能好的优点。 权利要求书2页 说明书10页 附图7页 CN 115311409 A 2022.11.08 CN 115311409 A 1.基于WEBGL的机电系统可视化方法， 其特 征在于， 包括： 根据3D机电系统模型 搭建3D机电系统场景； 根据所述3D机电系统场景 预定不同的相机 视角渲染3D机电系统图片； 对所述3D机电系统图片进行分割和编号处 理， 以得到瓦片； 使用WEBGL引擎构建基础的3D场景； 创建瓦片加载器， 加载当前指定角度渲染图的所有瓦片； 加载不同瓦片绑定的不同3D模型， 存 储于瓦片加载器； 添加场景监听事 件， 以得到监听结果； 判断所述 监听结果是否是点击事 件触发； 若所述监听结果是点击事件触发， 则获取当前点击选中的瓦片以及所述瓦片对应的 ID； 通过所述瓦片对应的ID选取所述ID对应的3D模型， 将模型位置与2.5D视角下的瓦片对 准， 并且显示相关信息； 若所述监听结果 不是点击事 件触发， 则获取旋转角度对应的ID； 遍历已有的角度的渲染图， 查询当前角度对应的瓦片集 合， 以得到查询结果； 判断所述 查询结果是否是找到对应角度的瓦片集 合； 若所述查询结果是找到对应角度的瓦片集合， 则执行所述创建瓦片加载器， 加载当前 指定角度渲染图的所有瓦片； 若所述查询结果不是找到对应角度的瓦片集合， 则生成用户当前角度渲染图不存在的 提示信息。 2.根据权利要求1所述的基于WEBGL的机电系统可视化方法， 其特征在于， 所述根据3D 机电系统模型 搭建3D机电系统场景， 包括： 使用max或者任一可渲染3D模型的桌 面端软件创建3D机电系统模型； 搭建3D机电系统场景。 3.根据权利要求1所述的基于WEBGL的机电系 统可视化方法， 其特征在于， 所述对所述 3D机电系统图片进行分割和编号处 理， 以得到瓦片， 包括： 按照不同角度分割所述3D机电系统图片， 以得到分割结果； 对所述分割结果内的每个图进行编号， 设置对应的ID， 并且对不同的ID绑定不同的交 互信息， 对需要高亮的瓦片绑定对应的模型信息， 以得到瓦片。 4.根据权利要求1所述的基于WEBGL的机电系统可视化方法， 其特征在于， 所述3D场景 包括场景、 灯光、 相机、 渲染器以及后处 理基础组件信息 。 5.根据权利要求1所述的基于WEBGL的机电系 统可视化方法， 其特征在于， 所述通过所 述瓦片对应的ID选取所述ID对应的3D模型， 将模型位置与2.5D视角下的瓦片对准， 并且显 示相关信息， 包括： 通过所述瓦片对应的ID选取所述ID对应的3D模型， 将模型位置与2.5D视角下的瓦片对 准， 并且高亮显示瓦片上对应模型的部件或者以弹窗展示当前机电系统部件的信息 。 6.基于WEBGL的机电系统可视化装置， 其特 征在于， 包括： 场景搭建单元， 用于根据3D机电系统模型 搭建3D机电系统场景； 图片渲染单元， 用于根据所述3D机电系统场景预定不同的相机视角渲染3D机电系统图权　利　要　求　书 1/2 页 2 CN 115311409 A 2片； 处理单元， 用于对所述3D机电系统图片进行分割和编号处 理， 以得到瓦片； 3D场景构建单 元， 用于使用WEBGL引擎构建基础的3D场景； 加载器创建单 元， 用于创建瓦片加载器， 加载当前指定角度渲染图的所有瓦片； 加载单元， 用于加载不同瓦片绑定的不同3D模型， 存 储于瓦片加载器； 添加单元， 用于添加场景监听事 件， 以得到监听结果； 事件判断单 元， 用于判断所述 监听结果是否是点击事 件触发； 第一获取单元， 用于若所述监听结果是点击事件触发， 则获取当前点击选中的瓦片以 及所述瓦片对应的ID； 选取单元， 用于通过所述瓦片对应的ID选取所述ID对应的3D模型， 将模型位置与2.5D 视角下的瓦片对准， 并且显示相关信息； 第二获取 单元， 用于若所述 监听结果 不是点击事 件触发， 则获取旋转角度对应的ID； 遍历单元， 用于遍历已有的角度的渲染图， 查询当前角度对应的瓦片集合， 以得到查询 结果； 查询判断单元， 用于判断所述查询结果是否是找到对应角度的瓦片集合； 若所述查询 结果是找到对应角度的瓦片集合， 则执行所述创建瓦片加载器， 加载当前指定角度渲染 图 的所有瓦片； 生成单元， 用于若所述查询结果不是找到对应角度的瓦片集合， 则生成用户当前角度 渲染图不存在的提 示信息。 7.根据权利要求6所述的基于WEBGL的机电系 统可视化装置， 其特征在于， 所述场景搭 建单元包括： 模型创建子单元， 用于使用max或者任一可渲染3D模型的桌面端软件创建3D机电系 统 模型； 搭建子单 元， 用于搭建3D机电系统场景。 8.根据权利要求7所述的基于WEBGL的机电系 统可视化装置， 其特征在于， 所述处理单 元包括： 分割子单 元， 用于按照不同角度分割所述3D机电系统图片， 以得到分割结果； 编号子单元， 用于对所述分割结果内的每个图进行编号， 设置对应的ID， 并且对不同的 ID绑定不同的交 互信息， 对需要高亮的瓦片绑定对应的模型信息， 以得到瓦片。 9.一种计算机设备， 其特征在于， 所述计算机设备包括存储器及处理器， 所述存储器上 存储有计算机程序， 所述处理器执行所述计算机程序时实现如权利要求 1至5中任一项所述 的方法。 10.一种存储介质， 其特征在于， 所述存储介质存储有计算机程序， 所述计算机程序被 处理器执行时实现如权利要求1至 5中任一项所述的方法。权　利　要　求　书 2/2 页 3 CN 115311409 A 3