GLSL（OpenGL Shading Language）
GPU 上で動くシェーダプログラムを書くための C 風言語。 WebGL の場合は GLSL ES（Embedded Systems 版）を使う。 頂点シェーダとフラグメントシェーダの 2 つをペアで書いて、3D の見た目を作る。
これは何か
GPU は数千コアで並列に同じプログラムを走らせるのが得意。 その「同じプログラム」がシェーダ。GLSL はそのシェーダを書くための言語。
- 頂点シェーダ（Vertex Shader） — 頂点ごとに 1 回呼ばれる。各頂点の最終位置を計算する。
- フラグメントシェーダ（Fragment Shader） — ピクセル（fragment）ごとに 1 回呼ばれる。各ピクセルの色を計算する。
この2つをペアで書くと「3D オブジェクトをこう見せる」が完成する。GLSL を書くと 普通のマテリアルでは作れない表現に届く（液体・水面・歪み・特殊な質感・procedural）。
レンダリングパイプライン
WebGL の描画パイプラインを大雑把に追うと:
- 頂点バッファ — メッシュの頂点座標・法線・UV 等が GPU メモリに乗っている
- 頂点シェーダ実行 — 各頂点の
positionをgl_Position（クリップ空間）に書き出す。頂点ごとに並列実行 - プリミティブ組み立て — 頂点が3つ集まると三角形になる
- ラスタライズ — 三角形が画面のピクセル群に分解される。各ピクセルがfragment
- フラグメントシェーダ実行 — 各 fragment の色を計算。ピクセルごとに並列実行
- テスト・ブレンド — 深度テスト、α合成等を経て framebuffer に書き込み
頂点シェーダから fragment シェーダへは varying（GLSL ES 3 では out/in）で値を渡す。
三角形の中の各ピクセルではこの値が線形補間される。
最小例
真っ赤な箱を描く最小コード。Three.js の ShaderMaterial 上で動く。
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // RGBA
}Three.js が以下の uniforms / attributes を自動で渡してくれる:
- uniforms:
modelMatrix/viewMatrix/projectionMatrix/modelViewMatrix/normalMatrix/cameraPosition - attributes:
position/normal/uv
GLSL ES のバージョン
| GLSL ES 1.00（WebGL1） | GLSL ES 3.00（WebGL2） | |
|---|---|---|
| 頂点入力 | attribute | in |
| 頂点→fragment | varying | vertex で out、fragment で in |
| fragment 出力 | gl_FragColor | out vec4 outColor; を自分で宣言 |
| テクスチャ取得 | texture2D(t, uv) | texture(t, uv) |
| 整数演算 | 限定的 | フル対応 |
| 3D テクスチャ・配列等 | 無し | 有り |
| バージョン宣言 | 不要 | #version 300 es を1行目に |
2026 現在、WebGL2 が主流なので GLSL ES 3.00 で書ける。
Three.js は内部で WebGL2 を使い、ShaderMaterial で書いた古い記法（varying / gl_FragColor）も自動で変換してくれるので、初学では古い記法から入っても問題は無い。
基本 WebGL2 / GLSL ES 3.00 を前提に書く。Three.js の ShaderMaterial に貼っても動く形で例示する。
古い記法（varying / gl_FragColor）も並行して紹介する。
WebGPU と WGSL の話
WebGPU は新世代の Web グラフィクス API で、GLSL ではなく WGSL（WebGPU Shading Language）を使う。 ただし Three.js には TSL（Three Shading Language）があり、JS の式ベースで書いて WebGL/WebGPU 両対応のコードを生成できる。
とはいえ 2026 現在の大半のチュートリアルや学習リソースは GLSL。 まず GLSL を学ぶのが最短ルート。WGSL は基本概念が GLSL と近い。
3つの「変数の役割」
| 修飾子 | 役割 | 誰が値を入れる |
|---|---|---|
uniform | すべての頂点・fragment で同じ値（時間・色・テクスチャ等） | JS から渡す |
attribute / in（vertex） | 頂点ごとの値（位置・法線・UV） | 頂点バッファから自動 |
varying / out(vs)→in(fs) | 頂点→fragment へ補間して渡す | 頂点シェーダで書き出す |
覚えるべき 5 つの観念
- 並列実行: シェーダは数千〜数百万回並列に呼ばれる。共有変数は無く、ループや分岐は性能上不利。
- 静的型:
float/int/vec2..4/mat2..4等。型の自動変換は限定的。 - swizzling:
vec3 v = ...; v.xy/v.bgrのようにベクトルを並べ替える独自記法。 - クリップ空間: 頂点シェーダの出力
gl_Positionは -1..1 の正規化空間。projectionMatrix * modelViewMatrix * vec4(position, 1.0)が定石。 - varying は補間される: 三角形の3頂点で書いた値は、その中の各 fragment で自動で重心座標補間される。
使えるツール / 学習場所
- The Book of Shaders — fragment 専門の無料書籍。最高の入門
- Shadertoy — 作品集 + ブラウザで遊べる play ground
- Three.js Journey — Three.js + GLSL の体系的コース（有料）
- GLSL ES 公式仕様（PDF） — 困ったらここ
- R3F docs + R3F のシェーダページ
このノートの読み方
- 基本構文 で型・演算・修飾子を覚える
- 頂点シェーダ と フラグメントシェーダ でそれぞれの役割と書き方を覚える
- 型・演算・swizzling と 組み込み関数 がリファレンス
- テクスチャ でサンプリングを覚える
- 応用は ライティング と プロシージャル
- 本番投入前に 最適化と注意点 をひととおり