Distance fields & implicit shapes · 10 / 10

Multi-Channel Signed Distance Field

複数の距離チャンネルで文字の角を保つ。

Compare in motion

拡大する文字

Synchronized comparison
AReference
低解像度の文字画像

低解像度の文字画像

BMulti-Channel Signed Distance Field100%
拡大アニメでも文字の角を保ちやすい

拡大アニメでも文字の角を保ちやすい

Loading demo…

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

Look for: 距離情報から輪郭を再構成 → 大きくしても角が鋭い。

This model simplifies the technique to show its use case and effect. Operation counts describe the model; they are not performance measurements.

Read the storyboard

例: 拡大する文字

  1. 1. Start

    小さな文字

  2. 2. Change

    距離情報から輪郭を再構成

  3. 3. Result

    大きくしても角が鋭い

拡大アニメでも文字の角を保ちやすい。時間変化を示す模式図です。実際の描画結果や処理速度を再現したものではありません。

How it works

  1. 1. Input

    図形の輪郭

  2. 2. Process

    複数チャンネルに距離を記録

  3. 3. Result

    拡大しても鋭い角

A schematic of Multi-Channel Signed Distance Field. It shows the relationship between input, process, and result; exact values and rendering depend on the implementation.

Further reading

Unreal Engine Mesh Distance Fields ↗

A general reference for this subcategory.