持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
WEBGL是一项在网页上绘制渲染三维图形的一种技术，全称为 Web Graphics Library，WEBGL提供的仅仅是光栅化，将顶点数据绘制成点，线，三角形。
所以如果我们真正想要完成复杂的三维图形渲染，还需要做很多工作，所以并不是掌握了WEBGL的技术就可以做出很好看的作品，而上层领域封装中比较常见的是THREEJS，BABYLONJS。
WEBGL技术规范继承自OPENGL标准，主要是依赖OPENGL ES2.0，它跑在CPU，如果我们需要GPU运行代码，还需要提供一个叫GLSL编写的两个着色器，一个是顶点着色器，一个是片段着色器
所以如果想要WEBGL绘图，就必须使用着色器，顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片断着色器方法。 片断着色器的作用是计算出当前绘制图元中每个像素的颜色值。
那我们也不过多介绍着色器的语法，就介绍一下如何传输数据到着色器中
-
属性（Attributes）和缓冲
缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。
属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。 对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据（三个32位的浮点数据）， 起始偏移值是多少，到下一个位置的字节数是多少。
缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字， 每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。
-
全局变量（Uniforms）
全局变量在着色程序运行前赋值，在运行过程中全局有效。
-
纹理（Textures）
纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。 大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。
-
可变量（Varyings）
可变量是一种顶点着色器给片断着色器传值的方式，依照渲染的图元是点， 线还是三角形，顶点着色器中设置的可变量会在片断着色器运行中获取不同的插值。
而这些都在我们之前的文章中有使用过，只要有这些，我们就可以对webgl进行数据传输绘制
其实webgl就是等于我们传输顶点数据，对顶点处理、对每个图元绘制处理，非常基础的API，但三维不仅仅是这些，因为这样也只是绘制的二维，二维我们通过2d的上下文也可以绘制，我们后面再来探讨一下三维是如何绘制的
