3D图形基本原理详解：从坐标系统到渲染流程

创作时间:

作者:

@小白创作中心

3D图形基本原理详解：从坐标系统到渲染流程

引用

来源

https://developer.mozilla.org/zh-CN/docs/Games/Techniques/3D_on_the_web/Basic_theory

本文将为您详细介绍3D图形的基本原理，包括坐标系统、物体表示、渲染流程、顶点处理、栅格化、片段合成和输出合成等核心概念。通过阅读本文，您将对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个顶点构成。一条法线定义面的朝向。同时，连接这些点可以创建立方体的边。这个几何体通过点和面构成，材质使用的是一张纹理贴图，这里使用一个纯蓝色或一张图片。该物体的几何形状（geometry）由顶点和面构成，而材质（material）则是由纹理构成。如果我们将几何体和材质连接起来会得到一个网格（mesh）。

渲染流程

渲染流程是个将之前准备好的模型输出到屏幕的过程。3D渲染流程会接受使用顶点描述3D物体的原始数据作为输入用于处理，并计算其片段（fragment），然后渲染为像素（pixels）输出到屏幕。

上图中用到了如下术语：

原始数据: 渲染流程中的输入——用顶点生成，它可能是三角形，点或线。
片段: 一个像素的3D投射，有着和像素一样的属性。
像素: 屏幕上的2D网格中的点布置的点，包含RGBA。

顶点和片段处理是可编程的——你可以编写自己的着色器来控制输出。

顶点处理

顶点处理是将独立的顶点信息组合成原始数据并设置其在3D空间中的坐标，方便显示器识别。就像是对你准备的场景进行拍照——你必须先放置物品，设置相机参数，然后开拍。

这个过程分为四步：

模型转换 (model transformation)：筹备世界坐标中的物体。
视图转换 (view transformation)：只关心位置和3D空间中摄像机的朝向设置。摄像机有三个参数（位置、方向和朝向），在新创建的场景中必须定义这三个参数。
投射转换 (projection transformation)：也被称作透视转换 (perspective transformation)，这一步定义摄像机设置，在此过程会设置哪些在摄像机中可见，配置包含视野 (field of view)、宽高比例 (aspect ratio) 和可选的近裁剪和远裁剪参数。
视图窗口转换 (viewport transformation)：这一步会将一切都输出给渲染流程中的下一步。