glsl着色器学习(六点五)顶点和片元的处理顺序

在WebGL中,顶点和片元的处理顺序遵循着图形渲染管线的流程。

顶点处理阶段

顶点处理阶段是图形渲染管线的起点,在这一阶段,所有与顶点相关的操作都会被执行。

顶点着色器(Vertex Shader)
  • 顶点着色器接收每个顶点的数据,例如顶点坐标,法线,纹理坐标等。
  • 将顶点数据上传到图形硬件的缓冲区。
  • 在顶点着色器中,对这些顶点数据进行变换和运算,例如将顶点从模型空间转换到世界空间、视图空间和裁剪空间。
  • 计算顶点的法线、颜色等其他属性,这些属性可能会传递给片元着色器进行进一步处理
  1. 装配图元
    • 顶点被组合成几何图形,例如点、线、面
    • 如果启用了背面剔除,则会根据顶点顺序判断是否剔除该三角形
  2. 光栅化
    • 将三角形等图元转化成片元(像素的候选者),确定每个片元的位置
    • 顶点着色器输出的数据会被插值到片元级别。比如:三角形顶点之间的颜色或者纹理坐标会被平滑的插值到每个片元

2. 片元处理阶段

片元处理阶段是图形渲染管线的后半部分,专注于处理和计算每个片元的最终颜色

片元着色器
  1. 对每个片元执行片元着色器,计算出片元颜色、深度等属性
  2. 片元着色器会利用从顶点着色器插值过来的数据,例如颜色,纹理坐标等来进行进一步的计算,例如纹理采样,光照计算等。
  3. 深度测试和模板测试
    1. 片元经过深度测试,判断是否被遮挡,深度较大时会被丢弃
    2. 模板测试如果启用,可以控制片元是否通过。
  4. 混合
    1. 如果启用了混合,片元的颜色会与缓冲区已有的颜色进行混合,生成最终的颜色
  5. 写入缓冲区
    1. 最终通过测试的片元颜色会被写入帧缓冲区,成为图像的一部分

总体说来,顶点处理后,确定几何图形的位置和属性,然后进行片元处理,确定每个片元(像素)的颜色和其他属性,最终渲染到屏幕上

相关推荐
2303_Alpha1 天前
SpringBoot
笔记·学习
萘柰奈1 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽1 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫1 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie1 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿1 天前
51单片机学习
嵌入式硬件·学习·51单片机
gis分享者1 天前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
c0d1ng1 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed2 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中2 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust