读《WebGL 编程指南》，相关笔记，持续记录

《WebGL 编程指南》

1. WebGL 的起源

• 在个人计算机上使用最广泛的两种三维图形渲染技术是 Direct3D 和 OpenGL。Direct3D 是微软 DirectX 技术的一部分，是一套由微软控制的编程接口（API），主要用在 Windows 平台；而 OpenGL 由于其开放和免费的特性，在多种平台上都有广泛地使用：它可以在 Macintosh 或 Linux 系统的计算机、智能手机、平板电脑、家用游戏机（如 PlayStation 和 Nintendo）等各种电子设备上使用。Windows 对 OpenGL 也提供了良好的支持，开发者也可以用它来代替 Direct3D。

• 可编程着色器方法 （programmable shader functions）。

• OpenGL ES 2.0 基于 OpenGL 着色器语言 （GLSL），因此后者又被称为 OpenGL ES 着色器语言 （GLSL ES）。

2. 着色器是什么？

• 顶点着色器 （Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

• 着色器是什么？要使用 WebGL 进行绘图就必须使用着色器。在代码中，着色器程序是以字符串的形式「嵌入」在 JavaScript 文件中的，在程序真正开始运行前它就已经设置好了。这么说可能有些复杂，我们一步一步来解释。WebGL 需要两种着色器：

● 顶点着色器 （Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。

● 片元着色器 （Fragment shader）：进行逐片元处理过程的程序。片元（fragment）是一个 WebGL 术语，可以将其理解为像素

3. 初始化着色器

• WebGL 程序包括运行在浏览器中的 JavaScript 和运行在 WebGL 系统的着色器程序这两个部分。

4. 顶点着色器

• 齐次坐标

5. 片元着色器

• 片元 就是显示在屏幕上的一个像素（严格意义上来说，片元包括这个像素的位置、颜色和其他信息）。

6. 顶点着色器

• gl_Position 表示顶点的位置（这里，就是要绘制的点的位置），gl_PointSize 表示点的尺寸

• gl_Position 变量必须被赋值，否则着色器就无法正常工作。相反，gl_PointSize 并不是必须的，如果你不赋值，着色器就会为其取默认值 1.0。

7. 片元着色器

• 片元着色器将点的颜色赋值给 gl_FragColor 变量，该变量是片元着色器唯一的内置变量，它控制着像素在屏幕上的最终颜色

8. WebGL 坐标系统

• 在 WebGL 中，当你面向计算机屏幕时，X 轴是水平的（正方向为右），Y 轴是垂直的（正方向为下），而 Z 轴垂直于屏幕（正方向为外）

9. 使用 attribute 变量

• attribute 变量 传输的是那些与顶点相关的数据，而 uniform 变量 传输的是那些对于所有顶点都相同（或与顶点无关）的数据。

10. 示例程序（HelloPoint2.js）

• attribute 变量必须声明成全局变量，数据将从着色器外部传给该变量。

11. WebGL 坐标系统

• WebGL 的坐标系和 ＜canvas＞ 绘图区的坐标系不同，需要将前者映射到后者。

12. 使用 attribute 变量

• attribute 变量是一种 GLSL ES 变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。

13. 命名规则

• 所有的 attribute 变量都以 a_前缀开始，所有的 uniform 变量都以 u_开始，这样从变量的名字就可以轻易辨认出其类型。

14. 获取 attribute 变量的存储位置

• 使用 gl.getAttribLocation（）来获取 attribute 变量的地址

• WebGL 就会对着色器进行解析，辨识出着色器具有的 attribute 变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。

15. uniform 变量

• uniform 变量用来从 JavaScript 程序向顶点着色器和片元着色器传输「一致的」（不变的）数据

• 向 uniform 变量传数据的方式与向 attribute 变量传数据相似：首先获取变量的存储地址，然后在 JavaScript 程序中按照地址将数据传递过去。

16. 使用缓冲区对象

• 缓冲区对象是 WebGL 系统中的一块存储区