3D 小姐姐模型是怎么“捏”成的？ 初识 Mesh 知识点！

最新推荐文章于 2024-05-29 09:33:41 发布
最新推荐文章于 2024-05-29 09:33:41 发布
阅读量955 收藏 1
点赞数
文章标签： 3d
原文链接：https://mp.weixin.qq.com/s?__biz=MzA5MjEwOTI4Ng==&mid=2247539372&idx=1&sn=ff808fbc98054b22267f40c51c8c1f54&chksm=90703a25a707b333db3e26f8aa99a77b19605eb39fa27acdeda880f703ce8faa38fe76bf4428&scene=126&sessionid=0
版权

 前沿

今天菜鸟和大家一起来讨论一下3D入门的基础性知识：「Mesh」它是3D模型能正常展现的重要因素。（文末有奖问卷调查，感谢各位老铁支持！）

1512bfc49f0a789153d9d2a85e6e0cea.png

上边这个小姐姐模型，大家想知道它是怎么构成的吗？今天菜鸟带大家了解一下3D模型组成之顶点数据，UV 数据，法线数据等一系列数据。

数据结构

首先，咱们基于 Cococ Creator 3.x 中几何体信息数据结构，了解一下，一个普通的 Mesh 中到底有哪些数据：

export interface IGeometry {
    positions: number[];
    normals?: number[];
    uvs?: number[];
    tangents?: number[];
    colors?: number[];
    attributes?: gfx.Attribute[];
    customAttributes?: {
        attr: gfx.Attribute;
        values: number[];
    }[];
    boundingRadius?: number;
    minPos?:{x: number;y: number;z: number;};
    maxPos?: {x: number;y: number;z: number;};
    indices?: number[];
    primitiveMode?: gfx.PrimitiveMode;
    doubleSided?: boolean;
}

上边的数据结构是直接从引擎代码拷贝过来的，其实从字面意思也可以理解到其中包含了：「顶点，法线，uv切线，顶点颜色，索引，包围盒坐标等一系列数据」

数据解析

关键的来了，下边我们就会对以上主要的的数据结构进行解释。

1. 顶点positions

大家可能都知道，一个网格体(Mesh)是由多个彼此相连的三角面组成，而三角面则是由三个顶点组成，就比如一个简单的平面，大家看一下下边的图：

881191f5066caca48df9ec414dbbda9f.png

所以顶点数据决定了网格体的基本形状。下面我们通过顶点数据创建一个简单的三角形：

45386f66b801215adc75231fddf745cb.png 
let point = [
    0, 0, 0,  //点1  x,y,z
    0, 0, 1,  //点2  x,y,z
    1, 0, 1   //点3  x,y,z
];
let mesh = utils.createMesh({
    positions:point
});

通过上边的代码，我们就可以创建一个简单的三角形，我们需要注意的是：

  • 1. positions 是一个数字类型的数组

  • 2. 每3个数据组成一个点，分别表示x,y,z

  • 3. 每3个点组成一个面

  • 4. 组成面的3个应是逆时针方向

2. UV

UV 实际上是U、V纹理贴图的坐标简称。所有的图像文件都是二维的一个平面，水平方向是U,垂直方向是V。UV 就是将图像上每一个点精确对应到模型物体的表面．在点与点之间的间隙位置由软件进行图像光滑插值处理。


接下来咱们简单介绍一下 UV 坐标的原理，在 Cocos 中 UV 的分布是这样的：

01347c8836c3087c5708e2cc6845d896.png

左上角为（0，0）点，那么对于下边的三角形：

94c39b8a475aecc0760f352a0ab6369e.png

我们已知三个顶点分别是：

let point = [
    0, 0, 0,  //点1  x,y,z
    0, 0, 1,  //点2  x,y,z
    1, 0, 0,  //点3  x,y,z

];

我们需要将顶点坐标和 UV 坐标相对应，为顶点设置对应 UV 的坐标：

let uvs = [
    0,0, //对应第一个顶点
    0,1, //第二个顶点
    1,0, //第三个顶点
];

最终的效果就是这样

73c4ccf88e577341bf0b65b0a8b863c8.png

再看看咱们的立方体

76acf4441d2a3a6844d9ace7953eae5b.png

3. 法线 normals

法线：它是一个向量，和 UV 一样，它都属于顶点的属性。它的数量和 UV 一样都是与顶点一一对应的。在网格中，法线通常被用来进行光照效果计算，同时在一些自定义的材质中也会用到法线去实现一些效果

