前端可视化 OpenGL / WebGL 入门和实践
Posted 奇舞精选
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端可视化 OpenGL / WebGL 入门和实践相关的知识，希望对你有一定的参考价值。
希望通过这篇文章，大家能够对 OpenGL/WebGL 有一个基础的认识～～
OpenGL
定义
OpenGL 是一套规范，不是接口，学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果。
这套接口是 Khronos 这个组织在维护。怎么维护呢？就是写一个说明书，指导各个 GPU 厂家，如果他们要支持 OpenGL 的话，要怎么实现一个具体的 OpenGL 库。比如 Khronos 说要实现 glDrawArray这 个接口，那么硬件厂家就得在它的库里实现这个接口。如果不实现，那么就不算支持 OpenGL。当然也有一些接口不一定要实现。
厂家实现的 OpenGL 库的内容，其实就是厂家自己的团队整合自己的图形知识以及 GPU 硬件的指令，这些 OpenGL 的实现通常被称为“驱动”，它们负责将 OpenGL 定义的 API 命令翻译为 GPU 指令。因此使用时只需要安装显卡的驱动。
既然是在 GPU 上运行的 OpenGL，那么接下来我们来了解一下 GPU ～
GPU
概念
显卡处理器称为图形处理器(即 GPU )，它是显卡的“心脏”，与 CPU 类似，只不过 GPU 是专为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。一些最快速的 GPU 集成的晶体管数甚至超过了普通 CPU。
GPU 的工作
现代的 GPU 功能涵盖了图形显示的方方面面，这里只取一个简单的方向作为例子。这个立方体渲染的例子，会有助于理解接下来会讲到的 GLSL(OpenGL着色器) 语言。
大家可能都见过上面这张图，这是老版本 Direct X (是由微软公司创建的一系列专为多媒体以及游戏开发的应用程序接口)的一项测试，就是一个旋转的立方体。显示出一个这样的立方体要经过很多步骤，我们先考虑简单一点的，想象一下他只是一个线框，没有侧面的“X”图像。再简化一点，连线都没有，就是八个点（立方体有八个顶点的）。那么问题就简化成如何让这八个点转起来。
首先，在创造这个立方体的时候，肯定有八个顶点的坐标，坐标都是用向量表示的，因而至少也是个三维向量。然后“旋转”这个变换，在线性代数里面是用一个矩阵来表示的。向量旋转，是用向量乘以这个矩阵。把这八个点转一下，就是进行八次向量与矩阵的乘法而已。
这种计算并不复杂，拆开来看无非就是几次乘积加一起，就是计算量比较大。八个点就要算八次，2000个点就要算2000次。这就是 GPU 工作的一部分，顶点变换，这也是最简单的一部分。
通过这个例子可以先思考一下，想要渲染出一个图形，就需要告诉 GPU 图形的顶点(即坐标向量)，如果需要变化(如：平移、旋转、缩放等)，就需要告知对应的矩阵，这也就是文章后面要说的 GLSL 语言核心需要做的事情～
CPU 与 GPU 区别大揭秘
CPU 和 GPU 因为最初用来处理的任务就不同，所以设计上有很大的区别。它们分别针对了两种不同的应用场景。
CPU 需要很强的通用性来处理各种不同的数据类型，同时又要逻辑判断又会引入大量的分支跳转和中断的处理。这些都使得 CPU 的内部结构异常复杂。而 GPU 面对的则是类型高度统一的、相互无依赖的大规模数据和不需要被打断的纯净的计算环境。
于是 CPU 和 GPU 就呈现出非常不同的架构(示意图)：
其中绿色的是计算单元，橙红色的是存储单元，橙黄色的是控制单元。
GPU 采用了数量众多的计算单元和超长的流水线，但只有非常简单的控制逻辑并省去了 Cache。而 CPU 不仅被 Cache 占据了大量空间，而且还有有复杂的控制逻辑和诸多优化电路，相比之下计算能力只是 CPU 很小的一部分。
而 GPU 的工作大部分就是这样，计算量大，但没什么技术含量，而且需要重复很多次。就像你有个工作需要算几亿次一百以内加减乘除一样，最好的办法就是雇上几十个小学生一起算，一人算一部分，反正这些计算也没什么技术含量，纯粹体力活，人海战术而已。而 CPU 则像老教授，积分微分都会算，一个老教授资顶二十个小学生。GPU 就是这样，用很多简单的计算单元去完成大量的计算任务。不过这种策略基于一个前提，就是每个小学生工作没有什么依赖性，是互相独立的，即 GPU 的计算单元所做的事情是互相独立的。
还有一些任务涉及到步骤的问题，不能把执行顺序颠倒了。这种比较复杂的问题都是 CPU 来做的。
GPU 的运算速度取决于雇了多少小学生，CPU 的运算速度取决于请了多厉害的教授。教授处理复杂任务的能力是碾压小学生的，但是对于没那么复杂的任务，还是人多力量大。不过现在的 GPU 也能做一些稍微复杂的工作，但还是需要 CPU 把数据给 GPU 才能开始干活，因此还是靠 CPU 来管的。
至此为止，GPU 的内容先了解到这里，接下来我们继续回到 OpenGL。
OpenGL ES
OpenGL ES 与 WebGL 有关，WebGL 是基于 OpenGL ES 2.0 的 javascript API，因此我们在这里先来了解一下OpenGL ES。
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 / WebGL 入门和实践的主要内容，如果未能解决你的问题，请参考以下文章