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

GPU

为什么要使用GPU: 面对百万像素渲染时，CPU难以进行并行计算，GPU提供了大量小单元并行计算的能力。

WebGL

WebGL是为了绘制高性能2D或3D图形的javascript绘图库，在浏览器运行时中实现的OpenGL接口。可以在<canvas>标签中引入，提供了利用底层硬件加速的能力。

1. 创建WebGL上下文
2. 创建webGL program
3. 数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行程序

着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。

网格化、贴图。

Transform：线性变化 矩阵乘法

• 平移
• 旋转
• 缩放

值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。

// 旋转 通过requestAnimationFrame在每一帧调用render
requestAnimationFrame(render)

3D标准模型的四个齐次矩阵：

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵

基本图元：

• 点
• 线
• 三角

任意的多边形都可以由三角形组成：三角剖分。

GLSL

距离场构图法，最核心的思路是要定义一个形状的距离场，通俗来说，就是定义整个画布空间中每个像素点的距离值。

要计算点到任意直线的距离。

最简单的办法是用向量来计算，我们用两点A、B来确定一条直线AB，那么任意一点P到直线AB的距离为：

$d = \dfrac{|\overrightarrow{PA} \times \overrightarrow{AB}|}{|\overrightarrow{AB}|}$

对于线段的距离则采用直线距离或到两个点间较短的那条。

采样与曲线绘制

如果要绘制一条连续曲线，我们可以取相邻的三个点A、B、C采样，计算P点到这三个点构成的两条线段AB和AC的距离，取距离短的作为P到曲线的距离。

总结

总的来说WebGL对于当前的我来说还是过于复杂，需要一定的数学知识和计算机图形学基础。虽然灵活但我还是更愿意选择封装程度更高的图形库，如Three.js等。目前也并未遇到需要必须通过WebGL解决的性能瓶颈。