CN116610881A - 一种基于低代码软件的WebGL浏览交互方法 - Google Patents

Abstract

本发明属于虚拟仿真技术分开发技术领域，具体为一种基于低代码软件的WebGL浏览交互方法；该方法包括以下步骤：虚拟仿真物理模型，规划模型的动作路径，编辑仿真逻辑，并导出WebGL数据文件；WebGL嵌入浏览器终端服务，设置相应交互逻辑；浏览器终端开放命令集端口；低代码软件调用端口传输操作命令，实现WebGL与浏览器脚本的虚拟仿真交互操作；本发明画面交互效果好，画面延迟时间短，每100ms刷新一次命令集，保证了画面的流畅度和响应速度，不受具体开发场景和内容的限制，本发明还具有实现灵活、可扩展性好等优点。

Description

一种基于低代码软件的WebGL浏览交互方法

技术领域

本发明涉及虚拟现实程序开发技术领域，具体涉及一种基于低代码软件的WebGL浏览交互方法。

背景技术

虚拟现实(Virtual Reality，简称VR)是近年来发展最为迅速的技术之一，已广泛应用于教育、医疗、地产等多个产业。它具有存在沉浸性、交互性、想象力、多感知性四大特点。其基本实现方式是以计算机技术为主，利用并综合三维图形技术、多媒体技术、仿真技术、显示技术、伺服技术等多种高科技的最新发展成果，借助计算机等设备产生一个逼真的三维视觉、触觉、嗅觉等多种感官体验的虚拟世界，从而使处于虚拟世界中的人产生一种身临其境的感觉。

