WebGL 是一种 3D 绘图规范，这种绘图技术标准容许把 JavaScript 和 OpenGL ES 2.0 联合在一起，通过减少 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 能够为 HTML5 Canvas 提供硬件 3D 减速渲染，这样 Web 开发人员就能够借助零碎显卡来在浏览器里更流畅地展现 3D 场景和模型了，还能创立简单的导航和数据视觉化。
WebGL 基本原理
WebGL 的呈现使得在浏览器下面实现显示 3D 图像成为可能，WebGL 实质上是基于光栅化的 API , 而不是基于 3D 的 API。
WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的色彩。应用 WebGL 程序的工作就是实现具备投影矩阵坐标和色彩的 WebGL 对象即可。能够应用“着色器”来实现上述工作。顶点着色器能够提供投影矩阵的坐标，片段着色器能够提供投影矩阵的色彩
光栅化《百度百科》：光栅化就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区中的一个像素。
光栅化其实是一种将几何图元变为二维图像的过程。该过程蕴含了两局部的工作。第一局部工作：决定窗口坐标中的哪些整型栅格区域被根本图元占用；第二局部工作：调配一个色彩值和一个深度值到各个区域。光栅化过程产生的是片元。
把物体的数学形容以及与物体相干的色彩信息转换为屏幕上用于对应地位的像素及用于填充像素的色彩，这个过程称为光栅化，这是一个将模拟信号转化为离散信号的过程。
顶点着色器（Vertex Shader）
顶点着色器的工作就是产生投影矩阵的坐标
片段着色器（Fragment Shader）
片段着色器的工作就是为以后被栅格化的像素提供色彩
多变变量
多变变量是从顶点着色器往片段着色器中传递的值
GLSL
GLSL 是图像库着色器语言的简称,OpenGL 着色语言（OpenGL Shading Language）是用来在 OpenGL 中着色编程的语言，也即开发人员写的短小的自定义程序，他们是在图形卡的 GPU（Graphic Processor Unit 图形处理单元）上执行的，代替了固定的渲染管线的一部分，使渲染管线中不同档次具备可编程性。比方：视图转换、投影转换等。GLSL（GL Shading Language）的着色器代码分成 2 个局部：Vertex Shader（顶点着色器）和 Fragment（片断着色器），有时还会有 Geometry Shader（几何着色器）。负责运行顶点着色的是顶点着色器。它能够失去以后 OpenGL 中的状态，GLSL 内置变量进行传递。GLSL 其应用 C 语言作为根底高阶着色语言，防止了应用汇编语言或硬件规格语言的复杂性。
attribute 变量 (attribute variable)：
向顶点着色器传入数据的变量。
uniform 变量 (uniform variable)：
向顶点着色器或片元着色器传入数据的变量。
varying 变量 (varying variable)：
用以从顶点着色器向片元着色器传递数据的变量。