Update 05 Three.js基础之图元.md

puxiao · web-flow · commit 39f5644a2e27 · 2021-07-20T13:46:40.000+08:00
diff --git a/05 Three.js基础之图元.md b/05 Three.js基础之图元.md
@@ -22,6 +22,87 @@ Primitive 的复数即为 Primitives。
 
 
 
+---
+
+> 以下内容更新于 2021.07.20
+
+之前在写这篇文章的时候，还没有学习过图形学，所以对于一些名词的概念解释都是想当然，甚至是胡说八道，胡言乱语。
+
+<br>
+
+#### 顶点、图元、片元、图像 他们之间的递进关系
+
+**顶点**：就是在 3D 世界中某一个具体的点，即点的位置(x,y,z)。除了位置信息，还可能包括 点的颜色或其他信息。
+
+
+
+<br>
+
+**图元**：由若干个顶点构成的一组数据，用于构建或描述某种 二维或三维物体。
+
+> 图元 中的 “元” 字可以理解为 “原始”的原，也就是说使用最少的点来描述一个物体的空间信息。
+>
+> 只有 1 个顶点依然可以是 图元，它只能表示某一个 点。例如 自动驾驶中扫描周围环境得到的 3D 点云数据就是由 一个一个小点 组成的。
+>
+> 如果是 2 个顶点，则可以表示出是一个 线段，同时 2 个点也可以表示出一个长方体。
+>
+> > 2 个顶点信息就可以表述出 1 个长方体？
+> > 没错的，你可以想象成 这 2 个点分别是长方体的 斜对角线上的 2 个点，例如在 three.js 中 包装盒 Box3 就只有 2 个点的信息：坐标最大的点、坐标最小的点
+>
+> 3个顶点，则可以表示出一个 三角形，同时 3 个点也可以表示出一个圆。
+>
+> > 至于为什么 3 个顶点 就可以表示出一个圆，你可以执行搜索或脑补。
+
+> 请注意：图元依然为一堆顶点数据，而不是图像数据。
+
+> 再次补充：假设一个物体有一部分不在显示范围之内，那么 webgl 会通过 裁切体(由镜头视椎体决定的) 对物体进行裁切，只将需要渲染的部分进行渲染，而裁切得到的内容则会重新计算，得到一个新的图元。
+
+
+
+<br>
+
+**片元**：包含图像颜色、位置、深度的信息数据。你可以把片元简单理解为 “未完全加工完成的图像数据”。
+
+> 在 3D 图形管线渲染的流程中，经过裁切处理模块和图元组建处理模块之后，下一步经过片元处理器的处理，会将需要渲染的图元由一堆顶点数据转化为一堆图像数据。
+
+> 请注意：片元已经不再是顶点数据，而是图像数据了，只不过这些图像数据是为完全加工完成，可以最终显示在屏幕上的图像数据。
+
+
+
+<br>
+
+**图像**：由 片元 经过处理得到的最终图像数据。就是 3D 渲染输出到屏幕上的显示结果。
+
+> 片元数据经过处理，用来更新缓存帧 上的像素，最终 缓存帧 上的结果就是最终渲染出的图像。
+
+> 请注意：图像是由一个个像素构成。
+
+
+
+<br>
+
+以上内容为 图形学 中的相关知识，但是在本文中讲解的 “Three.js 中内置的图元” 是 Three.js 为了帮助我们快速创建一些常见物体所提供的 JS 类。
+
+所以一定要理解清楚，本文讲解的 图元 和实际图形学中的图元 是有差异。
+
+> 再次重申一遍：本文讲解的 图元 实际上是 JS 的类，帮助我们快速创建某些形状的 顶点数据。
+>
+> 一组相关的顶点数据才是图形学中的图元。
+
+
+
+<br>
+
+> 以上内容更新于 2021.07.20
+
+---
+
+
+
+
+
+<br>
+
 ## 3D模型的补充说明
 
 内置的图元，都是一些基础的形状，相对简单，但也可以组合成相对复杂的 3D 场景。
@@ -104,4 +185,4 @@ Primitive 的复数即为 Primitives。
 
 
 
-图元理论上的知识就先讲到这里，在下一节中，会编写一些图元示例。
+图元理论上的知识就先讲到这里，在下一节中，会编写一些图元示例。