let point = [
    0, 0, 0,  //点1  x,y,z
    0, 0, 1,  //点2  x,y,z
    1, 0, 0, //点3  x,y,z
    1, 0, 0, //点3  x,y,z
    0, 0, 1,  //点2  x,y,z
    1, 0, 1,
];
let uvs = [
    0, 0,
    0, 1,
    1, 0,
    1, 0,
    0, 1,
    1, 1,
];
let normals = [
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
];
let mesh = utils.createMesh({
    positions: point,
    uvs: uvs,
    normals: normals,
});

4. 索引indices

接下来咱们说说索引，索引到底是干什么用的呢，下边咱们用一个立方体来给大家展示一下：25fc71b30a0705d7f8cfd915ba2af072.png

先给大家看看代码：

let point = [
    //bottom
    0, 0, 0,    0, 0, 1,    1, 0, 0,
    1, 0, 0,    0, 0, 1,    1, 0, 1,
    //top
    0, 1, 0,    0, 1, 1,    1, 1, 0,
    1, 1, 0,    0, 1, 1,    1, 1, 1,
    //left
    0, 0, 0,    0, 0, 1,    0, 1, 0,
    0, 1, 0,    0, 0, 1,    0, 1, 1,
    //right
    1, 0, 0,    1, 0, 1,    1, 1, 0,
    1, 1, 0,    1, 0, 1,    1, 1, 1,
    //back
    0, 0, 0,    1, 0, 0,    0, 1, 0,
    0, 1, 0,    1, 0, 0,    1, 1, 0,
    //front
    0, 0, 1,    1, 0, 1,    0, 1, 1,
    0, 1, 1,    1, 0, 1,    1, 1, 1,
];
let mesh = utils.createMesh({
    positions: point
});

一个立方体6个面。一个面最少两个三角形，那么就是6个顶点。6个面36个顶点，但是仔细的小伙伴会发现有好多点是重复出现的，那么有一种方式可以避免顶点的重复出现嘛，答案当然是有的，就是咱们要说的索引。

索引的原理就是 positions 中的坐标点都是唯一的，通过索引来代替重复的点，直接看使用吧：

let point = [
    0, 0, 0,  //0
    0, 0, 1,  //1
    1, 0, 0,  //2
    1, 0, 1,  //3
    0, 1, 0,  //4
    1, 1, 0,  //5
    0, 1, 1,  //6
    1, 1, 1,  //7
];
let indices = [
    //bottom
    0, 1, 2,
    2, 1, 3,
    //top
    4,6,5,
    5,6,7,
    //left
    0,1,4,
    4,1,6,
    //right
    2,3,5,
    5,3,7,
    //back
    0,2,4,
    4,2,5,
    //front
    1,3,6,
    6,3,7,

];
let mesh = utils.createMesh({
    positions: point,
    indices:indices,
});

需要注意的是，「position中每三个值代表一组，也就是一个坐标点，uv中每两个值代表一个坐标点」，indices 中的值代表的是 position，UV 中的「第几个坐标点」，而不是直观的下标。

利用索引，咱们就可以将 position 中的重复点优化掉。通过索引来控制，作为顶点属性的 UV 和法线，以至于顶点颜色都会同时也会受到索引的影响，也就是索引同时控制了顶点以及uv和法线，简单的平面：

let point = [
    0, 0, 0,
    0, 0, 1,
    1, 0, 0,
    1, 0, 1,
];
let uvs = [
    0, 0,
    0, 1,
    1, 0,
    1, 1,
];
let normals = [
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
    0, 1, 0,
];
let indices = [
    0, 1, 2, 2, 1, 3
];
let mesh = utils.createMesh({
    positions: point,
    uvs: uvs,
    normals: normals,
    indices: indices,
});

5.minPos,maxPos

minPos、maxPos 字面意思就是最大点和最小点，那么什么是最大点和最小点呢？
先看看源码：

let minPosition = geometry.minPos;
if (!minPosition && options.calculateBounds) {
  minPosition = Vec3.set(new Vec3(), Infinity, Infinity, Infinity);
  for (let iVertex = 0; iVertex < vertCount; ++iVertex) {
    Vec3.set(v3_1, positions[iVertex * 3 + 0], positions[iVertex * 3 + 1], positions[iVertex * 3 + 2]);
    Vec3.min(minPosition, minPosition, v3_1);
  }
}
let maxPosition = geometry.maxPos;
if (!maxPosition && options.calculateBounds) {
  maxPosition = Vec3.set(new Vec3(), -Infinity, -Infinity, -Infinity);
  for (let iVertex = 0; iVertex < vertCount; ++iVertex) {
    Vec3.set(v3_1, positions[iVertex * 3 + 0], positions[iVertex * 3 + 1], positions[iVertex * 3 + 2]);
    Vec3.max(maxPosition, maxPosition, v3_1);
  }
}

