曲線・補間 · 7 / 10

線形補間・値域変換

値を混ぜたり範囲を変えて色や大きさへ対応させる。

動くデモで比較する

色が変わるUI

同じ時刻で比較
A比較対象
値を一瞬で切り替える

値を一瞬で切り替える

B線形補間・値域変換100%
二つの状態を連続的につなげる

二つの状態を連続的につなげる

デモを読み込み中…

時間を動かすと停止して観察できます。変化量 0% で A と同じ状態、100% で B の効果を表示します。8 秒で繰り返します。

見るポイント:比率に沿って中間値を取る → 終了色と大きさ。

ゲームでの使いどころを示す小さな描画サンプルです。実際のゲームでは、素材や他の技法と組み合わせて使います。

コマ送りで解説を読む

例: 色が変わるUI

  1. 1. 開始

    開始色と大きさ

  2. 2. 変化

    比率に沿って中間値を取る

  3. 3. 結果

    終了色と大きさ

二つの状態を連続的につなげる。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

技法のしくみ

  1. 1. 入力

    値 A・B と比率 t

  2. 2. 処理

    線形補間・値域変換

  3. 3. 結果

    範囲内の中間値

線形補間・値域変換のしくみを示す模式図。入力・処理・結果の関係を表し、実際の数値や描画結果は実装によって異なります。

さらに調べる

The Book of Shaders — Shaping Functions ↗

この分野の参考資料です。個々の項目を直接説明する資料とは限りません。