Fragment Shader — คืออะไร หน้าที่ และหลักการทำงาน

Fragment Shader คืออะไร?

Fragment Shader (เชดเดอร์ชิ้นส่วนหรือพิกเซล) คือขั้นตอนที่สามารถโปรแกรมได้ของไปป์ไลน์กราฟิกซึ่งคำนวณสีสุดท้ายของแต่ละชิ้นส่วนของภาพ ชิ้นส่วนคือพิกเซลที่อาจกลายเป็นพิกเซลที่มองเห็นได้บนหน้าจอหลังจากผ่านการทดสอบความลึกและสเตนซิล

Fragment Shader ทำงานหลังการแรสเตอร์ไรซ์ เมื่อพรีมิทีฟ 3D (สามเหลี่ยม) ได้ถูกแปลงเป็นชุดของชิ้นส่วนแล้ว เชดเดอร์ได้รับ แอตทริบิวต์ที่ถูกประมาณค่าระหว่างกลาง — พิกัดพื้นผิว, ปกติ, สีที่ถูกคำนวณใน Vertex Shader สำหรับจุดยอดของสามเหลี่ยมและถูกประมาณค่าเชิงเส้นสำหรับแต่ละพิกเซลภายในสามเหลี่ยม

ประวัติวิวัฒนาการของ Fragment Shader

ก่อนการถือกำเนิดของเชดเดอร์ที่สามารถโปรแกรมได้ (ก่อน DirectX 8 / OpenGL 2.0) การคำนวณสีพิกเซลดำเนินการโดยไปป์ไลน์คงที่พร้อมชุดการดำเนินการที่จำกัด Fragment Shader ที่สามารถโปรแกรมได้ ปรากฏในปี 2001 และขยายขีดความสามารถด้านกราฟิกอย่างรุนแรง: นักพัฒนาได้รับการควบคุมสีของแต่ละพิกเซลอย่างสมบูรณ์ ทำให้สามารถใช้แสงเสมือนจริง วัสดุที่ซับซ้อน และเอฟเฟกต์หลังการประมวลผล

Fragment Shader ทำงานอย่างไร?

Fragment Shader ถูกเรียกใช้โดย GPU สำหรับแต่ละชิ้นส่วนที่สร้างโดยแรสเตอร์ไรเซอร์ แต่ละการเรียกเชดเดอร์ประมวลผลหนึ่งชิ้นส่วน อ่านข้อมูลนำเข้า ดำเนินการโค้ดผู้ใช้ และเขียนค่าเอาต์พุต — สีของชิ้นส่วนในรูปแบบ RGBA

ข้อมูลนำเข้าและส่งออก

ข้อมูลนำเข้าของ Fragment Shader รวมถึงแอตทริบิวต์ที่ถูกประมาณค่าระหว่างกลางจาก Vertex Shader (พิกัดพื้นผิว, ปกติ, สี), ตัวแปร uniform (แหล่งกำเนิดแสง, เมทริกซ์) และตัวอย่างพื้นผิว ข้อมูลส่งออกคือ เวกเตอร์สี (gl_FragColor ใน OpenGL ES 2.0 หรือตัวแปรที่ผู้ใช้กำหนดใน ES 3.0) ซึ่งถูกเขียนลงในบัฟเฟอร์สี

#version 300 es
precision mediump float;

in vec2 vTexCoord;
uniform sampler2D uTexture;
out vec4 fragColor;

void main() {
    fragColor = texture(uTexture, vTexCoord);
}

หน้าที่หลักของ Fragment Shader

Fragment Shader รับผิดชอบคุณภาพทางภาพของภาพ เอฟเฟกต์ทั้งหมดที่ผู้ใช้เห็นบนหน้าจอ — สี, เงา, การสะท้อน, ความโปร่งใส — ถูกคำนวณในขั้นตอนนี้ของไปป์ไลน์กราฟิก

การทำพื้นผิว

การดำเนินการที่พบบ่อยที่สุดคือการสุ่มสีจากพื้นผิวโดยใช้พิกัด UV ที่ถูกประมาณค่าระหว่างกลาง Sampler2D และฟังก์ชัน texture() อนุญาตให้รับสีพิกเซลจากแผนที่พื้นผิว การกรอง (bilinear, trilinear, anisotropic) ถูกควบคุมผ่านพารามิเตอร์ของตัวอย่างและส่งผลต่อความคมชัดของภาพในมุมมองที่แตกต่างกัน

แสงแบบ Phong

