Shader School
0%

イージング

title: "イージング" description: "線形補間とイージング関数の違いを学びます。smoothstep、quadratic、cubicイージングで自然な動きを作りましょう。" chapter: "06-animation" order: 2 challenge: description: "カスタムイージング関数を使って円を左右に動かしてください。行きはease-out（最初速く、後半ゆっくり）、帰りはease-in（最初ゆっくり、後半速い）にしましょう。" hints:

  • "まず u_time を mod で 0〜1 の範囲に周期化し、行きと帰りを区別します。"
  • "ease-out は t = 1.0 - (1.0 - t) * (1.0 - t)、ease-in は t = t * t で実装できます。"
  • "float cycle = mod(u_time * 0.5, 2.0); で0〜2の周期を作り、1.0以下なら行き（ease-out）、超えたら帰り（ease-in）にします。"

イージング

線形補間 vs イージング

前回のレッスンで sin(u_time) を使った滑らかなアニメーションを学びました。しかし現実世界の動きは、もっと複雑な加速・減速をします。

線形補間では値が一定速度で変化しますが、これは機械的に見えます。イージングを使うと、加速や減速が加わり、自然な動きになります。

smoothstep

GLSLの smoothstep は最もよく使われるイージング関数です：

float t = smoothstep(0.0, 1.0, x);
// 入力 x が 0→1 に変化するとき
// 出力 t はゆっくり始まり、ゆっくり終わる（ease-in-out）

smoothstep の内部は 3t^2 - 2t^3（Hermite補間）で、始まりと終わりの傾きがゼロになります。

基本的なイージング関数

// ease-in（ゆっくり始まる）
float easeIn(float t) {
    return t * t;
}

// ease-out（ゆっくり終わる）
float easeOut(float t) {
    return 1.0 - (1.0 - t) * (1.0 - t);
}

// ease-in-out（両方ゆっくり）
float easeInOut(float t) {
    return t < 0.5
        ? 2.0 * t * t
        : 1.0 - pow(-2.0 * t + 2.0, 2.0) / 2.0;
}

Cubic（3次）イージング

2次より強い加速が欲しい場合は、3次のイージングを使います：

// cubic ease-in
float cubicIn(float t) {
    return t * t * t;
}

// cubic ease-out
float cubicOut(float t) {
    return 1.0 - pow(1.0 - t, 3.0);
}

べき乗の指数を大きくするほど、加速が急激になります。

バウンスエフェクト

物体が跳ねるような効果もイージングで表現できます：

float bounce(float t) {
    return abs(sin(t * 3.14159 * 3.0)) * (1.0 - t);
}

sin で振動を作り、(1.0 - t) で振幅を減衰させます。

時間を周期化する

イージングを繰り返しアニメーションに使うには、時間を 0〜1 の範囲に周期化します：

// 0→1→0→1... の繰り返し
float t = fract(u_time * 0.5); // 2秒で1周期

// 0→1→0→1... の行って帰る動き
float t = abs(fract(u_time * 0.5) * 2.0 - 1.0);

まとめ

  • 線形補間は機械的、イージングで自然な動きに
  • smoothstep はease-in-outイージング
  • t*t でease-in、1-(1-t)^2 でease-out
  • 時間を fract で周期化してイージングを繰り返す