这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
普通网页组成成分：HTML、JavaScript；
WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)；
WebGL ≠ 3D ≠ GPU
WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化
现代图形计算机系统
- 光栅（Raster）：几乎所有的现代图像系统都是基于光栅来绘制来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
- GPU（Graphic Processing Unit）：图形处理单元，负责图形计算。
图形系统的工作原理
- 轮廓提取，将图形的顶点画出来；
- 光栅化，将图形变成像素的点；
- 帧缓存，将数据存放到帧缓存；
- 渲染，设备从帧缓存获取数据，完成渲染。
GPU
GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有运算可以并行处理。
WebGL渲染过程
- 创建 WebGL 上下文，例如JavaScript创建WebGL上下文...
- 创建 WebGL Program
- 将数据存入缓存区
- 将缓存区数据读取到GPU
- GPU执行WebG程序，输出结果
