一、OpenGL

OpenGL规范描述了绘制2D和3D图形的抽象API。

OpenGL有许多语言绑定，值得一提的包括：JavaScript绑定的WebGL（基于OpenGL ES 2.0在Web浏览器中的进行3D渲染的API）；C绑定的WGL,GLX和CGL；iOS提供的C绑定；Android提供的Java和C绑定。

OpenGL功能：具有建模、变换、色彩处理、光线处理、纹理影射、图像处理、动画及物体运动模糊。

1、定义

OpenGL 是一套规范，不是接口/软件技术库。学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果。

这套接口是 Khronos 这个组织在维护。怎么维护呢？就是写一个说明书，指导各个 GPU 厂家，如果他们要支持 OpenGL 的话，要怎么实现一个具体的 OpenGL 库。比如 Khronos 说要实现 glDrawArray这 个接口，那么硬件厂家就得在它的库里实现这个接口。如果不实现，那么就不算支持 OpenGL，当然也有一些接口不一定要实现。

厂家实现的 OpenGL 库的内容，其实就是厂家自己的团队整合自己的图形知识以及 GPU 硬件的指令，这些 OpenGL 的实现通常被称为“驱动”，它们负责将 OpenGL 定义的 API 命令翻译为 GPU 指令。因此使用时只需要安装显卡的驱动。

2、GPU

显卡处理器称为图形处理器(即 GPU)，它是显卡的“心脏”，与 CPU 类似，只不过 GPU 是专为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。一些最快速的 GPU 集成的晶体管数甚至超过了普通 CPU。

3、OpenGL ES

OpenGL ES 是 OpenGL 的子集，专门针对手机/PDA(掌上电脑，如: 条形扫码器，POS机等)/游戏主机等嵌入式设备设计的。OpenGL ES 主要直接提供 C api，各自平台根据习惯提供一层包装(比如Android提供了Java的包装，iOS提供了obj-c的包装)。

虽然 OpenGL ES 是 OpenGL 的子集，但是 OpenGL 与 OpenGL ES 还是有一点区别，比如他们的数据类型会存在一些不一样：

  1. OpenGL ES 没有 double 型(浮点)数据类型，而是加入了高性能的定点小数数据类型；
  2. OpenGL ES 没有 glBegin/glEnd/glVertex，只能用 glDrawArrays/glDraw......；
  3. 没有实时将非压缩图片数据转成压缩贴图的功能，程序必须直接提供压缩好的贴图;
  4. ...

二、WebGL

1.概念

WebGL 是一种 3D 绘图标准，这种绘图技术标准把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过 HTML5 的 Canvas 来和 DOM 打交道，为HTML5 Canvas 提供硬件 3D 加速渲染。WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等。

2.与OpenGL的关系

就是通过浏览器提供的接口，我们能够直接和底层的 OpenGL 库打交道。由于能直接调用底层接口，并且有硬件加速，因此 WebGL 要比普通的 Canvas 2D Api 性能要高出不少。

3.Three.js

Three.js 是一个用于在浏览器中绘制3D图形的JS库，其底层实际是对浏览器提供的 WebGL Api 进行了封装，类似于 JS 与 JQuery 的关系，甚至不需要 WebGL 基础就能够上手使用，但是由于是以 WebGL 为基础，所以遇到问题还得回来查看 WebGL，而 WebGL 的基础又是 OpenGL ES，因此 OpenGL 就显得至关重要了。

4.GLSL着色器语言

着色器(Shader)是运行在 GPU 上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序，比如我们要画一个三角形，着色器只是通过读取我们传给它的顶点，颜色，变化等输入，然后经过一系列计算，最终输出图形。

着色器主要分为顶点着色器和片段(像素)着色器，这也是主要的两种着色器，还有一种是几何着色器。每个着色器是非常独立的程序，它们之间不能相互通信，唯一的沟通只能通过输入和输出。通常一个WebGL 应用会有多个着色程序。我们可以根据着色器的名字来思考一下他们的作用。顶点着色器，顾名思义就是为了渲染图形的顶点所使用的，回想一下我们刚才讲的 GPU 的工作，一个立方体的渲染，肯定是先要找到立方体的顶点，这个就是顶点着色器的作用了。顶点找到后，就会连接成线，以及形成平面，那么线段/平面的颜色等就是片段着色器的工作了。

着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。