这是我参与「第五届青训营 」笔记创作活动的第16天
课程重点：
- WebGL是什么
- WebGL主要应用
- 3D 标准模型的四个齐次矩阵
WebGL是什么
GPU ≠ WebGL ≠ 计算机图形学
- 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
- 像素：控制每个点的颜色
- 帧缓存：绘图过程中，像素信息被存放于帧缓存中
- CPU：负责逻辑计算
- GPU：负责图形计算
WebGL全称是Web Graphics Library，是一种3D绘图协议，但是WebGL通过增加OpenGL ES 2.0的一个JavaScript绑定，可以为HTML5 Canvas提供硬件3D加速渲染，减去了开发网页专用渲染插件的麻烦，还可以创建复杂3D结构的网站页面和用来设计3D网页游戏等等。
- 轮廓提取
- 光栅化
- 帧缓存
- 渲染
GPU由大量小运算单元构成，每个单元只负责处理很简单的运算，可以并行处理。
WebGL绘图流程：
- 创建WebGL上下文（canvas对象）
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
着色器： 通过GLSL编写，输入顶点信息，输出每个像素的坐标和颜色。可分为顶点着色器，片段着色器。 网格化、贴图。
Transform：线性变化 矩阵乘法
- 平移
- 旋转
- 缩放
值得注意的是，虽然webGL与canvas2d都可以暴露在canvas元素中，但webGL的坐标系是以画布中心为坐标原点的坐标系而非canvas2d那种以左上角为原点的坐标系。
WebGL主要应用
WebGL完美地解决了现有的Web交互式三维动画的两个问题：
- 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
- WebGL利用底层的图形硬件可以加速进行图形渲染。
CPU vs GPU
-
CPU：由数百万个晶体管组成，有多个处理内核，被称为计算机的大脑，是所有现代计算系统必不可缺的组成部分，主要执行计算机和操作系统所需要的命令和流程。
-
GPU：由大量的小运算单元构成，每个运算单元只负责处理简单的计算，由于每一个单元都是独立的，所以所有计算都可以并行处理。
-
两个都是基本的计算引擎，GPU适合用在处理从串行计算到数据库运行这种一系列广泛的工作中，而GPU则更适合用在图像处理和游戏中。
3D标准模型的四个齐次矩阵：
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
基本图元：
- 点
- 线
- 三角
任意的多边形都可以由三角形组成：三角剖分。
