基于webgl的三维模型轻量化展示技术的制作方法

文档序号:12786475阅读:3215来源:国知局

本发明涉及一种在web上展示三维模型的技术,尤其是涉及一种基于webgl的三维模型轻量化展示技术。



背景技术:

随着网络技术和计算机技术的发展,基于Web的三维可视化技术也得到了快速的发展,并有着广泛的应用。但传统的用于实现三维数据的Web3D技术,包括VRML、Java3D、Flash3D等技术,都需要安装插件或着加载组件,而且具有操作性复杂、兼容性差等缺点。webgl规范的出现使得三维数据无需插件直接在网络浏览器中的可视化成为现实。webgl可以为浏览器提供硬件图形加速渲染,借助系统显卡,开发人员可以在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。webgl技术标准免去了开发网页专用渲染插件的麻烦,能够跨平台且被众多浏览器厂商广泛支持。

目前webgl越来越被广泛的用于在web上展示3D模型,完成各种交互。但很多原始3D模型是在PC三维设计软件中产生的,格式会多种多样,并不能被webgl直接解析,而且三维产品模型往往复杂程度高、数据规模庞大,在基于web展示时会由于数据过大导致无法加载或者加载过于缓慢,严重影响用户体验。在进行webgl显示前,首先要对原始格式的3D模型数据进行解析和转换,在转换过程中对数据进行轻量化,得到尽可能小的中间格式文件,使3D模型能被快速加载,并减少服务器上3D模型所占用的空间,是基于webgl展示技术的关键。



技术实现要素:

为了克服现有技术存在的不足,本发明提供了一种基于webgl的三维模型轻量化展示技术,其可基于webgl直接在浏览器中进行展示,缩减了模型大小,提高了模型在网页中的加载和显示速度。

本发明采用的技术方案是:

一种基于webgl的三维模型轻量化展示技术,包括下列步骤:

(1)对第三方格式的三维模型进行预处理,获取所有几何对象并去除重复的对象,再根据其材质信息生成对应的材质对象,根据模型树结构生成对应的场景树结构,若模型存在动画,则生成对应的动画树结构;

(2)对所有几何对象进行预处理,获取几何对象的离散三角形和离散线段数据,离散三角形包括顶点数据、UV数据、法向数据和索引数据,离散线段包括顶点数据和索引数据;

(3)对离散三角形的索引数据进行排序并对其值进行缩小化处理,以提高压缩算法对索引数据的压缩率;先找出每个三角形的索引的最小值,以最小值重新定义三角形索引顺序,而后将所有三角形以第一个顶点和第二个顶点的索引大小进行从小到大的排序,最后利用错位相减法对所有三角形的索引进行缩小化处理;

(4)对离散三角形的法向量按照象限区分后进行整数化处理,减少法向数据存储的字节数;

(5)对离散线段的索引数据进行缩小化处理;

(6)对所有几何对象进行分块处理;

(7)对所有的几何对象的分块分别进行lzma的压缩处理并生成后缀为bin的若干文件;

(8)对所有几何对象和材质对象的属性数据、场景树和动画树进行json化处理,生成后缀为js的主文件,记录几何对象、材质对象、场景树结构、动画树结构以及其他自定义数据;

(9)前端分别读取js主文件和bin文件,对bin文件进行解压后,再对离散三角形和离散线段的数据进行还原处理,根据场景树结构和动画树结构分别建立场景和动画对象,之后利用webgl渲染场景和动画对象。

作为优选,所述的步骤(1)按下述方法进行:先通过相关api获取模型中所有几何对象节点,然后对重复节点去冗余,记录其相关属性数据,同时获取几何对象对应的材质信息,生成材质对象,最后根据模型树结构生成对应的场景树结构。

作为优选,所述的步骤(2)按下述方法进行:根据设置的精细度(粗糙、中等、精细),通过相关api控制离散精度,获取离散三角形和离散线段数据,其中,离散三角形的数据定义为:顶点数据为每个顶点坐标由三个单精度浮点数表示;UV数据为每个顶点的UV由两个单精度浮点数表示;法向数据为每个顶点的法向量由三个单精度浮点数表示;索引数据为每个三角形的索引由4位的三个整数表示;其中,离散线段的数据形式为:顶点数据为每个顶点坐标由三个单精度浮点数表示;索引数据为每个线段的索引由4位的两个整数表示。

作为优选,所述的步骤(3)按下述方法进行:对于每个三角形的三个索引v1、v2和v3,在右手法则的约束下,找出其中的最小值,假定最小值为v2,则新的索引顺序为v2、v3、v1,将所有三角形按照第一个顶点和第二个顶点的索引大小进行从小到大的排序,假设排序后的离散三角形索引为f(n)=(v1,v2,v3,v4,v5,v6,…,vn),其中n为所有三角形的顶点数量,利用错位相减法进行缩小,对于第一个三角形(v1,v2,v3),执行v2=v2–v1和v3=v3–v1的运算,对于其他三角形,如(v4,v5,v6),先执行v6=v6–v4的运算,然后若v4等于v1,则执行v5=v5–v2的运算,若v4不等于v1,则执行v5=v5–v4的运算,最后执行v4=v4–v1的运算,其他三角形依次类推。

