title: "数学関数" description: "sin、cos、pow、abs、mod などの数学関数をシェーダーで活用する方法を学びます。波形や曲線の生成を実践します。" chapter: "03-shaping" order: 2 challenge: description: "sin関数とcos関数を使って、波打つ横縞パターンを作ってください。u_time でアニメーションさせると動く波になります。" hints:

• "sin(uv.y * 周波数) で縦方向の波が作れます。周波数を大きくすると細かい縞になります。"
• "uv.x に sin の結果を足すと、波打つ効果が得られます: float wave = sin(uv.y * 20.0 + u_time) * 0.05;"
• "step(0.5 + wave, uv.x) で波打つ境界が作れます。または sin(uv.y * 20.0 + u_time) * 0.5 + 0.5 をそのまま明るさとして使えます。"

数学関数

GLSLの組み込み数学関数

GLSLには数多くの数学関数が用意されています。これらを使いこなすことで、多彩な視覚表現が可能になります。

三角関数

sin と cos

float s = sin(x);  // -1.0 ~ 1.0
float c = cos(x);  // -1.0 ~ 1.0

周期的な波形を作る最も基本的な関数です。周期は 2π ≈ 6.28318 です。

0.0〜1.0に正規化:

float wave = sin(x) * 0.5 + 0.5;

周波数を変える（波の数）：

float fastWave = sin(x * 10.0);  // 10倍速い

振幅を変える（波の大きさ）：

float smallWave = sin(x) * 0.2;  // 振幅 0.2

べき乗関数

pow

float p = pow(x, n);  // x の n 乗

pow はコントラストの調整に便利です。0.0〜1.0の範囲で：

• pow(x, 2.0) — 暗い部分を強調（コントラスト増加）
• pow(x, 0.5) — sqrt(x) と同じ。明るい部分を強調

// グラデーションのコントラストを上げる
float gradient = pow(uv.x, 3.0);

絶対値と符号

abs

float a = abs(x);  // 絶対値

abs を使うとV字型の形状が作れます：

// 中心が 0 で左右対称のV字
float v = abs(uv.x - 0.5);

sign

float s = sign(x);  // x > 0 → 1.0, x < 0 → -1.0, x == 0 → 0.0

剰余・クランプ

mod

float m = mod(x, y);  // x を y で割った余り

繰り返しパターンの基本です：

float repeat = mod(uv.x * 5.0, 1.0);  // 0~1 を5回繰り返す

clamp

float c = clamp(x, minVal, maxVal);  // 値を範囲内に制限

min / max

float smaller = min(a, b);
float larger = max(a, b);

関数の可視化

右のプレビューでは、いくつかの数学関数をグラフとして可視化しています。y軸の値が明るさに対応しています。

関数の形を視覚的に理解することは、シェーダーを書く上でとても重要です。

まとめ

• sin/cos — 周期的な波形、アニメーション
• pow — コントラスト調整、ガンマ補正
• abs — V字型、左右対称
• mod — 繰り返しパターン
• clamp/min/max — 値の制限