Tech Sketch Bucket of Technical Chips by TIS Inc.

3Dプログラミング基礎知識(1)


3Dプログラミングの基礎知識(1)

はじめに

主にiPhone/AndroidからOpenGL ESを使って3D表現を行う場合に必要となる基礎知識についてまとめていきたいと思います。
基礎の基礎から説明して行くため、言語や3Dライブラリ(DirectX/OpenGL)に依存しない情報が多くなります。OpenGLに限らず「C++ + DirectX」などの環境で開発を行う人もどうぞ。

内容

5回ぐらいに分けて以下のような内容を書いていきたいと思います。

  1. モデルを構成する頂点情報、面情報
  2. 画面に描画されるまでの流れ、平行移動・回転・拡縮行列(ワールド変換)
  3. カメラ、Zバッファ
  4. 法線、ライティング
  5. 頂点シェーダ、ピクセルシェーダ(フラグメントシェーダ)

座標系

3D表現を行う為には3次元の座標系をどのように定義するか決める必要があります。
2Dの場合はX軸、Y軸で座標系を表しますが、3Dの場合はX軸、Y軸、Z軸の3軸を用いて座標系をあらわします。

DirectX、OpenGL共にX軸、Y軸、Z軸の3軸で座標系をあらわしますが、DirectXは左手座標系、OpenGLは右手座標系を用いている為、各軸のプラス方向が異なっています。
OpenGLの場合は右手座標系の為、右手の指をフレミングの法則のように直行させた時、親指がX軸、人差し指がY軸、中指がZ軸となり、それぞれの指が向いている方向がプラスとなります。
Windows環境で使用されるDirectXは左手座標系をとっているため、Z軸の方向が逆(奥方向が+)になります。

Axis.png


頂点情報

モデルの各頂点の座標をx, y, zの3軸で表します。図に示した立方体の場合、8個の頂点情報(①~⑧)で構成されています。
また、モデルを回転する場合には原点を中心とした回転が行われる為、モデルの中心を原点として各頂点の座標を指定しています。

model.png

頂点インデックス(インデックスバッファ)

描画される面を「ポリゴン」と呼びます。3頂点で構成される場合は「三角ポリゴン」、4頂点で構成される場合は「四角ポリゴン」となります。
OpenGL ESで描画できるのは三角ポリゴンに限られる為、図に示すように3つの頂点(①、②、③)で1つの面を構成します。この、「どの頂点を使ってポリゴンを描画するか」という情報が頂点インデックスです。

モデリングツールで作られたモデルなどで四角ポリゴンが含まれる場合には、モデルの保存時オプションを使って、2つの三角ポリゴンに分割しておく必要があります。

Index.png

上述したとおり、頂点インデックスとして3つの頂点(①、②、③)を指定することで三角ポリゴンが描画されますが、実際に使う際には1つの三角形を表示するということはあまり無く、複数の三角形で構成される面を描画することが多いかと思います。
この場合、下図に示すように頂点インデックスに、より多くの頂点を設定し、描画時のオプションを指定することで、複数の三角ポリゴンをまとめて描画することができます。

TRIANGLES

下図左に示すように①~⑨の9個の頂点を指定し、描画時にTRIANGLESのオプションを指定すると、3つの三角ポリゴンをまとめて描画することができます。
TRIANGLE_FANやTRIANGLE_STRIPと違い、一度描画に使った頂点インデックスは再利用されない為、「指定した頂点数÷3」個のポリゴンが描かれます。

TRIANGLE_STRIP

下図中央に示すように、互い違いになった三角形で構成される面を描くことができます。
最初のポリゴンは①、②、③の3頂点を使って描かれますが、その次からは直前の描画に使った3つの頂点のうち、2頂点を再利用します。
下図の場合、指定している頂点インデックスは6個ですが、①②③、②③④、③④⑤、④⑤⑥で構成される「指定された頂点数-2」個の三角ポリゴンが描画されます。

TRIANGLE_FAN

下図右に示すように、扇形に連なった三角形で構成される面を描くことができます。
最初のポリゴンは①、②、③の3頂点を使って描かれますが、その次からは直前の描画に使った3つの頂点のうち、2頂点を再利用します。
TRIANGLE_STRIPと違い、最初に指定した①番の頂点は常に使用される為、扇のような形状が描かれます。
下図の場合、指定している頂点インデックスは7個ですが、①②③、①③④、①④⑤、①⑤⑥、①⑥⑦で構成される「指定された頂点数-2」個の三角ポリゴンが描画されます。

TRIANGLE_FAN, TRIANGLE_STRIPでは前の三角形を描画するのに使用した頂点の一部を再利用する為、速度面でメリットがあります。

Triangles.png

カリング

ポリゴンには表裏があります。三角ポリゴンを描画する場合、頂点インデックスには3つの頂点を指定しますが、指定する順番によって表裏が変化する為、注意が必要です。

Culling.png

図の三角ポリゴンを描画する場合、頂点インデックスには①、②、③の3頂点を指定します。①②③の順番で指定した場合、この順番で頂点をたどると時計回りになります。これが「裏向き」と規定されています。
頂点インデックスを①③②の順番で指定した場合、この順番で頂点をたどると反時計回りになります。これが「表向き」です。(OpenGLの場合は設定次第で逆にすることも可能です)
カリングを有効にすると(OpenGLのデフォルトでは)裏を向いたポリゴンを描画しなくなります。

カリングは見た目を変化させずに高速化することが出来る便利な仕組みです。立体物をモデリングした場合、立体物を構成するポリゴンは「表」を外側に向けて作られます。
この立体物を描画する場合、「裏」の面を向けたポリゴンはそれより手前にある「表」の面を向けたポリゴンによって覆い隠される為、裏面を描画しなかったとしても見た目が変化しません。
この場合、カリングを有効にすると見た目を変化させることなく描画するポリゴン数が減らせる為、描画を高速化することが可能です。

しかし、3D描画に慣れないうちや、立体感の無い板ポリゴンを扱う場合にはカリングは無効化しておく方が良いでしょう。カメラ位置や、頂点インデックスの順番によって裏面が見えることが多い為、カリングが有効になっていると何も表示されず混乱を招くことになります。

あとがき

次回は、画面に描画されるまでの一連の流れと、ワールド変換について書いていきたいと思います。

3Dプログラミング基礎知識(2)へ続く


エンジニア採用中!私たちと一緒に働いてみませんか?