Shader: ano ito, mga uri ng shader at kung paano sila gumagana

Ano ang Shader?

Shader — ay isang maliit na programa, nakasulat sa espesyalisadong wika at pinapatakbo sa GPU. Bawat shader ay nagpoproseso ng isang elemento ng data — vertex, fragment (pixel) o work element — nang independyente sa iba. Ang parallelism ng GPU ay nagpapahintulot sa libu-libong shader instance na tumakbo nang sabay-sabay.

Ang termino ay ipinakilala ng Pixar noong 1980s para ilarawan ang mga programang kumokontrol sa hitsura ng mga surface sa RenderMan. Sa real-time, lumitaw ang mga shader sa NVIDIA GeForce 3 (2001) — ang unang video card na may programmable pipeline. Bago ang mga shader, ang graphics ay na-configure sa pamamagitan ng fixed parameters: kulay, texture, blending mode.

Ayon sa datos ng Unity Technologies (2025), ang karaniwang mobile game ay gumagamit ng 50–200 shader. Bawat shader ay may mga variant (variants) para sa iba't ibang platform, antas ng kalidad at configuration ng ilaw. Ang bilang ng variant ay maaaring umabot ng 10,000 bawat proyekto.

Ang arkitektura ng shader ay nahahati sa input data (attributes, uniform variables, textures), program code at output data (kulay, posisyon). Ang uniform variables ay itinatakda mula sa CPU bago patakbuhin ang shader at hindi nagbabago para sa lahat ng elemento ng frame. Ang attributes ay data bawat elemento (vertex coordinates, normal, UV coordinates).

Modelo ng pag-execute ng SIMT

SIMT (Single Instruction, Multiple Threads) — modelo ng pag-execute ng shader sa GPU. Isang instruction ay nilo-load nang isang beses, ngunit isinasagawa ng daan-daang thread sa iba't ibang data. Halimbawa, ang Fragment Shader para sa 1000 pixels ay naglulunsad ng 1000 thread na may parehong code, ngunit bawat thread ay tumatanggap ng sariling UV coordinates at interpolated attributes.

Mahalagang bunga ng SIMT: ang branching sa shader ay mahal. Kung sa loob ng if block kalahati ng thread ay pumupunta sa isang branch at kalahati sa iba, ang GPU ay nagsasagawa ng parehong branch nang sunud-sunod para sa lahat ng thread. Bumababa ang performance sa 50%. Iwasan ang dynamic branching sa shader o i-minimize ito sa pamamagitan ng paunang pagkalkula sa CPU.

Mga uri ng shader

Ang mga modernong GPU ay sumusuporta sa ilang uri ng shader, bawat isa para sa kani-kanilang yugto ng graphical o computational pipeline. Talakayin natin ang mga pangunahing uri: vertex, fragment, compute at modernong mesh-shader.

Vertex Shader

Vertex Shader ay nagpoproseso ng bawat vertex ng geometry: nagt-transform ng coordinates, nagk-compute ng ilaw, nagpapadala ng data sa fragment shader. Ito ay mandatoryong yugto ng graphical pipeline — kung wala ito, ang vertices ay hindi makakarating sa screen. Ang Vertex Shader ay tinatawag para sa bawat vertex ng bawat frame.

Fragment Shader

Fragment Shader (o Pixel Shader) — ang pinaka-resource-intensive na yugto. Kinukwenta nito ang huling kulay ng bawat fragment gamit ang textures, ilaw at material. Ang Fragment Shader ay isinasagawa para sa bawat pixel na natatakpan ng geometry, isinasaalang-alang ang lahat ng inilapat na texture at effects. Ang pag-optimize ng shader na ito ay nagbibigay ng pinakamalaking pagtaas ng performance.

Compute Shader

Compute Shader — universal na shader para sa arbitraryong computations sa GPU. Hindi tulad ng graphical shader, hindi ito nakatali sa geometry o pixels. Ang Compute Shader ay gumagana sa arbitraryong data buffers sa pamamagitan ng work groups. Ginagamit para sa physics, particle simulation, post-effects at inference ng neural networks.

Mesh Shader

Mesh Shader — ang pinakabagong uri ng shader, lumitaw sa NVIDIA Turing (2018) at Metal 3. Pinapalitan ng Mesh Shader ang vertex, geometry at tessellation shader ng isang mesh pipeline. Gumagana kasama ang Task Shader: nagpapasya ang Task Shader kung aling mesh groups ang ire-render, ang Mesh Shader ay bumubuo ng geometry sa real-time.

Mga wika para sa pagsulat ng shader

Ang mga shader ay isinusulat sa espesyalisadong mga wika na kino-compile sa machine code ng GPU. Ang pagpili ng wika ay depende sa platform at API. Talakayin natin ang mga pangunahing wika: GLSL, HLSL, Metal Shading Language at intermediate format na SPIR-V.

