three.jswebgl的简单介绍

Three.js使用WebGLRenderTarget进行离屏渲染(后期处理)

从Three.js的角度阐述，渲染结果的RGBA像素数据存储到了WebGL渲染目标对象WebGLRenderTarget中，通过目标对象的纹理属性.texture可以获得渲染结果的RGBA像素数据，也就是一个Three.js的纹理对象THREE.Texture，可以作为材质对象颜色贴图属性map的属性值；即将一个场景的渲染结果作为另一个场景中模型的纹理。

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可视化主要用于远程管理和安全监控，想看项目案例可登录官网-资源中心查看。

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全景图实战

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图，于是开始我的three.js开发之旅。

作为一个前端小白，突然接触three.jswebgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA......简直枯燥到极点。不过three.jswebgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。

Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。

WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。

three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成

webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：

摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：

渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。

three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。

素材常见的包含网格，灯光等许多元素下面我就举个例子

通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。

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跟上面两者没有关系。

cesium 和 Three.js有什么区别，以及二者与WebGL 的关系

二者都是基于WebGL技术开发的js库

Threejs受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手；例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api)，只是做了更大粒度的封装

Cesium受众面相对较小，是Gis相关的，也是基于WebGL开发的，它主要是三维地球相关的js库，可以展示二维地图服务(百度高德)、倾斜摄影模型；还可以在上面做一些三维分析，可以参考