一种基于WebGL实例化技术构件级操作的实现方法及系统与流程

本发明涉及建筑业信息技术领域，特别是一种基于webgl实例化技术构件级操作的实现方法及系统。

背景技术：

如今，3d大场景在web浏览器中想要流畅加载，一个重要的技术难点，就是如何运用gpu加速，借用显卡的高性能，去处理复杂的模型顶点运算。3d大场景轻量化在网页端显示，经常需要每一帧都绘制相同的物体许多次，造成cpu的过载。fps则会大幅度降低，最终造成浏览器整体性能的大幅度下降。当前webgl1.0标准中不包含任何用于实例化绘制的api，webgl2.0也尚未成熟。

目前，国内主流替代方案采用merge(合并)技术对具有相同性质的物体模型进行合并。但此方案有三个弊端。第一、merge技术的最优方案，按照材质分类来进行合并，会变成单一材质，影响美观和实际效果。第二、merge的原理其实是根据材质的不同，重新组织并合并模型中的顶点数据、三角面，这最终导致模型没办法进行单构件操作。这在业务系统应用是致命的。第三，merge技术如果不按材质分类来合并，会导致展示变成单材质，造成模型显示丑陋。国内在游戏领域会采用实例化技术，主要应用在植被、粒子等，但均未能实现单构件级别操作。

技术实现要素：

本发明旨在运用实例化技术，显著提高3d建筑大场景在网页端的显示性能的同时，还能进行单构件操作，满足系统业务上的需求。为了解决上述技术问题，本发明提供一种基于webgl实例化技术构件级操作的实现方法，具体包括以下步骤：

第一步，生成构件对象列表：解析ifc模型文件，把ifc标准格式模型文件解析出来生成一个构件对象列表；

第二步，生成gltf文件：采用相似度算法，按类别生成自定义的gltf二进制格式文件；

第三步，生成场景树：解析gltf二进制格式文件，生成场景树；

第四步，分类绘制：采用glsl，进行着色器编程，对场景树中的构件进行实例化分类绘制；

第五步，节点匹配：采用缓存列表技术，对单构件进行节点索引匹配映射；

第六步，单构件操作：节点匹配后，使用webgl相关api，做相关单构件操作方法；

第七步，展示：web前端3d轻量化展示。

进一步的，在所述第一步ifc标准格式模型中定义了ifctypeobject类对象。

进一步的，所述第一步生成的构件对象列表中具体每个构件用独立的数据存储来保存好空间坐标位置信息，最终转化生成对应的gltf格式文件。例如：ifcwindow.gltf文件或ifcdoor.gltf文件，这类gltf格式文件。

进一步的，所述第二步中的gltf二进制格式文件，主要包含meshes和nodes，buffers等节点。

进一步的，所述meshes节点描述某类构件列表，所述nodes节点描述具体每个构件，所述buffers节点描述几何数据用二进制数据生成，并通过base64编码成字符串。

进一步的，所述第三步中的场景树由three.js引擎通过fileloader异步加载所述步骤二的gltf格式文件而生成。

进一步的，所述第四步中的glsl包含顶点着色器和片元着色器，所述顶点着色器主要控制顶点的空间信息，所述片元着色器主要控制顶点的颜色。

进一步的，所述第五步中缓存列表技术的具体步骤为：

第一步，在实例化对象instancemesh的同时，给实例化对象增加一个缓存列表属性cachelist；

第二步，遍历nodes节点的同时，根据每个node的空间信息创建虚拟的cachemesh对象；

第三步，把cachemesh对象存储在cachelist中；

第四步，cachemesh和instancemesh通过index属性进行索引匹配映射。

进一步的，所述第六步中相关单构件操作方法的具体步骤为：

第一步，通过射线拾取技术和缓存列表中cachemesh进行射线碰撞，并返回出需要的cachemesh，cachemesh中预先存有与instancemesh对应的索引；

第二步，通过索引匹配，得到cachemesh，并找到其对应的instancemesh类；

第三步，应用instancemesh类拓展的单构件操作方法进行单构件操作。

本发明还公开了一种基于webgl实例化技术构件级操作的系统，其特征在于包括以下模块：

构件对象列表生成模块，用于解析ifc模型文件，把ifc标准格式模型文件解析出来生成一个构件对象列表；

