title: "GPUとシェーダー" description: "GPUがどのように動作するか、シェーダーとは何かを学びます。CPUとの違いと並列処理の考え方を理解しましょう。" chapter: "01-introduction" order: 1 challenge: description: "画面全体を好きな色（赤や緑以外）に塗りつぶすシェーダーを書いてみましょう。RGBの値を自由に変えて、お気に入りの色を見つけてください。" hints:

• "gl_FragColor の各成分は 0.0 から 1.0 の範囲です。"
• "vec4 の最初の3つの値が R, G, B に対応します。例えば vec4(0.0, 0.5, 1.0, 1.0) は水色です。"
• "紫色なら vec4(0.5, 0.0, 0.8, 1.0)、オレンジなら vec4(1.0, 0.6, 0.2, 1.0) を試してみましょう。"

GPUとシェーダー

GPUとは何か

GPU（Graphics Processing Unit）は、コンピュータに搭載されたグラフィックス専用のプロセッサです。CPUが「何でもできる万能選手」だとすると、GPUは**「同じ作業を大量にこなす専門家」**です。

CPUは複雑な処理を順番にこなすのが得意ですが、コア数は数個〜十数個程度です。一方GPUは、数千ものコアを持ち、それぞれが同時に動作します。

なぜシェーダーなのか

画面に表示される映像は、膨大な数のピクセルで構成されています。フルHDの画面だけでも 1920 x 1080 = 約200万ピクセル あり、これを毎秒60回更新する必要があります。

CPUで1ピクセルずつ順番に処理していたら、とても間に合いません。そこでGPUの出番です。GPUは各ピクセルの色を並列に計算します。

シェーダーとは、GPU上で実行される小さなプログラムのことです。各ピクセルに対して同じプログラムが同時に実行され、そのピクセルの色を決定します。

フラグメントシェーダー

シェーダーにはいくつかの種類がありますが、このコースでまず学ぶのはフラグメントシェーダー（ピクセルシェーダーとも呼ばれます）です。

フラグメントシェーダーの仕事はシンプルです：

各ピクセルの色を決める

右のエディタに表示されているコードを見てみましょう。これが最もシンプルなフラグメントシェーダーです：

void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

• void main() はプログラムのエントリーポイントです
• gl_FragColor に色を設定することで、そのピクセルの色が決まります
• vec4(1.0, 0.0, 0.0, 1.0) は RGBA 形式の色で、この場合は赤です

GLSL言語

シェーダーは GLSL（OpenGL Shading Language）という言語で書きます。C言語に似た構文で、ベクトルや行列の演算が組み込まれています。

GLSLの特徴：

• 型が厳密：float と int は明確に区別されます
• ベクトル型：vec2, vec3, vec4 で2〜4次元のベクトルを扱えます
• 組み込み関数：sin, cos, mix, step など、便利な関数が多数用意されています

まとめ

• GPUは大量のピクセルを並列に処理する専用プロセッサ
• シェーダーはGPU上で動く小さなプログラム
• フラグメントシェーダーは各ピクセルの色を決定する
• GLSLはシェーダーを書くための言語