这是我参与「第五届青训营」伴学笔记创作活动的第16天。今天开始了有关WebGL方面的学习。

WebGL是什么

GPU ≠ WdbGL ≠ 计算机图形学

现代图形系统

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

GPU与CPU干什么

• 轮廓提取（一般使用三角提取）
• 光栅化
• 帧缓存
• 渲染 GPU由大量小运算单元构成，每个单元只负责处理很简单的运算，可以并行处理。

WebGL流程

• 创建WebGL上下文

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

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

• 着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。
• 光栅化：实际上就是一个将上一步装配好的图形用像素来表示的一个过程.
• 测试与混合：这一阶段主要是 WebGL 内部进行了一些模版测试、深度测试，最后再与上一帧的数据进行混合。

对于复杂多边形可以使用Earcut进行三角剖分。

Transform

• 平移
• 旋转
• 缩放

旋转+缩放是线性变换

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

• 投影矩阵 projection matrix
• 模型矩阵 model matrix
• 视图矩阵 view matrix
• 法向量矩阵 normal matrix

推荐阅读：

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

个人小结

WebGL课程对于我目前所处的能力阶段来说有些难以理解，但不能否认WebGL真的有很广阔的应用且相当有意思，待我技术更高一些再来回顾。