解释基本 3D 理论

3D 本质上是关于在 3D 空间中表示形状，使用坐标系来计算它们的位置。

WebGL 使用右手坐标系 - x 轴指向右侧，y 轴指向上方，z 轴指向屏幕外，如上图所示。

不同类型的对象使用顶点构建。顶点 是空间中的一个点，在坐标系中具有自己的 3D 位置，通常还有一些定义它的附加信息。每个顶点都由以下属性描述

• 位置：在 3D 空间中标识它 (x, y, z)。
• 颜色：包含 RGBA 值 (R、G 和 B 分别代表红色、绿色和蓝色通道，alpha 代表透明度 - 所有值范围从 0.0 到 1.0)。
• 法线：一种描述顶点朝向的方向的方式。
• 纹理：一个 2D 图像，顶点可以使用它来装饰它所属的表面，而不是简单的颜色。

您可以使用这些信息构建几何图形 - 以下是一个立方体的示例

给定形状的面是顶点之间的平面。例如，立方体有 8 个不同的顶点（空间中的点）和 6 个不同的面，每个面由 4 个顶点构成。法线定义了面的朝向。此外，通过连接这些点，我们创建了立方体的边。几何图形由顶点和面构成，而材质是纹理，它使用颜色或图像。如果我们将几何图形与材质连接起来，我们将得到一个网格。

渲染管道是将图像准备并输出到屏幕上的过程。图形渲染管道采用使用顶点 描述的由基本图元 构建的 3D 对象，应用处理，计算片段 并将其渲染到 2D 屏幕上作为像素。

上图中使用的术语如下

• 基本图元：管道的输入 - 它由顶点构成，可以是三角形、点或线。
• 片段：像素的 3D 投影，它具有与像素相同的属性。
• 像素：屏幕上排列在 2D 网格中的点，它包含 RGBA 颜色。

顶点和片段处理是可编程的 - 您可以编写自己的着色器来操作输出。

顶点处理是将有关各个顶点的信息组合成基本图元，并在 3D 空间中设置它们的位置，以便观察者看到。就像拍摄准备好的风景照片一样 - 您必须先放置物体，配置相机，然后拍摄。

这个处理过程有四个阶段：第一个阶段涉及在世界中排列物体，称为模型变换。然后是视图变换，它负责在 3D 空间中定位和设置相机的方向。相机具有三个参数 - 位置、方向和方向 - 必须为新创建的场景定义这些参数。

投影变换（也称为透视变换）然后定义相机设置。它设置相机可以看到的内容 - 配置包括视野、纵横比 和可选的近平面 和远平面。阅读Three.js 文章中的相机段落以了解这些内容。

最后一步是视口变换，它涉及将所有内容输出到渲染管道的下一阶段。

光栅化将基本图元（连接的顶点）转换为一组片段。

这些片段 - 它们是 2D 像素的 3D 投影 - 与像素网格对齐，因此最终它们可以在输出合并阶段作为 2D 屏幕显示上的像素打印出来。

片段处理侧重于纹理和光照 - 它根据给定的参数计算最终颜色。

纹理是 2D 图像，用于 3D 空间中使对象看起来更美观和更逼真。纹理由单个纹理元素（称为纹素）组合而成，就像图片元素由像素组合而成一样。在渲染管道的片段处理阶段将纹理应用于对象，使我们能够通过必要时的包装和过滤来调整纹理。

纹理包装允许我们在 3D 对象周围重复 2D 图像。当原始分辨率或纹理图像与显示的片段不同时，会应用纹理过滤 - 它将相应地缩小或放大。

我们看到的屏幕上的颜色是光源与物体材质表面颜色相互作用的结果。光可能被吸收或反射。WebGL 中实现的标准Phong 光照模型有四种基本光照类型

• 漫反射：远处定向光，如太阳。
• 镜面反射：一个光点，就像房间里的灯泡或手电筒。
• 环境光：应用于场景中所有事物的恒定光。
• 自发光：由物体直接发出的光。

在输出操作阶段，来自 3D 空间的基本图元的全部片段都被转换为 2D 像素网格，然后在屏幕显示上打印出来。

在输出合并期间，还会应用一些处理以忽略不需要的信息 - 例如，不在屏幕内或在其他物体后面的物体的参数不会被计算，因此不可见。

现在您了解了 3D 操作背后的基本理论。如果您想继续练习并查看一些演示的实际操作，请继续阅读下面的教程

• 使用 Three.js 构建基本演示
• 使用 Babylon.js 构建基本演示
• 使用 PlayCanvas 构建基本演示
• 使用 A-Frame 构建基本演示

继续前进，自己创建一些很酷的尖端 3D 实验！