这是我参与「第四届青训营 」笔记创作活动的第13天
本堂课重点内容
充分理解WebGL - 十年踪迹的专栏 - 掘金 (juejin.cn)
详细知识点介绍
- OpenGL
OpenGL（Open Graphics Library）是一个跨编程语言、跨平台的编程图形程序接口，它将计算机的资源抽象称为一个个OpenGL的对象，对这些资源的操作抽象为一个个的OpenGL指令。
OpenGL ES（OpenGL for Embedded Systems）是 OpenGL 三维图形 API 的子集，针对手机、PDA和游戏主机等嵌入式设备而设计，去除了许多不必要和性能较低的API接口。
- WebGL
WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5
<canvas>元素中使用。 这种一致性使 API 可以利用用户设备提供的硬件图形加速。
- GPU
GPU之所以被称为图形处理器，最主要的原因是因为它可以进行几乎全部与计算机图形有关的数据运算。其最大的作用就是进行各种绘制计算机图形所需的运算，包括顶点设置、光影、像素操作等。GPU实际上是一组图形函数的集合，而这些函数由硬件实现。
较早的娱乐用的3D显卡又称“3D加速卡”，由于大部分坐标处理的工作及光影特效需要由CPU亲自处理，占用了CPU太多的运算时间，从而造成整体画面不能非常流畅地表现出来。
例如，渲染一个复杂的三维场景，需要在一秒内处理几千万个三角形顶点和光栅化几十亿的像素。早期的3D游戏，显卡只是为屏幕上显示像素提供一个缓存，所有的图形处理都是由CPU单独完成。图形渲染适合并行处理，擅长于执行串行工作的CPU实际上难以胜任这项任务。
CPU由少量的大运算单元构成，适合执行串行工作
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
Modern Graphics System
- 概念
- 光栅(Raster)︰几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer)︰在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU (Central Processing Unit):中央处理单元,负责逻辑计算。
- GPU (Graphics Processing Unit):图形处理单元，负责图形计算。
- 流程原理
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
- WebGL绘图步骤
- 创建WebGL上下文
顶点着色器和片段着色器
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU 执行WebGL程序,输出结果
对于多边形和复杂的3D图形，通常用Earcut三角剖分算法来绘制
3D标准模型的四个齐次矩阵（mat4)
- 投影矩阵Projection Matrix
- 模型矩阵Model Matrix
- 视图矩阵View Matrix
- 法向量矩阵Normal Matrix
学习资料
mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)
SpriteJS ~ Next - 下一代 SpriteJS