gltf文件生成模块，用于采用相似度算法，按类别生成自定义的gltf二进制格式文件；

场景树生成模块，用于解析gltf二进制格式文件，生成场景树；

分类绘制模块，用于采用glsl，进行着色器编程，对场景树中的构件进行实例化分类绘制；

节点匹配模块，用于采用缓存列表技术，对单构件进行节点索引匹配映射；

单构件操作模块，用于在节点匹配后，使用webgl相关api，做相关单构件操作方法；

展示模块：用于web前端3d轻量化展示。

进一步的，所述构件对象列表生成模块中构件对象列表的具体每个构件用独立的数据存储来保存好空间坐标位置信息，最终转化生成对应的gltf格式文件。例如：ifcwindow.gltf文件或ifcdoor.gltf文件，这类gltf格式文件。

进一步的，所述gltf文件生成模块中的gltf二进制格式文件主要包含meshes和nodes，buffers等节点。

进一步的，所述场景树生成模块中的场景树由three.js引擎通过fileloader异步加载所述步骤二的gltf格式文件而生成。

进一步的，所述分类绘制模块中的glsl包含顶点着色器和片元着色器，所述顶点着色器主要控制顶点的空间信息，所述片元着色器主要控制顶点的颜色。

本发明的有益效果为能够单构件操作，并且更加流畅，更好的保持原有的模型特征，达到web端轻量化展示。

附图说明

图1是本发明方法的流程图；

图2是本发明系统的结构图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步详述。在此需要说明的是，下面所描述的本发明各个实施例中所涉及的技术特征只要彼此之间未构成冲突就可以相互组合。

如图1所示实施例公开了一种基于webgl实例化技术的构件级操作的实现方法，包含以下步骤：

步骤一、解析ifc模型文件。通过文本解析，把ifc标准格式模型文件解析出来生成一个构件对象列表。其中ifc格式，是个通用的标准，在ifc标准中有定义了ifctypeobject类对象，比如窗户用ifcwindow表示，门用ifcdoor表示。一个简单的相似度算法可以通过ifc的构件类别来区分，从ifctypeobject类对象获取并保存一份相同的几何信息，再从各自的ifcobjectplacement属性中获取并保存每个构件的空间坐标位置，这样就可以保证同类型构件实例复用同一份几何数据，不仅达到轻量化模型文件的目的，还能对模型文件按类型分类按需加载。根据步骤一得到的构件对象列表，遍历所有构件，为同类型的构件设置一个类别标志，具体每个构件用独立的数据存储[一个数组]来保存好空间坐标位置信息，最终转化生成对应的gltf格式文件。例如：ifcwindow.gltf文件或ifcdoor.gltf文件，这类gltf格式文件。

步骤二、采用相似度算法，按类别生成自定义的gltf二进制格式文件。gltf文件是一种流行的、可拓展的json格式文件，用来描述3d模型，该标准本身用一棵场景树的表达。主要包含meshes和nodes，buffers等节点。meshes描述某类构件列表，nodes描述具体每个构件。buffers描述几何数据用二进制数据生成，并通过base64编码成字符串。具体生成的ifcwindow.gltf(窗户)格式如下：

meshes数组描述了两种类型窗户(百叶窗、推拉窗)，nodes为具体某类型窗户的个数及空间信息(旋转，缩放，平移)，通过自定义mesh属性值映射到meshes数组索引。

步骤三、解析gltf二进制格式文件，生成场景树。

使用three.js引擎，通过fileloader异步加载步骤二的gltf格式文件，并采用前端的promise技术异步读取并分别解析meshes、nodes等节点，关联生成一棵符合webgl内存表达的场景树。

伪代码：

