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

这是我参加「第四届青训营」笔记创作活动的第1天

图形绘制过程

对图像进行轮廓的提取。比如说我们要绘制一个多边形，我们会将图像的轮廓提取出来然后对轮廓进行网格化；之后把网格的图源进行光栅化，把点阵数据送入帧缓存之中，最后进行图形渲染。

CPU vs GPU

GPU存储数量更多。GPU由大量的小运算单元构成，每个单元值负责处理很简单的计算，每个计算单元彼此独立因此所有计算可以并行处理。

2D二维矩阵

《thebookofshaders》学习记录

平移

平移需要借助自身的参考坐标系，为变量加上一个包含每个片段的位置的向量来移动整个坐标系

旋转

我们使用矩阵来旋转空间坐标系。矩阵是一个通过行和列定义的一组数，使用公式定义2维旋转的矩阵的代码。

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

缩放

矩阵可以被用来缩放物体的大小

根据以上公式构造2D缩放矩阵

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

WebGL创建步骤

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

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

1. 投影矩阵Projection Matrix

用来处理和设立坐标系

2. 模型矩阵Model Matrix

用来改变模型大小方向等

3. 视图矩阵View Matrix

用来改变摄像机位置

4. 法向量矩阵Normal Matrix

通过法线夹角进行计算

SpriteV3

绘制矩形

const {Scene, Rect} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
});
const layer = scene.layer();
​
const rect = new Rect({
  normalize: true,
  pos: [600, 300],
  size: [300, 300],
  fillColor: 'red',
});
layer.append(rect);

绘制三角形和平行四边形

const {Scene, Triangle, Parallel} = spritejs;
const container = document.getElementById('adaptive');
const scene = new Scene({
  container,
  width: 1200,
  height: 600,
});
const layer = scene.layer();
​
const traingle = new Triangle({
  pos: [150, 150],
  sides: [300, 300],
  angle: 60,
  fillColor: '#7cc',
});
layer.append(traingle);
​
const parallel = new Parallel({
  normalize: true,
  pos: [750, 300],
  sides: [200, 200],
  angle: 60,
  rotate: 60,
  fillColor: '#c7c',
});
layer.append(parallel);