WEBGL

一、WEBGL与Three.js基础

（一）WEBGL

1. WebGL 

WebGL 与 HTML5 的 <canvas> 元素紧密结合。通过 JavaScript 从 <canvas> 元素中获取 WebGL 上下文，这是进行所有 WebGL 操作的基础。上下文是与 GPU 通信的接口，提供了绘制图形所需的所有方法和属性。

2. 着色器

WebGL 中的着色器使用 GLSL（OpenGL 着色语言）编写。着色器是运行在 GPU 上的小程序，用于在图形渲染管道的不同阶段处理图形数据。主要有两种着色器：

• 顶点着色器： 负责处理每个顶点的数据，包括位置、颜色和纹理坐标等。顶点着色器将顶点数据变换到裁剪空间，并传递给后续的渲染阶段。
• 片段着色器： 负责计算每个像素的颜色。片段着色器从顶点着色器接收插值后的数据，进行光照计算、纹理映射等操作，最终输出片段颜色。

3. 缓冲区

缓冲区是用于存储顶点数据、颜色数据、法线数据等的一块内存区域。WebGL 使用缓冲区对象将数据从 CPU 传递到 GPU，以便着色器能够访问和处理这些数据。主要的缓冲区类型包括：

• 顶点缓冲区： 存储顶点的位置、颜色、法线等数据。
• 索引缓冲区： 存储顶点的索引数据，用于定义绘制图元的顶点顺序，避免顶点数据的重复。

4. 纹理

纹理是用于映射到几何体表面的图像或颜色数据。它们使得渲染的图形更加真实和丰富。纹理数据可以是从图像文件加载的，也可以是通过程序生成的。常见的纹理操作包括：

• 纹理加载： 将图像数据加载到纹理对象中。
• 纹理绑定： 将纹理对象绑定到一个纹理单元，使得它在着色器中可用。
• 纹理采样： 在片段着色器中使用纹理坐标从纹理中获取颜色数据。

5. 变换

在3D图形渲染中，变换用于对对象进行平移、旋转和缩放。WebGL 中常用的变换包括：

• 模型变换： 将对象从模型坐标系变换到世界坐标系。
• 视图变换： 将对象从世界坐标系变换到摄像机坐标系，通常涉及摄像机的位置和方向。
• 投影变换： 将对象从摄像机坐标系变换到裁剪坐标系，定义了视景体的范围和形状。

这些变换通常通过矩阵运算实现，并在顶点着色器中应用。

6. 绘图管线

WebGL 的绘图管线包括一系列固定的阶段，每个阶段都处理图形渲染的不同方面。主要的管线阶段包括：

• 顶点着色器阶段： 处理顶点数据，应用模型、视图和投影变换。
• 图元装配阶段： 将顶点数据组装成图元（例如点、线、三角形）。
• 光栅化阶段： 将图元转换为片段（像素），每个片段对应一个屏幕上的像素。
• 片段着色器阶段： 计算每个片段的颜色，包括光照、纹理等操作。
• 测试与混合阶段： 应用深度测试、模板测试和颜色混合，将最终颜色写入帧缓冲区。

7. 帧缓冲区

帧缓冲区是用于存储渲染输出的内存区域。默认的帧缓冲区是屏幕，但也可以创建离屏帧缓冲区用于复杂的渲染操作（例如后处理效果）。帧缓冲区包含多个附件，包括颜色缓冲区、深度缓冲区和模板缓冲区。

8. 视口

视口定义了渲染输出在帧缓冲区中的区域。可以通过设置视口来控制图形显示的位置和大小。视口通常定义为从帧缓冲区的左下角开始的一块矩形区域。

9. 深度缓冲

深度缓冲用于存储每个像素的深度信息，以处理图形的遮挡关系。深度测试通过比较当前片段的深度值与深度缓冲中的值，决定是否更新该像素，从而确保正确的遮挡顺序。

10. 模板缓冲

模板缓冲用于进行复杂的逐像素操作，例如图形的剪切、镜像等效果。通过设置模板缓冲的值和相应的模板测试，可以控制片段的写入行为。

11. 混合

混合用于控制片段颜色与帧缓冲区中现有颜色的合成方式。常见的混合操作包括透明度处理、光晕效果等。混合模式由源颜色和目标颜色的加权和决定。

12. 统一变量

统一变量是从JavaScript代码传递给着色器程序的全局变量。它们在渲染过程中保持不变，通常用于传递变换矩阵、光照参数、材质属性等。

13. 属性变量

属性变量是每个顶点独有的数据，从JavaScript代码传递给顶点着色器。常见的属性变量包括顶点位置、法线、纹理坐标等。属性变量通过缓冲区对象传递并绑定到着色器程序的输入变量。

14. 顶点数组对象

顶点数组对象用于存储顶点属性的状态，简化顶点数据的管理和绘制过程。通过VAO，可以将顶点缓冲区和属性绑定的状态保存起来，并在需要时快速切换。

15. 绘图模式

WebGL支持多种绘图模式，用于定义顶点如何组装成图元。常见的绘图模式包括：

• 点： 每个顶点绘制一个点。
• 线： 每两个顶点绘制一条线。
• 线带： 连续的顶点绘制一条折线。
• 线环： 连续的顶点绘制一个闭合的折线。
• 三角形： 每三个顶点绘制一个三角形。
• 三角形带： 连续的顶点绘制一系列相连的三角形。
• 三角形扇： 连续的顶点绘制一个扇形。

16. 错误处理

WebGL 提供了一组错误查询方法，用于检测和处理图形渲染过程中出现的错误。常见的错误包括：

• INVALID_ENUM: 非法的枚举值。
• INVALID_VALUE: 非法的参数值。
• INVALID_OPERATION: 当前状态下无法执行的操作。
• OUT_OF_MEMORY: 内存不足，无法完成操作。

通过查询错误状态，可以有效地调试和解决渲染中的问题。

17. 扩展

WebGL 支持一组扩展，用于提供额外的功能和优化。例如，OES_texture_float 扩展允许使用浮点纹理，WEBGL_debug_renderer_info 扩展提供了更详细的调试信息。使用扩展可以提升图形应用的性能和功能。