这些 API 能够让 Web 开发者使用 JavaScript 语言直接和显卡（GPU）进行通信。固然 WebGL 的 GPU 部分也有对应的编程语言，简称 GLSL。我们用它来编写运行在 GPU 上的着色器措施。着色器措施需要接收 CPU（WebGL 使用 JavaScript） 通报过来的数据，然后对这些数据进行流水线措置惩罚惩罚，最终显示在屏幕上，进而实现丰富多彩的 3D 应用，好比 3D 图表，网页游戏，3D 舆图，WebVR 等。WebGL 事情道理

3D 模型数据从诞生到最终显示在屏幕上，大家可以想象一下流水线的出产过程，流水线凭据既定的法式对原料进行加工，当出息序只对前一法式的功效进行措置惩罚惩罚，然后将措置惩罚惩罚后的功效通报给下一法式，最终将原质料出产成完整的产品。WebGL 的事情方法和流水线类似，也是凭据流水线的方法将 3D 模型数据衬着到 2D 屏幕上的，业界把这种衬着方法称为图形管线或者衬着管线。

WebGL 只能够绘制点、线段、三角形这三种根基图元，但是我们经常看到 WebGL 措施中含有立方体、球体、圆柱体等法则形体，甚至很多更庞大更逼真的犯警则模型，那么 WebGL 是如何绘制它们的呢？其实这些模型素质上是由一个一个的点构成，GPU 将这些点用三角形图元绘制成一个个的微小平面，这些平面之间互相连接，从而构成各类百般的立体模型。

因此，我们的首要任务是创建构成这些模型的极点数据。

一般情况下，最初的极点坐标是相对付模型中心的，不能直接通报到着色器中，我们需要对极点坐标凭据一系列法式执行模型转换，视图转换，投影转换，转换之后的坐标才是 WebGL 可接受的坐标，即裁剪空间坐标。我们把最终的调动矩阵和原始极点坐标通报给 GPU，GPU 的衬着管线对它们执行流水线功课。

GPU 衬着管线的主要措置惩罚惩罚过程如下：

首先进入极点着色器阶段，操作 GPU 的并行计算优势对极点逐个进行坐标调动。

然后进入图元装配阶段，将极点凭据图元类型组装成图形。

接下来来到光栅化阶段，光栅化阶段将图形用不包罗颜色信息的像素填充。

在之后进入片元着色器阶段，该阶段为像素着色，并最终显示在屏幕上。

GLSL 的中辞意思是 OpenGL 着色语言，英文全称是 OpenGL Shading Language，，它是用来在 OpenGL 编写着色器措施的语言。

着色器措施:着色器措施允许我们通过编程来控制 GPU 的衬着

那么 GPU 衬着过程中的哪些部分允许开发者控制呢？下图是对 WebGL 衬着管线的简单演示：

上图简单演示了 WebGL 对一个红色三角形的衬着过程，绿色部分为开发者可以通过编程控制的部分：

JavaScript 措施
措置惩罚惩罚着色器需要的极点坐标、法向量、颜色、纹理等信息，并卖力为着色器供给这些数据，上图为了演示便利，只是供给了三角形极点的位置数据。

极点着色器
接收 JavaScript 通报过来的极点信息，将极点绘制到对应坐标。

图元装配阶段
将三个极点装配成指定图元类型，上图给与的是三角形图元。

光栅化阶段 将三角形内部区域用空像素进行填充。

片元着色器 为三角形内部的像素填充颜色信息，上图为暗红色。

实际上，对极点信息的调动操纵既可以在 JavaScript 中进行，也可以在着色器措施中进行。凡是我们都是在 JavaScript 中生成一个包罗了所有调动的最终调动矩阵，然后将该矩阵通报给着色器，操作 GPU 并行计算优势对所有极点执行调动。

低级入门 --- 认识 WebGL