基于WebGL的机械产品三维展示技术研究

本资料包含pdf文件1个，下载需要1积分

随着互联网的发展，无论是普通消费者还是企业用户，都越来越倾向于基于B/SBrowser/Server架构的应用服务。因此，能在浏览器端与机械产品的三维模型直接进行交互也成为了消费者及企业用户的需求。本文介绍的基于WebGLWebGraphics Library的机械产品三维展示技术可以使用户在浏览器端直接与机械产品的三维模型进行交互，可以被应用在许多基于B/S架构的应用程序上，例如虚拟装配、在线机械零件库等。与当前所流行的在Web环境下的机械产品的三维展示技术所不同的是，用户无需为浏览器安装任何插件，这大大提高了用户的体验感；此外，该项展示技术已逐渐受到不少移动终端 手机、PDA、平板电脑等上的浏览器的亲睐与支持，这也是当前流行的Web环境下的机械产品三维展示技术所无可比拟的。到目前为止，几乎所有的主流桌面浏览器以及移动浏览器均支持该项展示技术。

当前流行的在Web环境下的机械产品的三维展示技术是基于ActiveX插件、Applet插件以及Flash插件的三维展示技术，在各种基于WEB的零件库中都可以看到它们的身影。但这三种技术共同的缺点是：需要为浏览器安装相应的渲染插件 ，才可在浏览器端展示出机械产品的三维模型；另-方面，三者难以在移动端的浏览器上展示出三维模型 因为大部分的移动端浏览器目前不支持用户自行安装第三方插件。表1所示为基于webGLWeb Graphics Library的三维展示技术与目前的主流Web三维展示技术的浏览器支持情况对比。

借助Flash的web三维展示技术倾向于定制开发，制作成本高，制作周期长，这在-定程度上限制了其应用的领域；而基于ActiveX插件的Web三维展示技术的现状是：除了E浏览器之外，其他主流浏览器并不能原生地支持ActiveX插件，近两年来，E浏览器的市场份额正逐渐缩水，这使得基于ActiveX插件的三维展示技术的适用领域大大减校本文所介绍的技术则弥补了以上不足。

1 核心技术简介WebGL是-系lJJavascript的应用程序编程接 口，可以在任何兼容WebGL的浏览器中渲染交互式的3D图形嘲和2D图形嘲。WebGL通过Web页面的Canvas标签，完全集成在支持GPUGraphics Processing Unit加速的Web浏览器中。

图1 使用WebGL的web应用程序的工作模式收稿日期：2013-05-20作者简介：霍冬 1991-，男，广西南宁人，硕士研究生，研究方向为数字制造。

第35卷 第9期 2013-09下 731务生 匐 化表1 WebGL与主流Web展示技术的浏览器支持情况对比WebGL可以与其他的HTML元素组合起来，作为页面的-部分或者作为页面的背景。基于WebGL的程序包含了使用Javascript编写的代码以及被计算机GPU所执行的着色器代码。WebGL是基于OpenGL ES 2.0的-系YlJJavascript应用程序编程接口。目前，WebGL由非盈利性的机构KhronosGroup设计与管理 该机构同时管理着许多知名的应用程序编程接口，例/OpenGL、OpenCL等。

2 基于WebGL的机械产品三维展示技术实现若想在支持WebGL的浏览器中展示机械产品三维模型，首先应了解WebGL对三维模型的数据要求，进而将已有的机械产品的三维模型中的数据解析出来，并按WebGL所要求的数据组织方式进行整理，最后才能在浏览器中显示。图2所示为这项技术的原理。

2.1 WebGL对三维模型的数据信息要求由于WebGL基于OpenGL ES 2.0，故其对三维模型的描述方式与OpenGL ES 2.0类似，即通过多个三角面片来描述-个三维模型实体。这就要求我们必须为每-个三维模型实体提供它的所有三角面片的信息，而不是三维模型的几何体素间的拓扑关系 这-点十分重要，因为当前较常用的机械产品三维模型数据交换格式STEP和GES均是用三维模型的几何体素间的拓扑关系来描述三维模型实体。WebGL需要的三角面片基本信息很简单：每个三角面片的三个顶点的坐标。这-描述方式与常用的机械产品模型数据格式STL以及VRML的描述方式相似。有了这些信息后，浏览器可以根据三角面片三个顶点的坐标来确定三角面片的位置。

74 第35卷 第9期 2013-09下坐颜法 向 息阵阵图2 基 于WebGL的机械产品三维展示技术流程将每-个三维模型实体的所有三角面片的顶点坐标提供给支持WebGL的浏览器后，并不能在浏览器中显示出三维模型实体，这是因为我们并未告知浏览器这些三角面片的颜色信息。WebGL处理颜色的方法与OpenGL的方法类似，即引入了着色器 Shader的概念。我们需要为每-个三角面片的顶点提供颜色值，从而使得三角面片拥有颜色信息，这样用户就可以在浏览器端看到机械产品的三维模型。以顶点坐标分别为0，1，0、-1，-1，0、1，-l，O，顶点颜色分别为红、绿、蓝的三角形为例，在Javascript中调用WebGL渲染并显示出该三角形的方法为：，/根据页面上Canvas标签的d获取Canvas对象v a r c a n v a s d 0 C u m e n t。

