这是我参与「第四届青训营 」笔记创作活动的第20天
Why WebGL / Why GPU?
WebGL是什么?
GPU ≠ WebGL ≠ 3D
WebGL为什么不像其他前端技术那么简单?
现代的图像系统
光栅(Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
像素(Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
帧缓存(Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
CPU (Central Processing Unit)：中央处理单元，负责逻辑计算。
GPU (Graphics Processing Unit)：图形处理单元，负责图形计算。
现代图像的渲染如图过程
- 轮廓提取/ meshing
- 光栅化
- 帧缓存
- 渲染
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL绘图步骤
步骤
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
- Raw Vertices & Primitives 原始顶点&原语
- Vertex Processor 顶点着色器
- 运算后送到 片元着色器 进行处理：Fragment Processor
3D Matrix 3D标准模型的四个齐次矩阵(mat4)
投影矩阵Projection Matrix（正交投影和透视投影） 模型矩阵Model Matrix （对顶点进行变换Transform） 视图矩阵View Matrix（3D的视角，想象成一个相机，在相机的视口下） 法向量矩阵Normal Matrix（垂直于物体表面的法向量，通常用于计算物体光照） Read more
这节课老师讲解了WebGL的绘图及其相关库，还有WebGL小项目