GLSL (OpenGL Shading Language)

GLSL — wika ng shader para sa OpenGL, OpenGL ES at WebGL. Ang syntax ay batay sa C na may karagdagang vector types (vec2, vec4, mat4) at built-in functions (texture, normalize, reflect). GLSL ES — bersyon para sa mobile devices na may limitadong precision (lowp, mediump, highp). Ayon sa datos ng Khronos (2025), ang GLSL ay nananatiling pinakalaganap na wika ng shader dahil sa cross-platform capability.

#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
out vec4 fragColor;

void main() {
    fragColor = texture(u_texture, v_texCoord);
}

Isang simpleng fragment shader ang bumabasa ng kulay mula sa texture batay sa UV coordinates. Ang precision mediump ay nag-uutos sa GPU na gumamit ng half precision para sa float — pinapabilis ang pag-execute sa mobile devices ng 25–40%.

HLSL (High-Level Shader Language)

HLSL — wika ng shader mula sa Microsoft para sa DirectX. Ang syntax ay mas malapit sa C++ na may suporta para sa classes, structures at templates. Ang HLSL ay ginagamit sa Windows applications at sa pamamagitan ng Shader Model 6.7+ ay sumusuporta sa Ray Tracing, Mesh Shaders at Sampler Feedback. Para sa mobile development, ang HLSL ay hindi direktang ginagamit, ngunit kino-compile sa SPIR-V para sa Vulkan.

Metal Shading Language

MSL (Metal Shading Language) — wika ng shader ng Apple, batay sa C++14. Hindi tulad ng GLSL at HLSL, ang MSL ay kino-compile kasama ng application, na nag-aalis ng JIT compilation sa device. Sinusuportahan ng MSL ang pointers, templates at standard library ng C++. Ginagamit sa lahat ng Apple devices: iPhone, iPad, Mac, Apple TV.

#include <metal_stdlib>
using namespace metal;
struct VertexOut {
    float4 position [[position]];
    float2 texCoord;
};

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

Ang MSL ay gumagamit ng attributes [[position]], [[stage_in]] at [[texture(N)]] para sa pag-binding ng resources. Ang Apple compiler ay bumubuo ng optimized code para sa kasalukuyang GPU, isinasaalang-alang ang bilang ng registers at cache.

SPIR-V

SPIR-V — intermediate binary format para sa shader, standard para sa Vulkan. Ang mga shader ay isinusulat sa GLSL o HLSL, kino-compile sa SPIR-V at nilo-load sa Vulkan application. Ang SPIR-V ay hindi nakatali sa specific na wika — may mga compiler mula sa Rust, Python, OpenCL C papuntang SPIR-V.

Mga shader sa mobile development

Ang mga shader sa mobile platforms ay may mga limitasyon kumpara sa desktop: mas kaunting registers, limitadong precision at kakulangan ng suporta para sa ilang instruction. Talakayin natin ang specific ng shader sa Android (Vulkan/OpenGL ES) at iOS (Metal).

Mga shader sa Android

Android ay gumagamit ng GLSL ES para sa OpenGL at SPIR-V para sa Vulkan. Sinusuportahan ng OpenGL ES 3.2 ang shader na may default na mediump precision. Ang Vulkan ay nangangailangan ng explicit compilation ng GLSL sa SPIR-V sa pamamagitan ng glslangValidator. Sa Android, ang shader ay nilo-load mula sa text resources o mula sa compiled na SPIR-V files.

Qualcomm Adreno GPU ay nag-o-optimize ng shader sa driver level. Rekomendasyon: gumamit ng mediump para sa kulay at UV, highp lamang para sa posisyon; iwasan ang texture sampling sa vertex shader; grupo ang computations sa vectors (vec4 sa halip na 4x float). Ayon sa datos ng Qualcomm (2025), ang mga optimization na ito ay nagbibigay ng 30–50% na pagtaas.

Mga shader sa iOS

iOS ay eksklusibong gumagamit ng Metal Shading Language. Ang shader ay kino-compile sa machine code kasama ng application sa pamamagitan ng Xcode. Ang Metal ay nagbibigay ng Shader Debugger at GPU Capture para sa pag-profile ng shader. Ang Apple GPU (TBDR) ay may specific na optimization: early fragment test, memoryless render targets at programmable blending.

Ayon sa datos ng Apple WWDC 2024, para sa iOS shader ay kritikal na gumamit ng half sa halip na float, limitahan ang register pressure (max 64 registers) at iwasan ang dependent texture sampling. Ang iOS shader ay dapat compact — optimal na laki ay 50–100 ALU instructions.

Mga shader sa Unity at Unreal Engine

