这是我参与「第五届青训营」伴学笔记创作活动的第17天

Why WebGL / Why GPU?

WebGL是什么？

GPU≠WebGL≠3D
WebGL（Web Graphics Library）是一个 Web 标准 JavaScript API，通过 HTML5 的 canvas 元素进行暴露，无需使用插件，即可在浏览器中渲染高性能的交互式 3D 和 2D 图形。目前是由非营利 Khronos Group 设计和维护。
使用 WebGL 的方式和 canvas 2d 类似，都是通过 getContext 方法获取渲染上下文，如下所示。

const canvas = document.createElement('canvas')

const gl = (
  canvas.getContext('webgl2') ||
  canvas.getContext('webgl') ||
  canvas.getContext('experimental-webgl')
)

Modern Graphics System

光栅 (Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
像素 (Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
帧缓存 (Frame Bufer) :在绘图过程中，像素信息被存放于缓存中，帧缓存是一块内存地址
CPU (Central Processing Unit) : 中央处理单元，负责逻辑计算
GPU (Graphics Processing Unit):图形处理单元，负责图形计算

CPU vs GPU

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

WebGL Startup

创建WebGL上下文
创建WebGL Program
将数据存入缓冲区
将缓冲区数据读取到GPU
GPU执行WebGL程序，输出结果

获取绘图上下文

const canvas = document.querySelector('.canvas')
const context = canvas.getContext('webgl')

我们想要操作canvas之前，首先都需要获取到画布的上下文。JS给canvas标签对象提供了一个方法getContext用以获取画布上下文。

getContext方法返回一个上下文对象，这个对象上提供了很多有用的用于操作canvas画布的API。

设置用来清空canvas的背景色

void gl.clearColor(red, green, blue, alpha);

clearColor方法接收四个值，分别对应RGBA的四个值，不过这个API使用的颜色分量值不是 0 - 255，而是 0 - 1。这个方法用于设置清空颜色缓冲时的颜色值。一旦指定了背景色之后，背景色就会驻存在WebGL系统中，在下一次调用clearColor方法前不会改变。

换句话说，如果将来什么时候你想用同样的颜色再清空一次绘图区，没有必要再调用clearColor。

WebGL | 青训营笔记