CN111476882B

CN111476882B - 一种面向浏览器的机器人虚拟图形建模方法

Info

Publication number: CN111476882B
Application number: CN202010221308.4A
Authority: CN
Inventors: 蒋再男; 刘大翔; 李重阳; 刘宏
Original assignee: Harbin Institute of Technology
Current assignee: Harbin Institute of Technology
Priority date: 2020-03-26
Filing date: 2020-03-26
Publication date: 2023-09-08
Anticipated expiration: 2040-03-26
Also published as: CN111476882A

Abstract

本发明是一种面向浏览器的机器人虚拟图形建模方法。所述方法为设计HTML面板，基于three.js搭建虚拟场景，包括地面网格、光照、相机和辅助标记，完成浏览器客户端的基本架构；采用三维建模软件对机器人进行三维建模，转换格式后导入基于three.js搭建虚拟场景中，设置模型对象间的相对关系并调整位姿；针对机器人的实际工作环境和工作对象，进行工作环境构建，包括场景简单物体的虚拟模型重构和点云构建方法；建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加基于网页虚拟线程的碰撞检测功能。该方法有利于实现虚拟和远程实验室，为减少高成本真实实验室的建设提供了新的可行方案。

Description

一种面向浏览器的机器人虚拟图形建模方法

技术领域

本发明涉及机器人虚拟图形建模技术领域，是一种面向浏览器的机器人虚拟图形建模方法。

背景技术

随着涉及多学科融合的机器人技术的迅速发展，机器人的设计复杂度和任务难度也逐渐上升，人类关于机器人本体和智能规划等方面的探索成本也日益提高。因此，基于虚拟现实的机器人仿真技术成为了研究的热点之一。机器人仿真能够极大地降低实体实验的成本，能够对复杂任务进行相对准确的模拟和展示，对于科研和应用操作都具有不可替代的作用。

目前，基于虚拟现实的机器人仿真技术在不断地被创新地应用于多种场合，给用户提供了更好的沉浸感、交互性和想象性。虚拟现实技术已广泛地应用于示教、监控、仿真和离线编程等诸多方面，为使用者提供了更好的操作体验，为科研降低了更多的成本。然而，各大机器人企业的相对成熟的虚拟仿真方法，大多应用于封闭式系统，不利于进一步开发和拓展使用。因此，研究者提出了一系列基于OpenGL、Open Inventor等三维建模工具包的机器人虚拟建模方法，以更加灵活地对自己开发的机器人进行仿真等。

然而，现有的广泛用于机器人仿真的虚拟建模方法，一部分太过于底层，开发周期长，难度大，另一部分成本较高，不利于推广使用。随着网络的飞速发展，在网络浏览器上实现虚拟建模仿真的研究越来越成为热点，例如Java3D技术在机器人仿真上的应用。伴随着HTML5标准的提出，很多现代浏览器(IE除外)都开始支持WebGL标准的虚拟图形开发，并在游戏、动画领域得到了极大地重视和发展。基于WebGL的three.js三维工具包，只依赖浏览器即可进行动画渲染，使网络上大型三维场景可以不依赖服务器而建立，而且不具有系统依赖性。

发明内容

本发明为解决现有机器人虚拟建模方法的复杂性高、跨平台性不好或开发成本高的问题，本发明提供了一种面向浏览器的机器人虚拟图形建模方法，本发明提供了以下技术方案：

一种面向浏览器的机器人虚拟图形建模方法，所述方法基于Web平台，以three.js三维工具包为基础，包括以下步骤：

步骤1：设计HTML面板，基于three.js搭建虚拟场景，包括地面网格、光照、相机和辅助标记，完成浏览器客户端的基本架构；

步骤2：采用三维建模软件对机器人进行三维建模，转换格式后导入步骤1建立的虚拟场景中，设置模型对象间的相对关系并调整位姿；

步骤3：针对机器人的实际工作环境和工作对象，进行虚拟工作环境构建，包括场景中简单目标物体的虚拟模型重构和复杂物体点云构建；

步骤4：建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加碰撞检测功能。

优选地，所述步骤1具体为：

步骤1.1：采用带有canvas画布或WebGL脚本的HTML文档层次结构,基于three.js构建虚拟场景，HTML中的head元素中用script添加three.js的库文件，通过嵌入式脚本或者引用外部脚本的形式用script在body元素中添加场景描述语句；

选用WebRenderer渲染器，所有的渲染都是画在domElement上，结合相机和场景，渲染的结果在页面中的ID为right_content的区域显示；

