webgl基础：着色器基础
关注「豆皮范儿」，回复“加群”
豆皮粉儿，又见面啦！今天由字节跳动的"yancy"童鞋给大家重磅推出一篇 WebGL的干货"WebGL基础：着色器基础"!准备好了吗？接下来让我们开启奇幻旅程，进入 3D 的世界。
1. 认识3D
首先我们要介绍的是几个概念，这是我们要进入到 3D 不可或缺的内容。认识一下它们吧。
1.1 视点，视线，目标点，上方向
这几个概念在 WebGL中属于最常见的内容。
视点：可以简易的理解为眼睛，也叫观察点
目标点：可以理解为我们要看的物体（任何物体）
上方向：头顶的方向。
实际生活中，我们的目光总是以我们的眼睛为起始点，到达我们想要看到的物体，同时，随着我们观察的角度不同，物体也会呈现不一样的形态。以一张图说明吧。
如此几个内容，创建出了 3D世界的基本显示模型，由此可见其重要程度。后面我们也会说到如何在 WebGL 中设定这几个内容。也会有的小伙伴把视点称为相机，目标点称为画布。其实是一样的道理。按照自己的理解记忆就好。
1.2 可视范围
可视范围指的是我们所能看到的最大范围。如：一般情况下我们看不到自己身后的事物。
众所周知，三维物体具有深度的概念。在我们的理解中，深度就是 z 轴。
虽然我们可以将物体放置在三维空间中的任何位置，但是在 WebGL中，可视范围之外的物体是不被绘制的，这也是为了节省开销。
1.3 可视空间
水平视角、垂直视角、可视深度 定义了可视空间的概念。
可视空间分为两种。
正射投影：与物体的远近无关，通常用在建筑设计和建模上。
透视投影：我们平时观察的真实世界都是透视投影。更有深度的感觉。
1.3 着色器
如果想渲染 3D 图形，就需要经过一系列的步骤，这些步骤称为渲染管线。在开发 WebGL 程序时，我们就需要通过着色器语言跟GPU进行沟通，用来设定我们需要渲染和显示的图形。
由此可见：着色器是编写 WebGL时最重要的一点（没有之一）。我们之所以能生成并操作 3D图像，都是因为着色器在起作用。WebGL中着色器分为两种。顶点着色器和片元着色器。
1.3.1 顶点着色器
这里的顶点代表的是组成物体的每一个点。
顶点着色器的功能主要是将位置数据经过矩阵变换、计算光照之后生成顶点颜色、变换纹理坐标。并将生成的数据输出到片元着色器。
1.3.2 片元着色器
片元着色器的作用是将光栅化阶段生成的每个片元，计算出每个片元的最终元素。
注：
由于着色器内容比较重要，这里我们先引入这两个概念，先简单理解就可以，后面专门对着色器进行分享。
2. 绘制图形
2.1 获取绘图上下文
了解了第一小节的内容之后，我们开始进入到 WebGL开发实战中。
还记得 Canvas中第一步需要干什么吗？
没错，需要获取 Canvas 元素和绘图上下文。WebGL 开发也不例外，也需要首先获取元素和绘图上下文。形如下方代码所示：
2.2 初始化着色器
2.2.1. 编写着色器代码
获取到绘图上下文之后，我们需要初始化 WebGL 的着色器了，着色器代码是以字符串的形式嵌入到渲染程序中，所以我们需要编写两个着色器的字符串。
两个着色器代码都是以字符串的形式存在，并在执行渲染时嵌入到渲染流程内。
说明：
voidmain(){}: 创建一个主函数。gl_Position: 指定绘制的坐标，接收一个拥有4个浮点分量的vec4数据。分别代表x,y,z,w数据gl_PointSize: 表示要绘制图形的尺寸大小。gl_FragColor: 定义图形颜色，1.00.00.01.0分别代表r g b a
2.2.2. 创建着色器
当然，只是编写完着色器代码依然不能完成渲染工作，接下来我们就需要将着色器添加到渲染流程内
2.2.3. 着色器编译
完成上述两步之后，我们就需要将着色器代码添加到着色器中。看下例子。
2.2.4. 创建 program
完成编译之后，我们需要将着色器添加到渲染程序中。
2.2.5. 绘制图形
完成上述步骤之后，就可以绘制我们的图形了。这里我们以一个点为例。在画布上绘制一个点出来。
gl.drawArrays(gl.POINTS, 0, 1);
此时就可以打开页面，看到我们绘制的这个点了。
总结代码：
3. 渲染管线
3.1 基础内容介绍
WebGL 的渲染依赖底层 GPU 的渲染能力。所以 WebGL 渲染流程和 GPU 内部的渲染管线是相符的。
渲染管线的作用是将3D模型转换为2维图像。
在早期，渲染管线是不可编程的，叫做固定渲染管线，工作的细节流程已经固定，修改的话需要调整一些参数。
现代的 GPU 所包含的渲染管线为可编程渲染管线，可以通过编程 GLSL，着色器语言 来控制一些渲染阶段的细节。
3.2 渲染过程
（心理承受弱的同学可跳过此小节）
WebGL 的渲染过程分为以下几项：
顶点着色器
图片装配
光栅化
片元着色器
逐片段操作（本文不会分享此内容）
裁剪测试
多重采样操作
背面剔除
模板测试
深度测试
融合
缓存
这里一系列的名词可能会吓到很多同学，千万别被名词吓到哟，接下来的过程中会详细说明。也希望通过本文可以让大家理解基本的渲染流程。附图解一张，助大家理解。
4. 顶点着色器
顶点着色器的作用是通过计算获得最终的顶点坐标， 如：
A-->()=>{…………}==>A1：坐标A经过一系列的计算，最终获取坐标A1B-->()=>{…………}==>B1：坐标B经过一系列的计算，最终获取坐标B1…………
顶点着色器计算出来的坐标将会渲染到最终的显示画布上。
此外，顶点着色器还会计算如下内容：颜色、纹理坐标、顶点尺寸……
在顶点着色器阶段通常会涉及到三个类型的变量。
attribute：针对单一顶点生效。
通常用于：顶点位置、顶点大小等内容
uniform：影响所有顶点
通常用于：旋转、平移、缩放等位置变换、颜色处理等内容。
varying：可通过顶点着色器传入到片元着色器。
像 attribute 这个变量之前我们就用到过，用来设置了顶点的位置和大小。回顾一下
其他的两个变量暂时没有用到，接下来的内容里会用到这两种类型的变量。敬请期待😁
5. 图元装配和光栅化
什么是图元？
官方解释：
描述各种图形元素的函数叫做图元，描述几何元素的称为几何图元（点，线段或多边形）。点和线是最简单的几何图元
经过顶点着色器计算之后的坐标会被组装成组合图元。
接下来通过一组图解来看看渲染器如何进行图元装配和光栅化
通俗解释
图元就是一个点、一条线段、或者是一个多边形。
5.1 图元装配
什么是图元装配呢？简单理解就是说将我们设置的顶点、颜色、纹理等内容组装称为一个可渲染的多边形的过程。
注意：
如何组装取决于 gl.drawArrays(type,count) 中的 type 类型，本文最后有详细的内容。
在之前的文章里，我们就使用 gl.POINTS 来绘制了一个点。
5.2 光栅化
片元：二维图象上每个点都包含了颜色、深度和纹理数据。这样一个点称为片元
光栅化可以简单理解为以下内容：
通过图元装配生成的多边形，计算像素并填充，剔除不可见的部分，剪裁掉不在可视范围内的部分。最终生成可见的带有颜色数据的图形并绘制。
光栅化流程图解：
剔除和剪裁
剔除：举一个日常生活中的栗子来说明吧。
在日常生活中，对于不透明物体，背面对于观察者来说是不可见的。同样，在
WebGL中，我们也可以设定物体的背面不可见，那么在渲染过程中，就会将不可见的部分剔除，不参与绘制。节省渲染开销。剪裁：同样举例子来说明
日常生活中不论是在看电视还是观察物体，都会有一个可视范围，在可视范围之外的事物我们是看不到的。类似的，图形生成后，有的部分可能位于可视范围之外，这一部分会被剪裁掉，不参与绘制。以此来提高性能。
6. 片元着色器
接收光栅化阶段生成的片元，在光栅化阶段中，已经计算出每个片元的颜色信息，这一阶段会将片元做逐片元挑选的操作，处理过的片元会继续向后面的阶段传递。
逐片元挑选
通过模板测试和深度测试来确定片元是否要显示，测试过程中会丢弃掉部分无用的片元内容，然后生成可绘制的二维图像绘制并显示。
深度测试：就是对
z轴的值做测试，值比较小的片元内容会覆盖值比较大的。（类似于近处的物体会遮挡远处物体）。模板测试：模拟观察者的观察行为，可以接为镜像观察。标记所有镜像中出现的片元，最后只绘制有标记的内容。
7. 实例分析
下面结合2.2.5的代码，我们进行流程分析，加深理解。
分析：
首先创建了两个变量
VERTEX_SHADER顶点着色器和FRAGMENT_SHADER片元着色器。这两个内容会通过下面的代码添加到顶点着色器和片元着色器中。之后通过
gl.createShader()创建了两个着色器。传入不同的参数即可创建不同的着色器。创建并关联着色器的步骤比较复杂。当你熟悉这个过程之后，可以将这个过程的代码封装起来作为备用。接下来，通过
将着色器代码添加到着色器中、编辑着色器、创建程序对象、将着色器添加到程序对象中、关联程序对象、使用程序对象这一系列的步骤初始化着色器和程序对象。当所有的前置工作准备就绪之后，就可以调用
gl.drawArrays()方法来绘制想要的图形。
7.1 gl.drawArrays(type, first, count)
1. type 代表要绘制的图形形状，值有以下几种：
gl.POINTS: 要绘制一系列的点
gl.LINES: 要绘制了一系列未连接直线段(单独行)gl.LINE_STRIP: 要绘制一系列连接的线段
*gl.LINE_LOOP *: 要绘制一系列连接的线段。它还连接第一个和最后一个顶点，以形成一个环
gl.TRIANGLES: 一系列单独的三角形
gl.TRIANGLE_STRIP: 绘制一个三角带
gl.TRIANGLE_FAN: 绘制一个扇形（三角扇）
2. first 代表从哪个点开始
3. count 代表需要使用几个点
栗子：
其他的形状可以自己尝试…………会有意想不到的效果。
福利时间
这次为大家准备了3个有纪念意义的奖品：
1、字节跳动 技术学院抱枕 3个
温软舒适，温暖的你的心
短毛绒，不掉毛，不起球
2、奖品获取方法