乐趣区

关于前端:WebGL-系列-15-渲染立方体

  • 原文地址:Day 15. Rendering a cube
  • 原文作者:Andrei Lesnitsky

这是 WebGL 系列的第 14 天教程,每天都有新文章公布。

订阅或者退出邮件列表以便及时获取更新内容。

源代码在这里

嘿???? 欢送来到 WebGL 系列教程。明天,咱们将摸索一些重要的主题,为学习 3D 做筹备。

让咱们先学习投影。如您所知,二维空间中的点在 XY 轴上都有投影。

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 上也有一篇很好的文章解说了这些概念。

退出移动版