这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
课程重点
- 初始化WebGL
详细知识点介绍
webGL是什么？
- GPU不等于WebGL不等于3D
webGL为什么不像其他前端技术那么简单？
- 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。
- 像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
- CPU(Central Processing Unit):中央处理单元,负责逻辑计算。
- GPU(Graphics Processing Unit):图形处理单元,负责图形计算。
CPU vs GPU GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理。
WebGL Startup
- 创建webgl上下文
- 创建webgl program
- 将数据存入缓冲区
- 将缓冲区数据读取到gpu
- gpu执行webgl程序，输出结果
Create WebGL Context
The Shaders
Create Program
Data to Frame Buffer
Frame Buffer to GPU
Output
2D vs WebGL
Mesh.js
3D Meshing
3D Matrix
3D 标准模型的四个齐次矩阵（mat4）
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
Read more
- The book of shaders
- Mesh.js
- glsl-doodle
- SpriteJS
- ThreeJS
- ShaderToy
- 稀土掘金
