今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL
的干货接下来让我们开启奇幻旅程,进入 3D
的世界。
本文作者:yancy
1. 认识3D
首先我们要介绍的是几个概念,这是我们要进入到 3D
不可或缺的内容。认识一下它们吧。
1.1 视点,视线,目标点,上方向
这几个概念在WebGL
中属于最常见的内容。
- 视点:可以简易的理解为眼睛,也叫观察点
- 目标点:可以理解为我们要看的物体(任何物体)
- 上方向:头顶的方向。 实际生活中,我们的目光总是以我们的眼睛为起始点,到达我们想要看到的物体,同时,随着我们观察的角度不同,物体也会呈现不一样的形态。以一张图说明吧。 如此几个内容,创建出了
3D
世界的基本显示模型,由此可见其重要程度。后面我们也会说到如何在WebGL
中设定这几个内容。也会有的小伙伴把视点称为相机,目标点称为画布。其实是一样的道理。按照自己的理解记忆就好。1.2 可视范围
可视范围指的是我们所能看到的最大范围。如:一般情况下我们看不到自己身后的事物。 众所周知,三维物体具有深度的概念。在我们的理解中,深度就是z
轴。 虽然我们可以将物体放置在三维空间中的任何位置,但是在WebGL
中,可视范围之外的物体是不被绘制的,这也是为了节省开销。1.3 可视空间
水平视角、垂直视角、可视深度
定义了可视空间的概念。 可视空间分为两种。 - 正射投影:与物体的远近无关,通常用在建筑设计和建模上。
- 透视投影:我们平时观察的真实世界都是透视投影。更有深度的感觉。
1.3 着色器
如果想渲染3D
图形,就需要经过一系列的步骤,这些步骤称为渲染管线。在开发WebGL
程序时,我们就需要通过着色器语言跟GPU进行沟通,用来设定我们需要渲染和显示的图形。 由此可见:着色器是编写WebGL
时最重要的一点(没有之一)。我们之所以能生成并操作3D
图像,都是因为着色器在起作用。WebGL
中着色器分为两种。