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

WebGL 是什么

WebGL（Web Graphics Library）是一种JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 2D 和 3D 图形，而无需使用插件。

WebGL 与其他 Web 标准完全集成，允许 GPU 加速使用物理和图像处理以及效果作为网页画布的一部分。WebGL 元素可以与其他 HTML 元素混合并与页面或页面背景的其他部分组合。

WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL ES 着色语言 (GLSL ES) 编写的着色器代码组成，这是一种类似于 C 或 C++ 的语言，并在计算机的图形处理单元 (GPU) 上执行。WebGL 由非营利组织 Khronos Group 设计和维护。

2022 年 2 月 9 日，Khronos Group 宣布 WebGL 2.0 支持所有主流浏览器。

维基百科

现代图形系统 (Modern Graphics System)

概念

光栅 (Raster)

几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。

像素 (Pixel)

一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。

帧缓存 (Frame Buffer)

在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。

CPU (Central Processing Unit)

中央处理单元，负责逻辑计算。

GPU (Graphics Processing Unit)

图形处理单元，负责图形计算。

图形绘制过程

轮廓提取 / meshing
光栅化
帧缓存
渲染

Why GPU ?

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

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

每个运算单元彼此独立

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

开始使用 WebGL

1. 创建 WebGL 上下文

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

着色器 The Shaders

Vertex Shader 顶点着色器

主要用于处理图形轮廓

attribute vec2 position;

void main() {
  gl_Pointsize = 1.0;
  gl_Position = vec4(position, 1.0,1.0);
}

Fragment Shader 片元着色器

光栅化后映射到片元着色器中处理颜色

precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

2. 创建 WebGL Program

3. 将数据存入缓冲区

坐标

创建

存储

const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

4. 将缓冲区数据读取到 GPU

const vPosition = gl.getAttribLocation(program, 'position'); //获取顶点着色器中的 position 变量的地址
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); //给变量设置长度和类型
gl.enablevertexAttribArray(vPosition); //激活这个变量

5. GPU 执行 WebGL 程序，输出结果

l.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

2D VS WebGL

同样的红色三角形，2D 只需：

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

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

但绘制更为复杂的图形时，WebGL 效率更高

绘制多边形

Polygons 种类

三角剖分

使用 Earcut 进行三角剖分：

Transforms

平移

旋转

缩放

Apply

3D 标准模型的四个齐次矩阵 (mat4)

1. 投影矩阵 Projection Matrix

将顶点从视图坐标系转换到规范立方体中（即屏幕中）。

2. 模型矩阵 Model Matrix

将顶点从局部坐标系转换到世界坐标系中。

3. 视图矩阵 View Matrix

将顶点从世界坐标转化到视图坐标系下。

4. 法向量矩阵 Normal Matrix

NormalMatrix是ModelView矩阵逆的转置。

初识 WebGL | 青训营笔记