getElementByld”oCanvas”；，/利用Canvas对象创建WebGL对象var glcanvas.getContext”experimental-webgl”；，/初始化WebGL对象g1.viewport0，0，800，600；g1.clearg1.COLORBUFFERBT g1.DEPTH-BUFFER BT，vat shaderProgram/初始化着色器vat vertexBufferg1.createBuffer；//使用webGl对象创建缓冲g1.bindBufferg1.ARRAYBUFFER，aBuffer；//声明将要操作aBufervat veices0，1，0，-l，-l，0，l，-，Ol；/Ol建三角形的顶点坐标数组g1.bufferDatag1.ARRAY--BUFFER，newFloat32Arrayvertices，g1.STATC DRAW；/把顶点务l 5 化坐标数组赋给数组缓冲vat colorBuferg1.createBuffer0；/使用WebG1对象创建缓冲g1.bindBUfferg1.ARRAY-BUFFER，triangleVertexColorBuffer；vat colors1，0，0，1，0，1，0，1，0，0，1，1；/创建三角形的顶点颜色数组g1.bufferDatag1.ARRAY--BUFFER，newFloat32Arraycolors，g1.STATCDRAW；/把顶点颜色数组赋给数组缓冲 ，/初始化视图矩阵和投影矩阵g1.bindBuferg1.ARRAYBUFFER，aBuffer；//声明将要操作aBuferg1.vertexAttribPointerg1.getAttribLocationshaderProgram，aVertexPosition”，3，g1.FLOAT，false，0，o；/将顶点坐标赋给着色器g1.bindBUfferg1.ARRAY-BUFFER，triangleVertexColorBuffer；g1.vertexAtribPointerg1.getAtribLocationshaderProgram，aVertexPosition”，3，g1.FLOAT，false，0，o；将顶点颜色赋给着色器. .，/利用视图矩阵和投影矩阵计算实际坐标g1.drawArraysg1.TRANGLES，0，4；/使用三角面片的方式渲染并显示图形。

依照上述的过程，便可以在浏览器中显示出机械产品的三维模型，但这样的三维模型缺乏立体感，其在显示设备上的表现仅为颜色始终不变的色块。缺乏立体感的原因是缺乏光照信息，在计算机图形学中，光照可以让不同距离、不同位置、不同区域的三维模型实体呈现出与现实-致的视觉效果。由计算机图形学的知识可以得知，三维模型嘲中的光照反射模型有冯氏反射模型、朗伯反射模型，具体采用哪种光照反射模型视诚而定 。对于机械产品三维模型的展示来说，要想让机械产品显示得更为立体，我们除了需要为嘲添加光照信息以及确定光照反射模型外，最重要的是为每-个三维模型实体提供-组额外的信息来接收光照，从而产生立体感。这里的额外信息指的是每个三角面片的三个顶点的法向量。

综上所述，若要在支持WebGL的浏览器中显示机械产品的三维模型，除了与显示相关的全局参数外，还需要为其提供每-个三维模型的所有三角面片的顶点坐标、颜色值以及法向量。图3所图3 WebGL渲染流程图示为webGL的渲染流程，从该流程图中可以看出WebGL的实际渲染过程，同时也可以看出我们要为WebGL提供的数据信息包括机械产品的顶点信息以及与展示相关的全局属性。

2.2 获取WebGL所需要的三维模型数据信息常用的机械产 品三维模型数据交换格式有STEP、GES、STL、VRML以及众多三维建模软件的专用格式等。其中，STEP和GES等数据交换格式描述三维实体的方式主要为描述三维模型实体各体素间的拓扑关系，而STL和VRML描述三维模型实体的方式和WebGL描述三维模型实体的方式类似，即通过三角面片的顶点及颜色信息来描述三维模型实体。

根据前文所述的WebGL对三维模型的要求来看，STL和VRML这两种数据交换格式更适宜被用作Web环境下的机械产品三维模型的源数据格式，符合这两种数据交换格式的三维模型文件可以轻易地从主流的三维建模软件中获得，例如SolidWorks、UG、Pro/E等。

这里，笔者选用STL数据交换格式进行基于WebGL的机械产品三维展示技术的研究。STL文件-共有两种形式：ASC文本文件和二进制文件。这两种形式的STL文件包含的信息主要包括三维模型的名字、三维模型的描述、以及三维模型所有三角面片的各顶点坐标和所有三角面片的法向量。直接从STL文件中解析出的模型数据信息可根据需要进行修复处理。具体的数据组织方式可参阅相关标准。以下展示了由SolidWorks生成的ASC格式的STL模型数据组织方式：solid零件1，/零件描述/三角面片法向量第35卷 第9期 2013-09下 751 、l 甸 化facet normal 1.0OJ0OOe0OO 0.000000e00O0.000O00e000outer loop/三角面片各顶点坐标vertex 5.3 10000e001 9.10000OeOO00.00000Oe000vertex 5.3 10000e00l 9.1OO000e00053 lO000e0Olvertex 5.3 10000e001 0.000000e0O00.O00000e000endloopendfacetendsolid选用好机械产品三维模型的源数据格式后，便可以依据前文所述的方法，让使用了WebGL的Web应用程序针对该格式进行解析和渲染，从而展现出三维模型。

