这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
VebGL是什么？
GPU≠VebGL≠3D
Modern Graphics System
- 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
- 像素：控制每个点的颜色
- 帧缓存：绘图过程中，像素信息被存放于帧缓存中
- CPU：负责逻辑计算
- GPU：负责图形计算
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL主要应用
WebGL完美地解决了现有的Web交互式三维动画的两个问题：
- 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
- WebGL利用底层的图形硬件可以加速进行图形渲染。
CPU vs GPU
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL Startup
- 创建VebGL上下文创建
- WebGL Program将缓冲区数据读取到GPU
- 将数据存入缓冲区
- GPU执行WebGL程序，输出结果
Transform：
- 平移
- 旋转
- 缩放
Apply Transforms
3D标准模型的四个齐次矩阵：
- 投影矩阵 Projection Matrix
- 模型矩阵 Model Matrix
- 视图矩阵 View Matrix
- 法向量矩阵 Normal Matrix