步骤1.2:添加地面网格，地面定义为网格对象grid，添加到场景中，grid的位置position设为(0，0，0)，方向rotation设为(0，0，0)，代码为scene.add(grid)；

添加光照，必要的光照选用环境光AmbientLight，或者加上半光源HemisphereLight和平行光DirectionalLight，制造出真实的光照，使场景中有反光和阴影；

辅助标记建立设置光线的color值，设置为0xffffff，即白色光，为场景添加世界坐标系，使用AxisHelper对象，完成虚拟场景的搭建。

优选地，所述步骤2具体为：

采用三维建模软件Solidworks对机器人各个关节进行建模并装配，在装配图模式下转存为stl格式，并用Three.js的stl接口来导入步骤1建立的虚拟场景中；在网页文档HTML的head元素中包含接口文件，在描述三维场景的Robot.js文件中的场景初始化里面创建loader变量，用于模型导入；

导入各部分模型后，机器人模型的各关节相对位姿和原装配体一致，将每个关节模型的Mesh对象添加到Object3D容器或Group容器中，连接操作通过使用add命令，完成对设置模型对象间的相对关系和调整位姿。

优选地，所述变量loader导入模型接收两个参数，一个是stl模型文件路径和文件名，另一个是回调函数；回调函数function中添加对加入场景的模型的进一步描述，包括使用THREE.MeshPhongMaterial进行材料的设置，和使用THREE.Mesh设置导入的单个关节的网格。

优选地，步骤3：针对机器人的实际工作环境和工作对象，进行工作场景重构或实时环境构建，包括简单场景的虚拟模型重构和点云构建具体为；

采用three.js构造模型据实际情况适时修改模型尺寸和位姿信息，而加载的外部模型文件则无法修改，定义简单物体模型的js类或构造函数，留出参数接口，包括尺寸和相对位姿；使用交互按钮触发add或remove命令以添加和删除虚拟场景中的物体模型对象，通过按钮获取真实机器人视觉信息或手动设置参数来生成一个具体尺寸、材料和位姿的模型对象；

对于复杂工作环境、目标物体形状不规则的情况，获取机器人周围点云信息进行实时显示，根据three.js的JSON数据的导入接口和Points粒子类进行构造点，在获取点云的计算机系统将点云数据利用jsoncpp转换为JSON格式的文件，在网页端场景脚本中使用ajax提供的同步调用方法，读取jsonFile的data，并将三维点信息(x,y,z,r,g,b)添加到geometry中，利用Points方法，新建一个点云对象，将点云图加载。

优选地，所述步骤4：建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加碰撞检测功能具体为：

通过在HTML文档的head中添加<script src＝"js/libs/stats.min.js"></script>语句，为仿真系统添加性能监视；

通过在HTML文档head中添加<script src＝"js/libs/dat.gui.min.js"></script>语句，构造GUI部件添加手动调整滑块、参数输入框、选项框和按钮部件；

虚拟机器人模型各个关节及目标物体的控制数据接口和stats、gui需要实时更新的对象添加到上述update函数中，根据requestAnimationFrame的循环来刷新当前状态；

在HTML文档head中添加Physijs物理引擎的脚本，将基于模型近似包围盒的碰撞检测引入后台中进行计算，将场景或对象时的THREE替换为Physijs，实现碰撞检测和及时预警。

本发明具有以下有益效果：

本发明提出了一种非常有效的利用JavaScript的Web图形库three.js来构建机器人模型及工作环境的方法，该方法支持HTML5，不需要任何web浏览器插件或其它的应用程序，支持所有现代浏览器(非IE)，不依赖计算机系统，设计方法简单；该方法也不依赖于服务器对三维场景进行渲染，不存在频繁的服务器访问限制和执行与可视化之间的延迟；该方法使用户能够选择根据真实的机器人工作场景来重构近似的目标物体模型或者构建机器人相机获取的环境点云，更加准确逼真，且可以为非期望碰撞提供预警。该方法有利于实现虚拟和远程实验室，为减少高成本真实实验室的建设提供了新的可行方案。

附图说明

图1为面向浏览器的机器人虚拟图形建模方法流程图；

图2分别为带有场景的HTML文档层次结构图和虚拟机器人的three.js元素层次结构图。图2-(a)为带有canvas画布或WebGL脚本的HTML文档层次结构示意图，图2-(b)为Web图形库three.js的元素结构及顺序流程图；

图3为网页机器人场景的虚拟相机原理图；

图4分别为网页场景世界坐标系和相机坐标系；

