3D技术相关基础概念

在了解 3D 相关技术的过程中，绕不开 OpenGL、OpenGL ES、WebGL、Canvas 这几个名词，总结一下这几个次的概念以及他们之间的关系。

OpenGL

OpenGL 是 Open Graphics Library 的缩写，是个定义了一个跨编程语言、跨平台的编程接口的标准，显卡通常有 OpenGL 的实现，不同显卡上的 OpenGL 实现也不一定相同，OpenGL 标准不是平台相关的，所以同一个程序可能在不同的显卡上运行。

OpenGL 并不是一个 API 库，而是一个标准，一个规范。这个规范严格的规定了每个函数要如何执行、以及函数的输出值，至于每个函数具体的实现过程、是由各个厂商的开发者，也就是 OpenGL 库的开发者根据自己的硬件特性开发出相应的 API。市场上，OpenGL 大都是显卡厂商、GPU 厂商、以及浏览器厂商比如 Mozilla、Google 等尖端科技公司来实现。

OpenGL ES

随着手机等移动设备性能的快速提高，人们已经不满足于将移动设备的应用止于通讯应用、记事等传统平面应用。而越来越注重移动设备功能的多样化、娱乐化，手机 3D 游戏、GPS 导航系统等代表了未来移动设备发展的方向。基于这种情况，Khronos 组织于 2003 年 7 月发布了专门针对于嵌入式设备图形开发的标准 OpenGL ES(OpenGL for Embedded Systems)，是 OpenGL 三维图形 API 的子集，针对手机、PDA 和游戏主机等嵌入式设备而设计

WebGL

WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D 图形），并允许用户与之交互的技术。随着个人计算机和浏览器的性能越来越强，我们能够在 Web 上创建越来越精美、越来越复杂的 3D 图形。

从传统意义上来说，为了显示三维图形，开发者需要使用 C 或 C++语言，辅以专门的计算机图形库，如 OpenGL 或 Direct3D，来开发一个独立的应用程序。现在有了 WebGL，我们只需要向已经熟悉的 HTML 和 JS 中添加一些额外的三维图形学的代码，就可以在网页上显示三维图形了。

WebGL 是内嵌在浏览器中的，不必安装插件和库就可以直接使用它。

Canvas

首先，HTML 的 Canvas 元素提供了 2D 和 3D 绘图两种功能，平时程序员之间交流所说的 Canvas 一词就是指 Canvas 的 2D 绘图功能，通过 Canvas 元素实现的 3D 绘图功能，也就是所谓的 WebGL，或者说 WebGL 依赖于 Canvas 元素实现。执行 canvas.getContext(‘2d’);返回对象具有一系列绘制二维图形的方法，比如绘制直线、圆弧等 API。执行 canvas.getContext(‘webgl’);返回对象具有一系列绘制渲染三维场景的方法，也就是 WebGL API。

OpenGL、 OpenGL ES 和 WebGL 的关系

OpenGL ES 可以说是 OpenGL 为了满足嵌入式设备需求而开发一个特殊版本，是其一个子集；而 WebGL，是为了网页渲染效果，将 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定得到。基本关系如下图所示：

在实际应用过程中，前端的 WebGL 是通过 JS 语句，操作本地的 OpenGL 的部分接口，对于移动设备这是操作 OpenGL ES 的接口，来实现页面的图形的渲染，WebGL 只是绑定外面接口的一层，内部的一些核心内容，如着色器，材质，灯光等都是需要借助 GLSL ES 语法来操作的。

三者直接版本的关系：

OpenGL、 OpenGL ES 和 WebGL 的区别

WebGL 与其他 OpenGL 最大差别就是其可以通过 HTML 脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持。

OpenGL 和 OpenGL ES 最大差别就是两者应用场景不一样，一个是计算机，一个是移动或嵌入式设备。这种差别体现在两个方面：

1. 窗口系统不一样。OpenGL ES 是一个平台中立的图形库，在它能够工作之前，需要于一个实际的窗口系统关联起来，这一点 OpenGL 也是一样的。但是 OpenGL 时代在不同平台上有不同的机制一关联窗口系统，在 Windows 上是 wgl，在 X-Window 上市 xgl,在 Apple OS 上是 agl 等。而嵌入式市场的平台种类不计其数，单是学习各家手机操作系统的接口就是很大负担了，更不用说致力于支持各种尺寸平台的软件开发者，所以 OpenGL ES 提供了 Window Surface 的抽象，使得移植工作基本可以局限在重新实现一下建立窗口的过程。这个窗口工具是 EGL,全称:embedded Graphic Interface,是 OpenGL ES 和底层 Native 平台 视窗系统之间的接口。

2. 功能规模不一样。嵌入式设备和移动设备追求的是高性能，因此 OpenGL ES 相对 OpenGL 删减了一切低效能的操作方式，有高性能的决不留低效能的，即只求效能不求兼容性(和苹果的作风类似)。典型的有：

   • 没有 double 型数据类型，但加入了高性能的定点小数数据类型。
   • 没有 glBegin/glEnd/glVertex，只能用 glDrawArrays/glDraw...............
   • 没有实时将非压缩图片数据转成压缩贴图的功能，程序必须直接提供压缩好的贴图

总结

• OpenGL 标准应用的是客户端
• OpenGL ES 应用的是移动端
• WebGL 标准应用的是浏览器平台
• Canvas(画布)只是 HTML 里面的一个元素，是呈现 2D、3D 绘图的基础，通过 Canvas 标签对象的 getContext()方法，可以针对性的获取 2D、3D 绘图的一系列 API 方法。