WebGL快速入门

---

WebGL是什么

• GPU ≠ WebGL ≠ 2D
• WebGL是浏览器上的OpenGL
• 需要一定计算机图形学基础和线性代数基础

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

---

Modern Graphics System

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

---

CPU vs GPU

CPU和GPU的区别是CPU是电脑的中央处理器，在电脑中起着控制计算机运行的作用；GPU是一个附属型的处理器，主要处理计算机中与图形计算有关的工作，并将数据更好地呈现在显示器中。

GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理。图形渲染的像素处理数量一般都是非常大的，但是每个像素的计算量却不大，所以GPU处理图形渲染就非常有优势。

---

WebGL Startup

1. 创建WebGL上下文
   

2. 创建WebGL Program
   Shaders（着色器：）Vertex Shader（顶点着色器）和Fragment Shader（片源着色器）
   
   

3. 将数据存入缓冲区
   

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

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

---

WebGL的封装库-Mesh.js

---

Polygons

如何绘制一个多边形？

---

3D Meshing

3D的模型较为复杂，是在设计软件里先设计好再导出，而不是像2D一样实时计算。

---

Transforms

---

3D Matrix

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

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

---

Read More

1. The book of shaders
2. Mesh.js
3. glsl-doodle
4. SpriteJS
5. ThreeJS

---