关于WebGL，Three.js，OpenGL，Direct3D，CSS3D，GPU

OpenGL

OpenGL(英语:Open Graphics Library，译名:开放图形库或者"开放式图形库")是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。这个接口由近350个不同的函数调用组成，用来绘制从简单的图形比特到复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。

OpenGL的高效实现(利用了图形加速硬件)存在于Windows，部分UNIX平台和Mac OS。这些实现一般由显示设备厂商提供，而且非常依赖于该厂商提供的硬件。开放源代码库Mesa是一个纯基于软件的图形API，它的代码兼容于OpenGL。但是，由于许可证的原因，它只声称是一个"非常相似"的API。

OpenGL规范描述了绘制2D和3D图形的抽象API。尽管这些API可以完全通过软件实现（CPU），但它是为大部分或者全部使用硬件加速（GPU）而设计的。

OpenGL规范由1992年成立的OpenGL架构评审委员会(ARB)维护。ARB由一些对创建一个统一的、普遍可用的API特别感兴趣的公司组成。根据OpenGL官方网站，2002年6月的ARB投票成员包括3Dlabs、Apple Computer、ATI Technologies、Dell Computer、Evans & Sutherland、Hewlett-Packard、IBM、Intel、Matrox、NVIDIA、SGI和Sun Microsystems，Microsoft曾是创立成员之一，但已于2003年3月退出。

Direct3D

Direct 3D(简称:D3D)是基于微软的通用对象模式COM(Common Object Mode)的3D图形API。它是由微软(Microsoft)一手树立的3D API规范，微软公司拥有该库版权，它所有的语法定义包含在微软提供的程序开发组件的帮助文件、源代码中。Direct3D是微软公司DirectX SDK集成开发包中的重要部分，适合多媒体、娱乐、即时3D动画等广泛和实用的3D图形计算。自1996年发布以来，Direct3D以其良好的硬件兼容性和友好的编程方式很快得到了广泛的认可，现在几乎所有的具有3D图形加速的主流显示卡都对Direct3D提供良好的支持。但它也有缺陷，由于是以COM接口形式提供的，所以较为复杂，稳定性差，另外，目前只在Windows平台上可用。

GPU

图形处理器(英语:Graphics Processing Unit，缩写:GPU)，又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些[动设备(如平板电脑、智能手机等)上图像运算工作的微处理器。

用途是将计算机系统所需要的显示信息进行转换驱动，并向显示器提供行扫描信号，控制显示器的正确显示，是连接显示器和个人电脑主板的重要元件，也是"人机对话"的重要设备之一。显卡作为电脑主机里的一个重要组成部分，承担输出显示图形的任务，对于从事专业图形设计的人来说显卡非常重要。

显卡的处理器称为图形处理器(GPU)，它是显卡的"心脏"，与CPU类似，只不过GPU是专为执行复杂的数学和几何计算而设计的，这些计算是图形渲染所必需的。某些最快速的GPU集成的晶体管数甚至超过了普通CPU。

时下的GPU多数拥有2D或3D图形加速功能。如果CPU想画一个二维图形，只需要发个指令给GPU，如"在坐标位置(x, y)处画个长和宽为a×b大小的长方形"，GPU就可以迅速计算出该图形的所有像素，并在显示器上指定位置画出相应的图形，画完后就通知CPU “我画完了”，然后等待CPU发出下一条图形指令。

有了GPU，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务，这样可以大大提高计算机的整体性能。

GPU会产生大量热量，所以它的上方通常安装有散热器或风扇。

图形处理器又名显示处理器。图形处理器是显示卡的"心脏"，也就相当于CPU在电脑中的作用，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为"软加速"。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的"硬件加速"功能。显示芯片通常是显示卡上最大的芯片(也是引脚最多的)。时下市场上的显卡大多采用NVIDIA和AMD两家公司的图形处理芯片。

NVIDIA公司在1999年发布GeForce256图形处理芯片时首先提出GPU的概念。GPU使显卡减少了对CPU的依赖，并进行部分原本CPU的工作，尤其是在3D图形处理时。GPU所采用的核心技术有硬体T&L、立方环境材质贴图和顶点混合、纹理压缩和凹凸映射贴图、双重纹理四像素256位渲染引擎等，而硬体T&L技术可以说是GPU的标志。

GPU能够从硬件上支持T&L(Transform and Lighting，多边形转换与光源处理)的显示芯片，因为T&L是3D渲染中的一个重要部分，其作用是计算多边形的3D位置和处理动态光线效果，也可以称为"几何处理"。一个好的T&L单元，可以提供细致的3D物体和高级的光线特效;只不过大多数PC中，T&L的大部分运算是交由CPU处理的(这就也就是所谓的软件T&L)，由于CPU的任务繁多，除了T&L之外，还要做内存管理、输入响应等非3D图形处理工作，因此在实际运算的时候性能会大打折扣，常常出现显卡等待CPU数据的情况，其运算速度远跟不上今天复杂三维游戏的要求。即使CPU的工作频率超过1GHz或更高，对它的帮助也不大，由于这是PC本身设计造成的问题，与CPU的速度无太大关系。

WebGL

WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

教程：http://www.yanhuangxueyuan.com/WebGL

Three.js

three.js是JavaScript编写的WebGL第三方库，是对WebGL的封装，提供了非常多的3D显示功能，因为完全使用WebGL来实现3D效果还是挺麻烦的，开发效率不高。

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

Canvas

HTML的Canvas元素提供了2D和3D绘图两种功能，平时程序员之间交流所说的Canvas一词就是指Canvas的2D绘图功能，而通过Canvas元素实现的3D绘图功能，也就是所谓的WebGL，或者说WebGL依赖于Canvas元素实现。

执行canvas.getContext('2d')返回对象具有一系列绘制二维图形的方法，比如绘制直线、圆弧等API。

执行canvas.getContext('webgl')返回的对象就是WebGL的对象。

教程：https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

着色器语言 GLSL ES

对于前端工程来说学习WebGL，还需要学习一门新的语言着色器语言GLSL ES。

着色器语言用于计算机图形编程，运行在GPU中，平时所说的大多数语言编写的程序都是运行在CPU中。 与OpenGL API相配合的是着色器语言GLSL，与OpenGL ES API、WebGL API相互配合的是着色器语言GLSL ES。OpenGL标准应用的是客户端，OpenGL ES应用的是移动端，WebGL标准应用的是浏览器平台。

CSS3D

严格来说，CSS3D不是3D渲染的，而是完全利用CPU来运算，最终呈现一个类似3D的效果，没有利用到GPU，这使得其性能是个严重的问题，不推荐使用。