在WebGL中，顶点和片元的处理顺序遵循着图形渲染管线的流程。
顶点处理阶段
顶点处理阶段是图形渲染管线的起点，在这一阶段，所有与顶点相关的操作都会被执行。
顶点着色器（Vertex Shader）
- 顶点着色器接收每个顶点的数据，例如顶点坐标，法线，纹理坐标等。
- 将顶点数据上传到图形硬件的缓冲区。
- 在顶点着色器中，对这些顶点数据进行变换和运算，例如将顶点从模型空间转换到世界空间、视图空间和裁剪空间。
- 计算顶点的法线、颜色等其他属性，这些属性可能会传递给片元着色器进行进一步处理
- 装配图元
- 顶点被组合成几何图形，例如点、线、面
- 如果启用了背面剔除，则会根据顶点顺序判断是否剔除该三角形
- 光栅化
- 将三角形等图元转化成片元（像素的候选者）,确定每个片元的位置
- 顶点着色器输出的数据会被插值到片元级别。比如：三角形顶点之间的颜色或者纹理坐标会被平滑的插值到每个片元
2. 片元处理阶段
片元处理阶段是图形渲染管线的后半部分，专注于处理和计算每个片元的最终颜色
片元着色器
- 对每个片元执行片元着色器，计算出片元颜色、深度等属性
- 片元着色器会利用从顶点着色器插值过来的数据，例如颜色，纹理坐标等来进行进一步的计算，例如纹理采样，光照计算等。
- 深度测试和模板测试
- 片元经过深度测试，判断是否被遮挡，深度较大时会被丢弃
- 模板测试如果启用，可以控制片元是否通过。
- 混合
- 如果启用了混合，片元的颜色会与缓冲区已有的颜色进行混合，生成最终的颜色
- 写入缓冲区
- 最终通过测试的片元颜色会被写入帧缓冲区，成为图像的一部分
总体说来，顶点处理后，确定几何图形的位置和属性，然后进行片元处理，确定每个片元（像素）的颜色和其他属性，最终渲染到屏幕上