这是我参与「第四届青训营 」笔记创作活动的的第11天

一、重点内容：

• 什么是WebGL，WebGL的运行原理，WebGL的使用方法

• 一些计算机基本知识

二、详细知识点介绍：

初识WebGL

什么是WebGL

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染（部分计算GPU），这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。总结一下，WebGL的本质 —— JavaScript操作OpenGL接口。

现代图形系统

• 光栅(Raster)：基于光栅来绘制图形，光栅就是指构成图像的像素阵列

• 像素(Pixel)：一个像素对应图像上的一个点，保存图像上的某个具体位置的颜色等信息

• 帧缓存(Frame Buffer)：在绘图过程中，像素信息被存放在帧缓存中，帧缓存是一块内存地址

• CPU（Central Processing Unit）：中央处理单元，负责逻辑计算

• GPU(Graphics Processing Unit)：图形处理单元，负责图形计算

步骤

1. 轮廓提取

2. 光栅化

3. 帧缓存

4. 渲染

CPU VS GPU

GPU由大量的小运算单元构成

每个运算单元只负责处理很简单的计算

每个运算单元彼此独立

因此所有计算可以并行处理

CPU 基于低延时的设计，GPU是基于大的吞吐量设计。

使用WebGL

1. 创建WebGL上下文

2. 创建WebGL Program

3. 将数据存入缓存区

4. 将缓存区数据读取到GPU

5. GPU执行WebGL程序，输出结果

3D Matrix

3D标准模型的四个齐次矩阵（mat4）

1. 投影矩阵 Projection Matrix

2. 模型矩阵 Model Matrix

3. 视图矩阵 View Matrix

4. 法向量矩阵 Normal Matrix

三、课后个人总结：

今天学习了WebGL的基本使用，同时对Web图形技术有了进一步的认识，受益匪浅。