WebGL基础：着色器基础知识

今天由字节跳动的"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中着色器分为两种。顶点着色器和片元着色器