WebGL与动画实现 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第10天
初识WebGL
WebGL≠GPU≠3D
Mordern Graphics System(现代图形系统)
- 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Px©)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。 。
- CPU(Central Processing Unit))：中央处理单元，负责逻辑计算。
- GPU(Graphics Processing Unit)：图形处理单元，负责图形计算。
流程
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
The PipeLine(管线)
Data->Processor->Frame buffer->Pixels
CPU VS GPU
CPU
运算强大但是顺序执行
GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL & OpenGL
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
可见我的另一篇笔记
mesh.js绘制多边形
三角剖分
将多边形通过剖分成三角形进行绘制，具体没咋听懂，打个标记，以后学习
Transform
- 平移
- 旋转
- 缩放
旋转+缩放是线性变换
送线性变换到齐次矩阵
3D Matrix
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrⅸ
- 法向量矩阵 Normal Matrⅸ
更多
总结
今天上着上着就成了数学课，关于WebGL的相关知识还需要更多事件去体系的学习去使用，如果真的想要融会贯通不仅要学会使用更要明白其原理，不然终究是个门外汉，学起来吧，冲冲冲！
