初始WebGL| 青训营笔记

97 阅读1分钟

初始WebGL | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第21天。

image.png

一、Modern Graphics System

·光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。

·像素(Pixel) :一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。

·帧缓存(Frame Buffer): 在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。

.CPU (Central Processing Unit):中央处理单元,负责逻辑计算。

.GPU (Graphics Processing Unit):图形处理单元,负责图形计算。

image.png 1.轮廓提取/ meshing
2.光栅化
3.帧缓存
4.渲染

二、The Pipeline

image.png

三、CPU vs GPU

image.png

image.png GPU由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理

四、WebGL & OpenGL

image.png

五、webGL Startup

1.创建webGL上下文
2.创建webGL Programa
3.将数据存入缓冲区
4.将缓冲区数据读取到GPU
5.GPU执行WebGL程序,输出结果

六、Transforms

image.png

image.png

七、Polygons

image.png

八、3D Matrix

3D标准模型的四个齐次矩阵(mat4)

1.投影矩阵 Projection Matrix
2.模型矩阵 Model Matrix
3.视图矩阵View Matrix
4.法向量矩阵Normal Matrix