通过模型的顶点数据，计算顶点中x、y、z三个方向同时最小和最大的坐标，通过最大点和 最小点可以模拟出一个将整个模型包含在内的矩形来，也就是咱们所说的包围盒。至于包围盒的作用，首先想到的就是相机对物体的剔除，也上一段源码吧！

if (model.node && ((visibility & model.node.layer) === model.node.layer)
  || (visibility & model.visFlags)) {
 // shadow render Object
 if (dirShadowObjects != null && model.castShadow && model.worldBounds) {
  // frustum culling
  if (shadows.fixedArea) {
   AABB.transform(_ab, model.worldBounds, shadows.matLight);
   if (intersect.aabbFrustum(_ab, camera.frustum)) {
    dirShadowObjects.push(getDirShadowRenderObject(model, camera));
   }
  } else {
   // eslint-disable-next-line no-lonely-if
   if (intersect.aabbFrustum(model.worldBounds, _dirLightFrustum)) {
    dirShadowObjects.push(getDirShadowRenderObject(model, camera));
   }
  }
 }
 // frustum culling
 if (model.worldBounds && !intersect.aabbFrustum(model.worldBounds, camera.frustum)) {
  continue;
 }

 renderObjects.push(getRenderObject(model, camera));
}

同时一直有一个问题，在原生平台进行静态合批后，网格的包围盒貌似有问题，场景中的模型剔除会出现异常。

实操

上面说了这么多，那么在实际开发中都会有哪些操作呢？

1. NavMesh 数据

顺带在这里给自己的导航寻路打个广告导航寻路
在集成 NavMesh 时，最常见的需求就是：我的场景中存在好多子物体，有从外部导入的，也有用引擎自带的，在构建导航数据之前我们需要将这些子物体进行网格数据的整理

public addStaticModle (node: Node): void;

我们只需要拿到顶点，索引就可以进行数据整理

let position = mesh.readAttribute(0, gfx.AttributeName.ATTR_POSITION);
let indices = [];
mesh.copyIndices(0, indices);

接下来的大家可以去菜鸟的寻路源码中了解奥

2.mesh数据导出obj

需求永远是那么的奇怪！在一个比较大的游戏场景中。

5f27064ca928d9bce2397e2e3241bed0.png

会出现使用大量的相同物体，拼凑出一个布局。那么一个场景中可能会出现大量的节点个数，节点数量过多会导致一些性能问题，比如序列化慢等。

平时我们都是用三方软件建好模型，导入到编辑器中，那么反之是不是可以「将我们场景中的模型导出为三方软件识别的模型文件」答案肯定是可以的。

  • 首先 OBJ 文件是一种文本文件，文本编辑器打开就可以看见内容，而且大多数建模软件都可以打开

v 0.123 0.234 0.345 1.0 
v ... 
vt 0.500 1 [0] 
vt ... 
vn 0.707 0.000 0.707 
vn ... 
f 3/1 4/2 5/3 
f 6/4/1 3/5/3 7/6/5 
f 7//1 8//2 9//3 
f ..

  • 我们我可拿到场景中网格的基本数据

let positions = mesh.readAttribute(0, gfx.AttributeName.ATTR_POSITION);
let normals = mesh.readAttribute(0, gfx.AttributeName.ATTR_NORMAL);
let uvs = mesh.readAttribute(0, gfx.AttributeName.ATTR_TEX_COORD);
let indices = mesh.readIndices(0);

菜鸟整理了一下，通过一个简单的脚本对所有的子物体先进行了网格数据的合并，然后点击保存数据将网格数据导出为obj1f152c6f3cd0dc3a6a4dfc1105e460d0.pngcaa7c24ac61269a2812d9d6190a7a864.png11e84e0e4797acfff294b0d828e95b9c.png

源码

4f50d4dc7f5f48de0e363bd47c9f755e.png

链接：
https://store.cocos.com/app/detail/3666

2022 年即将结束，2023 年即将到来。

感恩老铁们对公众号的支持！

在此叨扰下各位，填写一份 Cocos Store 问卷调查（有奖）！

227759cc3e606c34ab9b2d8ec91862e1.jpeg

252ca9c3d1ecb69d19caae57c47c43c9.png 2023年我们会倍加努力，一起共绘成长蓝图~

