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

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网页游戏等等。

• 光栅 (Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列
• 像素 (Pixel):一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存 (Frame Buffer) : 在绘图过程中，像素信息被存放于缓存中，顿缓存是一块内存地址。
• CPU (Central Processing Unit) : 中央处理单元，负责逻辑计算。
• GPU (Graphics Processing Unit):图形处理单元,2负责图形计算。

WebGL程序的结构

WebGL页面包含了三种语言：HTML5、JavaScript、GLSL ES（openGL着色器语言）

着色器语言 GLSL

顶点、片元着色器代码要通过着色器语言来编写，着色器语言在GPU中执行，在GPU中执行的着色器代码，需要先通过WebGL进行一定的处理然后传递到GPU才能执行，所以编写的着色器语言就是一段符合一定的规则的字符串。

GPU特点

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

WebGL Startup

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