这是我参与「第四届青训营 」笔记创作活动的的第17天
WebGL初识
WebGL是什么
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互
现代图形系统
- 光栅(Raster)∶几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素（Pixel)∶一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer):在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU (Central Processing Unit):中央处理单元，负责逻辑计算。
- GPU (Graphics Processing Unit):图形处理单元，负责图形计算。
为啥要CPU和GPU
GPU由大量的小运算单元构成 每个运算单元只负责处理很简单的计算 每个运算单元彼此独立 因此所有计算可以并行处理
WebGL 上手
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
使用 WebGL 创建 2D 内容
顶点着色器：每次渲染一个形状时，顶点着色器会在形状中的每个顶点运行。 它的工作是将输入顶点从原始坐标系转换到 WebGL 使用的缩放空间 (clipspace) 坐标系，其中每个轴的坐标范围从-1.0 到 1.0，并且不考虑纵横比，实际尺寸或任何其他因素。
片段着色器：片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次。它的职责是确定像素的颜色，通过指定应用到像素的纹理元素（也就是图形纹理中的像素），获取纹理元素的颜色，然后将适当的光照应用于颜色。之后颜色存储在特殊变量 gl_FragColor 中，返回到 WebGL 层。该颜色将最终绘制到屏幕上图形对应像素的对应位置。
使用着色器将颜色应用于 WebGL
参考案例
参考书籍
