这是我参与「第四届青训营 」笔记创作活动的的第13天。 最近这课程是真的好紧凑呀，完全招架不过来，有点难以招架，主要还是听听一些前端思想，比如这节课讲的是WebGL，说实话真的好难，我只接触过一点点数据可视化的知识，但是听这节课还是吃不消。
一、本堂课重点内容：
- 对WebGL基本原理的介绍
- GPU的基本原理
- WebGL渲染的过程
二、详细知识点介绍：
现代图形系统
- 光栅：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素矩阵
- 像素：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
- 帧缓存：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
- CPU： 中央处理单元，负责逻辑计算
- GPU：图像处理单元，负责图像计算
GPU和CPU
- GPU由大量的小运输单元构成
- 每个运算单元只负责处理简单的计算
- 每个运算单元彼此独立
- 因此素有计算可以并行处理。
WebGL执行流程
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行webgl程序，输出结果
3D标准模型的四个齐次矩阵（mat4）
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
WebGL原理
WebGL 的出现使得在浏览器上面实现显示 3D 图像成为可能，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。
WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。
无论要实现的图形尺寸有多大，其投影矩阵的坐标的范围始终是从 -1 到 1 。
三、课后个人总结：
其实我有时就在想我自己的核心竞争力在哪呢，我没有很高的学历，没有聪明的头脑，那我的竞争力就是比别人多学一点东西，我前端时间在学数据可视化，当时就有同学质疑我为啥学这个，你学的太多了，你不用学这个，那其实我心里还有有被打击到，现在听了老师的课，我觉得我比别人多一点不一样的技术栈，那就是我的竞争力。
