这是我参与「第四届青训营 」笔记创作活动的第14天
Why WebGL / Why GPU?
-
WebGL是什么?
- GPU ≠ WebGL ≠ 3D
-
WebGL为什么不像其他前端技术那么简单?
现代的图形系统概念
-
光栅：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
-
像素：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息
-
帧缓存：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
-
CPU： 中央处理单元，负责逻辑计算
-
GPU：图像处理单元，负责图像计算
- 轮廓提取/ meshing
- 光栅化
- 帧缓存
- 渲染
CPUvsGPU
- GPU由大量的小运输单元构成
- 每个运算单元只负责处理简单的计算
- 每个运算单元彼此独立
- 因此素有计算可以并行处理
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行webgl程序，输出结果
创建WebGL上下文（Creat WebGL Context）
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
function create3DContext(canvas, options) {
const names = ['webgl', 'experimental-webgL','webkit-3d','moz-webgl']; // 特性判断
if(options.webgl2) names.unshift(webgl2);
let context = null;
for(let ii = 0; ii < names.length; ++ii) {
try {
context = canvas.getContext(names[ii], options);
} catch(e) {
// no-empty
}
if(context) {
break;
}
}
return context;
}
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();
3D
3D标准模型的四个齐次矩阵(mat4)
- 投影矩阵Projection Matrix（正交投影和透视投影）
- 模型矩阵Model Matrix （对顶点进行变换Transform）
- 视图矩阵View Matrix（3D的视角，想象成一个相机，在相机的视口下）
- 法向量矩阵Normal Matrix（垂直于物体表面的法向量，通常用于计算物体光照）