作为优选,所述的步骤(4)按下述方法进行:对于离散三角形的归一化法向量(n1,n2,n3),首先在三维空间的八象限中计算出其值所在的对应象限并记录下象限编号gradNum,其中(0,1,2,3,4,5,6,7)分别代表一至八象限,象限编号用一个字节表示;若法向的精度设置为中等,则执行n1=abs(n1)*65535+0.5、n2=abs(n2)*65535+0.5和n3=abs(n3)*65535+0.5的运算,值取整后每个分量用2个字节表示;若法向的精度设置为粗糙,则执行n1=abs(n1)*255+0.5、n2=abs(n2)*255+0.5和n3=abs(n3)*255+0.5的运算,值取整后每个分量用1个字节表示;经过上述处理后,一个包含3个浮点数,12个字节的法向数据可以用(gradNum,n1,n2,n3)表示,中等精度下压缩为7个字节,粗糙精度下压缩为4个字节。

作为优选,所述的步骤(5)按下述方法进行:对于离散线段的索引,假设其为f(m)=(v1,v2,v3,v4,…,vm),其中m为所有线段的端点数量,若f(m)满足连续递增的条件,则遍历所有索引,并分别执行vm=vm–v(m-1)的运算。

作为优选,所述的步骤(6)按下述方法进行:对于所有几何对象,其几何数据经过步骤(3)、(4)和(5)的处理后,按照设定的顶点数量和UV数量,将其分成多个分块chunk,分为(geometryChunk1,geometryChunk2…geometryChunkN),将一个大数据转为多块小数据,以支持渐进加载和显示。

作为优选,所述的步骤(7)按下述方法进行:经过步骤(6)的处理后,将其分块(geometryChunk1,geometryChunk2…geometryChunkN)分别利用lzma压缩算法对其进行压缩并分别生成对应的bin文件。

作为优选,所述的步骤(8)按下述方法进行:对所有几何对象和材质对象的属性数据进行json化处理,生成后缀为js的主文件,记录几何对象和材质对象的引用关系以及其他自定义数据,几何对象的属性数据包括唯一标识符(uuid)、类型(type)和空间包围盒(box),材质对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、基础颜色值(color)、环境光(ambient)、镜面光(specular)、自发光(emissive)、自发光强度(emissiveIntensity)、环境反射强度(reflectivity)、折射系数(refractionRatio)、镜面光强度(shininess)、不透明度(opacity)、基础贴图(mapDiffuse)、凹凸贴图(mapBump)、凹凸系数(bumpScale)、线段宽度(linewidth)、粗糙系数(roughness)、金属光泽系数(metalness)、双面渲染(doubleSided);场景树结构中每个子对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、变换矩阵(matrix)、绑定的几何对象的ID(geometry)、绑定的材质对象的ID(material)、所有的子对象(children),动画树中每个动画的属性数据包括唯一标识符(uuid)、动画名称(name)、每秒的帧率(fps)、动画时长(duration)、动画对应的场景树结构(animationObject)、动画的关键帧数据(tracks)。

作为优选,所述的步骤(9)按下述方法进行:前端分别读取js主文件和bin文件,对bin文件进行解压后,按照步骤(3)、步骤(4)、步骤(5)中的方法,再对离散三角形和离散线段的数据进行还原处理,同时根据js主文件中的场景树结构和动画树结构分别建立场景和动画对象,之后利用webgl渲染场景和动画对象。

本发明使各格式三维模型能够转换为一种较小体积的中间文件,在web平台中能够快速加载,可基于webgl直接在浏览器中进行展示,缩减了模型大小,提高了模型在网页中的加载和显示速度,减少等待时间,提升用户体验。

具体实施方式

下面结合实例对本发明做进一步的详细描述,但是本发明的保护范围并不限于此。

一种基于webgl的三维模型轻量化展示技术,对于三维建模软件SolidWorks生成的模型来说,包括以下步骤:

(1)先通过相关SolidWorks document相关的api获取模型中所有几何对象节点,然后对重复节点去冗余,记录其相关属性数据,同时获取几何对象对应的材质信息,生成材质对象,根据模型树结构生成对应的场景树结构,若模型存在动画,则生成对应的动画树结构;

(2)对所有几何对象进行预处理,获取几何对象的离散三角形和离散线段数据,离散三角形包括顶点数据、UV数据、法向数据和索引数据,离散线段包括顶点数据和索引数据;具体为:根据设置的精细度(粗糙、中等、精细),通过相关SolidWorks tessellation api控制离散精度,获取离散三角形和离散线段数据;其中离散三角形的数据定义为:顶点数据为每个顶点坐标由三个单精度浮点数表示,UV数据为每个顶点的UV由两个单精度浮点数表示,法向数据为每个顶点的法向量由三个单精度浮点数表示,索引数据为每个三角形的索引由4位的三个整数表示;其中离散线段的数据形式为:顶点数据为每个顶点坐标由三个单精度浮点数表示,索引数据为每个线段的索引由4位的两个整数表示;

