WebGL 月影带练 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天，学习了第五届字节跳动青训营前端专场的掘金录播课「WebGL 月影带练」第五届字节跳动青训营 - 前端专场，以下为本次的学习笔记：

课程重点：

• WebGL是什么
• WebGL主要应用
• 3D 标准模型的四个齐次矩阵

WebGL是什么

GPU ≠ WebGL ≠ 3D

• 光栅：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是构成图像的像素阵列
• 像素：一个像素对应图像上的一个点，通常保存图像上某个具体位置的颜色等信息
• 帧缓存：绘图过程中，像素信息被存放于帧缓存中
• CPU：中央处理，单元负责逻辑计算
• GPU：图形处理单元负责图形计算

WebGL全称是Web Graphics Library，是一种3D绘图协议，但是WebGL通过增加OpenGL ES 2.0的一个JavaScript绑定，可以为HTML5 Canvas提供硬件3D加速渲染，减去了开发网页专用渲染插件的麻烦，还可以创建复杂3D结构的网站页面和用来设计3D网页游戏等等。

选择GPU的原因：处理好点阵信息，用简单运算处理，不用复杂运算（CPU）

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

WebGL绘图流程：

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

着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。 网格化、贴图。

Transform：线性变化 矩阵乘法

• 平移
• 旋转
• 缩放

值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。

WebGL主要应用

WebGL完美地解决了现有的Web交互式三维动画的两个问题：

• 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
• WebGL利用底层的图形硬件可以加速进行图形渲染。

两个重要着色器

Vertex Shader：顶点着色器，主要负责顶点的几何关系等的运算 Fragment Shader：片源着色器，负责片源颜色等的计算

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色值，或可能的灰度级数。

视频基本概念

分辨率：每个帧的图像分辨率

帧率：视频单位时间内包含的视频帧的数量

码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒

CPU vs GPU

• CPU：由数百万个晶体管组成，有多个处理内核，被称为计算机的大脑，是所有现代计算系统必不可缺的组成部分，主要执行计算机和操作系统所需要的命令和流程。
• GPU：由大量的小运算单元构成，每个运算单元只负责处理简单的计算，由于每一个单元都是独立的，所以所有计算都可以并行处理。
• 两个都是基本的计算引擎，GPU适合用在处理从串行计算到数据库运行这种一系列广泛的工作中，而GPU则更适合用在图像处理和游戏中。

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

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

基本图元：

• 点
• 线
• 三角

任意的多边形都可以由三角形组成：三角剖分。