晓衡的成长日记
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mesh基础模型（Foundation models）（一）
p=f/s
04-19 6718
写在前面： 本文参考Mesh Core Spec 翻译而来，翻译能力有限肯定有理解不到位之处，还请大家指出。欢迎广大蓝牙、mesh爱好者一起交流，本人QQ：993650814。 注意：本篇包含mesh core spec中的4Foundation models中的4.1Conventions、4.2State definations、4.3Message definitions 正文...
mesh网格数据解析及cesium绘制格网三角网可视化实现
weixin_42496466的博客
06-27 3306
Mesh通常指网络拓扑中的网状结构。
Mesh技术的基本概念
CAESAR的专栏
03-12 5300
蓝牙Mesh技术的基本概念 蓝牙技术作为一种通用通信技术，最主要的功能就是取代了数据电缆的传输，用于便携式设备及其应用。本文介绍蓝牙无线技术的不断革新与进步。 2004年，蓝牙技术联盟推出了蓝牙2.0+EDR，使得蓝牙传输速率达到了2.1Mbps（262.5KB/s）； 2009年发布了蓝牙3.0+HS（Hight Speed），将数据传输速率提高到了24Mbps（3MB/s）的理论值； ...
推荐一款强大的3D Mesh简化工具：3D Mesh Simplification
最新发布
gitblog_00001的博客
05-29 637
推荐一款强大的3D Mesh简化工具：3D Mesh Simplification 项目地址:https://gitcode.com/fogleman/simplify 在计算机图形学的领域中，高效处理和展示复杂的3D模型是一项挑战。为此，我们向您推荐一个开源项目——3D Mesh Simplification。该项目是基于Go语言实现的一个强大工具，它实现了1997年SIGGRAPH大会上提出的...
蓝牙mesh_认识蓝牙mesh模型
weixin_39559071的博客
12-15 1040
蓝牙设备的星形与网状网络拓扑结构对比前几天我们了解了BLE的原理和一些典型应用案例，今天我们来认识蓝牙mesh网络。Mesh网络相对于传统的星形网络是一种新的拓扑，适用于采用多对多 (m:m) 通信的蓝牙低能耗设备。它针对创建大规模设备网络进行优化，非常适用于建筑自动化、传感器网络和资产跟踪。所以自2017年7月蓝牙mesh网络技术问世以来，大家对它的关注度一直居高不下。今天为大家带来S...
3D基本概念
cslie的专栏
11-05 1989
 用过3DMAX的人都知道，一个３Ｄ场景是由很多模型（model）组成的，而模型就是通常说的网格（mesh）， 它是由三角形面（triangle）组成，而每个三角形面又是由３个顶点（vertex）构成。如图： 　　 材质（materal）和纹理（texture）：　　光有网格模型看上去就是一个物品的轮廓，为了让模型具有真实感，我们就要为模型赋予材质和纹理。　　材质包含颜色，D3D中这样定义颜色
