CGのジャギー(エイリアシング)って何で発生するの?
2020-12-23
azblob://2022/11/11/eyecatch/2020-12-23-cg-ailias-000-4187998970-1608632914191.jpg

この記事はFIXER Advent Calendar 2020 (https://adventar.org/calendars/5587) 23日目の記事です。
前日はこちら(https://tech-blog.cloud-config.jp/2020-12-22-winning-prize-at-company-presentation-videos/)

1.はじめに

大学で一応CGの研究室にいたはずの三木です!
FIXERもccVESというバーチャルイベントプラットフォームの誕生により、コンピュータグラフィックスに関わる開発内容が増えてきました。
なのでせっかくだから、自分が大学で学んだ事を共有(かつ自分が復習したい)と思ったので、CG系のいくつかの話をブログに記載していきたいと思い今回のブログを書かせていただこうと思いました!

2.とはいうものの

大学で勉強する内容って基礎も基礎というか、根幹の理論に関わる部分が主体になると思いますので、業務ですぐに使えるような部分はないと思います。豆知識ブログぐらいに見ていただけると幸いです。
加えて、内部の方にもちゃんと読んでもらえるブログにしたいという思いがありますが、FIXERで勤務されている方は当然エンジニアの方々ばかりではないです。
でも、せっかく最先端のサービスを開発している会社だからこそ、そこで情報が分断されてしまうのも非常にもったいないなぁと思っています。知識の相互交流からミラクルアイデアが生まれる機会がもっと増えてほしい、そういった思いもありますので、なるべく前提知識が必要ないような記事を書いていけたらなと思ってもおります。分かりやすい豆知識からスタートして、いずれは細かい話まで持っていきたいこの頃という感じです。

3.CGのジャギー(エイリアシング)ってどういうもの?

そんなこんなで第一回、今日はさらっと豆知識だけ披露しましょう。CGのジャギーについてです!
ジャギーって言われても、3Dゲームなどを頻繁に遊ぶ方でなくては、そもそも存在を知らないということもあるかと思います。なので、実際に一つ見てもらいましょう。こちらです!

3Dモデルのエイリアシングの例

こういった感じに、CGをレンダリングする際に色が切り替わる部分でギザギザした模様が出てしまうものですね。今では大抵のCGに関わるツールで、これを抑える何らかのアンチエイリアシングが予めかかるようになっているので、強く気になるようなことはないと思います。
また、別の例を挙げますと

円状に縞が広がる画像
左の画像を低解像度にしたもの

下の画像は、上の画像を低解像度にダウンサンプリングしたものになります。本来存在する左上の円以外の円が現れているのが分かりますでしょうか?
これももエイリアシングの一つになりまして、折り返し雑音と呼ばれたりします。(語源的にはこっちの方がエイリアシングですね)

4.なんで発生するの

ピクセル単位で一つの色を計算してしまうから! こう言われても何が何だかって話ですよね
分かりやすい画像の例を示すと以下のようになります

高解像度の直線
低解像度のピクセルで表現した形

通常、ピクセルの集まりで画像を表現するラスタ形式の画像では、ピクセルの数という表現の限界点があります。
上の画像のような直線も、低解像度で表現した場合、ピクセル単位で大ざっぱに描画が分解されてしまい、下のようにギザギザした形になるという現象が発生します。
3Dだと、例えばカメラに近くて大きいときはまっすぐ表現されていたものが、カメラから遠く小さく表現されている時にギザギザが発生しやすくなるなどの場合が考えられますね

5.3Dのレンダリングじゃなくても起こるよね

おっしゃる通りです。ピクセルサイズの表現の限界がまさにギザギザの幅になっているので、より表現力のある画像を細かいピクセルで表示した場合には全部起こります。
例えば
・大きい解像度の画像を低解像度にする
・ベクター形式の画像(線や丸などの図形の塊として表現された画像)をピクセルで表現したラスタ画像にする
場合とかも当然起こります。
でも3Dではこのエイリアシングは特に気になる要素があって

3DCGのクローリー

というように、見る方向が変化した場合に、その度に3Dモデル上のエイリアシングが発生するポイントが変化してしまう。つまり、人の目で見ると3Dモデルの表面が細かくうねっているように見えるという大きな問題があります。これはジャギーとはあえて言葉を分けてクローリーと表現されることがあります。
これ人間の目からすると非常にやっかいで、この変化を目で追ってしまって過剰に目立っちゃうんですね

6.おわりに

という事で、今回はCGのエイリアシングと、なぜそれが発生するかについて紹介いたしました。
また次の機会では、このエイリアシングを軽減するアンチエイリアシング手法についていくつか紹介したいと思います。

おまけ

エイリアスという言葉、IT業界の方だと別の意味で使うことが多いと思います。
偽名、あだ名、別名、通称などの意味を持つ英語であり、シンボリックリンクとかを指して使う言葉ですね
ここでクイズです。
なぜ、ジャギーの事をCGだとエイリアシングと呼ぶのでしょうか?
正解は、このシリーズを更新していった時にいつか書かせていただきたいと思います。