- 原文地址:Day 16. Depth buffer. Cube faces colors
- 原文作者: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 上也有一篇很好的文章解说了这些概念。