小姐姐用动画图解Git命令，这也太秀了吧？
02-24
Git作为居家必备、团队协作之利器，自从LinusTorvalds发布这款工具后，便一直受到各路开发者的喜爱。不过，尽管如此，小G还是经常能在公众号后台，看到有不少水友留言反馈...作者是来自英属哥伦比亚的小姐姐LydiaHallie
PHP随机播放抖音快手小姐姐源码
05-28
开发这样一款源码需要掌握以下IT知识点： 1. PHP基础：包括变量、数组、函数、类等基本概念，以及PHP的HTTP请求和响应处理。 2. JSON解析：因为接口返回的数据通常为JSON格式，所以需要熟悉PHP的json_decode()函数...
AwesomeTts:免责声明，本代码仅用于学习，下载后请勿用于商业用途(想要zhiling姐姐读你想听的？Try it!!!)
05-16
免责声明 ONLY FOR STUDY, NOT FOR COMMERCIAL USE 1.资产副本 **注意：**请勿更改资产路径 1.1 TtsType.MAGIC_TTS iflytek tts for autonavi ---林志玲 /assets/tts/iflytek/autonavi 您可以从AutoNavi App下载...
随机小姐姐短视频引流附带吸粉打赏PHP源码
08-14
1.将源码直接上传根目录 无需数据库 ...4.视频源是 ks.txt 文件 ks.txt 里面的视频源少 . 可以将ks.txt2 文件改名 ks.txt 这个视频比较多 同样不能播放的视频也多 ...<a href="./pay?fee=1 这里是设置价格1代表价格 " ...
3D Mesh文献阅读——MPS-Net，CVPR2022
weixin_56913289的博客
03-14 591
视频中的3Dmesh回归和单一图片的不同，它不仅需要估计每张图片的姿态、形状和相机参数，还需要对序列中人类运动的连续性进行关联。现有的方法主要依靠CNN或者RNN操作来模拟时间序列，这限制了捕捉视频中的非局部上下文关系(即相隔较远的帧)，同时最近提出的self-attention计算出注意力图来弥补CNN或者RNN的缺陷，但self-attention计算出的注意力图是不稳定的，很容易将注意力集中在相关性较低的位置上(即相隔很远的帧)。因此本文提出MoCA和HAFI弥补以上不足。
使用Mesh生成3D物品
Asdfgfdsakl的博客
09-15 152
【代码】使用Mesh生成3D物品。
绘制3D Mesh热力图，表征人脸模型差异程度
皮皮#2500
03-25 1762
绘制3D Mesh热力图，表征人脸模型差异程度模型加载计算Hausdorff Distance着色参考链接 模型加载 比较两个模型的差异程度，模型分为Target Mesh(GroundTruth)和Sampled Mesh(在该模型上绘制热力图)。 在MeshLab中首先加载Target Mesh，然后再加载Sampled Mesh。 计算Hausdorff Distance 之后计算Hausdorff Distance，Filter->Sampling->Hausdorff Distanc
OpenVINO实时人脸表面3D点云提取
3D视觉工坊
04-30 1318
点击上方“3D视觉工坊”，选择“星标”干货第一时间送达人脸3D点云提取网络2019出现的一个可以在移动端实时运行的人脸3D表面提取模型-FaceMesh，被很多移动端AR应用作为底层算法实...
读取3D文件mesh格式工具
刘一儿(嵌入式)
11-23 4091
qt读取mesh文件格式
Mesh建模技术
易之阴阳，量子纠缠，道之一体，缘起性空
04-24 976
Mesh建模技术是计算机图形学和三维数字化领域中的一种基础技术，它涉及使用一系列多边形（通常是三角形或四边形）来表示三维物体的表面。Mesh建模的核心在于创建和编辑这些多边形组成的网格结构，以精确、高效地描述物体的形状、纹理和表面属性。综上所述，Mesh建模技术涵盖了从模型创建、编辑、优化到纹理映射、材质定义、动画制作、物理模拟等一系列环节，是现代三维图形应用的基础技术之一。随着计算机图形学的发展，Mesh建模技术也在不断进化，以适应更高精度、更大规模、更复杂应用场景的需求。1. 网格结构与元素。
（一）mesh基础
ttod的博客
04-22 153
（一）mesh基础
3D mesh 的质量评估（Perceptual Metrics Quality）
qmphobby的博客
11-03 3800
一、关于3Dmesh的简介 现在随着技术的快速发展，3D的实现和发展也变得越来越迅速。目前大家了解的比较多的且有直接感受的3D就是3D电影了，但那个并非是真正意义上的3D，那只是利用人眼视差形成的变换2D图像而已。另外一个让大家比较期待的就是虚拟现实的技术，其实虚拟现实从严格意义上来说，不能说是3D技术，而应该是信息融合技术。在本文中，我所提到的3D是有真实三维空间的物体，也就是“真三维“，具体
实景三维单体建筑MESH模型 | 质检与转换探索（一）
fmechina的博客
12-20 1617
随着实景三维中国建设的推进，地方层面主要需要完成城市级和地形级实景三维建设工作，如何规范地方层面“实景三维”建设的内容、程序、技术方法和成果，保证各类成果质量是当前很多地方都正在实践和探索的内容。随着数据采集、三维数据生产加工平台及三维GIS平台技术的改进，质检与转换手段也逐步得到改进和发展，本文主要基于FME平台对实景三维单体建筑MESH模型的质检与转换进行探索。本次的测试软硬件环境见下图：图1 计算机软硬件环境1数据库2操作系统3GIS软件。
怎么让测试小姐姐测更多的需求？
02-16
要让测试小姐姐测更多的需求，可以尝试以下几个方法： 1. 充分沟通：与测试小姐姐进行充分的沟通，让她了解需求的重要性和紧急程度，以便她更有针对性地进行测试。 2. 提供详细的测试用例：测试用例是测试工作的重要组成部分，提供详细的测试用例可以帮助测试小姐姐更全面地覆盖需求，并找出潜在的问题。 3. 激励奖励：对测试小姐姐的工作进行肯定和激励，比如提供一些奖励或者给予更多的表扬，可以让她更加积极主动地进行测试工作。 4. 加强团队合作：测试小姐姐需要和其他团队成员进行密切的合作，比如与开发人员、产品经理等沟通，以便更好地理解需求和问题，提高测试工作的效率和质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值