这是我参与「第五届青训营 」笔记创作活动的第14天。

本堂课重点内容

本堂课对WEBGL基本内容，相关原理以及Shader进行了介绍

详细知识点介绍

WdbGL是什么？

GPU ≠ WdbGL ≠ 计算机图形学

• 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
• 像素：控制每个点的颜色
• 帧缓存：绘图过程中，像素信息被存放于帧缓存中
• CPU：负责逻辑计算
• GPU：负责图形计算

• 轮廓提取
• 光栅化
• 帧缓存
• 渲染

GPU由大量小运算单元构成，每个单元只负责处理很简单的运算，可以并行处理。

WebGL绘图流程：

1. 创建WebGL上下文（canvas对象）
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

在顶点着色器定义三角形顶点，之后会根据三个点的值进行线性插值。

WebGL在分析时不会实时进行分析和导出，而是通过缓存进行渲染。

transforms：

• 平移
• 旋转
• 缩放

之后是月影大佬漫长的打码环节，虽说很想搞搞可视化相关方向，但是感觉写原生太痛苦了，希望广大前端轮子哥们在这片蓝海充分展示自己的高超代码艺术。（掘金IDE的自动补全功能还是亟待提高

3D标准模型的四个齐次矩阵（mat4）：

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵

推荐阅读：

1. The book of shaders
2. Mesh.js
3. glsl-doodle
4. SpriteJS
5. ThreeJS
6. ShaderToy

基本Shader思路

这个库在掘金平台有着不错的支持。