图形学三维基本理论简介

这篇文章解释了所有的基本理论，这些理论有助于你在开始使用3D时了解这些理论。

坐标系

3D本质上就是三维空间中形状的表示，使用坐标系计算形状的位置。

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

物体

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

• 位置：在三维空间（x、y、z）中标识它。
• 颜色：保留RGBA值（红色、绿色和蓝色通道的R、G和B，透明度的alpha-所有值的范围从0.0到1.0）。
• Normal：一种描述顶点面对的方向的方法。
• 纹理：一个二维图像，顶点可以用来装饰它所属的表面，而不是简单的颜色。

可以使用此信息生成几何图形-以下是立方体的示例：

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

渲染管道

渲染管道是准备图像并将其输出到屏幕上的过程。图形渲染管道将从使用顶点描述的基本体生成的三维对象，应用处理，计算片段，并将它们作为像素在二维屏幕上渲染。

上图中使用的术语如下：

• 基本体：管道的输入-它是从顶点构建的，可以是三角形、点或线。
• 片段：像素的三维投影，具有与像素相同的属性。
• 像素：屏幕上按二维网格排列的点，它具有RGBA颜色。

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

顶点处理

顶点处理是将有关单个顶点的信息合并为基本体，并在三维空间中设置它们的坐标以供查看器查看。这就像给你准备好的场景拍照一样——你必须先放置对象，配置相机，然后拍照。

这个过程分为四个阶段：第一个阶段涉及安排世界上的对象，称为模型转换。然后是视图转换，它负责在三维空间中定位和设置相机的方向。相机有三个参数-位置、方向和方向-必须为新创建的场景定义。

投影变换（也称为透视变换）然后定义相机设置。它设置了摄像头可以看到的东西-配置包括视野、纵横比和可选的近平面和远平面。阅读三.js文章来了解这些。

最后一步是viewport转换，它包括输出渲染管道中下一步的所有内容。

光栅化

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

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

碎片处理

片段处理主要关注纹理和光照-它根据给定的参数计算最终颜色。

纹理

纹理是在三维空间中使用的二维图像，用于使对象看起来更好、更逼真。纹理从称为texel的单个纹理元素组合而成，就像从像素组合图片元素一样。在渲染管道的片段处理阶段将纹理应用到对象上，允许我们在必要时通过包装和过滤对其进行调整。

纹理环绕允许我们在三维对象周围重复二维图像。当原始分辨率或纹理图像与显示的片段不同时应用纹理过滤-它将相应地缩小或放大。

照明

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

• 漫射：一种遥远的平行光，如太阳。
• 镜面反射：一个光点，就像房间里的灯泡或闪光灯。
• 环境光：应用于场景中所有内容的恒定光。
• 发射光：物体直接发出的光。

输出合并

在输出操作阶段，来自3D空间的所有原语片段都被转换成由像素组成的2D网格，然后在屏幕上打印出来。

在输出合并过程中，还应用一些处理来忽略不需要的信息—例如，不计算屏幕外部或其他对象后面因而不可见的对象的参数。

结论

现在你知道了三维操纵背后的基本理论。如果您想继续练习并看到一些实际的演示，请继续学习以下教程：

• 使用Three.js建立一个基本的演示
• 使用babylon.js建立一个基本的演示
• 使用PlayCanvas构建基本演示
• 用a-Frame构建基本演示

你自己去做一些很酷的酷炫的WEB3D演示

原文地址：https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Basic_theory