图5分别为渲染性能监视部件和手动调整GUI，图5-(a)为性能监视部件，图5-(b)为手动调整GUI；

图6为机器人虚拟模型图；

具体实施方式

以下结合具体实施例，对本发明进行了详细说明。

具体实施例一：

根据图1所示，本发明提供一种面向浏览器的机器人虚拟图形建模方法，

所述步骤1具体为：

所述步骤2具体为：

采用三维建模软件Solidworks对机器人各个关节进行建模并装配，在装配图模式下,选择世界坐标系并转存为stl格式，并用Three.js的stl接口来导入步骤1建立的虚拟场景中；在网页文档HTML的head元素中包含接口文件，在描述三维场景的Robot.js文件中的场景初始化里面创建loader变量，用于模型导入；

所述变量loader导入模型接收两个参数，一个是stl模型文件路径和文件名，另一个是回调函数；回调函数function中添加对加入场景的模型的进一步描述，包括使用THREE.MeshPhongMaterial进行材料的设置，和使用THREE.Mesh设置导入的单个关节的网格。

步骤3：针对机器人的实际工作环境和工作对象，进行工作场景重构或实时环境构建，包括简单场景的虚拟模型重构和点云构建；

所述步骤3具体为；

所述步骤4具体为：建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加碰撞检测功能具体为：

在HTML文档head元素中添加Physijs物理引擎的脚本，将碰撞检测引入后台中进行计算，将构建场景或对象时的THREE类替换为Physijs类，实现基于网页虚拟线程的碰撞检测和及时预警。

具体实施例二：

步骤1、设计html面板，基于three.js搭建虚拟场景，包括地面网格、光照、相机、辅助标记等；

HTML是一种超文本标记语言，具有标识性，被作为统一格式用来描述Web网页内容。HTML面板文档由多层节点构成。节点分为几种类型分别描述文档中不同的信息或标记，所有节点之间构成了层次关系，使所有页面标记形成以一个特定节点<html>元素为根节点的树状图，其他所有元素都是文档元素的子元素。如图2(a)所示为带有canvas画布或WebGL脚本的HTML文档层次结构示意图。Web图形库three.js是一个基于JavaScript API的工具包，用于渲染3D计算机图形。但是，通过直接使用WebGL或通过画布创建3D场景非常麻烦。因此，three.js的使用充当了这两者之间连接的桥梁，并提供了一种简单的方法来实现3D对象和场景。

构建虚拟场景，首先需要在html中的<head>元素中用<script>添加three.js的库文件，即：<script src＝"three/three.js"></script>。然后，通过嵌入式脚本或者引用外部脚本的形式用<script>在<body>元素中添加场景描述语句，本方法采用引用外部脚本的形式，定义了一个Robot.js文件来描述机器人虚拟场景。

Web图形库three.js的元素结构及顺序流程如图2(b)所示。要渲染场景物体到网页中显示，场景Scene、相机Camera和渲染器Renderer是必备的三大组件。添加方法如下：

var scene＝new THREE.Scene()；

var camera＝new THREE.PerspectiveCamera(50,width/height,0.5,25000)；

var renderer＝new THREE.WebGLRenderer()；

其中width和height分别指将要显示的网页屏幕场景显示区域的宽和高，由画布区域决定；50指参数fov，是相机视锥体垂直视角，0.5值参数near，是相机视锥体近裁剪面，25000指参数far，是相机视锥体远裁剪面。

场景Scene是所有物体的容器，包括辅助对象Helpers和自定义对象Object3D。一切物体或对象都要通过add命令添加到场景中才能显示出来。相机决定了需要渲染到屏幕上的东西，three.js库提供了多种相机，包括正交相机、透视相机、立方体相机和组合相机等多种，在进行机器人工作场景构建时，常用的是第三人称视角，也是我们人眼观察世界的模式，因此选用透视相机。相机的原理如图3。另外，在网页的虚拟场景中，定义世界坐标系的z轴为垂直电脑屏幕向外，y轴为向上的；相机坐标系y轴向上，是相机的上方向而非世界系的上方，z轴向屏幕里面。

渲染器决定了渲染的结果应该画在元素的什么元素上面，并且以怎样的方式来绘制。Three.js中提供了很多渲染方法，本节选用WebRenderer渲染器，因为它使用HTML5直接内嵌到网页中，并且使用WebGL能够利用GPU硬件加速从而提高渲染性能。渲染器renderer设置如下，其中domElement元素表示渲染器画布，所有的渲染都是画在domElement上，所以这里的appendChild表示将这个domElement挂接在getElementById('right_content')下面，然后结合相机和场景renderer.render(scene,camera)，这样渲染的结果就能够在页面中的ID为right_content的区域显示了。

