这是我参与「第四届青训营」笔记创作活动的第13天！今天学习《WebGL与动画实现》结合GPU学习WebGL和一些动画实践练习。

WebGL & GPU

GPU ！= WebGL ！= 3D

Modern Graphics System

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

The Pipeline

Data————Processor————Frame buffer————Pixels

WebGL Startup

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

Create WebGL Context

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

The Shaders

Vertex Shader
Fragment Shader

WebGL

2D vs WebGL

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(250, 0);
ctx.lineTo(500, 500);
ctx.lineTo(0, 500);
ctx.fillStyle = 'red';
ctx.fill();

Mesh.js

2D
mesh.js

Polygons

Polygons
- 凸多边形
- 凹多边形
- 复杂多边形
Triangulation

Draw Polygon with 2D Triangulations

使用Earcut进行三角剖分

    [-0.7, 0.5],
    [-0.4, 0.3],
    [-0.25, 0.71],
    [-0.1, 0.56],
    [-0.1, 0.13],
    [0.4, 0.21],
    [0, -0.6],
    [-0.3, -0.3],
    [-0.6, -0.3],
    [-0.45, 0.0],
];
const points = vertices.flat();
const triangles = earcut(points);

Transforms

平移
旋转
缩放
旋转+缩放是线性变换

3D Matrix

3D标准模型的四个齐次矩阵（mat4）

投影矩阵 Projection Matrix
模型矩阵 Model Matrix
视图矩阵 View Matrix
法向量矩阵 Normal Matrix

参考网站工具

The book of shaders
Mesh.js
glsl-doodle
SpriteJS
ThreeJS
ShaderToy

今天学习的WebGL，之前没有接触过，只是听说过GPU，老师讲解很清晰易懂，非常有趣，尤其是在后面小动画演示的部分，利用不同的在线工具进行演示。

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