这是我参与「第四届青训营 」笔记创作活动的第6天
今天跟着青训营网课学习了月影大大的“WebGL与动画实现”，感觉打开了新世界的大门，特记笔记来加深印象、巩固学习。
一、Mordern Graphics System现代图形系统
· 光栅：
几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图形的像素阵列。
· 像素：
一个像素对应图象是的一个点，它通常保存在图像上的某个具体位置的颜色等信息。
· 帧缓存：
在绘图过程中，像素信息被存放于帧缓存中，帧缓存就是一块内存地址。
· CPU：
中央处理单元，负责逻辑计算
· GPU：
图形处理单元，负责图形计算
二、The Pipeline 图形渲染管线
可以类比活字印刷，是一个流程
把cpu和gpu的处理核心看成一个管道的话，cpu的管道功能强劲，但是管道数量少，GPU则拥有很多简单的小管道。因而在处理图形渲染这样的工作时，就好比让一堆沙子穿过管道，我们不需要多么高科技的管道，我们要求的管道的数量要多
三、WebGL Startup
如果我们使用webgl要做什么事？
1.创建webgl上下文
2.创建webgl program
3.将数据存入缓冲区
4.将缓冲区数据读取到GPU
5.GPU执行webgl程序，输出结果
四、实例演练
1、创建上下文
新版本浏览器如上小图，老版本则要用以前试验的名字
2、配置着色器
1）Vertex Shader 顶点着色器 处理图形轮廓
2）片元着色器 处理颜色
3、创建webgl program
把着色器都用上
4、Data to Frame Buffer 数据存入缓冲区
webgl的坐标系如图，跟常见的左手系右手系不大一样。比如现在我们需要创建一个三角形，我们写出了右上方的代码。然后创建缓冲区（右下角代码）
5、缓冲区数据传入GPU
代码如图，让GPU开始工作
6、最后执行任务
这个三角形就绘制出来了
绘制一个小小的三角形要这么多代码？？？！！
一个字——难！
如果用2d来绘制这个三角形，只要这几行就够了
