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

Why WebGL / Why GPU? WebGL 是什么?GPU 头WebGL 头3D WebGL 为什么不像其他前端技术那么简单?

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

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

创建 WebGL 上下文创建 WebGL Program将数据存入缓冲区将缓冲区数据读取到 GPUGPU 执行 WebGL 程序，输出结果

3D Matrix 标准模型的四个齐次矩阵(mat4) 1.投影矩阵 Projection Matrix 2.模型矩阵 Model Matrix 3.视图矩阵 View Matrix 4.法向量矩阵 Normal Matrix

WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。 Translation 指的是一些奇特的数学名称，它的基本意思是“移动”某物。它同样适用于将一个句子从英文“移动”成为日语这一说法，但是此处我们谈论的是几何中的移动。通过使用以 the first post 结尾的代码，你可以仅仅通过修改 setRectangle 距离右边的的值来使矩形移动。

WebGL 的出现使得在浏览器上面实现显示 3D 图像成为可能，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。

WebGL 只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用 WebGL 程序的任务就是实现具有投影矩阵坐标和颜色的 WebGL 对象即可。可以使用“着色器”来完成上述任务。顶点着色器可以提供投影矩阵的坐标，片段着色器可以提供投影矩阵的颜色。

无论要实现的图形尺寸有多大，其投影矩阵的坐标的范围始终是从 -1 到 1 。