这是我参与「第四届青训营 」笔记创作活动的的第14天
初识WebGL
什么是WebGL
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
现代图形系统 (Modern Graphics System)
光栅 (Raster)
几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
像素 (Pixel)
一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
帧缓存 (Frame Buffer)
在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
CPU (Central Processing Unit)
中央处理单元，负责逻辑计算。
GPU (Graphics Processing Unit)
图形处理单元，负责图形计算。
图形绘制过程
- 轮廓提取 / meshing
- 光栅化
- 帧缓存
- 渲染
图形处理器（GPU）
什么是GPU
图形处理器（英语：graphics processing unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器
工作原理
GPU 由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理
如何使用WebGL
- 创建 WebGL 上下文
- 创建 WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到 GPU
- GPU 执行 WebGL 程序，输出结果
3D 标准模型的四个齐次矩阵 (mat4)
1. 投影矩阵 Projection Matrix
投影矩阵的主要目的是将顶点从3D空间投影到2D空间，主要有2种投影方式，透视（Perspective）和 正交（Orthogonal）
2. 模型矩阵 Model Matrix
顶点本身的变换矩阵，包括平移，缩放，旋转
3. 视图矩阵 View Matrix
将顶点从世界坐标系转换到视图坐标系
4. 法向量矩阵 Normal Matrix
NormalMatrix是ModelView矩阵逆的转置。
