Now that we're at the pixel level, let's talk a bit about Anti-aliasing. By
default, when we rasterize a scene, we find what's at the center of each pixel.
This can give some fairly bad results, as edges of triangles will either be
considered to fully cover a pixel, or not cover it at all. The binary nature of
this process causes what's called Aliasing, giving a ragged look to edges.
Informally, this problem is called the Jaggies or Stairstepping. When you see
it in animation, it's called the Crawlies. What we'd like to do is get a nice
smooth result, where each edge pixel is shaded proportionately to how much of
it is covered by each object overlapping it. If the pixel is mostly covered by
a triangle, use more of the triangle's color, less, use less. The hard part is
in figuring out this coverage, it's expensive to compute, store and blend
triangle areas for each pixel. Though maybe this will happen someday, about the
same time we get personal jet packs. In the meantime there have been a huge
number of Anti-aliasing schemes proposed for interactive 3D graphics. On one
end of the spectrum is Supersampling. Where you simply create a higher
resolution image, and then use all these extra samples to make the final image.
For example, for 1000 by 1000 pixel image, you might render it at a resolution
of 4000 by 4000. Now each pixel has 16 pixels associate with it in the high res
image. Blend these together and you get a better result. This scheme is
considered a bad idea, for a number of reasons. One is that it's expensive both
in memory and processing cost. Another is that sampling in a little 4 by 4 grid
is not much help in fixing the jaggies for nearly horizontal or nearly vertical
lines. A scheme commonly supported by the GPU is called Multi-sampling
Anti-aliasing or MSAA. The idea here is to compute a shade for the whole
fragment once, and to compute the geometric coverage separately. In addition, a
different sampling pattern than a grid is used, doing so helps narrowly
horizontal and vertical lines considerably. This sampling pattern does vary
depending on the hardware company making the GPU. The main costs here are
processing and storage, but these costs are considerably less and give
considerably more bang for the buck than brute force super-sampling. This is
generally the form of Anti-aliasing used by default by WebGL. I say generally
because there's a toggle for Anti-aliasing on or off, and it's not specified
what form of Anti-aliasing is used. To turn Anti-aliasing on in 3GS consists of
setting a simple Boolean parameter called antialias. I should note that turning
this on doesn't necessarily do anything. It depends upon whether the GPU
supports Anti-aliasing, most should, and whether the browser decides to allow
it. Sometimes there are bugs that make it safer to keep Anti-aliasing off.
Sadly most of the video lessons we've made showing 3GS demos do not have
Anti-aliasing on, just because of such a bug. Welcome to the bleeding edge of
technology, no one said there would be cake. Another class of algorithms for
Anti-aliasing perform filtering on the image, this is a relatively new class of
techniques. The first of these called Morphological Anti-aliasing, or MLAA, was
developed in 2009. The idea is to use the existing image and possibly other
data to detect sharp edges. When these are found, try to smooth just these
edges by using nearby pixels. Amazingly, such techniques work pretty well,
though can fail on thin lines, text, and other special cases. One of the most
popular fitting techniques is called FXAA, which just needs the image itself to
operate. I've used it myself in products and it's even included in 3GS. I think
part of the popularity is the author Timothy Lates put a serious amount of
effort into both making this shader run on just about every GPU known to human
kind and thoroughly documenting the code itself. Just to spell it out in case
you didn't get the hint, please do document your code, especially if you plan
on having anyone else see it, which of course, anyone can do if you're using
WebGL or 3GS. So, I'll say it again, document your code.
ピクセルのレベルでアンチエイリアスの話をします
デフォルトでシーンをラスタ化すると
何かがピクセルの中心に見えます
三角形の端をピクセルが覆っているか
まったく覆っていないかというかなり悪い結果です
バイナリデータがエイリアシングを引き起こしています
この問題はジャギーと言ってエッジがギザギザです
アニメーションではクローリーと言います
オブジェクトが重なって陰影がついた
各ピクセルのエッジを
滑らかに見せることを求めています
ピクセルのほとんどが三角形で覆われると
三角形の色が使われます
この範囲を計算させ記憶し融合させるのは
難しく高度な技術です
いつかは可能になるでしょうが
もっと大量のアンチエイリアスのスキームが
インタラクティブな3DCGで要求されています
1つのエッジは高解像度で描画する
スーパーサンプリングです
最後の画像にこのサンプリングを使います
1000×1000ピクセルの画像を
4000×4000の解像度で
レンダリングすると1ピクセルは
16ピクセルに分割され洗練された画像になります
これを融合させてより美しい画像を生成するのです
いくつかの理由から
これはよくない考え方とされています
メモリとプロセッサに費用がかかることや
最小値4×4のサンプリングが
水平線や垂線近くのジャギーに有効でないことなどです
マルチサンプリングアンチエイリアシングまたは
MSAAと言うGPUにサポートされたスキームは
断片全体の影を計算してから
幾何学的な領域を分けて計算します
加えてグリッド線より別のサンプリングの型の方が
使われていて水平線や垂線にはかなり有効です
サンプリングの型はGPUを作る
ハードウエアのメーカーによります
プロセッサとストレージにかかる費用も減少しており
スーパーサンプリングを強行するよりも
費用対効果が見込めます
一般的にはWebGLのデフォルトを使う
アンチエイリアスの型で
アンチエイリアスを切り替える
スイッチでもあります
どの型を使っているかは明記されていません
booleanパラメータの設定で構成される
three.jsでアンチエイリアスを
作動するためにエイリアスを呼び出します
作動させる必要はありません
GPUがアンチエイリアスを
サポートしているかによります
大事なのはブラウザ側の許可です
バグがあるので作動しない方が安全なのです
three.jsのデモを見せるビデオ授業のほとんどは
残念ながらこのバグのため
アンチエイリアスを作動させません
これは最先端技術で簡単にはいきません
アンチエイリアスのアルゴリズムの授業では
フィルタ処理を行います 最初はモルフォロジカル
アンチエイリアシングまたはMLAAと言い
2009年に開発されました シャープな稜線を描くため
既存の画像とデータを使う考え方です
開発時は隣のピクセルを使って
滑らかにしようとしました
この技術はうまく働きましたが
細い線やテキストなどは失敗でした
最も評価が高く適切な技術はFXAAです
動作に画像そのものを必要とします
私も使ったことがありthree.jsにも入っています
評価されるのは開発者がかなり力を入れて
我々が知っている
ほとんどのGPUで動かせるシェーダを作り
自分でコードを書いたことだと思います
ヒントに気づかなかった時のために言っておきますが
他人に見せるのであればきちんとコードを書きましょう
WebGLやthree.jsを使えば
誰でもコードは書けるのです