WebGL框架比较与入门

前言

为什么要学这个呢，其实就目前来看WebGL与最为人接受的前端开发关系不大，目前主流前端开发来看，webGL实属“旁门别类”，但是我们需要注意的是对于web GL相关需求其实也一直是有的，甚至于说还不少，当然相对于主流web开发还是少很多的。回到正题，其实学这个一个很重要的原因就是需要使用，由于课题成果被老师极为看重，他特别想让我搞出来这种类似3D无人机对战的效果。

canvas、SVG、WebGL

首先是这三个概念的区别，SVG可以说是主流web开发经常使用到的，毕竟iconfont每个人都会接触到，而基于SVG的icon表现则是目前来说效果最好的，这里我们直接引入MDN的定义：

可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG 是一个基于文本的开放 Web 标准。它的设计明确地保证它与 CSS、DOM，以及 SMIL 等其他Web标准一同运作。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。

从这里可以很明显的看出一些SVG相对于普通图片的优势。

canvas则是目前面试前端时H5最容易被问到的问题之一，首先它是H5新增加的一个元素标签，其实就是一个画布。它自身API的限制是2D，一般用于绘制比较复杂的动画,做游戏之类的。

WebGL则是一套3D图形API，以opengl ES2.0为基础，他需要一个呈现对象来呈现这个3D效果，而canvas就是这个呈现的媒介。web GL不仅可以用于3D图形处理，2D自然也可以通过一定的手段达到。

关于web GL规范和图形学的东西时则是一个庞然大物，对于我目前的需求，从根源学起很难在短时间内开发出可用应用，针对这些，一些基于web GL的封装库就有了其用武之地，而three.js和babylon.js则是其中的佼佼者。

Three.js

three.js作为最经典，同时也是github star数最多的web GL库，可以说是很多项目选型的首选，我个人一开始也是相当中意这个库。

同时这个库研究的人也是很多，中文相关文档也有很多

babylon.js

这是微软13年出的，相对于th