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

这是我参与「第四届青训营」笔记创作活动的第15天 与大家分享WebGL与动画实现的基础知识，包括WebGL的介绍及实战，不足之处欢迎大家批评指正！

WebGL与GPU

WebGL是什么？

GPU ≠ WebGL ≠ 3D
WebGL为什么不像其他前端技术那么简单？

Modern Graphics System

简介

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

作用

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

渲染：The Pipeline

渲染过程：Data -> Processor -> Frame buffer -> Pixels

CPU vs GPU

处理图形渲染的任务，同时处理大量像素的任务

CPU 一个处理单元内核

当遇到大量数据时：犹如管道遇到大量沙子，处理任务效率低

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

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

每个运算单元彼此独立

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

WebGL & OpenGL

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

WebGL Startup

像素处理过程运行语言处理

过程：

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

步骤：

Create Web GL Context

现代浏览器

旧版浏览器

The Shaders

1️⃣ Vertex Shader

2️⃣ Fragment Shader

Create Program

Data to Frame Buffer

坐标系

Axes:轴

Typed Array

Frame Buffer To GPU

2D vs WebGL

code.juejin.cn/pen/7119692…

2D js

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

mesh.js

import {Renderer, Figure2D, Mesh2D} from '@mesh.js/core';

const canvas = document.querySelector('canvas');
const renderer = new Renderer(canvas);

const figure = new Figure2D();
figure.beginPath();
figure.moveTo(250, 0);
figure.lineTo(500, 500);
figure.lineTo(0, 500);

const mesh = new Mesh2D(figure, canvas);
mesh.setFill({
  color: [1, 0, 0, 1],
});

renderer.drawMeshes([mesh]);