Curves & interpolation · 8 / 10

Smoothstep / Smootherstep

両端で滑らかにつながるフェードを作る。

Compare in motion

Interactive demo

画面のフェード

Synchronized comparison

AReference

一定の速さで変化する

BSmoothstep / Smootherstep100%

開始と終了が急に切り替わらない

Loading demo…

Speed

Time1.20 / 8.00 sB · effect amount100%

Scrub to pause and inspect. At 0%, B matches A; at 100%, B shows the effect. The scene repeats every 8 seconds.

Look for: 両端で変化が緩む → 自然に表示される。

A small visual example of a game use case. Games combine these techniques with assets and other effects.

Read the storyboard

例: 画面のフェード

1. Start
透明な画面
2. Change
両端で変化が緩む
3. Result
自然に表示される

開始と終了が急に切り替わらない。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

How it works

1. Input
0〜1 の進行率
2. Process
端の傾きをゼロにする
3. Result
滑らかな S 字遷移

A schematic of Smoothstep / Smootherstep. It shows the relationship between input, process, and result; exact values and rendering depend on the implementation.

Compare in motion

画面のフェード

How it works

Further reading