arusu0629のブログ

UnityエンジニアからiOSエンジニアへ

WebGLについて④

【前回】 arusu0629.hatenablog.com

頂点ポリゴン

WebGLでは基本的に次のいずれかしか描画することが出来ない

  • 線分
  • 三角形

基本的にWebGLでは三角形を用いて画面上に何かを描画する
そしてその三角形こそがポリゴン。ポリゴンは3つの頂点を結んで描かれる三角形です。そのため1枚のポリゴンを描画するのに3つの頂点を必要とする

  • ポリゴンが少ない場合
    →描画するモデルがカクカク

  • ポリゴンが多い場合
    →精細なモデルを表現することが出来る
    →しかしポリゴンの数だけ頂点の数も倍々で増えるため座標計算などの負荷が大きくなる

3Dレンダリングではこのポリゴンの数をどこまで増やすかで見た目のクオリティが決まり、一方で座標計算の負荷が大きくなるトレード・オフの関係なため、ポリゴン数の決定に頭を悩ませられる

頂点を結ぶ順序とカリング

頂点を結んでポリゴンを描画する際に頂点同士の線をつなぐ順序が大切になってくる。時計回りで結ぶのか、もしくは反時計回りで結ぶのか

どうしてかと言うとレンダリングする際に正面と真反対の裏側は見えないため、描画する必要がない。そのため3Dレンダリングの世界では見えないものは描画しない仕組みを使って負荷を軽減している。この裏面にあるものは描画しない仕組みをカリングと呼ぶ

では、ポリゴンの表と裏をどうやって判断しているかと言うと、頂点を結ぶ順序を判断基準に使っている
時計回りの順序で頂点を結んだポリゴンを裏、逆の場合は表、といった具合に裏表を判断している

【まとめ】
三角形のことをポリゴンと呼び、そのポリゴンを表すのに3つの点(頂点)を結んで表現する
ポリゴンには頂点を結ぶ順序によって表裏が存在し、それによってカリングを行うことが可能になる

【続き】 arusu0629.hatenablog.com