步骤四、采用glsl，进行着色器编程，对场景树中的构件进行实例化分类绘制。glsl是用在webgl中着的色器编程语言，他们是在gpu上执行的，是渲染管线编程的一部分，通过着色器编程，可以利用gpu进行加速计算，提高渲染效率。它包含顶点着色器和片元着色器。顶点着色器主要控制顶点的空间信息(旋转、缩放和平移)，片元着色器主要控制顶点的颜色。three.js引擎提供了着色器材质对象shadermaterial作为自定义着色器的接口。它有几个重要的属性用于实现自定义着色器，分别是uniforms，vertexshader，fragmentshader，defines，attributes。基于glsl特性和three.js的自定义着色器接口，自定义封装了instancemesh类(百叶窗是一个instancemesh实例类，推拉窗也是一个instancemesh实例类)，步骤三每次进行promise请求调用ioadmesh时，就new一个instancemesh实例类。通过nodes数组的mesh属性索引来映射到每个mesh实例，并通过索引对不同实例进行空间信息(旋转、缩放和平移)的赋值。这就保证了同一类构件，只用一个实例类，并能保证该类的每个构件在空间中有不同的位置和展现。

伪代码：

步骤五、采用缓存列表技术，对单构件进行节点索引匹配映射。

缓存列表技术是能够获取并拾取到单个构件的关键。由于merge或实例化操作后，都已经把构件合并成一体，这就导致业务系统已经不能再获取到单个构件信息。缓存列表技术恰恰可以解决问题，这也得益于自定义gltf格式文件的数据组织方式。

其中，缓存列表技术方法的步骤为：

(一)在实例化对象instancemesh的同时，给实例化对象增加一个缓存列表属性cachelist；

(二)遍历nodes节点的同时，根据每个node的空间信息创建虚拟的cachemesh对象；

(三)把cachemesh对象存储在cachelist中；

(四)cachemesh和instancemesh通过index属性进行索引匹配映射。

步骤六、节点匹配后，使用webgl相关api，做相关单构件操作方法。

通过封装instancemesh实例类，拓展了单构件操作的方法。包括setlnstancescale(mesh，scale)缩放，setlnstanceposition(mesh，position)平移，setlnstancerotation(mesh，rotation)旋转等方法。

伪代码：

mesh.prototype.setpositionat＝function(index，position){

this.geometry.attributes.instanceposition.setxyz(index，position.x，position.y，position.z)；

}

mesh.prototype.setquaternionat＝function(index，rotation){

this.geometry.attributes.instancerotation.setxyzw(index，rotation.x，rotation.y，rotation.z)；

}

mesh.prototype.setscaleat＝function(index，scale){

this.geometry.attributes.instancescale.setxyz(index，scale.x，scale.y，scale.z)；

}

步骤六具体包含如下子步骤：

(一)通过射线拾取技术和缓存列表中cachemesh进行射线碰撞，并返回出需要的cachemesh，cachemesh中预先存有与instancemesh对应的索引；

(二)通过索引匹配，得到cachemesh，并找到其对应的instancemesh类；

(三)应用instancemesh类拓展的单构件操作方法进行单构件操作。

步骤七、web前端3d轻量化展示，并可进行单构件操作，包括旋转，缩放，平移，视椎体裁剪等。至此，整个方案结束。

如图2所示，本实施例公开了一种基于webgl实例化技术构件级操作的系统，包括以下模块：

构件对象列表生成模块，用于解析ifc模型文件，把ifc标准格式模型文件解析出来生成一个构件对象列表，构件对象列表的具体每个构件用独立的数据存储来保存好空间坐标位置信息，最终转化生成对应的gltf格式文件。例如：ifcwindow.gltf文件或ifcdoor.gltf文件，这类gltf格式文件；

gltf文件生成模块，用于采用相似度算法，按类别生成自定义的gltf二进制格式文件，并主要包含meshes和nodes，buffers等节点；

场景树生成模块，用于解析gltf二进制格式文件，由three.js引擎通过fileloader异步加载所述步骤二的gltf格式文件生成场景树；

分类绘制模块，用于采用glsl，进行着色器编程，对场景树中的构件进行实例化分类绘制，其中glsl包含顶点着色器和片元着色器，所述顶点着色器主要控制顶点的空间信息，所述片元着色器主要控制顶点的颜色；

节点匹配模块，用于采用缓存列表技术，对单构件进行节点索引匹配映射；

单构件操作模块，用于在节点匹配后，使用webgl相关api，做相关单构件操作方法；

展示模块：用于web前端3d轻量化展示。

以上所述，仅是本发明的较佳实例而已，并非对本发明的技术范围作任何限制，故但凡依本发明的权利要求和说明书所做的变化或修饰，皆应属于本发明专利涵盖的范围之内。