CN114663595A - 基于WebGL的前端三维场景搭建与可视化配置方法 - Google Patents

Abstract

一种基于WebGL的前端三维场景搭建与可视化配置方法，包括以下步骤：步骤1，数据接入，采用本地上传至浏览器或访问后端获取的形式接入图像需要仿真的三维图像信息和对应物理状态的访问接口数据；步骤2、数据存储，将上传的符合格式要求的数据缓存于浏览器本地或上传至后端的仓库中；步骤3、对仓库中的三维对象进行编辑和管理；步骤4、场景编辑可视化交互，导入仓库内素材，搭建场景并绑定后端信息接口；步骤5、场景保存，在步骤4成功编辑并完成绑定的基础上，可浏览、导出当前场景，并根据选择要求生成“对象‑接口”的配置文件。本发明增加开发效率和舒适度。

Description

基于WebGL的前端三维场景搭建与可视化配置方法

技术领域

本发明应用于三维工业控制组态软件的三维场景搭建，涉及一种基于WebGL的前端三维场景搭建与可视化配置方法。

背景技术

以信息化与工业化深度融合为主线的新一轮工业革命正在蓬勃兴起，智能制造作为新一轮工业革命的主攻方向。

在现代制造业中，计算机图形学和可视化技术的应用已经日益广泛，三维可视化计数日益成熟。相比传统的二维监控界面，采用三维界面，操作员工在调用系统软件对工程进行实际情况的实时监控和管理时，可以快速结合三维空间中的相关信息，对照实际工作情况，进行准确定位，从而对发出信息的设备快速查看(通过现场监控视频流查看)。同样，利用三维可视化技术，可以展示更加复杂的现实地理模型，也更方便进行对工厂资产进行全方位管理；第三，根据工程设计图和三维数据来搭建的三维模型，可以通过主动或自动的沉浸式漫游模式来帮助工作技术人员熟悉了解水利工程现场的设备情况和环境，降低培训成本。以三维虚拟模型为基础来实现模型的精细化，同时该数字平台也可作为业务和智能系统的综合交互装置，将生产实时数据、智能巡检及风险防控数据都体现在三维平台当中，提升数据交互的效率；第四，三维可视化技术能够在水利工程建设的选址、施工、布置等多方面提供支持。突破了以往的二维图纸设计模式，极大提高了设计效率和设计精确度。

无论是PC端三维编程软件还是Web端三维编程软件，都存在一个问题：没有针对工业控制系统做针对性优化，不但缺少相关的工业模型，同时由于缺少工控系统的内在逻辑，无法在绘制工控系统场景时内联各个部件的关系，无法直接绑定硬件接口，后期添加、修改模块较为复杂。

即，目前国内没有针对工业控制系统的做专门优化的一套三维编辑器，开发人员在面对三维工业控制系统做开发时经过运用三维软件建模，前端设计页面，在其中摆放三维模型，编写控制逻辑，后端一一调试对应接口等步骤中，均需要针对设备的不同状态重复开发，操作困难、费时费力。

发明内容

为了解决水产三维工控系统开发中可视化场景搭建难的问题，本发明提供一种基于WebGL的前端三维场景搭建与可视化配置方法，跳脱传统“代码编写模型位置、显示效果-网页浏览调试-根据调试结果修改代码-网页浏览调试”的开发逻辑，采用三维编辑器的思路可视化场景开发过程，场景编辑所见即所得，大大增加开发效率和舒适度。

本发明解决其技术问题所采用的技术方案是：

一种基于WebGL的前端三维场景搭建与可视化配置方法，包括以下步骤：

步骤1，数据接入，采用本地上传至浏览器或访问后端获取的形式接入图像需要仿真的三维图像信息和对应物理状态的访问接口数据；

步骤2、数据存储，将上传的符合格式要求的数据缓存于浏览器本地或上传至后端的仓库中；

步骤3、对仓库中的三维对象进行编辑和管理；

步骤4、场景编辑可视化交互，导入仓库内素材，搭建场景并绑定后端信息接口；

步骤5、场景保存，在步骤4成功编辑并完成绑定的基础上，可浏览、导出当前场景，并根据选择要求生成“对象-接口”的配置文件。

进一步，所述步骤1的过程如下：

1.1获取显示层信息，获取三维场景搭建所需基本三维图像信息文件，支持如mtl、gltf、glb、fbx三维图像格式；

1.2获取数据层信息，获取现场传感器上传并存储于后端服务器中对象情况数据的访问接口，使用json格式数据格式进行交互。

