グラフィックを知る

アンチエイリアス

Anti-Aliasing別名：AA、アンチエイリアシング

概要

斜めの線や曲線の縁に出るギザギザ（ジャギー）を目立たなくする処理。ピクセルを図形の内か外かの二択で塗らず、図形がピクセルを覆う割合に応じた中間の色で塗る。

デモ

デモを読み込んでいます
白い線をドラッグすると、1 点だけで判定した画像と、複数の点で判定した画像を見比べられます。ピクセルを大きくした状態でカーソルを乗せると、サンプル点と被覆率が表示されます。

使われる場面

  • 3D ゲームの画面

    設定画面で MSAA、FXAA、TAA などを選べることが多い。建物の縁や、電線、フェンスのような細い物体のちらつきを抑える。

  • 図形と文字の描画

    ベクター画像、UI の図形、フォントの描画では、被覆率による中間色が標準で使われている。

  • ドット絵

    逆に、アンチエイリアスを意図的に切る。中間色が入るとピクセルの境界がぼやけ、ドット絵らしさが失われる。

  • 静止画のレンダリング

    1 ピクセルに多数のサンプルを取るのが基本である。サンプル数を上げると、縁のギザギザと画面のノイズが同時に減る。

判断基準

こういうときこうする
ギザギザの多くがポリゴンの縁に出ていて、テクスチャはにじませたくないMSAA を使う。縁だけに効き、テクスチャはにじまない。ただし、光の計算を後からまとめて行う描画方式（ディファードレンダリング）では重くなりやすい。
処理を軽くしたい（モバイル、低性能な環境）FXAA や SMAA を使う。描き終えた画像への後処理なので、描画方式を問わず使える。細部は少しにじむ。
動きのある 3D で、細い物体やシェーダーの模様のちらつきまで抑えたいTAA を使う。現在の 3D ゲームでよく使われるが、速く動く物体の残像や、画面全体のわずかなぼけが出やすい。
品質が最優先で、時間をかけられる（静止画、事前に描き出す映像）サンプル数を増やす（スーパーサンプリング）。計算量は増えるが、もっとも確実に効く。
ドット絵や、ピクセル単位でデザインした UI使わない。拡大縮小も整数倍にとどめ、補間を切る。

こう見えたら

指示の例

  • 物の縁や細い線がギザギザして見える。アンチエイリアスを有効にして

  • 動かすと柵や電線のような細いものがちらつく。TAA のような、フレームをまたいで混ぜるアンチエイリアスに切り替えて

  • 画面全体が少しぼやけている。後処理の FXAA をやめて、縁だけに効く MSAA の 4 倍にして

  • ドット絵がにじんでいる。アンチエイリアスと拡大時の補間を切って、ピクセルの境目をくっきりさせて

詳細

ギザギザが出る理由

画面はピクセルの格子であり、図形を描くには各ピクセルを何色で塗るかを決める必要がある。もっとも単純な方法は、ピクセルの中心が図形の内側にあれば図形の色、外側なら背景の色で塗ることである。この判定は二択なので、斜めの縁は階段状になる。これがジャギーで、連続的な形を粗い格子で拾ったために生じる誤差をエイリアシングと呼ぶ1。

二択の判定は、階段以外の問題も起こす。ピクセルより細い線は中心に当たったり外れたりするので、途切れた点線のように描かれる。図形が少し動くだけで判定が変わるため、動きのある場面では縁がちらつく。デモで回転を有効にし、左側の細い線を見るとわかる。

覆う割合で塗る

アンチエイリアスは、ピクセルの中に複数の判定点（サンプル）を置き、そのうち図形の内側に入った割合で色を混ぜる。NN 個のサンプルのうち kk 個が内側なら、背景の色 CbC_b と図形の色 CsC_s を次のように混ぜる。

C=Cb+(Cs−Cb) kNC = C_b + (C_s - C_b)\,\frac{k}{N}

k/Nk / N は、図形がピクセルを覆う面積のおおよその割合（被覆率）である。サンプルが NN 個あれば N+1N + 1 段階の中間色が作れるので、サンプルを増やすほど縁の階調がなめらかになる。デモの「右側のサンプル数」を 4 から 64 に変えると、縁の中間色の段階が増えていくのが見える。

主な手法

サンプルを増やせば画質は上がるが、計算量も増える。実際の手法は、どこを省いて速くするかで分かれる。

  • SSAA（スーパーサンプリング）：画面全体を高い解像度で描き、縮小して平均する。どんなギザギザにも効くが、計算量がサンプル数の倍率で増える。デモの右側はこの方式にあたる。
  • MSAA（マルチサンプル）：内外の判定だけを複数点で行い、色の計算は 1 ピクセルにつき 1 回にとどめる。ポリゴンの縁には効くが、テクスチャの模様やシェーダーの中で生じるギザギザには効かない。
  • FXAA、SMAA：描き終わった画像から縁らしい箇所を探し、そこだけをぼかす後処理。軽いが、細かい模様や文字が少しにじむ。
  • TAA：フレームごとにサンプル位置をわずかにずらし、過去のフレームの結果と混ぜる。少ない計算で高い効果が得られる一方、動く物体の後ろに残像が出やすい。

見分け方と注意点

画面を拡大すると、アンチエイリアスがかかった縁には図形と背景の中間色のピクセルが並んでいる。かかっていない縁は、図形の色と背景の色の二色だけでできている。

中間色を作るときは、本来は光の量に比例するリニアな値で混ぜる必要がある。sRGB の値のまま混ぜると、明るい図形の縁が細く暗く見えやすい。このデモは単純にするため sRGB の値で混ぜている。理由は「リニアワークフロー」の項で説明している。

脚注

  1. エイリアシングは信号処理の用語で、細かい変化を粗い間隔で標本化したとき、元とは別の粗い模様（エイリアス、偽の姿）として現れる現象を指す。縞模様の布を撮影したときに出るモアレも同じ現象である。 ↩

関連