renderer.setSize(width,height)

document.getElementById('right_content').appendChild(renderer.domElement)

进一步地，为场景添加适合机器人的环境。首先是添加地面，为方便观察，地面定义为网格对象grid，添加到场景中，grid的位置position设为(0，0，0)，方向rotation设为(0，0，0)，代码为scene.add(new THREE.GridHelper(8000,20))；其次，添加光照，必要的光照为环境光AmbientLight，类似于非阳光下白天的物体显示，或者加上半光源HemisphereLight和平行光DirectionalLight，制造出真实的光照，使场景中有反光和阴影，更加真实生动；同时光照对象的建立可以设置光线的color值，以使场景物体显示出一定得色彩，此处设为0xffffff，即白色光。最后，为场景添加世界坐标系，使用AxisHelper对象。至此，虚拟场景搭建工作基本完成。

步骤2、使用三维建模软件对机器人进行三维建模和装配，转换格式后导入步骤一所设虚拟场景中，设置模型相对关系并调整位姿；

对于外形相对复杂的拟人机械臂，一般很难通过编程语言实现建模。Three.js虽然有丰富的建模功能，但对于形状复杂的不规则形体，工作量太大。为了提高工作效率，本实施方法选用Solidworks对7自由度机械臂各个关节进行建模并装配。然后，在装配图模式下转存为stl格式，并用Three.js的stl接口来导入模型。在网页文档html的<head>元素中包含接口文件<script src＝"javascript/STLLoader.js"></script>，在描述三维场景的Robot.js文件中的场景初始化里面创建loader变量，用于模型导入：var loader＝newTHREE.OBJLoader()；其中变量loader导入模型接收两个参数，一个是stl模型文件路径和文件名，另一个是回调函数。回调函数function中添加对加入场景的模型的进一步描述，包括使用THREE.MeshPhongMaterial进行材料material的设置(材料包含了颜色或贴图等其他属性)，使用THREE.Mesh设置导入的单个关节的网格等。

loader.load('./models/stl-model-2/Robot-Assembly–base.STL',function(geometry){…})；

导入各部分模型后，机器人模型的各关节相对位姿和原装配体一致，但连接关系需要定义。这个过程中虚拟模型的节点连接顺序非常重要。因为虚拟场景中父节点运动可以带动子节点运动，反之则不行。又由于Three.js中网格元素Mesh不能添加子节点，所以需要将每个关节模型的Mesh对象添加到Object3D容器或Group容器中，连接操作也使用add命令完成，如下：

group[1].add(group[2])；//关节2连接到关节1上，关节1作为关节2的父节点

group[2].add(group[3])；

步骤3、进行工作场景重构或实时环境构建，主要是针对机器人的工作环境和工作对象，包括重构近似简单的虚拟模型和环境点云加载；

机器人虚拟模型场景的基本模型完成，但机器人的工作环境往往不是固定不变的，因此，需要结合不同环境和工作对象适时的修改场景环境信息，主要提出两种方案：简单模型的重构和点云场景显示。

对于一般工作环境中的简单目标物体，比如近似的方体、圆柱、球体、圆环或者它们的组合体等，three.js提供了对应的构造函数，均可以方便的在场景中进行设计，而不需要加载外部模型文件。用three.js构造模型的优点是可以根据实际情况适时修改模型尺寸和位姿信息，而加载的外部模型文件则无法修改。本方法在描述模型的文件中定义简单物体模型的js类或构造函数，留出参数接口，一般为尺寸和相对位姿。使用交互按钮触发add或remove命令以添加和删除虚拟场景中的物体模型对象，这时，用户通过按钮获取真实机器人视觉信息或手动设置参数来生成一个具体尺寸、材料和位姿的模型对象。例如，重构组合圆环模型的方法如下：

对于复杂工作环境、目标物体形状不规则的情况，依靠three.js建模相对复杂，本实施方法提出获取机器人周围点云信息进行实时显示的方法。three.js有JSON数据的导入接口，又有Points粒子类可以构造点，因此，可以在获取点云的计算机系统将点云数据利用jsoncpp转换为JSON格式的文件，然后在网页端场景脚本中使用ajax提供的同步调用方法，读取jsonFile的data，并将三维点信息(x,y,z,r,g,b)添加到geometry中，利用Points方法，新建一个点云对象，就可以将点云图加载出来：

