这是我参与「第四届青训营」笔记创作活动的的第12天 了解WebGL，对一些基础流程进行总结。

现代图形系统

图形系统组成

现代的图形系统通常由以下几部分组成：

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

图形渲染的过程

轮廓提取
光栅化
帧缓存
渲染

Pipeline

将数据最终处理成像素阵列的过程叫做渲染管线。

CPU vs GPU

都是计算为什么要分开 CPU 与 GPU？ CPU 的核心是有限的8核，16核。对于一张800✖️600的图片就有48w的像素需要计算。对于GPU

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

所以 GPU 可以实现并行处理像素。

WebGL

WebGL 是 OpenGL 的子集

使用 WebGL

步骤：

创建 WebGL 上下文
创建 WebGL Program（GPU 运算，处理渲染管线，着色器）
将数据存入缓存区
将缓存区数据读取到GPU
GPU执行 WebGL Program，输出结果

live code

创建上下文

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

写着色器
- 顶点着色器(Vertex Shader)，处理轮廓
- 片源着色器(Fragment Shader), 处理颜色

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);

创建 Program

创建Program，关联着色器，将program link到 Webgl的上下文

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

总结

只做初步了解，扩展眼界，真正往webgl 开发还需要大量的理论基础，计算机图形学等。

WebGL与动画实现 | 青训营笔记