Vertex Shaderとは：役割と動作原理

Vertex Shaderとは？

Vertex Shaderはグラフィックスパイプラインのプログラマブルステージであり、3Dモデルの各頂点を個別に処理します。頂点（vertex）とは、xyz座標、法線、色、UVテクスチャ座標などの属性を含む3次元空間内の点です。

固定機能パイプライン（fixed-function pipeline）では変換が固定アルゴリズムに従って実行されていたのに対し、Vertex Shaderは開発者に頂点変換の完全な制御を提供します。これにより、プロシージャルアニメーション、モデル変形、スケルタルスキニング、GPU側でのあらゆる数学的変換を実装できます。

グラフィックスパイプラインにおけるVertex Shaderの位置

OpenGL ESのグラフィックスパイプラインは、入力データから最終画像までの一連のステージで構成されています。Vertex Shaderは頂点アセンブリステージの後、ラスタライゼーションステージの前に位置します。CPUから頂点バッファを介して送信された各頂点は、Vertex Shaderを正確に1回通過し、結果はプリミティブアセンブリのために次のステージに転送されます。

Vertex Shaderの仕組み

Vertex Shaderは、CPUコードで設定された頂点属性ポインタを介して頂点バッファ（VBO）から頂点属性を受け取ります。開発者はGLSL（OpenGL Shading Language）または同等の言語でシェーダーコードを記述し、GPUドライバーが特定のチップ用のマシン命令にコンパイルします。

頂点処理フロー

各頂点に対して、Vertex Shaderは順次3つの操作を実行します：入力属性の読み取り→開発者が定義した変換の適用→出力変数への結果の書き込み。最小限必要な出力はクリップ空間での頂点位置（gl_Position）です。その他すべての出力データ（色、法線、テクスチャ座標）は補間され、次のステージ（Fragment Shader）に渡されます。

#version 300 es
in vec3 aPosition;
in vec2 aTexCoord;
uniform mat4 uMVP;
out vec2 vTexCoord;

void main() {
    gl_Position = uMVP * vec4(aPosition, 1.0);
    vTexCoord = aTexCoord;
}

Vertex Shaderの主要タスク

Vertex Shaderは、ジオメトリ変換に関連するグラフィックスパイプラインタスクの幅広い範囲を解決します。各タスクはベクトルと行列に対する数学的操作を通じて実装され、数千の頂点に対して並列に実行されます。

MVPによる座標変換

基本的かつ最も一般的なタスクは、頂点座標をmodel、view、projection（MVP）行列で乗算することです。MVP行列は頂点をローカルモデル空間からクリップ空間に変換し、その後パイプラインの自動ステージで正規化されてスクリーン座標に変換されます。

スケルタルアニメーション（スキニング）

アニメーション化されたキャラクターの場合、Vertex Shaderはスケルタルアニメーション（スキニング）を実装します。各頂点は特定の重みで複数のボーンにバインドされています。Vertex blending（バインドされたボーンからの変換の加重和）により、スケルトンが動くときにキャラクターのスキンをスムーズに変形できます。

プロシージャルなジオメトリ変形

Vertex Shaderは、CPUの関与なしに時間やその他のuniformパラメータに基づいてジオメトリを変更できます。ウェーブ変形、パーリンノイズ変位、水面の波紋効果など、これらすべての効果はRAMからジオメトリを再読み込みすることなくバーテックスシェーダーで実装されます。

Vertex Shader vs Fragment Shader：違い

両方のタイプのシェーダーがグラフィックスパイプラインのプログラマブルステージですが、Vertex ShaderとFragment Shaderは根本的に異なるタスクを解決し、画像処理の異なるステージで動作します。

主な違いは呼び出し頻度です。Vertex Shaderは頂点ごとに1回呼び出されるのに対し、Fragment Shaderはフラグメント（ピクセル）ごとに呼び出されます。高解像度シーンでは、Fragment Shaderの呼び出し回数はVertex Shaderの呼び出し回数を数千倍上回り、ピクセルシェーダーの最適化がさらに重要になります。

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

Vertex Shaderのパフォーマンスはリアルタイムアプリケーションにとって極めて重要であり、特に電力消費が制限されるモバイル開発では重要です。主なパフォーマンス要因は、頂点数、シェーダーコードの複雑さ、GPUメモリ帯域幅です。

パフォーマンスに影響する要因

• 頂点数 — フレームごとにGPUに送信される頂点の数。数百万のポリゴンを持つモデルはバーテックスシェーダーに高い負荷をかけます。
• シェーダーの複雑さ — シェーダー内の命令数。ネストされたループと条件分岐（divergence）はSIMDユニットの並列パフォーマンスを低下させます。
• 帯域幅 — ビデオメモリからの頂点データ読み取り速度。属性の形式（float32、float16、正規化整数）はスループットに直接影響します。

バーテックスシェーダーの最適化方法

Vertex Shaderの負荷を軽減するために、以下のアプローチが使用されます。Level of Detail（LOD） — カメラがオブジェクトから遠ざかる際にモデルの簡略化バージョンに切り替えます。Instancing — 1つのドローコールで異なる変換行列を使用して同じジオメトリを複数回描画します。

// インスタンシング対応のVertex Shader
in vec3 aPosition;
in mat4 aInstanceMatrix;
uniform mat4 uViewProjection;

void main() {
    vec4 worldPos = aInstanceMatrix * vec4(aPosition, 1.0);
    gl_Position = uViewProjection * worldPos;
}

Vertex Shaderコード例

Vertex Shaderは異なるグラフィックスAPI間で同様のロジックを持ちますが、構文と命名規則が異なります。OpenGL ES 3.0用のGLSLと、iOS/macOS用のMetal Shading Languageでの基本的なバーテックスシェーダーの実装を見てみましょう。

OpenGL ES 3.0用GLSLの例

#version 300 es
in vec4 position;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;

out vec3 vNormal;
out vec2 vTexCoord;
out vec3 vPosition;

void main() {
    vec4 mvPosition = modelViewMatrix * position;
    vPosition = mvPosition.xyz;
    vNormal = normalMatrix * normal;
    vTexCoord = texcoord;
    gl_Position = projectionMatrix * mvPosition;
}

Metal Shading Languageの例

#include <metal_stdlib>
using namespace metal;

struct VertexIn {
    float3 position [[attribute(0)]];
    float3 normal   [[attribute(1)]];
};

struct VertexOut {
    float4 position [[position]];
    float3 worldNormal;
};

vertex VertexOut
vertexMain(VertexIn in [[stage_in]],
           constant float4x4& mvp [[buffer(1)]]) {
    VertexOut out;
    out.position = mvp * float4(in.position, 1.0);
    out.worldNormal = in.normal;
    return out;
}