3计算机图形学模型显示要素

| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| | | |

构建模型

绘制复杂图形

复杂的图形使用多个三角形拼接而成，这些构成模型的点称为“顶点”，相临的面会共用一些顶点为了更快的性能以及更小的存储，我们使用顶点数据集合 + 索引的方式来构建这个模型

只需要将所有的顶点数据传给GPU，绘制哪个面，就将哪个面的索引输入

顶点属性

一个模型可包含多个顶点，一个顶点可包含多个属性，常见的顶点属性：

• 坐标(必须)

• 顶点法线

• UV坐标

• 颜色

• 骨骼权重

• 等等…

坐标

坐标是顶点的基本属性，表示顶点在空间中的坐标通常是三维坐标（x, y, z）

顶点法线

顶点法线是一个三维向量（x, y, z），顶点法线描述了顶点表面的朝向，这对于光照计算和视觉效果至关重要。顶点法线是一个单位向量顶点法线只表示方向顶点法线与位置无关。

以下是顶点法线的常见作用：

平滑着色

当多个顶点共享一个平面时，通过平滑处理各顶点的法线，可以达到平滑渲染的效果。这意味着即使几何形状由硬边构成，表面仍然可以展现为光滑的外观。

平直着色	平滑着色	法线的插值计算

光照计算

顶点法线是决定模型表面如何反射光线的关键因素。在基本的光照模型中，使用法线来计算光的入射角，再根据这个角度决定表面的明暗。

法线贴图

法线可以改变光照效果，那么我们使用一张法线贴图来改变模型表面的法线，这样在即使使用很少的面，也能模拟出复杂的光照效果

例如：在游戏中，为了保证质量，角色、怪物等模型通常使用面数非常多的高模制作，但在游戏运行中，如果全部使用高模则会严重拖慢速度，这时通过将高模信息烘焙成法线贴图，再使用低模，就能在使用很少面数的模型中实现非常精细的效果。

UV坐标

UV坐标的主要作用是定义三维模型上每个顶点对应的纹理图像上的位置

顶点UV坐标是一个二维坐标(U,V)=>(X,Y)

原始纹理	uv映射1	uv映射2

可以这样方便理解：将二维的纹理，像缝衣服一样，缝到三维模型上，UV的作用就是指示布料应该缝在哪个地方

颜色

顶点颜色(R,G,B,A)，用来画渐变非常有用可以用来做着色器蒙版，做一些特殊的效果

三角面、四边面、多边面

在提交顶点数据交给GPU渲染时，需要用到三角面超过三边的面，都需要在渲染前转换成三角面，并选择是否渲染边

如果需要建模(修改模型)那么四边面将是你最好的选择，四边面更易于编辑和塑形 ，它是建模和雕塑时更自然的工作单位。它们使得添加细节（如通过细分表面）更为方便，因为细分四边面会产生更多的四边面，从而保持构造的一致性。相对于三角形，四边面更容易操控并塑造出所需的形状。更好的表面光滑性 - 对于光滑表面的模型，使用四边面能更好地维持表面的光滑度。

在使用子细分表面（Subdivision Surfaces）技术时，四边面可以更均匀地分布更细小的四边面，从而产生更平滑的表面。相比之下，三角形在细分时可能产生不均匀的表面。

另外， 四边面更适合于动画和形变。在进行蒙皮（Skinning）和权重分配时，四边面提供了更为预测性的变形。这是因为四边面可以很自然地配合肌肉的运动和膨胀，从而使动画效果更为流畅。

在UV展开和纹理映射时，四边面比三角形更为友好。四边面的结构使得UV布局更加直观和有序，有助于减少纹理拉伸和变形，从而提高纹理的应用效果。

案例-创建一个立方体

1. 按顺序创建顶点坐标集合

[0] (-0.5,-0.5,-0.5)
[1] (-0.5,0.5,-0.5)
[2] (0.5,-0.5,-0.5)
[3] (0.5,0.5,-0.5)
[4] (0.5,-0.5,0.5)
[5] (0.5,0.5,0.5)
[6] (-0.5,-0.5,0.5)
[7] (-0.5,0.5,0.5)

2. 创建顶点法线集合

创建8个法线向量,使用顶点坐标的单位向量

3. 创建uv集合

4. 创建顶点颜色集合

[0] (1,0,0,1)
[1] (0,0,1,1)
....

5. 创建需要渲染的面索引

注意索引的顺序，它将决定面的正反（面的法线），这里以顺时针方向为正，逆时针为负

根据自己创建的集合进行编写，如本次案例需包含索引：坐标索引/法线索引/UV索引/颜色索引

背面([4/4/4/1], [5/5/5/1],[7/7/7/1])  , ([4/4/4/1], [7/7/7/1],[6/6/6/1]) 
左面([6/6/6/1], [7/7/7/1],[1/1/1/1])  , ([6/6/6/1], [1/1/1/1],[0/0/0/1])       

5/5/1],[7/7/7/1]) , ([4/4/4/1], [7/7/7/1],[6/6/6/1])
左面([6/6/6/1], [7/7/7/1],[1/1/1/1]) , ([6/6/6/1], [1/1/1/1],[0/0/0/1])