学习课程名称：WebGL+Three.js 入门与实战，系统学习 Web3D 技术
章节名称：WebGL 简单应用：学习 WebGL 简单使用，建立 WebGL 认知
讲师姓名：yancy
课程内容：
- canvas 和 webgl 的区别
- 认识 webgl , 了解 webgl
- webgl 入门
- 绘制一个点
- webgl 三维坐标系
- 学习使用 attribute 变量
- 通过鼠标控制绘制
关于绘制：
二维图形可以使用（Canvas API 或 WebGL API）
三维图形使用 WebGL API
Canvas API (主要聚焦于 2D 图形绘制的)
Canvas API 提供 二维 绘图的方式
图形的绘制主要通过 CanvasRenderingContext2D 接口完成
canvas.getContext(‘2d’) 通过这个方法，来获取接口的实例
WebGL API
WebGL API 提供三维绘图的方式
图形的绘制主要通过 WebGLRenderingContext 接口完成
canvas.getContext(‘webgl’)
WebGL2RenderingContext
canvas.getContext(‘webgl2’)
认识 webgl ,了解 webgl
什么是webgl
webgl 是一种3D 绘图协议，衍生于 OpenGL ES2.0 ，可以结合 HTML5 和 JavaScript 在网页上绘制和渲染二维和三维的图形。
为什么学webgl
要想知道为啥学，我们就需要知道 webgl 能帮我们解决哪些问题？
- 数据可视化
- 图形、游戏引擎
- 交互演示、图形渲染
- 地图
- VR
- 物品展示
- 室内设计
- 城市规划
- ……
webgl的优势
内嵌在浏览器中，不需要安装任何插件即可运行；
只需要一个文本编辑器和浏览器，就可以编写三维图形程序；
学习和使用比较简单。
学习的前置条件
文本编辑器
浏览器
HTML 和 JavaScript 基础
webgl程序结构
GLSL ES 是以字符串的形势存在于 JavaScript 中的
webgl开源框架
Three.js: JavaScript 3D WebGL 库
BabyIon.js: Web3D 图形引擎
KickJS: Web 的开源图形和游戏引擎
ClayGL: 构建可扩展的Web3D 应用程序
PlayCanvas: 网络游戏和3D 图形引擎
WebGLStudio.js 和 Litescene.js: 开源 Web 3D 图形编辑器和创建器
Luma: Uber 的 3D WebGL 可视化库
A-Frame: 用于构建VR（虚拟现实） 体验的 Web 框架