这是我参与「第五届青训营 」笔记创作活动的第15天
WebGL是什么？
GPU ≠ WebGL ≠ 计算机图形学
- 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
- 像素：控制每个点的颜色
- 帧缓存：绘图过程中，像素信息被存放于帧缓存中
- CPU：负责逻辑计算
- GPU：负责图形计算
- 轮廓提取
- 光栅化
- 帧缓存
- 渲染
GPU由大量小运算单元构成，每个单元只负责处理很简单的运算，可以并行处理。
WebGL绘图流程：
- 创建WebGL上下文（canvas对象）
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。 网格化、贴图。
Transform：线性变化 矩阵乘法
- 平移
- 旋转
- 缩放
值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。
3D标准模型的四个齐次矩阵：
- 投影矩阵
- 模型矩阵
- 视图矩阵
- 法向量矩阵
基本图元：
- 点
- 线
- 三角
任意的多边形都可以由三角形组成：三角剖分。
GLSL
距离场构图法，最核心的思路是要定义一个形状的距离场，通俗来说，就是定义整个画布空间中每个像素点的距离值。
要计算点到任意直线的距离。
最简单的办法是用向量来计算，我们用两点A、B来确定一条直线AB，那么任意一点P到直线AB的距离为：
对于线段的距离则采用直线距离或到两个点间较短的那条。
采样与曲线绘制
如果要绘制一条连续曲线，我们可以取相邻的三个点A、B、C采样，计算P点到这三个点构成的两条线段AB和AC的距离，取距离短的作为P到曲线的距离。