(3)对离散三角形的索引数据进行排序并对其值进行缩小化处理,以提高压缩算法对索引数据的压缩率;先找出每个三角形的索引的最小值,以最小值重新定义三角形索引顺序,而后将所有三角形以第一个顶点和第二个顶点的索引大小进行从小到大的排序,最后利用错位相减法对所有三角形的索引进行缩小化处理;具体为:对于每个三角形的三个索引v1、v2和v3,在右手法则的约束下,找出其中的最小值,假定最小值为v2,则新的索引顺序为v2、v3、v1,将所有三角形按照第一个顶点和第二个顶点的索引大小进行从小到大的排序,假设排序后的离散三角形索引为f(n)=(v1,v2,v3,v4,v5,v6,…,vn),其中n为所有三角形的顶点数量,利用错位相减法进行缩小,对于第一个三角形(v1,v2,v3),执行v2=v2–v1和v3=v3–v1的运算,对于其他三角形,如(v4,v5,v6),先执行v6=v6–v4的运算,然后若v4等于v1,则执行v5=v5–v2的运算,若v4不等于v1,则执行v5=v5–v4的运算,最后执行v4=v4–v1的运算,其他三角形依次类推;

(4)对离散三角形的法向量按照象限区分后进行整数化处理,减少法向数据存储的字节数;具体为:关于离散三角形的法向,对于每个三角形的归一化的法向量(n1,n2,n3),在三维空间的八象限中计算出其值所在的对应象限并记录下象限编号gradNum,其中(0,1,2,3,4,5,6,7)分别代表一至八象限,若法向的精度设置为中等,则执行n1=abs(n1)*65535+0.5、n2=abs(n2)*65535+0.5和n3=abs(n3)*65535+0.5的运算,值取整后每个分量用2个字节表示;若法向的精度设置为粗糙,则执行n1=abs(n1)*255+0.5、n2=abs(n2)*255+0.5和n3=abs(n3)*255+0.5的运算,,值取整后每个分量用1个字节表示;然后再将n1、n2和n3分别整数化;经过上述处理后,一个包含3个浮点数,12个字节的法向数据用(gradNum,n1,n2,n3)表示,中等精度下压缩为7个字节,粗糙精度下压缩为4个字节;

(5)对于离散线段的索引,利用错位相减法进行缩小:假设其为f(m)=(v1,v2,v3,v4,…,vm),其中m为所有线段的端点数量,若f(m)满足连续递增的条件,则遍历所有索引,并分别执行vm=vm–v(m-1)的运算;

(6)对于所有几何对象,其几何数据经过步骤(3)、(4)和(5)的处理后,按照设定的顶点数量和UV数量,将其分成多个分块chunk,分为(geometryChunk1,geometryChunk2,…,geometryChunkN),将一个大数据转为多块小数据,以支持渐进加载和显示;

(7)将所有分块(geometryChunk1,geometryChunk2,…,geometryChunkN)分别利用lzma压缩算法对其进行压缩并分别生成对应的bin文件;

(8)对所有几何对象和材质对象的属性数据进行json化处理,同时场景树和动画树也分别json化,生成后缀为js的主文件:对所有几何对象和材质对象的属性数据进行json化处理,生成后缀为js的主文件,记录几何对象和材质对象的引用关系以及其他自定义数据,几何对象的属性数据包括唯一标识符(uuid)、类型(type)和空间包围盒(box),材质对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、基础颜色值(color)、环境光(ambient)、镜面光(specular)、自发光(emissive)、自发光强度(emissiveIntensity)、环境反射强度(reflectivity)、折射系数(refractionRatio)、镜面光强度(shininess)、不透明度(opacity)、基础贴图(mapDiffuse)、凹凸贴图(mapBump)、凹凸系数(bumpScale)、线段宽度(linewidth)、粗糙系数(roughness)、金属光泽系数(metalness)、双面渲染(doubleSided);场景树结构中每个子对象的属性数据包括唯一标识符(uuid)、类型(type)、名称(name)、变换矩阵(matrix)、绑定的几何对象的ID(geometry)、绑定的材质对象的ID(material)、所有的子对象(children),动画树中每个动画的属性数据包括唯一标识符(uuid)、动画名称(name)、每秒的帧率(fps)、动画时长(duration)、动画对应的场景树结构(animationObject)、动画的关键帧数据(tracks);

(9)前端分别读取js主文件和bin文件,对bin文件进行解压后,按照步骤(3)、步骤(4)、步骤(5)中的方法,再对离散三角形和离散线段的数据进行还原处理,同时根据js主文件中的场景树结构和动画树结构分别建立场景和动画对象,之后利用webgl渲染场景和动画对象,这样就完成了SolidWorks模型的轻量化展示。

本发明提供了将多格式三维模型转化为一种轻量化的中间格式数据方法,并可基于webgl直接在浏览器中进行展示,缩减了模型大小,提高了模型在网页中的加载和显示速度。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1