WebGL 系列 14 投影与矩阵

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

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

源代码在这里

嘿👋欢迎来到 WebGL 系列教程。今天,我们将探索一些重要的主题,为学习 3D 做准备。

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

3D 空间中,我们不仅可以在坐标轴上有投影点,而且可以在平面上有投影点。

这就是将空间里的点投影到平面上的方式

展示的投影面也是平面,因此基本上 3d 空间中的每个点都可以投影在平面上。

众所周知,WebGL 只能渲染三角形,因此每个 3d 对象都应由许多三角形构成。三角形对象组成的越多 – 对象物体看起来越精确。

这就是将 3D 空间中的三角形投影到平面上的方式

请注意,在投影平面上的三角形看起来有些不同,因为三角形的顶点所处的平面与我们将其投影(旋转)平面不是平行的。

您可以在 Blender3ds 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 上也有一篇很好的文章讲解了这些概念。

原文链接:segmentfault.com

上一篇:CSS 外部样式
下一篇:CSS 标签选择器

相关推荐

官方社区

扫码加入 JavaScript 社区