再进一步，无论步骤1中何种方式上传的三维图像格式或访问接口的信息表，均使用WebGL规范方法进行解码并另存为json文件格式，根据编辑情况(在线或离线)，缓存于当前浏览器或上传至后端服务器保存，将各对象数据索引显示于仓库中以便后续使用。

更进一步，在Web页面中打开之间上传的三维图像，并对其内部结构和渲染内容进行增删改查，同时预设定不同状态下的渲染内容。

所述步骤4的过程如下：

4.1在初始化的空三维场景中导入仓库中的对象素材，依次完成场景内容的添加，借鉴编程语言中“类”和“对象”的思想，将仓库中的素材作为“类”提供显示内容，素材导入场景后视作实例化的“对象”，可以独立编辑属性，绑定接口信息；

4.2渲染导入的素材，并提供添加、成组、复制、位移、旋转、缩放等三维编辑器增添删改功能，以此完成三维场景搭建；所有从仓库导入的素材均会储存在一个共同的父类模型“场景”之内，该父类模型不可删改，仅用于囊括所有对象。

4.3在4.2的基础上点选需要绑定现实参数的对象，将后端信息接口数据、各种状态对应动画和渲染格式均绑定至选中图像中，并写入该图像数据族；将绑定信息均直接存储于模型数据之中，则后续无论对场景如何操作均不会影响绑定结果。

进一步，所述步骤5中，将包含所有对象的场景导出为gltf格式，因场景中已包含绑定数据，故只需在前端中导入该文件，激活后端数据接口即可进行仿真；同时，也支持根据选择在导出时同步生成“对象-接口”的配置文件，该功能通过在导出时遍历场景下面所有子对象信息来实现。也可选择完成绑定和编辑的单一对象，实现效果与场景无异。

本发明的技术构思为：首先，从工业互联网的角度出发，分析三维工控系统数字孪生仿真需求；接着，从数据驱动的角度出发，认为工控系统上传数据均为传感器真实获得，且准确率较高，并以此为基础进一步搭建基于此数据的仿真显示；为了加大接受信息的准确率和接受广度，需要对数据进行去噪处理、提取特征，进行故障分析(但本专利内容不包括信号处理方法，默认后端获取的数据是已经过处理判断的数据)；最后，从网页设计角度出发，借助“素材仓库”概念，借鉴“类-对象”思想，利用可视化思想，进行场景搭建和数据接口绑定，状态动作填写。

本发明的有益效果为：增加开发效率和舒适度。

附图说明

图1是传统三维场景编辑过程图。

图2是本方法三维场景编辑过程图。

具体实施方式

为了使本发明的技术方案、设计思路能更加清晰，下面结合附图在进行详尽的描述。

参照图1，现有三维场景编辑可分为三个步骤，三维建模师单个物体建模、前端编程对三维场景界面简单拼接、接口对接。其中，为了反映同一物体的不同状态，需要对于同一物体的多个状态分别建模，并全部加载到场景中，根据逻辑代码选择显示与否。

参照图2，与图1相比添加了仓库步骤，使得模型管理与后期维护更为简单，同时创建三维场景编辑界面，在其中可以以可视化方式完成场景编辑、模型多状态设置和接口绑定的前端编程，简化三维场景编程过程，避免同一物体多状态重复建模，并优化接口绑定的准确性和便利性。

参照图2，一种基于WebGL的前端三维场景搭建与可视化配置方法，包括以下步骤：

步骤1，数据接入，采用本地上传至浏览器或访问后端获取的形式接入图像需要仿真的三维图像信息和对应物理状态的访问接口数据；

所述步骤1的过程如下：

1.1获取显示层信息，获取三维场景搭建所需基本三维图像信息文件，支持如mtl、gltf、glb、fbx三维图像格式；

1.2获取数据层信息，获取现场传感器上传并存储于后端服务器中对象情况数据的访问接口，使用json格式数据格式进行交互。

再进一步，无论步骤1何种方式上传的三维图像格式或访问接口的信息表，均使用WebGL规范方法进行解码并另存为json文件格式，根据编辑情况(在线或离线)，缓存于当前浏览器或上传至后端服务器保存，将各对象数据索引显示于仓库中以便后续使用。

更进一步，所述步骤1中，在Web页面中打开之间上传的三维图像，并对其内部结构和渲染内容进行增删改查，同时预设定不同状态下的渲染内容。

步骤2、数据存储，将上传的符合格式要求的数据缓存于浏览器本地或上传至后端的仓库中；

