Japanese subtitles

← Antialiasing

Get Embed Code
2 Languages

Showing Revision 1 created 03/11/2014 by Fran Ontanaya.

  1. ピクセルのレベルでアンチエイリアスの話をします
  2. デフォルトでシーンをラスタ化すると
    何かがピクセルの中心に見えます
  3. 三角形の端をピクセルが覆っているか
  4. まったく覆っていないかというかなり悪い結果です
  5. バイナリデータがエイリアシングを引き起こしています
  6. この問題はジャギーと言ってエッジがギザギザです
  7. アニメーションではクローリーと言います
  8. オブジェクトが重なって陰影がついた
  9. 各ピクセルのエッジを
    滑らかに見せることを求めています
  10. ピクセルのほとんどが三角形で覆われると
    三角形の色が使われます
  11. この範囲を計算させ記憶し融合させるのは
  12. 難しく高度な技術です
    いつかは可能になるでしょうが
  13. もっと大量のアンチエイリアスのスキームが
  14. インタラクティブな3DCGで要求されています
  15. 1つのエッジは高解像度で描画する
    スーパーサンプリングです
  16. 最後の画像にこのサンプリングを使います
  17. 1000×1000ピクセルの画像を
    4000×4000の解像度で
  18. レンダリングすると1ピクセルは
    16ピクセルに分割され洗練された画像になります
  19. これを融合させてより美しい画像を生成するのです
  20. いくつかの理由から
    これはよくない考え方とされています
  21. メモリとプロセッサに費用がかかることや
  22. 最小値4×4のサンプリングが
  23. 水平線や垂線近くのジャギーに有効でないことなどです
    マルチサンプリングアンチエイリアシングまたは
  24. MSAAと言うGPUにサポートされたスキームは
  25. 断片全体の影を計算してから
    幾何学的な領域を分けて計算します
  26. 加えてグリッド線より別のサンプリングの型の方が
  27. 使われていて水平線や垂線にはかなり有効です
  28. サンプリングの型はGPUを作る
    ハードウエアのメーカーによります
  29. プロセッサとストレージにかかる費用も減少しており
  30. スーパーサンプリングを強行するよりも
    費用対効果が見込めます
  31. 一般的にはWebGLのデフォルトを使う
    アンチエイリアスの型で
  32. アンチエイリアスを切り替える
    スイッチでもあります
  33. どの型を使っているかは明記されていません
    booleanパラメータの設定で構成される
  34. three.jsでアンチエイリアスを
    作動するためにエイリアスを呼び出します
  35. 作動させる必要はありません
  36. GPUがアンチエイリアスを
    サポートしているかによります
  37. 大事なのはブラウザ側の許可です
    バグがあるので作動しない方が安全なのです
  38. three.jsのデモを見せるビデオ授業のほとんどは
  39. 残念ながらこのバグのため
    アンチエイリアスを作動させません
  40. これは最先端技術で簡単にはいきません
  41. アンチエイリアスのアルゴリズムの授業では
  42. フィルタ処理を行います 最初はモルフォロジカル
    アンチエイリアシングまたはMLAAと言い
  43. 2009年に開発されました シャープな稜線を描くため
  44. 既存の画像とデータを使う考え方です
  45. 開発時は隣のピクセルを使って
    滑らかにしようとしました
  46. この技術はうまく働きましたが
    細い線やテキストなどは失敗でした
  47. 最も評価が高く適切な技術はFXAAです
  48. 動作に画像そのものを必要とします
    私も使ったことがありthree.jsにも入っています
  49. 評価されるのは開発者がかなり力を入れて
  50. 我々が知っている
    ほとんどのGPUで動かせるシェーダを作り
  51. 自分でコードを書いたことだと思います
  52. ヒントに気づかなかった時のために言っておきますが
  53. 他人に見せるのであればきちんとコードを書きましょう
  54. WebGLやthree.jsを使えば
    誰でもコードは書けるのです