openGL、WebGL、Three.js的关系

Posted 2023-04-27

参考技术A OpenGL(Open Graphics Library)是一套规范，不是接口，学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果。

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

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

既然是在 GPU 上运行的 OpenGL，那么接下来我们来了解一下 GPU

有关CPU和GPU的讨论网上有很多，这里只说重点：

GPU 采用了数量众多的计算单元和超长的流水线，但只有非常简单的控制逻辑并省去了 Cache。而 CPU 不仅被 Cache 占据了大量空间，而且还有有复杂的控制逻辑和诸多优化电路，相比之下计算能力只是 CPU 很小的一部分。

GPU 的工作，计算量大，但没什么技术含量，而且需要重复很多次。就像你有个工作需要算几亿次一百以内加减乘除一样，最好的办法就是雇上几十个小学生一起算，一人算一部分，反正这些计算也没什么技术含量，纯粹体力活，人海战术而已。而 CPU 则像老教授，积分微分都会算，一个老教授资顶二十个小学生。GPU 就是这样，用很多简单的计算单元去完成大量的计算任务。不过这种策略基于一个前提，就是每个小学生工作没有什么依赖性，是互相独立的，即 GPU 的计算单元所做的事情是互相独立的。

GPU 的运算速度取决于雇了多少小学生，CPU 的运算速度取决于请了多厉害的教授。教授处理复杂任务的能力是碾压小学生的，但是对于没那么复杂的任务，还是人多力量大。不过现在的 GPU 也能做一些稍微复杂的工作，但还是需要 CPU 把数据给 GPU 才能开始干活，因此还是靠 CPU 来管的。

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

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

OpenGL ES 没有 double 型(浮点)数据类型，而是加入了高性能的定点小数数据类型；

OpenGL ES 没有 glBegin/glEnd/glVertex，只能用 glDrawArrays/glDraw......；

没有实时将非压缩图片数据转成压缩贴图的功能，程序必须直接提供压缩好的贴图;。到目前为止，OpenGL已经经历过很多版本的迭代与更新，最新版本是3.0，而使用最广泛的还是OpenGL ES 2.0版本。

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

把 JavaScript 和 OpenGL ES 2.0 结合在一起即通过浏览器提供的接口，我们能够直接和底层的 OpenGL 库打交道。由于能直接调用底层接口，并且有硬件加速，因此 WebGL 要比普通的 Canvas 2D Api 性能要高出不少。利用的语言为GLSL(OpenGL Shader Language) 作为 Shading Language(一种顶点计算和着色的语言，缓存编译到 GPU，由 GPU 来执行)

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

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

在学习 WebGL知识时 总会看到一个库：Three.js，那我们这里也来简单的了解一下。Three.js 是一个用于在浏览器中绘制3D图形的JS库，其底层实际是对浏览器提供的 WebGL Api 进行了封装，类似于 JS 与 JQuery 的关系，甚至不需要 WebGL 基础就能够上手使用，但是由于是以 WebGL 为基础，所以遇到问题还得回来查看 WebGL，而 WebGL 的基础又是 OpenGL ES，因此 OpenGL 就显得至关重要了。
参考来源

three.js是什么，能干嘛，和webgl什么关系

　　如今浏览器的功能越来越强大，而且这些功能可能通过JavaScript直接调用。你可以用HTML5标签轻松地添加音频和视频，而且可以在HTML5画布上创建各种交互组件。现在这个功能集合里又有了一个新成员，即支持webGL。通过webgl可以直接使用显卡的计算资源，创建高性能的二维和三维计算机图形，然后在JavaScript里直接使用webGL编程，创建三维场景并生成动画，这个过程非常复杂，而且容易出错。three.js库可以简化这个过程。

----摘自《Three.js开发指南》

看了上面的摘文，我想大概能够明白three.js和webgl的关系，webgl是大部分浏览器直接支持的一种3D绘图标准。three.js在它的基础上进行了进一步的封装和简化开发开发过程，个人认为类似于jQuery对原生js的关系。

先看看浏览器对webgl的支持：