这是我参与【第五届青训营】伴学笔记创作活动的第5天。

初识 WebGL

Modern Graphics System（现代绘图系统）

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

1. 轮廓提取 / meshing
2. 光栅化
3. 帧缓存
4. 渲染

The Pipeline（管道）

  渲染过程的管道被比喻成活字印刷，我们将数据生成，图源信息写好，然后批量生成。

CPU vs GPU

  CPU仿佛一个很粗的管道，它可以在内部做许多复杂的程序，比如一个大的包裹放进去可以被处理。

• GPU由大量的小运算单元构成

• 每个运算单元只负责处理很简单的计算

• 每个运算单元彼此独立

• 因此所有的计算可以并行处理

WebGL & OpenGL

web.eecs.umich.edu/~sugih/cour…

WebGL Startup

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

WebGL vs 2D vs mesh.js

• WebGL
  Create WebGL Context （创建WebGL上下文）:

Vertex Shader ：

Fragment Shader ：

Creste Program ：

Data to Frame Buffer 即 Typed Array ：

Frame Buffer to GPU ：

Output ：

• 2D :

• mesh.js（一种已封装好的库）：

  所以说，为什么说WebGL难呢，同样是画个红色的三角形，2D需要8行代码，而WebGL需要五十多行代码，就算有库也比较麻烦，所以很多前端人员不愿意使用WebGL。

Polygons

Polygons（多边形） ：

Triangulations （三角剖分）:

  WebGL接受点和线段的图源类型，所以将多边形进行三角剖分成多个三角形

Draw Polygon with 2D Triangulations

  使用Earcut进行三角剖分

3D Meshing

  同样的3D图形也可以剖分成三角形，只不过比2D复杂得多，我们在实际操作过程中可先使用绘图软件将具体数据导出之后进行绘制。

Transforms

2D和3D的变换原理是差不多的。

• 平移 ：

• 旋转 ：

• 缩放 ：

  其中，旋转和缩放是线性变换。
  所以把平移也转换成线性变换，过程如下：

  把平移、旋转和缩放都换成线性变换后就相当于上升了一个维度。
  即从线性变换到齐次矩阵。

Apply Transforms

3D Matrix

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

1. 投影矩阵 Projection Matrix
2. 模型矩阵 Model Matrix
3. 视图矩阵 View Matrix
4. 法向量矩阵 Normal Matrix

Read more

1. The book of shaders （中英双语）thebookofshaders.com/
2. Mesh.js github.com/mesh-js/mes…
3. glsl-doodle doodle.webgl.group/
4. SpriteJS spritejs.com/#/
5. ThreeJS threejs.org/
6. ShaderToy www.shadertoy.com/
7. 稀土掘金 juejin.cn/column/7100…