三维模型的mesh 三维模型的分类

转载

岁月如歌甚好 2024-05-16 05:34:04

文章标签 三维模型的mesh webgl javascript itwin.js 贴图 文章分类 架构后端开发

一、三维模型表示方式

在计算机图形学中，三维模型一般是指空间中物理实体对象的数学表示。具体说来，三维模型是由其形状和颜色外观的描述构成。通常，三维对象的表示方法可以分为面表示和体表示两种类型。
面表示： 也就是表示三维对象的表面。常用方法为多边形网格、隐式曲面和参数曲面，下面会着重介绍多边形网格，市面上主流的WebGL图形引擎，如：Cesium.js、iTwin.js、Three.js、SuperMap等，均采用多边形网格的数据结构。
体表示： 表示三维对象的体积。常用的体数据表示方法包括体素和构造实体几何。需要注意的是，在iTwin.js中，出于性能考虑，无论你是以那种方式构造出的实体，导入模型后最终都会转化为多边形网格的表现形式。

二、多边形网格

多边形网格是三维模型常用的形状表现形式。一个多边形网格是利用多边形单元，如：三角形、四边形等，对一个连续曲面的分割。以三角形网格为例，三角网格(Triangle Meshes)也称作三角形图元，是计算机图形学中用来构造一个物体的最小单位。每个三角网格由顶点坐标（Vertices）和顶点索引（Faces）构成。顶点坐标即三角形的三个顶点在空间中的坐标；顶点索引包含了顶点之间的连接顺序，即顶点以怎样的顺序连接起来，形成网格的边和面。

三维模型的mesh 三维模型的分类_webgl

由若干个多边形网格面围成的闭合几何结构，我们称为mesh体：

三维模型的mesh 三维模型的分类_javascript_02

三、材质

纹理映射

材质包括纹理和颜色，是三维模型的外观表现形式。纹理通常是指纹理贴图（texture），比如为赛车贴上贴图。纹理的像素称为纹素（纹理元素），纹理中的位置通常称为纹理坐标或UV坐标。纹理坐标通过原点位于图像左下角的参考系统进行表示，对应于(0, 0)和(1, 1)，如果纹理坐标的值超出纹理空间，此时会通过纹理环绕来处理，通常分为截取和重复两种模式。因此所谓贴图就是将一张二维图片映射到三维模型表面上去，这张二维图片称为纹理图片，贴图过程称为纹理映射。以多边形网格为例，将纹理图片的UV坐标和网格的每个顶点坐标建立一一对应的关系，建立图片到网格表面的映射，从而实现贴图。

三维模型的mesh 三维模型的分类_itwin.js_03

四、iTwin.js中的模型数据结构

在iTwin.js中模型的几何结构表现形式分为三角网格（triangulated mesh）和线形（line），本次我们重点关注的是三角网格。如下图所示，iTwin.js中模型的构成可以理解为，几何结构加材质。

三维模型的mesh 三维模型的分类_三维模型的mesh_04

模型的数据结构遵循iModels.ExportGraphicsInfo，具体如下所示：

{
    elementId: '0x1a',
    mesh: {
      indices: [0, 1, 2],
      points: [
        0, 0, 0, 10, 0,
        0, 10, 0, 10
      ],
      normals: [
        0, 0, 1, 0, 0,
        1, 0, 0, 1
      ],
      params: [0, 1, 10, 1, 10, 11],
      isTwoSided: true
    },
    color: 0,
    subCategory: '0x19',
    geometryClass: 0,
    materialId: '0x18',
    textureId: '0x17'
  }

参数含义：