如果把一次实时渲染比作拍一部电影那么顶点着色器像选角导演它负责把模型的“骨架点”搬到镜头前搭好舞台的大轮廓。而真正决定你看到“皮肤质感、金属高光、玻璃通透、霓虹反射、雾气层次”的往往不是顶点——而是屏幕上每一个像素。于是有一个在幕后忙得不可开交的职业出现了像素化妆师。在GPU管线里它的正式名字叫片元处理Fragment Processing。片元fragment不是最终像素它更像“候选像素”一块三角形投影到屏幕后在某个像素格子上留下的一份“应聘简历”。它要经过多轮面试裁剪、插值、纹理采样、光照计算、深度测试、混合……最后才能拿到“像素编制”成为帧缓冲里那颗真正的点。这篇文章用一个生动的比喻把片元处理从头到尾拆开片元到底是什么为什么不是像素光栅化如何把三角形“撒成像素粉”片元着色器到底在做什么深度测试、模板测试、早期Z、延迟渲染、Alpha测试、透明混合都是怎样影响“谁能上屏”的纹理采样与过滤为什么像“化妆刷”为什么会有锯齿、摩尔纹、闪烁MSAA/TAA/FXAA分别在片元世界里扮演什么角色性能瓶颈为什么常常卡在片元该怎么优化请系好安全带我们要进入“像素化妆间”。一、片元是什么——“候选像素”还没拿到上屏资格很多人把 fragment 直接翻译成“像素”这会造成一个微妙误会。更准确的理解是片元fragment是光栅化阶段产生的、带有颜色/深度/插值属性的“像素候选者”。它不一定会成为最终屏幕像素因为它可能在深度测试、模板测试、透明混合等环节被淘汰或改变。片元 vs 像素像简历 vs 正式员工像素pixel帧缓冲中最终的那个格子结果片元fragment某个三角形对这个格子“贡献”的一次尝试同一个像素格子上可能同时有前景人物的片元后景墙壁的片元半透明烟雾的片元UI的片元谁最后留下看“面试规则”深度、模板、混合。二、片元从哪里来——光栅化把三角形磨成“像素粉”在顶点阶段结束后GPU手里是一个个三角形像一块块布料。而屏幕是一张像素格纸。你要把布料铺到纸上就得把它切成一个个小格子可用的碎片。这个过程叫光栅化Rasterization。1覆盖测试这个像素格子是否被三角形覆盖GPU会判断每个像素中心或多个采样点是否落在三角形内。落在里面就生成一个片元。2插值片元“继承”顶点的属性顶点着色器输出了很多属性UV法线顶点色切线世界位置或其变种这些属性在三角形内部需要连续变化于是光栅化会对它们进行插值。插值常用的是重心坐标Barycentric Coordinates。你可以把它想象成三角形的三个顶点各自是一桶颜料片元在三角形内部某个位置就按比例从三桶里舀一点混合。3透视正确插值别让纹理像贴在玻璃上如果你见过早期3D游戏里纹理扭曲那是因为插值没考虑透视。现代GPU会做“透视校正插值”perspective-correct interpolation插值不是直接对属性线性插值而是借助w做修正让纹理看起来贴在物体表面而不是贴在屏幕上。这一步像化妆师记住脸在镜头里有透视眼角离镜头近会显大化妆线条不能按平面画。三、片元着色器像素化妆师正式上岗当片元产生并携带了插值属性后就轮到**片元着色器Fragment Shader / Pixel Shader**登场了。它的工作可以用一句话概括根据片元的材质与环境信息算出它“应该长什么样”。这里的“长什么样”通常包括最终颜色RGB透明度A有时还包括多个渲染目标MRT比如延迟渲染输出GBuffer法线、粗糙度、金属度等化妆师的工具箱片元着色器常干的事采样纹理Texture Sampling粉底来自纹理法线贴图Normal Mapping用假凹凸改变受光光照计算Lighting/BRDF决定高光、阴影、金属反射阴影采样Shadow Mapping问问太阳“这里被挡了吗”环境光与反射IBL/Reflection Probe/SSR让材质“借景”雾、色调映射、后处理前置气氛组上场Alpha裁剪/透明处理决定这块皮肤是否“镂空”或“半透明”你可以把片元着色器想象成拿到一个演员的“脸部信息”UV、法线、视线方向、光照方向、材质参数然后一笔一笔把它化成最终上镜的样子。四、纹理采样化妆刷与粉盒——一张贴图如何变成脸上的质感纹理采样是片元阶段最常见的操作也是很多性能与画质问题的源头。1最简单采样按UV取颜色albedo tex2D(_MainTex, uv);但UV通常不是整数像素位置而是落在两个纹理像素之间。于是GPU要“估值”。2过滤化妆刷的三种手法Nearest最近点像用印章盖上去块状明显Bilinear双线性像用平刷抹匀柔和但略糊Trilinear三线性在不同Mip层之间也做平滑过渡避免跳变3MipMap远处用更粗的粉别把脸抹成摩尔纹远处物体在屏幕上只占几个像素如果还用原始高分辨率纹理采样会出现摩尔纹与闪烁。MipMap像准备了多盒不同颗粒度的粉远处用粗粉近处用细粉画面更稳定。4各向异性过滤Anisotropic Filtering斜着看地面也要清晰地面纹理在视角倾斜时一个屏幕像素对应纹理上细长的一条区域。普通过滤会糊。各向异性过滤像用一把扁平刷沿着拉伸方向多采样几次把斜视的地面纹理也刷得清楚。五、光照让像素“有体积感”的灯光戏法没有光照片元只是贴图颜色像平面贴纸。光照让它有“体积”和“材质”。1Lambert最朴素的漫反射像皮肤、粉墙那种“哑光”。强度 ≈max(0, N·L)N 是法线L 是光方向。2Phong/Blinn-Phong经典高光像塑料、上蜡木头那种亮点。现代PBR更多用微表面模型但思想类似用视线方向V与半程向量H控制高光。3PBR物理材质像给化妆师发了一本“材质百科”PBR里常见参数BaseColor底色Metallic金属度Roughness/Smoothness粗糙度AO环境遮蔽粗糙度决定高光是“针尖”还是“面霜一样的柔光”金属度决定反射是“白色塑料反光”还是“带底色的金属反光”。这就是为什么同一束光照在铁、布、皮肤上完全不同不是灯变了是“化妆品配方”变了。六、深度与模板像素面试官——谁能留下谁要回家片元着色器算出了颜色但还不代表它能上屏。接下来它要面对两个严格的面试官1深度测试Depth Test / Z Test规则很简单同一个像素位置离相机更近的片元通常赢。深度缓冲ZBuffer像一本“站位登记册”。先到的写下自己的深度后来者来应聘时要比一比如果更近替换掉旧的如果更远淘汰这解决了三维场景中“遮挡关系”的根本问题。2模板测试Stencil Test模板缓冲像一种“特殊通行证”机制只有带特定印章的片元才能通过。常用于镜子/门洞/遮罩轮廓描边局部后处理区域你可以把 stencil 想象成化妆间门口的腕带没腕带的人别进VIP区。七、Early-Z 与 Late-Z化妆前先筛人能省多少片元处理很贵采样纹理、算PBR、算阴影、算反射……每个片元像让化妆师精修一次。如果一个片元最后会在深度测试里失败那它前面的化妆都白做了。于是GPU有一个聪明优化Early-Z早期深度测试。1Early-Z先看你能不能留下再决定给你化妆在某些条件下GPU可以在运行片元着色器之前就先做深度测试把注定失败的片元直接丢掉。这能极大减少片元着色器运行次数。2为什么有时不能Early-Z如果片元着色器会改变深度写入SV_Depth或使用discardAlpha test或者做某些会影响覆盖的操作GPU可能必须推迟深度测试到片元着色器之后Late-Z因为你“化妆后脸型可能变了”先筛不准。因此透明/Alpha裁剪材质常常让Early-Z效率下降这也是透明物体贵的原因之一八、Alpha裁剪与透明像“镂空蕾丝”和“薄纱裙”处理方式完全不同1Alpha裁剪Alpha Test / Clip像树叶、铁丝网要么有、要么没有。做法如果 alpha 阈值就discard这个片元。优点仍然可以写深度遮挡关系正确缺点discard 会破坏Early-Z边缘可能锯齿需要MSAA或Alpha-to-Coverage改善2透明混合Alpha Blending像玻璃、烟雾需要按比例叠加。公式大致是out src * srcA dst * (1 - srcA)透明最大难题排序。因为透明物体既要看到后面又要正确叠加通常需要从远到近画。它很难像不透明那样靠深度缓冲自动解决。所以透明物体往往是片元处理最烧钱、最麻烦的区域不能很好利用Early-Z需要排序或近似OIT等Overdraw巨大同一像素被画很多次九、抗锯齿像给像素边缘做“羽化与磨皮”锯齿来自一个事实世界是连续的屏幕是格子。三角形边缘落在格子之间时你只能决定这个像素是“里面”还是“外面”于是边缘会呈现台阶。抗锯齿就是让边缘更平滑。1MSAA多采样让边缘更像羽化MSAA在一个像素里放多个采样点判断覆盖比例并在边缘处做更平滑的结果。它主要改善几何边缘不直接解决纹理锯齿。2FXAA后处理磨皮在屏幕上找高对比边缘做模糊处理。便宜但会糊细节。3TAA时间维度的“化妆修复”利用前几帧信息让边缘更稳定、更少闪烁。但可能产生拖影/鬼影需要精心处理。抗锯齿与片元处理关系紧密它们要么增加采样MSAA要么增加后处理成本FXAA/TAA都影响像素层面的工作量。十、片元阶段的性能真相为什么“像素化妆师”最容易累垮现代GPU往往是“片元受限”Fragment-bound也就是你算力、带宽、纹理采样、混合写回常常卡在像素阶段。1Overdraw同一个像素被化妆好多次比如粒子特效一层层叠半透明烟雾UI叠加草地密集每叠一次就是一次片元着色器执行。像同一个演员化妆化了十遍每次都擦掉重来。2纹理采样与带宽化妆品拿得越多越慢PBR材质可能采样BaseColorNormalMetallicRoughnessAOEmission再加阴影贴图、反射贴图、BRDF LUT……每多一张贴图都像化妆师多开一个粉盒、多跑一趟仓库。3分支与discard化妆师不能流水线作业GPU喜欢“整齐划一”。如果一批片元里有人走不同分支、有人discard执行会发散效率下降。像一排化妆师本来可以同时给十个人画眉结果有人要画眼线、有人要贴假睫毛队伍就乱了。4混合与写回最后落笔也要时间透明混合需要读目标颜色再写回带宽压力大。高分辨率4K下尤其明显。十一、常见优化手法让像素化妆师少跑腿、少返工、少精修减少Overdraw粒子控制数量与尺寸透明物体尽量少、尽量薄用遮挡剔除/LOD减少看不见的绘制利用Early-Z不透明物体先画Depth Prepass/前向Z预写尽量避免不必要的discard合理排序先画大块遮挡物精简材质与贴图合并贴图通道packing减少采样数量远处用简化材质LOD材质降低分辨率或用上采样动态分辨率Temporal Upscaling让像素更少但看起来像更多控制后处理Bloom、SSAO、SSR等很多都是片元级全屏操作适当降级或半分辨率计算十二、结语片元处理是“画面质感的终审”也是性能消耗的重灾区回到开头的比喻顶点阶段搭骨架片元阶段做化妆。观众记住的一定是脸——皮肤纹理、高光、阴影、颜色气氛。所以片元处理决定了画面“高级不高级”。但也正因为它处理的是屏幕上成百万上千万个点它也是最容易把GPU累趴下的地方。你可以把片元处理当作渲染中的“终审法庭”它根据插值信息与贴图决定颜色它根据光照模型决定材质性格它通过深度/模板测试决定谁能上屏它通过混合决定透明世界如何叠加它通过抗锯齿与过滤决定边缘是否优雅当你理解了片元处理你就理解了为什么一个简单的“多开点粒子、加点透明、加点后处理”会让帧率雪崩也理解了为什么同样的模型在不同Shader下能从“塑料玩具”变成“真实金属”。
如果把一次实时渲染比作拍一部电影那么顶点着色器像选角导演它负责把模型的“骨架点”搬到镜头前搭好舞台的大轮廓。而真正决定你看到“皮肤质感、金属高光、玻璃通透、霓虹反射、雾气层次”的往往不是顶点——而是屏幕上每一个像素。于是有一个在幕后忙得不可开交的职业出现了像素化妆师。在GPU管线里它的正式名字叫片元处理Fragment Processing。片元fragment不是最终像素它更像“候选像素”一块三角形投影到屏幕后在某个像素格子上留下的一份“应聘简历”。它要经过多轮面试裁剪、插值、纹理采样、光照计算、深度测试、混合……最后才能拿到“像素编制”成为帧缓冲里那颗真正的点。这篇文章用一个生动的比喻把片元处理从头到尾拆开片元到底是什么为什么不是像素光栅化如何把三角形“撒成像素粉”片元着色器到底在做什么深度测试、模板测试、早期Z、延迟渲染、Alpha测试、透明混合都是怎样影响“谁能上屏”的纹理采样与过滤为什么像“化妆刷”为什么会有锯齿、摩尔纹、闪烁MSAA/TAA/FXAA分别在片元世界里扮演什么角色性能瓶颈为什么常常卡在片元该怎么优化请系好安全带我们要进入“像素化妆间”。一、片元是什么——“候选像素”还没拿到上屏资格很多人把 fragment 直接翻译成“像素”这会造成一个微妙误会。更准确的理解是片元fragment是光栅化阶段产生的、带有颜色/深度/插值属性的“像素候选者”。它不一定会成为最终屏幕像素因为它可能在深度测试、模板测试、透明混合等环节被淘汰或改变。片元 vs 像素像简历 vs 正式员工像素pixel帧缓冲中最终的那个格子结果片元fragment某个三角形对这个格子“贡献”的一次尝试同一个像素格子上可能同时有前景人物的片元后景墙壁的片元半透明烟雾的片元UI的片元谁最后留下看“面试规则”深度、模板、混合。二、片元从哪里来——光栅化把三角形磨成“像素粉”在顶点阶段结束后GPU手里是一个个三角形像一块块布料。而屏幕是一张像素格纸。你要把布料铺到纸上就得把它切成一个个小格子可用的碎片。这个过程叫光栅化Rasterization。1覆盖测试这个像素格子是否被三角形覆盖GPU会判断每个像素中心或多个采样点是否落在三角形内。落在里面就生成一个片元。2插值片元“继承”顶点的属性顶点着色器输出了很多属性UV法线顶点色切线世界位置或其变种这些属性在三角形内部需要连续变化于是光栅化会对它们进行插值。插值常用的是重心坐标Barycentric Coordinates。你可以把它想象成三角形的三个顶点各自是一桶颜料片元在三角形内部某个位置就按比例从三桶里舀一点混合。3透视正确插值别让纹理像贴在玻璃上如果你见过早期3D游戏里纹理扭曲那是因为插值没考虑透视。现代GPU会做“透视校正插值”perspective-correct interpolation插值不是直接对属性线性插值而是借助w做修正让纹理看起来贴在物体表面而不是贴在屏幕上。这一步像化妆师记住脸在镜头里有透视眼角离镜头近会显大化妆线条不能按平面画。三、片元着色器像素化妆师正式上岗当片元产生并携带了插值属性后就轮到**片元着色器Fragment Shader / Pixel Shader**登场了。它的工作可以用一句话概括根据片元的材质与环境信息算出它“应该长什么样”。这里的“长什么样”通常包括最终颜色RGB透明度A有时还包括多个渲染目标MRT比如延迟渲染输出GBuffer法线、粗糙度、金属度等化妆师的工具箱片元着色器常干的事采样纹理Texture Sampling粉底来自纹理法线贴图Normal Mapping用假凹凸改变受光光照计算Lighting/BRDF决定高光、阴影、金属反射阴影采样Shadow Mapping问问太阳“这里被挡了吗”环境光与反射IBL/Reflection Probe/SSR让材质“借景”雾、色调映射、后处理前置气氛组上场Alpha裁剪/透明处理决定这块皮肤是否“镂空”或“半透明”你可以把片元着色器想象成拿到一个演员的“脸部信息”UV、法线、视线方向、光照方向、材质参数然后一笔一笔把它化成最终上镜的样子。四、纹理采样化妆刷与粉盒——一张贴图如何变成脸上的质感纹理采样是片元阶段最常见的操作也是很多性能与画质问题的源头。1最简单采样按UV取颜色albedo tex2D(_MainTex, uv);但UV通常不是整数像素位置而是落在两个纹理像素之间。于是GPU要“估值”。2过滤化妆刷的三种手法Nearest最近点像用印章盖上去块状明显Bilinear双线性像用平刷抹匀柔和但略糊Trilinear三线性在不同Mip层之间也做平滑过渡避免跳变3MipMap远处用更粗的粉别把脸抹成摩尔纹远处物体在屏幕上只占几个像素如果还用原始高分辨率纹理采样会出现摩尔纹与闪烁。MipMap像准备了多盒不同颗粒度的粉远处用粗粉近处用细粉画面更稳定。4各向异性过滤Anisotropic Filtering斜着看地面也要清晰地面纹理在视角倾斜时一个屏幕像素对应纹理上细长的一条区域。普通过滤会糊。各向异性过滤像用一把扁平刷沿着拉伸方向多采样几次把斜视的地面纹理也刷得清楚。五、光照让像素“有体积感”的灯光戏法没有光照片元只是贴图颜色像平面贴纸。光照让它有“体积”和“材质”。1Lambert最朴素的漫反射像皮肤、粉墙那种“哑光”。强度 ≈max(0, N·L)N 是法线L 是光方向。2Phong/Blinn-Phong经典高光像塑料、上蜡木头那种亮点。现代PBR更多用微表面模型但思想类似用视线方向V与半程向量H控制高光。3PBR物理材质像给化妆师发了一本“材质百科”PBR里常见参数BaseColor底色Metallic金属度Roughness/Smoothness粗糙度AO环境遮蔽粗糙度决定高光是“针尖”还是“面霜一样的柔光”金属度决定反射是“白色塑料反光”还是“带底色的金属反光”。这就是为什么同一束光照在铁、布、皮肤上完全不同不是灯变了是“化妆品配方”变了。六、深度与模板像素面试官——谁能留下谁要回家片元着色器算出了颜色但还不代表它能上屏。接下来它要面对两个严格的面试官1深度测试Depth Test / Z Test规则很简单同一个像素位置离相机更近的片元通常赢。深度缓冲ZBuffer像一本“站位登记册”。先到的写下自己的深度后来者来应聘时要比一比如果更近替换掉旧的如果更远淘汰这解决了三维场景中“遮挡关系”的根本问题。2模板测试Stencil Test模板缓冲像一种“特殊通行证”机制只有带特定印章的片元才能通过。常用于镜子/门洞/遮罩轮廓描边局部后处理区域你可以把 stencil 想象成化妆间门口的腕带没腕带的人别进VIP区。七、Early-Z 与 Late-Z化妆前先筛人能省多少片元处理很贵采样纹理、算PBR、算阴影、算反射……每个片元像让化妆师精修一次。如果一个片元最后会在深度测试里失败那它前面的化妆都白做了。于是GPU有一个聪明优化Early-Z早期深度测试。1Early-Z先看你能不能留下再决定给你化妆在某些条件下GPU可以在运行片元着色器之前就先做深度测试把注定失败的片元直接丢掉。这能极大减少片元着色器运行次数。2为什么有时不能Early-Z如果片元着色器会改变深度写入SV_Depth或使用discardAlpha test或者做某些会影响覆盖的操作GPU可能必须推迟深度测试到片元着色器之后Late-Z因为你“化妆后脸型可能变了”先筛不准。因此透明/Alpha裁剪材质常常让Early-Z效率下降这也是透明物体贵的原因之一八、Alpha裁剪与透明像“镂空蕾丝”和“薄纱裙”处理方式完全不同1Alpha裁剪Alpha Test / Clip像树叶、铁丝网要么有、要么没有。做法如果 alpha 阈值就discard这个片元。优点仍然可以写深度遮挡关系正确缺点discard 会破坏Early-Z边缘可能锯齿需要MSAA或Alpha-to-Coverage改善2透明混合Alpha Blending像玻璃、烟雾需要按比例叠加。公式大致是out src * srcA dst * (1 - srcA)透明最大难题排序。因为透明物体既要看到后面又要正确叠加通常需要从远到近画。它很难像不透明那样靠深度缓冲自动解决。所以透明物体往往是片元处理最烧钱、最麻烦的区域不能很好利用Early-Z需要排序或近似OIT等Overdraw巨大同一像素被画很多次九、抗锯齿像给像素边缘做“羽化与磨皮”锯齿来自一个事实世界是连续的屏幕是格子。三角形边缘落在格子之间时你只能决定这个像素是“里面”还是“外面”于是边缘会呈现台阶。抗锯齿就是让边缘更平滑。1MSAA多采样让边缘更像羽化MSAA在一个像素里放多个采样点判断覆盖比例并在边缘处做更平滑的结果。它主要改善几何边缘不直接解决纹理锯齿。2FXAA后处理磨皮在屏幕上找高对比边缘做模糊处理。便宜但会糊细节。3TAA时间维度的“化妆修复”利用前几帧信息让边缘更稳定、更少闪烁。但可能产生拖影/鬼影需要精心处理。抗锯齿与片元处理关系紧密它们要么增加采样MSAA要么增加后处理成本FXAA/TAA都影响像素层面的工作量。十、片元阶段的性能真相为什么“像素化妆师”最容易累垮现代GPU往往是“片元受限”Fragment-bound也就是你算力、带宽、纹理采样、混合写回常常卡在像素阶段。1Overdraw同一个像素被化妆好多次比如粒子特效一层层叠半透明烟雾UI叠加草地密集每叠一次就是一次片元着色器执行。像同一个演员化妆化了十遍每次都擦掉重来。2纹理采样与带宽化妆品拿得越多越慢PBR材质可能采样BaseColorNormalMetallicRoughnessAOEmission再加阴影贴图、反射贴图、BRDF LUT……每多一张贴图都像化妆师多开一个粉盒、多跑一趟仓库。3分支与discard化妆师不能流水线作业GPU喜欢“整齐划一”。如果一批片元里有人走不同分支、有人discard执行会发散效率下降。像一排化妆师本来可以同时给十个人画眉结果有人要画眼线、有人要贴假睫毛队伍就乱了。4混合与写回最后落笔也要时间透明混合需要读目标颜色再写回带宽压力大。高分辨率4K下尤其明显。十一、常见优化手法让像素化妆师少跑腿、少返工、少精修减少Overdraw粒子控制数量与尺寸透明物体尽量少、尽量薄用遮挡剔除/LOD减少看不见的绘制利用Early-Z不透明物体先画Depth Prepass/前向Z预写尽量避免不必要的discard合理排序先画大块遮挡物精简材质与贴图合并贴图通道packing减少采样数量远处用简化材质LOD材质降低分辨率或用上采样动态分辨率Temporal Upscaling让像素更少但看起来像更多控制后处理Bloom、SSAO、SSR等很多都是片元级全屏操作适当降级或半分辨率计算十二、结语片元处理是“画面质感的终审”也是性能消耗的重灾区回到开头的比喻顶点阶段搭骨架片元阶段做化妆。观众记住的一定是脸——皮肤纹理、高光、阴影、颜色气氛。所以片元处理决定了画面“高级不高级”。但也正因为它处理的是屏幕上成百万上千万个点它也是最容易把GPU累趴下的地方。你可以把片元处理当作渲染中的“终审法庭”它根据插值信息与贴图决定颜色它根据光照模型决定材质性格它通过深度/模板测试决定谁能上屏它通过混合决定透明世界如何叠加它通过抗锯齿与过滤决定边缘是否优雅当你理解了片元处理你就理解了为什么一个简单的“多开点粒子、加点透明、加点后处理”会让帧率雪崩也理解了为什么同样的模型在不同Shader下能从“塑料玩具”变成“真实金属”。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
