这是我参与「第四届青训营 」笔记创作活动的第16天
一、❗ 本堂课重点内容:
本节课主要讲述了图形绘制、WEBGL等等的相关知识。
二、❗ 详细知识点介绍:
- 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。
- 像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer)︰在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。
- CPU (Central Processing Unit):中央处理单元,负责逻辑计算。
- GPU (Graphics Processing Unit):图形处理单元,负责图形计算。
✨图形绘制
- 轮廓提取/ meshing
- 光栅化
- 帧缓存
- 渲染
❌CPU相当于管道,每次处理一个计算
⬇️处理几十万像素,效率很低
✔️GPU大量计算单元
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
😃webGL相当于openGL ES在浏览器端的对应
the pipline
graph TD
Data --> Processor --> FrameBuffer -->Pixels
WEBGL start⛵
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到 GPU
- GPU 执行WebGL程序,输出结果
3D标准模型的四个齐次矩阵(mat4)✈️
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix