CN116610881A - 一种基于低代码软件的WebGL浏览交互方法 - Google Patents
一种基于低代码软件的WebGL浏览交互方法 Download PDFInfo
- Publication number
- CN116610881A CN116610881A CN202310592950.7A CN202310592950A CN116610881A CN 116610881 A CN116610881 A CN 116610881A CN 202310592950 A CN202310592950 A CN 202310592950A CN 116610881 A CN116610881 A CN 116610881A
- Authority
- CN
- China
- Prior art keywords
- webgl
- low
- code software
- component
- command
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 230000003993 interaction Effects 0.000 title claims abstract description 27
- 230000009471 action Effects 0.000 claims abstract description 17
- 238000004088 simulation Methods 0.000 claims abstract description 11
- 230000002452 interceptive effect Effects 0.000 claims abstract description 9
- 230000004044 response Effects 0.000 claims abstract description 9
- 230000008569 process Effects 0.000 claims description 8
- 238000009877 rendering Methods 0.000 claims description 8
- 230000005540 biological transmission Effects 0.000 claims description 5
- 230000003068 static effect Effects 0.000 claims description 5
- 238000001514 detection method Methods 0.000 claims 4
- 230000007246 mechanism Effects 0.000 claims 3
- 210000000078 claw Anatomy 0.000 claims 2
- 238000012544 monitoring process Methods 0.000 claims 1
- 230000001960 triggered effect Effects 0.000 claims 1
- 238000005516 engineering process Methods 0.000 abstract description 18
- 238000011161 development Methods 0.000 abstract description 13
- 230000000694 effects Effects 0.000 abstract description 6
- 238000012360 testing method Methods 0.000 description 4
- 230000007547 defect Effects 0.000 description 2
- 230000007774 longterm Effects 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000010998 test method Methods 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明属于虚拟仿真技术分开发技术领域,具体为一种基于低代码软件的WebGL浏览交互方法;该方法包括以下步骤:虚拟仿真物理模型,规划模型的动作路径,编辑仿真逻辑,并导出WebGL数据文件;WebGL嵌入浏览器终端服务,设置相应交互逻辑;浏览器终端开放命令集端口;低代码软件调用端口传输操作命令,实现WebGL与浏览器脚本的虚拟仿真交互操作;本发明画面交互效果好,画面延迟时间短,每100ms刷新一次命令集,保证了画面的流畅度和响应速度,不受具体开发场景和内容的限制,本发明还具有实现灵活、可扩展性好等优点。
Description
技术领域
本发明涉及虚拟现实程序开发技术领域,具体涉及一种基于低代码软件的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中,触发点击事件需要调用微流。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310592950.7A CN116610881A (zh) | 2023-05-24 | 2023-05-24 | 一种基于低代码软件的WebGL浏览交互方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310592950.7A CN116610881A (zh) | 2023-05-24 | 2023-05-24 | 一种基于低代码软件的WebGL浏览交互方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN116610881A true CN116610881A (zh) | 2023-08-18 |
Family
ID=87681393
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310592950.7A Pending CN116610881A (zh) | 2023-05-24 | 2023-05-24 | 一种基于低代码软件的WebGL浏览交互方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116610881A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117493289A (zh) * | 2023-11-15 | 2024-02-02 | 早职到(广东)科技股份有限公司 | 一种多部门协同办公表单数据共享方法、***及存储介质 |
CN117874719A (zh) * | 2024-03-12 | 2024-04-12 | 慧新全智工业互联科技(青岛)有限公司 | 一种基于低代码平台开发工业软件的方法及*** |
-
2023
- 2023-05-24 CN CN202310592950.7A patent/CN116610881A/zh active Pending
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117493289A (zh) * | 2023-11-15 | 2024-02-02 | 早职到(广东)科技股份有限公司 | 一种多部门协同办公表单数据共享方法、***及存储介质 |
CN117874719A (zh) * | 2024-03-12 | 2024-04-12 | 慧新全智工业互联科技(青岛)有限公司 | 一种基于低代码平台开发工业软件的方法及*** |
CN117874719B (zh) * | 2024-03-12 | 2024-06-04 | 慧新全智工业互联科技(青岛)有限公司 | 一种基于低代码平台开发工业软件的方法及*** |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN103425479B (zh) | 用于远程设备的用户接口虚拟化 | |
CN116610881A (zh) | 一种基于低代码软件的WebGL浏览交互方法 | |
CN101059760B (zh) | Opengl到opengl│es翻译器和opengl│es仿真器 | |
CN108170611A (zh) | 自动化测试方法及装置、存储介质、电子设备 | |
US20220215583A1 (en) | Image processing method and apparatus, electronic device, and storage medium | |
WO2021204296A1 (zh) | 三维模型远程展示方法、第一终端、电子设备及存储介质 | |
CN112070906A (zh) | 一种增强现实***及增强现实数据的生成方法、装置 | |
TWI783472B (zh) | Ar場景內容的生成方法、展示方法、電子設備及電腦可讀儲存介質 | |
CN112579254B (zh) | 图形处理器的仿真方法、装置、电子设备和存储介质 | |
CN107423049A (zh) | 实现在线编程的方法、浏览器和终端设备 | |
CN110909439A (zh) | 一种基于ar的装配方法、装置及终端 | |
KR20130047071A (ko) | 모바일용 혼합현실 어플리케이션 개발 장치 및 그 방법 | |
CN112669194B (zh) | 虚拟场景中的动画处理方法、装置、设备及存储介质 | |
Diewald et al. | Towards a holistic approach for mobile application development in intelligent environments | |
CN106846431B (zh) | 一种支持多表现形式的统一Web图形绘制*** | |
WO2017006223A1 (en) | Graphic engine for creating and executing applications with multisensory interfaces | |
CN112807695A (zh) | 游戏场景生成方法和装置、可读存储介质、电子设备 | |
CN115018975A (zh) | 数据集生成方法、装置、电子设备及存储介质 | |
CN114404996A (zh) | 资源数据处理方法、***、编辑器、电子设备及存储介质 | |
Salmela et al. | Smart virtual prototypes: distributed 3D product simulations for Web based environments | |
Lu et al. | Design of immersive and interactive application based on augmented reality and machine learning | |
CN111966437A (zh) | 三维互动式飞机手册设计、使用方法及*** | |
Ekren et al. | Existing standards and programs for use in mobile augmented reality | |
Lu et al. | Interactive augmented reality application design based on mobile terminal | |
WO2023168999A1 (zh) | 一种虚拟场景的渲染方法、装置、电子设备、计算机可读存储介质及计算机程序产品 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |