这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
初识WebGL
WebGL技术是一个Web标准JavaScript API，无需使用插件即可在浏览器中渲染高性能的交互式3D和2D图形。可以将其理解成一种帮助开发3D网页的绘图技术。 GPU≠WebGL≠3D
Modern Graphics System
- 光栅(Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Pixel): 一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer): 在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU (Central Processing Unit): 中央处理单元，负责逻辑计算。
- GPU (Graphics Processing Unit): 图形处理单元，负责图形计算。
图形系统工作过程：
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
GPU
WebGL性能高的原因在于使用了GPU。GPU有别于CPU，GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理，对于大量简单计算而言，GPU的执行速度是远大于CPU的
OpenGL&WebGL
在深入 WebGL 之前，还需要先了解 OpenGL，因为 WebGL 是基于 OpenGL 的。OpenGL(Open Graphics Library) 是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。OpenGL 通常是显卡生产商根据规范来实现的。
WebGL Startup
WebGL渲染绘图过程：
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
渲染一个三角形
坐标系
因为 WebGL 是 OpenGL 子集，所以 WebGL 坐标系和 OpenGL 坐标系一样，为笛卡尔坐标系——原点在正中间，右边为 X 轴正方向，上面为 Y 轴正方向。WebGL 中坐标值的范围是 -1 到 1
三角形
复杂的3D模型其实都是由一个个三角形组成。 WebGL 在 GPU 上的工作主要分为两个部分，即顶点着色器所做的工作（将顶点转换为裁剪空间坐标）和片元着色器所做的工作（基于顶点着色器的计算结果绘制像素点）。假如我们需要绘制一个三角形，此时 GPU 上进行的工作便是先调用三次顶点着色器计算出三角形的 3 个顶点在裁剪空间坐标系中的对应位置，并通过变量 gl_Position 保存在 GPU 中，然后调用片元着色器完成每个顶点颜色值的计算，并通过变量 gl_FragColor 将对应的颜色值存储在 GPU 中。完成这些工作后我们已经得到了绘制三角形所需的像素点，最后便是光栅化三角形了。
总结
此次课程讲解了什么是 WebGL，了解了 WebGL 的大致流程，并且完成了一个最简单的 WebGL 应用