2.3提高用户体验感为了减小浏览器端的压力、进-步提高用户的体验感，更好的做法是将解析的过程交由服务器完成，并将解析的结果返回给浏览器，这样可以使展示过程更有效率。

在此，笔者采用的方法是：服务器端对STL格式的三维模型进行解析，然后按照WebGL对三维模型的要求重新组织为JSONJavaScript ObjectNotation数据交换格式，然后返回给浏览器端。

JSON 是-种轻量级的数据交换格式。它是基于JavaScript的-个子集。 JSON使用了类似于C语言家族的习惯，使JSON成为理想的数据交换语言。

易于人的阅读和编写，同时也易于机器的解析和生成。STL数据格式与JSON数据格式的数据信息映射关系如图3所示。

图4 STL数据格式与JSON数据格式的数据信息映射关系761 第35卷 第9期 2013-09下经过服务器端重新组织后的符合WebGL要求的JSON数据格式为：，/所有三角面片的顶点坐标vertices：，.-，，/所有三角面片的顶点法向量normal：，.-，/机械产品三维模型的颜色值color：0xff8800他信息J综上所述，本文所述的基于WebGL的机械产品三维展示技术可归纳为图2所示。

3 应用实例笔者将前文所述的基于WEBGL的机械产品三维展示技术应用于基于B/S架构的复杂产品装配工艺培训与考核系统中。通过这项技术，系统的使用者可以在浏览器端与复杂机械产品零部件的三维模型进行实时交互。

图5 基于B/S架构的复杂产品装配工艺培训与考核系统3.1系统简介培训者从浏览器端进入复杂产品装配工艺培训与考核系统。在系统中完成某-款复杂产品的相关培训后，培训者可进入系统的考核拈来针对该款复杂产品的装配工艺进行考核。

装配工艺的考核使用虚拟装配的方式来进行。以某-款复杂产品装配工艺的考核过程为例：首先，培训者在浏览器端可以看到该产品的主要零部件；然后，培训者根据培训内容，在浏览器端与这些产品的零部件的三维模型进行互动，模拟装配的过程。当培训者完成虚拟装配过程后或测试时间结束后，复杂产品装配工艺考核系统将根据培训者的操作予以评分并反馈给培训者以及系统管理员。

訇 化复杂产品装配工艺培训与考核系统的另-个重要角色是系统管理员，系统管理员根据培训计划，将培训资料、三维模型以及其它相关文件通过后台上传至系统。

3.2基于WebGL的机械产品三维展示技术的应用复杂产品装配工艺培训与考核系统的考核模块使用了前文所述的基于WEBGL的机械产品三维展示技术。

厂----- 厂----.----- 厂-------- 系统 员L-.1 i筹 艇服H 翳图6 基于WebGL的机械产 品三维展不技术 的应用该拈的工作流程及基于WEBGL的机械产品展示技术在其中的应用可以归纳如下：1系统管理员将相关的三维模型通过后台上传至服务器 本系统的源数据格式采用前文所述的STL。

2服务器对STL文件进行解析和转存。服务器根据前文所述的WebGL对三维模型实体的要求，从STL文件中解析出机械产品三维模型的所有三角面片的顶点坐标、顶点颜色、顶点法向量，然后转存为方便浏览器端解析的JSON数据格式。

3培训者进入某-款复杂产品的装配工艺考核拈 即进入虚拟装配。

4服务器从数据库中读拳过重新编译的JSON格式的三维模型文件，以及相关的考核文件，返回给浏览器端。

5支持WebGL的浏览器即可展现出整个虚拟装配嘲。培训者此时可以按照培训内容完成该产品装配工艺的虚拟装配过程，最后系统为培训者打分，考核过程结束。

4 结束语除了笔者所述的基于B/S架构的复杂产品装配工艺培训与考核系统外，基于WEBGL的机械产品展示技术也可应用在许多机械产品的VR诚。

有别于当前流行的基于ActiveX插件、Applet插件和Flash插件的Web环境下的三维展示技术，本文所述的基于WebGL的机械产品三维展示技术无需用户为浏览器安装任何插件，即可在浏览器上与机械产品的三维模型进行交互。除此之外，移动终端上的浏览器逐渐开始支持WebGL。

目前大部分移动终端上的浏览器不支持用户自行安装第三方插件，所以大部分流行的Web环境下的三维展示技术无法在移动终端上显示出机械产品的三维模型，这从另-方面体现出了本文所述的基于WebGL的机械产品三维展示技术的优越性 。