Ang game engines na Unity at Unreal Engine ay nagbibigay ng visual shader editors (Shader Graph, Material Editor) at abstract na wika (ShaderLab, USF). Ang developer ay nagsusulat ng shader sa high-level na wika, at ang engine ay kino-compile ito para sa target platform. Ang Unity ay gumagamit ng HLSL bilang intermediate na wika, Unreal — USF (Unreal Shader Format).

Pag-optimize ng shader

Pag-optimize ng shader — mahalagang yugto ng graphical development para sa mobile devices. Ang hindi magandang pagkakasulat na shader ay maaaring magpababa ng FPS mula 60 hanggang 20. Talakayin natin ang mga pangunahing patakaran at techniques ng pag-optimize.

Precision ng computation

Gumamit ng minimal na sapat na precision: lowp para sa kulay at UV, mediump para sa normal at ilaw, highp lamang para sa posisyon at matrices. Ayon sa datos ng ARM (2025), ang mediump operations ay 2 beses na mas mabilis kaysa highp sa Mali GPU. Sa GLSL ES, ito ay itinatakda sa pamamagitan ng precision-qualifier.

Pag-minimize ng texture sampling

Texture sampling — ang pinakamahal na operasyon sa shader (10–30 cycles kumpara sa 1–2 para sa ALU instruction). Bawasan ang bilang ng sampling: pagsamahin ang texture sa atlas, gumamit ng storage sa uniform arrays sa halip na texture, i-cache ang mga resulta ng katabing pixels sa pamamagitan ng derivative instructions.

Iwasan ang branching

Dynamic branching (if na may uniform variable) ay nagpapababa ng performance ng SIMT pipeline. Palitan ang branching ng mathematical functions: mix(), step(), smoothstep() at clamp(). Ang mga function na ito ay isinasagawa sa 1–2 instructions, habang ang branching ay maaaring umabot ng 8–16 instructions dahil sa thread divergence.

// Masama: dynamic branching sa shader
if (u_enableLight) {
    color *= computeLighting(normal);
}

// Mabuti: mathematical replacement ng branching
color *= mix(1.0, computeLighting(normal),
              float(u_enableLight));

Ang mix() ay nagsasagawa ng linear interpolation sa pagitan ng dalawang value. Kapag ang u_enableLight=0, ibinabalik ang 1.0 — hindi nagbabago ang kulay. Kapag ang u_enableLight=1, ibinabalik ang resulta ng ilaw. Walang branching — lahat ng thread ay nagsasagawa ng parehong code.

Mga halimbawa ng shader

Talakayin natin ang practical na halimbawa ng shader para sa mobile development — mula sa simpleng shading hanggang sa procedural texture generation. Bawat halimbawa ay nagpapakita ng specific na technique.

Phong shading (vertex shader)

Modelong Phong — klasikong modelo ng ilaw na may diffuse at specular components. Ang Vertex Shader ay nagk-compute ng ilaw para sa bawat vertex, ang Fragment Shader ay nag-i-interpolate lamang ng resulta (Gouraud shading). Angkop para sa mobile devices dahil sa mababang cost.

#version 300 es
layout(location = 0) in vec4 a_position;
layout(location = 1) in vec3 a_normal;
uniform mat4 u_mvp;
uniform mat4 u_modelView;
out vec3 v_color;

void main() {
    vec3 normal = normalize(mat3(u_modelView) * a_normal);
    vec3 lightDir = normalize(vec3(0.0, 1.0, 1.0));
    float diff = max(dot(normal, lightDir), 0.0);
    v_color = vec3(0.8, 0.2, 0.2) * (0.3 + diff * 0.7);
    gl_Position = u_mvp * a_position;
}

Ang shader ay nagk-compute ng diffuse lighting: dot product ng normal at direksyon ng ilaw. Ang resulta ay hinaluan ng ambient (0.3) at diffuse (0.7) components. Nagsasagawa ng 10–15 ALU instructions bawat vertex — katanggap-tanggap para sa 100,000 polygons sa 60 FPS sa mobile GPU.

Procedural texture (fragment shader)

Ang procedural textures ay binuo sa Fragment Shader nang hindi nilo-load mula sa file. Nakakatipid ng video memory at pinapasimple ang animation. Halimbawa — chessboard na may pabago-bagong laki ng cell. Ilang ALU instructions lamang — minimal na load sa GPU.

#version 300 es
precision mediump float;
in vec2 v_uv;
uniform float u_cells;
out vec4 fragColor;

void main() {
    vec2 cell = floor(v_uv * u_cells);
    float isWhite = mod(cell.x + cell.y, 2.0);
    fragColor = mix(vec4(0.1, 0.1, 0.1, 1.0),
                     vec4(0.9, 0.9, 0.9, 1.0),
                     isWhite);
}

8 ALU instructions — ideal na shader para sa mobile devices. Ang u_cells ay nagtatakda ng bilang ng cells bawat axis. Ang floor at mod — murang operasyon, isinasagawa sa 1 cycle sa lahat ng mobile GPU.