这是我参与第四届青训营笔记创作的第4天
WebGL与动画实现
初识WebGL
Why WebGL/Why GPU?
- WebGL是什么？
- GPU≠WebGL≠3D
- WebGL为什么不像其他前端技术那么简单？
Modern Graphics System
- 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer):在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU(Central Processing Unit):中央处理单元，负责逻辑计算。
- GPU(Graphics Processing Unit):图形处理单元，负责图形计算。
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
Data→Processor→Frame buffer→Pixels
CPU vs GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的运算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL & OpenGL
web.eecs.umich.edu/~sugih/cour…
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
Create WebGL Context
The Shaders
- Vertex Shader
- Fragment Shader
Create Program
Data to Frame Buffer
- Axes
- Typed Array
Frame Buffer to GPU
Output
WebGL
Mesh.js
- 2D
- mesh.js
Polygons
- Polygons
- Triangulations
Draw Polygon with 2D Triangulations
使用Earcut进行三角剖分
Transforms
- 平移
- 旋转
- 缩放 旋转+缩放是线性变换
Apply Transforms
3D Matrix
3D标准模型的四个齐次矩阵(mat4)
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
