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によって起動されます。各シェーダー呼び出しは1つのフラグメントを処理し、その入力データを読み取り、ユーザーコードを実行し、出力値（RGBA形式のフラグメントの色）を書き込みます。

入力データと出力データ

Fragment Shaderの入力データには、Vertex Shaderからの補間属性（テクスチャ座標、法線、色）、ユニフォーム変数（光源、行列）、テクスチャサンプラーが含まれます。出力データは色ベクトル（OpenGL ES 2.0ではgl_FragColor、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()関数を使用すると、テクスチャアトラスからピクセルの色を取得できます。フィルタリング（バイリニア、トライリニア、異方性）はサンプラーパラメーターを通じて制御され、さまざまな視野角での画像の鮮明さに影響します。

Phong照明

PhongシェーディングモデルはFragment Shaderでピクセルごとに計算され、頂点単位の照明（Gouraudシェーディング）よりも滑らかなハイライトを提供します。Phong照明には、環境光（ambient）、拡散反射（diffuse）、鏡面反射（specular）の3つの要素が含まれます。

// 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）による色補正、ブラー、ブルーム効果、HDRレンダリングのトーンマッピングなどの後処理を適用できます。これらのエフェクトはすべてピクセルレベルで動作し、リアルタイムで実行されます。

Fragment Shaderのパフォーマンスと最適化

Fragment Shaderのパフォーマンスは、最新のモバイルゲームでFPSを制限する主な要因です。シェーダーは各ピクセルに対して呼び出されるため、コードの複雑さがわずかに増加するだけでも、フレームレートの顕著な低下につながる可能性があります。

主なパフォーマンス問題

• Overdraw — オブジェクトの重なりによる同一ピクセルの再描画。半透明オブジェクトでは特に重要。
• 条件分岐 — Fragment Shaderでの分岐はSIMD実行効率を低下させます。GPUは両方の分岐を実行する必要があるためです。
• テクスチャサンプリング — 各テクスチャサンプリングには数十のGPUクロックサイクルのレイテンシがあります。サンプラーの数を最小限に抑えるとシェーダーが高速化します。

Fragment Shaderの最適化手法

モバイルGPU（Qualcomm Adreno、ARM Mali）では、float変数にmediump precisionを使用し、テクスチャサンプリングを統合し、シェーダー実行前に不可視フラグメントを破棄するearly-zテストを適用することを推奨します。

Fragment Shader vs Vertex Shader：比較

両方のタイプのシェーダーは開発者によってプログラミング可能ですが、パイプラインの異なるステージで動作し、異なるタスクを解決します。Fragment Shaderは呼び出し回数のため、はるかにリソースを消費します。

Fragment Shaderのコード例

Fragment Shaderは単純なもの（テクスチャサンプリング）から複雑なもの（多層照明）まであります。2つの実用的な例を見てみましょう：基本的なテクスチャリングと時間を使用したグラデーション効果です。

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