WebGL总结篇（渲染管线、Z-buffer、ShadowMapping）

一、渲染管线与执行流程

渲染管线

• 通常分为几个阶段：顶点处理、图元装配、光栅化、片元着色器处理、测试与混合，最后输出到帧缓冲区。每个阶段都有不同的任务，比如顶点着色器处理顶点坐标变换，光栅化将图元转换为像素，片元着色器计算颜色等。
• 顶点着色器阶段，需要提到坐标变换（模型视图矩阵和投影矩阵），可能还要提到attribute变量的使用。图元装配阶段需要说明如何将顶点组装成点、线或三角形。光栅化阶段则涉及像素的生成和插值计算。
• 测试与混合阶段包括深度测试、模板测试和混合模式，这些是确保正确渲染的重要步骤，比如处理遮挡和透明效果。最后，颜色缓冲区存储最终图像，供屏幕显示。

一、WebGL渲染管线的核心流程

WebGL渲染管线是GPU处理图形数据的标准化流程，分为多个阶段，最终将顶点数据转换为屏幕像素。其核心流程包括：

1. 顶点处理阶段
   通过顶点着色器处理每个顶点的坐标变换（如模型视图矩阵、投影矩阵）和属性计算（如法线、纹理坐标）。
   • 关键操作：坐标系转换（局部→世界→视图→裁剪空间）
   Three&Cesium中坐标转换
   • 数据输入：顶点缓冲区中的坐标、颜色等属性，通过attribute变量传递。

2. 图元装配
   将顶点组装成基础图元（点、线、三角形），并执行裁剪（移除视锥体外部分）和透视除法（将齐次坐标转为NDC标准化坐标）。

3. 光栅化
   将图元离散化为片元（像素），并对顶点属性（如颜色、纹理坐标）进行插值计算，生成每个像素的初始数据（varying)。

4. 片元处理阶段
   片元着色器逐像素计算最终颜色，支持纹理采样、光照模型等复杂效果。例如：

   void main() {
     gl_FragColor = texture2D(u_texture, v_texCoord) * v_light;
   }
   

5. 测试与混合
   • 深度测试：通过Z-Buffer剔除被遮挡的像素

   • 模板测试：实现阴影、镜面等特效

   • 混合（Blending）：处理透明物体的颜色叠加（如Alpha混合）。

6. 输出到帧缓冲区
   最终颜色写入颜色缓冲区，通过显示器刷新机制输出到屏幕。

二、关键技术与优化策略

<