- 原文地址：Day 15. Rendering a cube
- 原文作者：Andrei Lesnitsky
这是 WebGL 系列的第 14 天教程，每天都有新文章公布。
订阅或者退出邮件列表以便及时获取更新内容。
源代码在这里
嘿???? 欢送来到 WebGL 系列教程。明天，咱们将摸索一些重要的主题，为学习 3D 做筹备。
让咱们先学习投影。如您所知，二维空间中的点在 X 和 Y 轴上都有投影。
在 3D 空间中，咱们不仅能够在坐标轴上有投影点，而且能够在立体上有投影点。
这就是将空间里的点投影到立体上的形式
展现的投影面也是立体，因而基本上 3d 空间中的每个点都能够投影在立体上。
家喻户晓，WebGL 只能渲染三角形，因而每个 3d 对象都应由许多三角形形成。三角形对象组成的越多 – 对象物体看起来越准确。
这就是将 3D 空间中的三角形投影到立体上的形式
请留神，在投影立体上的三角形看起来有些不同，因为三角形的顶点所处的立体与咱们将其投影（旋转）立体不是平行的。
您能够在 Blender 或 3ds Max 等编辑器中构建 3D 模型。有形容 3d 对象的非凡文件格式，同时，为了渲染这些对象，咱们须要解析这些文件并构建三角形。咱们将在接下来的教程中探讨如何做到这一点。
3d 的另一个重要概念是透视，让更远的物体看起来更小
设想咱们正在从顶部看一些物体
请留神，因为透视的起因，立方体的投影面大小不同（底部大于顶部）。
这种简单的“如何渲染 3d”等价于的另一个变量是视场（相机可见到物体的最大间隔，相机镜头有多宽）以及适宜“相机镜头”的物体数量。
思考到所有这些细节仿佛须要做很多工作，然而侥幸的是，这项工作曾经实现，这就是咱们须要线性代数和矩阵乘法的中央。同样，如果您不太纯熟线性代数 – 不必放心，这里有一个很棒的软件工具包 gl-matrix，能够为您提供这些帮忙。
事实证明，为了在 3d 空间中的点的屏幕上取得 2d 坐标，咱们只须要将点的齐次坐标与非凡的“投影矩阵”相乘即可。此矩阵形容了视场，相机视锥的近端和远端（建模世界中可能呈现在屏幕上的空间区域）。透视投影看起来更真切，因为它思考了到对象的间隔，因而咱们将应用 mat4.perspective 中的 gl-matrix 办法。
还有两个矩阵能够简化 3D 渲染世界中的物体。
- 模型矩阵 – 蕴含对象变换（平移，旋转，缩放）的矩阵。如果未利用任何转换，则是一个单位矩阵。
1. 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,- 视图矩阵 – 形容“摄像机”地位和方向的矩阵。
在 MDN 上也有一篇很好的文章解说了这些概念。