WebGL与动画实现|青训营笔记
、
这是我参与「第四届青训营 」笔记创作活动的第15天
WebGL是什么
WebGL是一个绘图协议，也是一个Javascript的API,我们可以利用WebGL在不使用插件的情况下，开发出交互式2D和3D的网页效果。
现代绘图系统
- 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
- 像素（Pixel）:一个像素对应图像上的一个点，她通常保存图像上的某个具体位置的颜色等信息
- 帧缓存（FrameBuffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算
绘图过程
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 所有计算可以并行处理
创建一个WebGL
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓存区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序吗，输出结果
WebGL上下文
Vertex Shader（顶点着色器）
顶点着色器的作用是计算顶点的位置，提供顶点在裁剪空间的坐标值（'position'）
Fragment Shader（片元着色器）
片元着色器的作用是计算图元的颜色值，我们可以将片元着色器大概理解成网页的像素（由四个0-1的值构成）
创建WebGL Program
将数据存入缓存区
将缓冲区数据读入CPU
输出图形
3D标准模型的四个齐次矩阵
- 投影矩阵
- 模型矩阵
- 视图矩阵
- 法向量矩阵
更深入理解WebGL的推荐了解
- The book of shaders
- Mesh.js
- glsl-good
- SpriteJS
- ThreeJS
- ShaderToy