แบบจำลองการแรเงาแบบ Phong ถูกคำนวณใน Fragment Shader ต่อพิกเซล ซึ่งให้ไฮไลต์ที่เรียบเนียนกว่าการให้แสงที่จุดยอด (การแรเงาแบบ Gouraud) แสงแบบ Phong ประกอบด้วยสามองค์ประกอบ: โดยรอบ (ambient), การกระจาย (diffuse) และการสะท้อนแบบ specular

// Fragment shader with Phong lighting
in vec3 vNormal;
in vec3 vPosition;
uniform vec3 uLightDir;
uniform vec3 uLightColor;

void main() {
    vec3 norm = normalize(vNormal);
    float diff = max(dot(norm, uLightDir), 0.0);
    fragColor = vec4(uLightColor * diff, 1.0);
}

เอฟเฟกต์หลังการประมวลผลและการผสม

Fragment Shader อนุญาตให้ใช้การประมวลผลภายหลัง: การแก้ไขสีผ่านตารางค้นหา (LUT), การเบลอ (blur), เอฟเฟกต์เรืองแสง (bloom) และ tonemapping สำหรับการเรนเดอร์ HDR เอฟเฟกต์ทั้งหมดนี้ทำงานที่ระดับพิกเซลและทำงานแบบเรียลไทม์

ประสิทธิภาพของ Fragment Shader และการปรับให้เหมาะสม

ประสิทธิภาพของ Fragment Shader เป็นปัจจัยหลักที่จำกัด FPS ในเกมมือถือสมัยใหม่ เนื่องจากเชดเดอร์ถูกเรียกสำหรับแต่ละพิกเซล แม้การเพิ่มความซับซ้อนของโค้ดเพียงเล็กน้อยก็อาจทำให้อัตราเฟรมลดลงอย่างเห็นได้ชัด

ปัญหาประสิทธิภาพหลัก

• Overdraw — การวาดพิกเซลซ้ำเนื่องจากการซ้อนทับของวัตถุ มีความสำคัญอย่างยิ่งสำหรับวัตถุกึ่งโปร่งใส
• การแยกสาขาแบบมีเงื่อนไข — การแยกสาขาใน Fragment Shader ลดประสิทธิภาพการทำงานแบบ SIMD เนื่องจาก GPU ต้องดำเนินการทั้งสองสาขา
• การสุ่มตัวอย่างพื้นผิว — การสุ่มตัวอย่างพื้นผิวแต่ละครั้งมีความหน่วงหลายสิบรอบสัญญาณนาฬิกา GPU การลดจำนวนตัวอย่างให้น้อยที่สุดจะทำให้เชดเดอร์เร็วขึ้น

วิธีการปรับ Fragment Shader ให้เหมาะสม

สำหรับ GPU มือถือ (Qualcomm Adreno, ARM Mali) แนะนำให้: ใช้ mediump precision สำหรับตัวแปร float, รวมการสุ่มตัวอย่างพื้นผิว, ใช้การทดสอบ early-z เพื่อทิ้งชิ้นส่วนที่มองไม่เห็นก่อนการทำงานของเชดเดอร์

Fragment Shader เทียบกับ Vertex Shader: การเปรียบเทียบ

เชดเดอร์ทั้งสองประเภทสามารถโปรแกรมได้โดยนักพัฒนา แต่ทำงานในขั้นตอนต่างๆ ของไปป์ไลน์และแก้ปัญหาต่างกัน Fragment Shader ใช้ทรัพยากรมากกว่าอย่างมีนัยสำคัญเนื่องจากจำนวนการเรียก

ตัวอย่างโค้ด Fragment Shader

Fragment Shader อาจเรียบง่าย (การสุ่มตัวอย่างพื้นผิว) หรือซับซ้อน (แสงหลายชั้น) ลองดูตัวอย่างที่ใช้งานได้สองตัวอย่าง: การทำพื้นผิวพื้นฐานและเอฟเฟกต์การไล่ระดับสีโดยใช้เวลา

การทำพื้นผิวพื้นฐานใน GLSL

#version 300 es
precision mediump float;
in vec2 vTexCoord;
in vec3 vColor;
uniform sampler2D uDiffuseMap;
out vec4 fragColor;

void main() {
    vec4 texColor = texture(uDiffuseMap, vTexCoord);
    fragColor = texColor * vec4(vColor, 1.0);
}

ตัวอย่างใน Metal Shading Language

#include <metal_stdlib>
using namespace metal;

struct FragmentIn {
    float2 texCoord;
    float3 normal;
};

fragment float4
fragmentMain(FragmentIn in [[stage_in]],
              texture2d<float> tex [[texture(0)]]) {
    constexpr sampler s(filter = linear);
    float4 color = tex.sample(s, in.texCoord);
    return color;
}