这是我参与「第四届青训营 」笔记创作活动的的第14天。本节课的主题是【WebGL动画与实现】，授课老师为月影。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
Why WebGL/GPU?
-
WebGL是什么？
- GPU≠WebGL≠3D
-
WebGL需要理解一些硬件底层原理
流程：
Data→Processor→Frame buffer→pixels
CPU VS GPU
CPU内核数==管道数
- GPU由大量小运算单元组成
- 每个处理单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL & OpenGL
WebGL是OpenGL的子集
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 数据送入缓冲区
- 数据读取到GPU
- GPU执行WebGL程序，输出结果
Create WebGL Context
The Shaders（着色器）
- Vertex Shader
- Fragment Shader
Create Program
Data to Frame Buffer
Frame Buffer to GPU
多少个坐标执行多少次main（）
Output
GPU执行WebGL程序，输出结果 对于多边形和复杂的3D图形，通常用Earcut三角剖分算法来绘制
为什么WebGL这么难
2D canvas代码量低，比WebGL简单
3D标准模型的四个齐次矩阵（mat4)
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix
参考资料
mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)
SpriteJS ~ Next - 下一代 SpriteJS
