three.js和webgl(threejs有什么用)

webgl、three.js、D3.js这三者是什么关系？

webgl、three.js、D3.js这三者的关系是：

1、D3.js是一个数据可视化的库，看看他们的DEMO就可以知道，技术基础是SVG。兼容性是IE9+。

2、webgl是HTML5中提出的新技术，是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，关于它的教程可以看看hiwebgl。目前兼容性堪忧

3、three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找到。

4、three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关系。

webGL与three.js

随着浏览器的功能越来越强大，渐渐得成为了复杂应用和图形的平台。同时，现有大多数浏览器实现了对 WebGL 的支持，但要直接使用 WebGL 相关接口进行开发，则需要学习复杂的着色器语言，且开发周期长，不利于项目的快速开发。

Three.js对 WebGL 进行了封装，将复杂的接口简单化，而且基于面向对象思维，将数据结构对象化，方便开发。

openGL、WebGL、Three.js的关系

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 就显得至关重要了。

参考来源

WebGL和three.js的关系是什么样的？

webgl和three.js是共生关系。两者的区别如下：

webgl:?HTML5官方的Web 3D解决方案，并且以网页形式进行展示

three.js:?基于webgl的3D框架，three.js在它的基础上进行了进一步的封装和简化开发

所以three.js会继承webgl的所有优势，并且更快速地绘制3D立体图像，高效体现在：

iframe在线分享：无论是PC端还是手机端，只需要单击项目所在链接即可运行

支持浏览器查看：省去了传统游戏安装客户端的麻烦，同时保证了项目代码不被泄露

支持跨平台推广：微信平台兼容性的快速发展，进一步降低WebGL 2.0的推广成本

但常规的html+css+javascript基础远远不够，要想hold住three.js，需要了解专业的3d开发知识，这也是学习曲线较长的卡点。

thingjs在线平台推荐了解一下，也是基于Webgl的3D类库，这两年在国内兴起，对于前端开发转3D更加容易，因为它把3D专业概念这一过程都简化了，打包成类库，直接用javascript就可以调用材质、灯光、空间变换等概念。

学习曲线变短，这是相对于three.js的一个很大的优势，代码变少，开发门槛降低，出错率更低。

3D的未来一定是虚拟漫游技术，在消费者端以及企业端，都有发展前景，我所在的物联网行业，3D可视化主要用于远程管理和安全监控，想看项目案例可登录官网-资源中心查看。