共计 2468 个字符，预计需要花费 7 分钟才能阅读完成。
引子
看了一个库的源码，外面用到了 WebGL，就开始找 WebGL 的材料。发现相干的知识点很多，依照本人的了解习惯进行了整顿记录。
- Origin
- My GitHub
简介
WebGL 是一个跨平台、收费的开放式 Web 规范，用于基于 OpenGL ES 的高级 3D 图形 API。可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需应用插件。在 JavaScript 中能够通过 HTML5 的 Canvas 元素应用。WebGL 1.0 基于 OpenGL ES 2.0，WebGL 2.0 基于 OpenGL ES 3.0。目前浏览器反对状况见 Can I use WebGL ?
WebGL 官网相干疏导资源见这里，感觉浏览加载有些慢，独自下载了一份到 Github：WebGL 1.0、WebGL 2.0。
OpenGL ES 是一个跨平台、收费的 API，用于在嵌入式和挪动零碎（包含控制台、手机、设施和车辆）上渲染高级 2D 和 3D 图形。它是 OpenGL 的子集。
OpenGL 是业界最宽泛采纳的 2D 和 3D 图形 API，为各种计算机平台带来了数千种应用程序。它独立于窗口零碎和操作系统。OpenGL 公开了最新图形硬件的所有性能。
OpenGL 标准严格规定了每个函数该如何执行，以及它们的输入值。至于外部具体每个函数是如何实现的，将由 OpenGL 库的开发者自行决定，因而在不同零碎中雷同的 API 可能会呈现体现行为不统一的状况。
OpenGL ES 对应的可编程语言是 OpenGL ES Shading Language (GLSL ES)，该语言基于 OpenGL Shading Language (GLSL) 制订。GLSL 是 OpenGL 的次要着色语言，其格调相似 C 语言，是为图形计算量身定制的，它蕴含一些针对向量和矩阵操作的有用个性。
上面的概念大都是对于 OpenGL，因为 WebGL 外围还是基于 OpenGL，同样有助于了解。
状态机
状态机（FSM）是一个计算数学模型，是一个形象的机器，能在任何给定的工夫处于无限状态中的一个。FSM 能够依据一些输出从一种状态扭转到另一种状态。
OpenGL 本身就是一个微小的状态机：一系列的变量形容 OpenGL 此刻该当如何运行。在 OpenGL 相干程序中能够看到很多全局的变量，其中一些是输入变量，一些输出变量。
图形渲染管线
在 OpenGL 中，任何事物都在 3D 空间中，而屏幕和窗口却是 2D 像素，这导致 OpenGL 的大部分工作都是对于把 3D 坐标转变为适应屏幕的 2D 像素。3D 坐标转为 2D 坐标的处理过程是由 OpenGL 的 图形渲染管线（Graphics Pipeline）治理。
图形渲染管线能够被划分为几个阶段，每个阶段将会把前一个阶段的输入作为输出。所有这些阶段都是高度专门化的，并且很容易并行执行。正是因为它们具备并行执行的个性，当今大多数显卡都有成千上万的小解决外围，它们在 GPU 上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中疾速解决数据。这些小程序叫做 着色器(Shader)。
上面是一个图形渲染管线的每个阶段的形象展现。留神 蓝色局部 代表能够注入自定义着色器，也就是可编程。
作为图形渲染管线输出的数据叫做 顶点数据 (Vertex Data)。顶点数据是一系列顶点的汇合。一个顶点(Vertex) 是一个 3D 坐标数据的汇合。而顶点数据是用顶点属性 (Vertex Attribute) 示意的，它能够蕴含任何咱们想用的数据。
输出的数据会进入到图形渲染管线的第一个解决阶段：顶点着色器。
顶点着色器
顶点着色器 (Vertex Shader) 可编程，次要的目标是把 3D 坐标转为标准化设施坐标。还会在 GPU 上创立内存用于贮存顶点数据，还要配置 OpenGL 如何解释这些内存，并且指定其如何发送给显卡。顶点着色器容许咱们对顶点属性进行一些根本解决。
顶点相干的信息都寄存在 顶点缓冲对象 (Vertex Buffer Objects, VBO) 中，它会在 GPU 内存（通常被称为显存）中贮存大量顶点。应用这些缓冲对象的益处是能够一次性发送一大批数据到显卡上，而不是每个顶点发送一次。当数据发送至显卡的内存中后，顶点着色器简直能立刻拜访顶点，这是个十分快的过程。
接着进入到图元拆卸阶段。
图元拆卸
图元拆卸 (Primitive Assembly) 将顶点着色器输入的所有顶点作为输出，所有的点会装配成指定图元的形态。图元根本形态有：
- 点
- 线
- 三角形
图元拆卸阶段的输入会传递给几何着色器阶段。
几何着色器
几何着色器 (Geometry Shader) 可编程，把图元模式的一系列顶点的汇合作为输出，它能够通过产生新顶点结构出新的（或是其它的）图元来生成其它形态。
几何着色器的输入会被传入光栅化阶段。
光栅化
光栅化 (Rasterization) 会把图元映射为最终屏幕上相应的像素，生成供片段着色器应用的 片段 (Fragment)。在片段着色器运行之前会执行 裁切(Clipping)。裁切会抛弃超出视图以外的所有像素，用来晋升执行效率。
片段着色器
片段着色器 (Fragment Shader) 可编程，次要目标是计算一个像素的最终色彩，这也是所有 OpenGL 高级成果产生的中央。通常，片段着色器蕴含 3D 场景的数据（比方光照、暗影、光的色彩等等），这些数据能够被用来计算最终像素的色彩。
在所有对应色彩值确定当前，最终的对象将会被传到最初一个阶段：测试混合。
测试混合
测试混合 (Tests And Blending) 阶段检测片段的对应深度（和模板(Stencil)）值，用它们来判断这个像素是其它物体的后面还是前面，决定是否应该抛弃。这个阶段也会查看 alpha 值（alpha 值定义了一个物体的透明度）并对物体进行混合(Blend)。所以，即便在片段着色器中计算出来了一个像素输入的色彩，最初渲染的像素色彩也可能齐全不同。
WebGL 中的着色器
WebGL 中次要编写的着色器有顶点着色器和片段着色器。具体实现见 JavaScript WebGL 绘制一条直线。
参考资料
- WebGL lessons
- WebGL 根底绘制之一：绘制一个点
- 你好，三角形
- WebGL MDN
- Khronos
- MDN WebGL 绘制正方形