随着科学技术水平的提高和WebGL技术的快速发展，Web浏览器端实现三维图形交互已成为可能。早期的三维技术存在诸多不足，如平台的兼容性较差、占用资源较多等问题，使用当前的WebGL技术可以解决早期技术的不足之处。WebGL(全写Web GraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助***显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一是WebGL可以在开发过程中使用脚本本身制作网页交互三维动画，在整个项目的开发过程中用户不需要额外安装任何插件，只需要借助显卡就可以展示三维模型；第二是WebGL的移植性很高，可以在不同的平台或硬件设备上运行，跨平台、轻量化、开放性是实现本可视化***的原则，也是最突出的优势。

现在每个移动设备都内置了3D硬件比如平板、手机和电脑等，都可以利用浏览器本身的功能。因此三维图形渲染使用WebGL技术在浏览器中可以轻松支持，更好的促进了Web3D技术的发展。虚拟仿真的画面开发可借助Unity3D软件进行，Unity3D软件是目前使用最为广泛的游戏开发引擎之一，它具有操作简单，功能强大等优势。WebGL技术可以使用户在浏览器中对三维模型进行操作，用户在操作过程中可以通过鼠标或键盘等设备实现和项目的交互，使用户通过交互过程获取虚实一体化的体验。为了方便网络的传输，通常模型都会进行压缩或者优化设计，便于对计算机的资源有更低的要求。除此之外，若用户想通过浏览器展示模型文件，则可以在浏览器中对模型文件发出请求，服务器接收到文件发出的请求后，会立刻将用户请求的模型传输给用户。

WebGL的渲染技术和OpenGL的渲染技术相同，都是采用管线(Graphics Pipeline)渲染图形，为了达到三维立体效果需要对模型进行渲染，渲染过程首先需要对坐标进行转换，即将三维坐标转化为二维坐标，之后通过在平面上进行光栅化的投影就能够完成效果图。WebGL工作流程主要分为三大块：第一，得到需要渲染的图形的顶点坐标；第二，需要进行图元装配；第三，光栅化的图形处理；将前两步得到的图形的顶点坐标和相关信息保存到缓存程序中，利用着色器工具生成作色程序。完成坐标转换的过程，最后对这些完成着色和坐标转换的图元进行装配。

近年来，低代码软件助力工厂数字化转型。尤以西门子低代码软件Mendix为例，不仅提供全生态的开发环境，还有一整套云原生解决方案。大大地提高了开发的效率，省去了很多不必要的开发流程。

发明内容

本发明的目的在于提供一种基于低代码软件的WebGL浏览交互方法，本发明能够将Unity3D中的仿真模型，通过WebGL的形式，展示到前端浏览器中，并将操作命令向外暴露，以达到外部控制端操控内部WebGL的效果。

本发明的技术方案具体介绍如下。

本发明提供一种基于低代码软件的WebGL浏览交互方法，包括以下步骤：

步骤1：虚拟仿真物理模型，规划模型的动作路径，编辑仿真逻辑，并导出WebGL数据文件；

步骤2：测试导出的WebGL是否可以在浏览器显示(这里的测试不涉及测试方法，仅仅是在浏览器中打开WebGL文件查看是否能正常显示)，并将WebGL作为静态文件放在SpringBoot项目的根目录下；

步骤3：选择低代码软件的版本，创建应用程序，文件夹分类，选择相应的组件并添加组件；

步骤4：WebGL嵌入浏览器终端服务，并在终端服务中设置交互逻辑；

步骤5：低代码软件后台调用浏览器端口传输操作命令；

在上述技术步骤的基础上，步骤1具体包括以下步骤：

Solid Works建模，模型导入Unity3D，Unity3D进行模型渲染，动画仿真、设置响应场景、场景的交互动作，场景按钮部署(用于不同动作指令的演示)，场景相机连接(用于实时展示模型的运动状态)，命令接口代码编写，命令接口代码附加模型(用于外部函数调用模型动作)。

在上述技术步骤的基础上，步骤2、3具体包括以下步骤：

本地打开WebGL文件，测试是否能在本地正常访问，不能正常访问的原因有很多种，具体问题具体分析，如果是在Unity3D中导出的问题，需要重新设置，再次导出；

选择低代码软件的长期支持版本，选择离线模式；在低代码软件的应用商店下载Iframe组件，注意是否已弃用，选择新版的Iframe组件；标记Iframe组件的地址，地址是WebGL在SpringBoot项目中的相对地址；

创建新的低代码软件项目，并添加Iframe组件、button组件(用于调用命名)，设置Iframe组件url为步骤2中的浏览器地址，调整Iframe组件展示样式。

在上述技术步骤的基础上，步骤4具体包括以下步骤：

构建低代码软件后台实现框架，根据实现思路创建微流；微流调用一个公共的JS，JS需要指明调用服务器的具体接口，然后通过网络协议和服务器建立联系；传递命令至接口服务，同时调整Iframe组件的刷新频率，保证动作命令的及时响应；在网页上添加实现交互操作的按钮，并调用微流。

WebGL数据文件导入Spring Boot项目，创建桥接接口代码(JavaScript)，设置跨域访问，嵌套WebGl文件至前端展示代码中，创建队列用于存放低代码软件传输命令，创建接口用于接收低代码软件命令，设置前端轮询命令队列时间参数，启动前端服务。

在上述技术步骤的基础上，步骤5具体包括以下步骤：

将步骤3的button组件添加微流，执行自定义JavaScript方法，在自定义方法中添加调用外部http接口方法，并调用由步骤4提供的接口，传递命令至接口服务，同时刷新Iframe组件的刷新频率，保证动作命令的及时响应。

和现有技术相比，本发明的有益效果在于：本发明画面交互效果好，画面延迟时间短，每100ms刷新一次命令集，保证了画面的流畅度和响应速度，不受具体开发场景和内容的限制，本发明还具有实现灵活、可扩展性好等优点。

附图说明

图1是本发明实例中一种基于低代码软件的WebGL浏览交互方法流程图；

图2是本发明低代码软件终端与浏览器终端服务交互方式图。

具体实施方式

为了使本发明的实现效果和技术手段更有利于理解，下面结合具体的图示和开发实例进行具体阐述本发明。

如图1所示，本发明提供了一种基于低代码软件的WebGL浏览交互方法，具体包括以下步骤：

步骤1：虚拟仿真物理模型，规划模型的动作路径，编辑仿真逻辑，并导出WebGL数据文件。

首先，需要构建虚拟仿真物理模型，并导入Unity3D虚拟仿真工具进行渲染。

其次，重定位模型坐标，脚本编辑模型的运动轨迹，并设置好和前端交互的相应接口。动画仿真、设置响应场景、场景的交互动作，场景按钮部署(用于不同动作指令的演示)，场景相机连接(用于实时展示模型的运动状态)，命令接口代码编写，命令接口代码附加模型(用于外部函数调用模型动作)。

最后，检查无误后，导出WebGL文件。

步骤2：测试导出的WebGL是否可以在浏览器显示，将WebGL作为静态文件放在SpringBoot项目的根目录下。

WebGL可能会受导出方式、浏览器等方式的影响，所以导出之后务必进行测试。WebGL作为静态文件添加到项目的根目录下，便于访问。

步骤3：选择低代码软件的版本，创建应用程序，选择相应的组件并添加组件。

(1)选择低代码软件的长期支持版本，选择离线模式。在低代码软件的应用商店下载Iframe组件，注意是否已弃用，选择新版的Iframe组件。标记Iframe组件的地址，地址是WebGL在SpringBoot项目中的相对地址；创建微流。

(2)在网页上添加实现交互操作的按钮，并调用微流。微流中需要指明调用服务器的具体接口，然后通过网络协议和服务器建立联系。传递命令至接口服务，同时调整Iframe组件的刷新频率，保证动作命令的及时响应。

步骤4：WebGL嵌入浏览器终端服务，并在终端服务中设置交互逻辑。

WebGL数据文件导入Spring Boot项目，创建桥接接口代码(JavaScript)，设置跨域访问，嵌套WebGl文件至前端展示代码中，创建队列用于存放低代码软件传输命令，创建接口用于接收低代码软件命令，设置前端轮询命令队列时间参数，启动前端服务。

通过设置定时器不断地发送接收信号的请求等，实现和浏览器端的交互；

步骤5：低代码软件后台调用浏览器端口传输操作命令。

采用HTTP通信协议，访问SpringBoot项目开放的端口进行数据的传输，采集的数据存入队列中进行保存。在WebGL的HTML文件中设置定时器，不断地去请求存在队列中的数据，直到前端操作，数据存入，HTML做出响应，操作成功。

本发明将浏览器服务端与低代码软件应用端进行分离，浏览器服务端嵌入WebGL应用，并提供相关接口用于接收各个终端的操作命名，低代码软件应用端用于展示浏览器端的UI，并设置相关按钮，调用服务端接口，传输不同的动作指令，如图2所示。

以某六轴机器人模型为例，进行扩展屏幕显示效果展示，首先将三维模型导入Unity3D软件之中，再导出WebGL数据文件，便可嵌入浏览器中并展示动画。

将导出的WebGL数据导入到Spring Boot项目中，并添加桥接代码，用于前端JavaScript调用WebGL中的动作命令，实现了浏览器端与WebGL互通。

在低代码软件程序端，设置相应的组件，并调整组件的长短，或者采用自适应方式，来适配程序显示，同时在后台启用微流传递命令参数至浏览器服务端，实现了低代码软件端与浏览器端的互通。

Claims (7)

1.一种基于低代码软件的WebGL浏览交互方法，其特征在于，包括以下步骤：

步骤1：虚拟仿真物理模型，规划模型的动作路径，编辑仿真逻辑，并导出WebGL数据文件；

步骤2：测试导出的WebGL是否可以在浏览器显示，将能够正常运行的WebGL数据文件作为静态文件放在SpringBoot项目的根目录下；不能正常显示的话需要在Unity3D中重新导出WebGL模型；

步骤3：选择低代码软件的版本，创建应用程序，文件夹分类，选择相应的组件并添加组件；

步骤4：WebGL嵌入浏览器终端服务，并在终端服务中设置交互逻辑、开放接口；

步骤5：低代码软件后台调用浏览器端口传输操作命令，实现WebGL与浏览器脚本的虚拟仿真交互操作；具体包括：

根据需要实现的功能给前端button组件绑定点击事件，低代码软件中事件的触发是通过调用相应的微流或纳流来实现的；微流或纳流又可以调用JS逻辑组件完成需求；将步骤3的button组件添加微流，执行自定义JavaScript方法，在自定义方法中添加调用外部http接口方法，并调用由步骤4提供的接口，传递命令至接口服务，同时刷新framework组件的刷新频率，保证动作命令的及时响应。

2.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤1中，三维建模软件建模，模型导入Unity3D，Unity3D进行模型渲染，动画仿真，设置响应场景、场景的交互动作，场景按钮部署，场景相机连接，命令接口代码编写；在机器人仿真过程中，需要借助Unity3D的碰撞监测机制；碰撞检测就是检测两个物体是否相交；Unity3D中实现工序仿真时通过卡爪与工件是否接触来启动Unity3D的碰撞检测机制，进而触发碰撞检测机制的回调函数实现卡爪和工件的隐藏和显现；在机器人模型的属性中添加BoxCollider部件后该机器人模型就具备了碰撞器的特性，添加RigidBody部件之后就是刚体。再按如上产生碰撞和触发的条件对相互接触的两个部件进行设置，就能实现碰撞检测了。

3.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤2中，设置WebGL导出的格式为压缩格式。

4.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤3中，低代码软件为Mendix低代码软件。

5.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤3中，创建新的低代码软件项目，并添加framework组件用于调用命名button组件，设置framework组件url为步骤2中的浏览器地址，调整framework组件展示样式。

6.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤4中，WebGL数据文件作为静态文件导入到Spring Boot项目的resource目录下，有必要的话需要进行重命名；

创建桥接接口代码JavaScript，设置跨域访问；

嵌套WebGL文件至前端页面中，需要在低代码软件的应用商店中下载Iframe组件，Iframe组件需要将WebGL在项目中的地址赋值给对应的参数；

创建队列用于存放低代码软件传输命令，创建接口用于接收低代码软件命令；

设置前端轮询命令队列时间参数，启动前端服务。

7.根据权利要求1所述的基于低代码软件的WebGL浏览交互方法，其特征在于：步骤5中，触发点击事件需要调用微流。