这是我参与「第五届青训营 」伴学笔记创作活动的第16天

一、本堂课重点内容：

• 初识WebGL

二、详细知识点介绍：

WebGL是什么？

GPU≠VebGL≠3D

Modern Graphics System

• 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
• 像素：控制每个点的颜色
• 帧缓存：绘图过程中，像素信息被存放于帧缓存中
• CPU：负责逻辑计算
• GPU：负责图形计算

WebGL

WebGL全称是Web Graphics Library，是一种3D绘图协议，但是WebGL通过增加OpenGL ES 2.0的一个JavaScript绑定，可以为HTML5 Canvas提供硬件3D加速渲染，减去了开发网页专用渲染插件的麻烦，还可以创建复杂3D结构的网站页面和用来设计3D网页游戏等等。

WebGL主要应用

WebGL完美地解决了现有的Web交互式三维动画的两个问题：

• 通过HTML脚本本身实现Web交互式三维动画的制作，WebGL无需任何浏览器插件支持；
• WebGL利用底层的图形硬件可以加速进行图形渲染。

CPU vs GPU

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元彼此独立
• 因此所有计算可以并行处理

WebGL Startup

1. 创建VebGL上下文创建
2. WebGL Program将缓冲区数据读取到GPU
3. 将数据存入缓冲区
4. GPU执行WebGL程序，输出结果

Transforms

• 平移
• 旋转
• 缩放

旋转+缩放是线性变换

3D标准模型的四个齐次矩阵：

1. 投影矩阵 Projection Matrix
2. 模型矩阵 Model Matrix
3. 视图矩阵 View Matrix
4. 法向量矩阵 Normal Matrix