步骤3、对仓库中的三维对象进行编辑和管理；

步骤4、场景编辑可视化交互，导入仓库内素材，搭建场景并绑定后端信息接口；

所述步骤4的过程如下：

4.1在初始化的空三维场景中导入仓库中的对象素材，依次完成场景内容的添加，借鉴编程语言中“类”和“对象”的思想，将仓库中的素材作为“类”提供显示内容，素材导入场景后视作实例化的“对象”，可以独立编辑属性，绑定接口信息；

4.2渲染导入的素材，并提供添加、成组、复制、位移、旋转、缩放等三维编辑器增添删改功能，以此完成三维场景搭建；所有从仓库导入的素材均会储存在一个共同的父类模型“场景”之内，该父类模型不可删改，仅用于囊括所有对象。

4.3在4.2的基础上点选需要绑定现实参数的对象，将后端信息接口数据、各种状态对应动画和渲染格式均绑定至选中图像中，并写入该图像数据族；将绑定信息均直接存储于模型数据之中，则后续无论对场景如何操作均不会影响绑定结果。

将包含所有对象的场景导出为gltf格式，因场景中已包含绑定数据，故只需在前端中导入该文件，激活后端数据接口即可进行仿真；同时，也支持根据选择在导出时同步生成“对象-接口”的配置文件，该功能通过在导出时遍历场景下面所有子对象信息来实现。也可选择完成绑定和编辑的单一对象，实现效果与场景无异。

步骤5、场景保存，在步骤4成功编辑并完成绑定的基础上，可浏览、导出当前场景，并根据选择要求生成“对象-接口”的配置文件。

Claims (6)

1.一种基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述方法包括以下步骤：

步骤1、数据接入，采用本地上传至浏览器或访问后端获取的形式接入图像需要仿真的三维图像信息和对应物理状态的访问接口数据；

步骤2、数据存储，将上传的符合格式要求的数据缓存于浏览器本地或上传至后端的仓库中；

步骤3、对仓库中的三维对象进行编辑和管理；

步骤4、场景编辑可视化交互，导入仓库内素材，搭建场景并绑定后端信息接口；

步骤5、场景保存，在步骤4成功编辑并完成绑定的基础上，可浏览、导出当前场景，并根据选择要求生成“对象-接口”的配置文件。

2.如权利要求1所述的基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述步骤1的过程如下：

1.1获取显示层信息，获取三维场景搭建所需基本三维图像信息文件，支持如mtl、gltf、glb、fbx三维图像格式；

1.2获取数据层信息，获取现场传感器上传并存储于后端服务器中对象情况数据的访问接口，使用json格式数据格式进行交互。

3.如权利要求2所述的基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述步骤1无论何种方式上传的三维图像格式或访问接口的信息表，均使用WebGL规范方法进行解码并另存为json文件格式，根据编辑情况，缓存于当前浏览器或上传至后端服务器保存，将各对象数据索引显示于仓库中以便后续使用。

4.如权利要求2所述的基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述步骤2中，在Web页面中打开之间上传的三维图像，并对其内部结构和渲染内容进行增删改查，同时预设定不同状态下的渲染内容。

5.如权利要求1～4之一所述的基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述步骤4的过程如下：

4.1在初始化的空三维场景中导入仓库中的对象素材，依次完成场景内容的添加，借鉴编程语言中“类”和“对象”的思想，将仓库中的素材作为“类”提供显示内容，素材导入场景后视作实例化的“对象”，可以独立编辑属性，绑定接口信息；

4.2渲染导入的素材，并提供添加、成组、复制、位移、旋转、缩放等三维编辑器增添删改功能，以此完成三维场景搭建；所有从仓库导入的素材均会储存在一个共同的父类模型“场景”之内，该父类模型不可删改，仅用于囊括所有对象；

4.3在4.2的基础上点选需要绑定现实参数的对象，将后端信息接口数据、各种状态对应动画和渲染格式均绑定至选中图像中，并写入该图像数据族；将绑定信息均直接存储于模型数据之中，则后续无论对场景如何操作均不会影响绑定结果。

6.如权利要求5所述的基于WebGL的前端三维场景搭建与可视化配置方法，其特征在于，所述步骤5中，将包含所有对象的场景导出为gltf格式，因场景中已包含绑定数据，故只需在前端中导入该文件，激活后端数据接口即可进行仿真；同时，也支持根据选择在导出时同步生成“对象-接口”的配置文件。

Images