Fragment Shader — ano ito, mga gawain at prinsipyo ng paggana

Ano ang Fragment Shader?

Fragment Shader (fragment o pixel shader) — ay isang programmable na yugto ng graphics pipeline na kinakalkula ang panghuling kulay ng bawat fragment ng imahe. Ang fragment ay isang potensyal na pixel na, pagkatapos makapasa sa depth at stencil tests, ay nagiging isang nakikitang pixel sa screen.

Ang Fragment Shader ay isinasagawa pagkatapos ng rasterization, kapag ang three-dimensional na primitives (triangles) ay na-convert na sa isang set ng mga fragment. Ang shader ay tumatanggap sa input ng interpolated na mga attribute — texture coordinates, normals, colors na kinakalkula sa Vertex Shader para sa mga vertex ng triangle at linearly na interpolated para sa bawat pixel sa loob nito.

Kasaysayan ng ebolusyon ng Fragment Shader

Bago ang pagdating ng programmable shaders (bago ang DirectX 8 / OpenGL 2.0), ang pagkalkula ng kulay ng pixel ay ginagawa ng fixed pipeline na may limitadong set ng mga operasyon. Programmable Fragment Shader ay lumitaw noong 2001 at radikal na pinalawak ang mga kakayahan ng graphics: ang mga developer ay nakakuha ng ganap na kontrol sa kulay ng bawat pixel, na nagpapahintulot sa pagpapatupad ng photorealistic na pag-iilaw, kumplikadong mga materyales, at post-effects.

Paano gumagana ang Fragment Shader?

Fragment Shader ay pinapatakbo ng GPU para sa bawat fragment na nabuo ng rasterizer. Bawat tawag ng shader ay nagpoproseso ng isang fragment, binabasa ang input data nito, isinasagawa ang user code, at isinusulat ang output value — ang kulay ng fragment sa RGBA format.

Input at output data

Ang input data ng Fragment Shader ay kinabibilangan ng interpolated na mga attribute mula sa Vertex Shader (texture coordinates, normals, colors), uniform variables (light sources, matrices), at texture samplers. Ang output data — color vector (gl_FragColor sa OpenGL ES 2.0 o user variable sa ES 3.0) na isinusulat sa color buffer.

#version 300 es
precision mediump float;

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

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

Mga pangunahing gawain ng Fragment Shader

Fragment Shader ay responsable para sa visual na kalidad ng imahe. Lahat ng epekto na nakikita ng user sa screen — kulay, anino, repleksyon, transparency — ay kinakalkula mismo sa yugtong ito ng graphics pipeline.

Pag-texture

Ang pinakakaraniwang operasyon — pagkuha ng kulay mula sa texture batay sa interpolated na UV coordinates. Sampler2D at function na texture() ay nagpapahintulot na makuha ang kulay ng pixel mula sa texture atlas. Ang pagsasala (bilinear, trilinear, anisotropic) ay kinokontrol sa pamamagitan ng sampler parameters at nakakaapekto sa sharpness ng imahe sa iba't ibang anggulo ng pagtingin.

Pag-iilaw ng Phong

Ang modelo ng pag-iilaw ng Phong (Phong shading) ay kinakalkula sa Fragment Shader para sa bawat pixel, na nagbibigay ng mas makinis na mga highlight kaysa sa vertex lighting (Gouraud shading). Phong lighting ay may tatlong bahagi: ambient (paligid), diffuse (diffuse), at specular (specular).

// Fragment shader na may 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);
}

Mga post-effect at blending

Ang Fragment Shader ay nagpapahintulot sa paglalapat ng post-processing: color correction sa pamamagitan ng LUT tables, blur, glow effect (bloom), at tonemapping para sa HDR rendering. Lahat ng mga epektong ito ay gumagana sa antas ng pixel at isinasagawa sa real-time.

Pagganap ng Fragment Shader at pag-optimize

Pagganap ng Fragment Shader — ang pangunahing salik na naglilimita sa FPS sa mga modernong mobile game. Dahil ang shader ay tinatawag para sa bawat pixel, kahit maliit na pagtaas sa complexity ng code ay maaaring magdulot ng kapansin-pansing pagbaba sa frame rate.

Mga pangunahing problema sa pagganap

• Overdraw — muling pagguhit ng parehong pixel dahil sa overlapping ng mga bagay. Lalo na kritikal para sa semi-transparent na mga bagay.
• Mga conditional branch — pagsasanga sa Fragment Shader ay nagbabawas ng kahusayan ng SIMD execution, dahil ang GPU ay kailangang isagawa ang parehong landas.
• Pagkuha ng texture — bawat texture lookup ay may latency ng sampu-sampung GPU cycles. Ang pag-minimize ng bilang ng mga sampler ay nagpapabilis ng shader.

Mga paraan ng pag-optimize ng Fragment Shader

Para sa mga mobile GPU (Qualcomm Adreno, ARM Mali) ay inirerekomenda: gamitin ang mediump precision para sa float variables, pagsamahin ang mga texture lookup, mag-apply ng early-z tests para itapon ang mga invisible fragment bago ang shader execution.

Fragment Shader vs Vertex Shader: paghahambing

Ang parehong uri ng shader ay naka-program ng developer, ngunit gumagana sa iba't ibang yugto ng pipeline at nilulutas ang iba't ibang gawain. Fragment Shader ay mas resource-intensive dahil sa bilang ng mga tawag.

Mga halimbawa ng code ng Fragment Shader

Fragment Shader ay maaaring simple (pagkuha ng texture) o kumplikado (multi-layer na pag-iilaw). Tingnan natin ang dalawang praktikal na halimbawa: basic texturing at gradient effect gamit ang oras.

Basic texturing sa 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);
}

Halimbawa sa 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;
}