最近小编准备将自己知识面做个扩展，特别是在上周末的时候，发现JavaScript能做的不仅能用在网页上，还可以用做游戏，爬虫等，小编接下来的文章，都将更新WebGL的相关内容，也和大家一起，扩宽知识的横向应用，也让自己的路走的更宽。首先来了解一下WebGL。

canvas与webgl区别
1.cavans画布是HTML5新增的一个DOM元素
2.用途：显示二维和三维的图像
3.绘制二维图形可以使用（canvas API 或 WebGL API）,三维图形使用WebGL API

canvas API
1.canvas API 提供二维绘图方式
2.图形的绘制主要通过 CanvasRenderingContext2D 接口完成
3.可以通过 canvas.getContext('2d') 获取二维图像绘图上下文

WebGL API
1.可以在任何兼容canvas中的渲染2d和3d图形
2.WebGL API 提供三维接口
3.图形绘制主要通过WebGLRenderingContext接口完成
4.可以通过canvas.getContext('webgl')来获取接口实例，也就是webgl上下文

WebGL2RenderingContext
1.可以通过这个来获取webgl 3.0的实例
2.也就是在WebGLRenderingContext之上做了些拓展
3.可以通过canvas.getContext('webgl2')来获取接口实例

什么是为webgl
webgl是一种3D绘图协议，衍生于OpenGL ES2.0，可以结合HTML5和JavaScript在网页上绘制和渲染二/三维图形

webgl的应用场景
1.数据可视化
2.图形/游戏引擎
3.交互演示、图形渲染
4.地图
5.VR
6.物品展示
7.室内设计
8.城市规划

webgl的优势
1.内嵌在浏览器中， 不需要安装任何插件即可运行
2.只需要一个文本编辑器和浏览器，就可以编写三维图形程序

3.都是JavaScript，学习和使用的成本相对较低

学习的前置条件
1.文本编辑器
2.浏览器
3.HTML和JavaScript基础

webgl程序结构

webgl开源框架
Three.js:JavaScript 3D WebGL库【https://threejs.org/】
Babylon.js: Web3D图形引擎【https://www.babylonjs.com/】
KickJS:Web的开源图形和游戏引擎【http://www.kickjs.org/】
ClayGL:构建可扩展的Web3D应用程序【http://claygl.xyz/】
PlayCanvas：网络游戏和3D图形引擎【https://playcanvas.com/】