pointscloud＝new THREE.Points(geometry,material)；

scene.add(pointscloud)；

步骤4、添加性能监视和手动调整GUI小部件，进行场景渲染并添加碰撞检测功能；

结合图5和图6，图5-(a)为性能监视部件，图5-(b)为手动调整GUI，在网页场景采用实时渲染的方法，即在requestAnimationFrame()中循环调用。在模型描述的js文件中添加：

本方法在html文档的<head>中添加<script src＝"js/libs/stats.min.js"></script>语句，可以为仿真系统添加性能监视，以实时了解仿真渲染的性能如何。同时，在<head>中添加<script src＝"js/libs/dat.gui.min.js"></script>语句，可以方便的构造GUI部件以便添加手动调整滑块、参数输入框、选项框和按钮部件，如：datGui.add(gui,"angle1",-180,180)；其中，gui定义为：

虚拟机器人模型各个关节及其他目标物体的控制数据接口和stats、gui等需要实时更新的对象都添加到上述update()函数中，以便依靠requestAnimationFrame()的循环来刷新当前状态。

最后，可以在<head>中添加Physijs物理引擎的脚本，来对依靠three.js创建的机器人虚拟场景进行进一步包装。Physijs物理引擎基于Web workers网页线程定义，即将碰撞检测引入后台中进行计算，这样不会是render线程的场景渲染帧率受影响。在设计时，将有必要进行碰撞检测的物体模型进行语句改造，即将原来的新建(new)场景或对象时的THREE类替换为Physijs类，定义适当的近似包围盒方法，然后再进行约束和材质设置，即可实现碰撞检测，及时预警。对于双臂机器人来说，已经设置了关节限位，那么其双臂之间和臂身之间，就应该设置检测，以防止它们进行不被期望的碰撞。物理引擎的引入方法如下：

以上所述仅是一种面向浏览器的机器人虚拟图形建模方法的优选实施方式，一种面向浏览器的机器人虚拟图形建模方法的保护范围并不仅局限于上述实施例，凡属于该思路下的技术方案均属于本发明的保护范围。应当指出，对于本领域的技术人员来说，在不脱离本发明原理前提下的若干改进和变化，这些改进和变化也应视为本发明的保护范围。

Claims

1.一种面向浏览器的机器人虚拟图形建模方法，所述方法基于Web平台，以three.js三维工具包为基础，其特征是：包括以下步骤：

所述步骤3具体为：采用three.js构造模型据实际情况适时修改模型尺寸和位姿信息，而加载的外部模型文件则无法修改，定义简单物体模型的js类或构造函数，留出参数接口，包括尺寸和相对位姿；使用交互按钮触发add或remove命令以添加和删除虚拟场景中的物体模型对象，通过按钮获取真实机器人视觉信息或手动设置参数来生成一个具体尺寸、材料和位姿的模型对象；

对于复杂工作环境、目标物体形状不规则的情况，获取机器人周围点云信息进行实时显示，根据three.js的JSON数据的导入接口和Points粒子类进行构造点，在获取点云的计算机系统将点云数据利用jsoncpp转换为JSON格式的文件，在网页端场景脚本中使用ajax提供的同步调用方法，读取jsonFile的data，并将三维点信息(x,y,z,r,g,b)添加到geometry中，利用Points方法，新建一个点云对象，将点云图加载；

步骤4：建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加碰撞检测功能；

所述步骤4：建立虚拟模型数据接口，添加渲染性能监视和用来手动调整模型的GUI部件，进行场景渲染并添加碰撞检测功能具体为：

虚拟机器人模型各个关节及目标物体的控制数据接口和stats、gui需要实时更新的对象添加到update函数中，根据requestAnimationFrame的循环来刷新当前状态；

2.根据权利要求1所述的一种面向浏览器的机器人虚拟图形建模方法，其特征是：所述步骤1具体为：

步骤1.2:添加地面网格，地面定义为网格对象grid，添加到场景中，grid的位置position设为(0，0，0)，方向rotation设为(0，0，0)，代码为scene.add；

3.根据权利要求1所述的一种面向浏览器的机器人虚拟图形建模方法，其特征是：所述步骤2具体为：

4.根据权利要求3所述的一种面向浏览器的机器人虚拟图形建模方法，其特征是：所述变量loader导入模型接收两个参数，一个是stl模型文件路径和文件名，另一个是回调函数；回调函数function中添加对加入场景的模型的进一步描述，包括使用THREE.MeshPhongMaterial进行材料的设置，和使用THREE.Mesh设置导入的单个关节的网格。