ActionScriptによる3D描画(サーフェイスモデル)

Flash(ActionScript)を用いてサーフェイスモデルの3D描画を行う例を紹介する。サーフェイスモデルはあらゆる物体を面で表現する3D表示方法で、今現在、ポリゴングラフィックスとして多くの3DCGの分野で標準的に用いられている方法である。

関連項目:3Dグラフィックス(透視図法)

関連項目:ActionScriptによる3D描画(ワイヤーフレームモデル)

[FlaファイルDOWNLOAD(ZIP圧縮)]

サーフェイスモデルの描画

サーフェイスモデルでは、すべてを面で描くので用意すべきデータは、3D空間内における3点の頂点座標からなる面のデータのセットである。点が同一面内にあるのが自明である場合は一つの面が3点以上のデータを含んでいても問題はない。透視図法の座標変換では連続性が保たれるので、すべての頂点について透視図法の座標変換をおこないスクリーン上の座標に変換した後、頂点を結ぶポリゴンを描けば良いこととなる。

サーフェイスモデル陰面処理

サーフェイスモデルでは、物体を構成する面が有限の広がりを持つため、より手前にある面に隠れる部分については描画しない陰面(または陰線)の処理が必要となる。しかし、ポリゴングラフィックスにおいてこれは基本的に全ての面データを視点からの距離でソートし、遠いものから順に上書きする形で描くことで簡単に実現される。したがって、サーフェイスモデルでは座標計算、ソート、描画の3ステップを経て描くことになる。また、完全に閉じた面で構成される物体の場合は、物体の中心から外へ向かう法線ベクトルが視点側に向いていない面は必ず隠れた面となるのでこれは描画しなくて良い。

面にあたる光量の計算

サーフェイスモデルをリアルに表示するには、面に当たる光源からの光量を計算しそれに応じて面を描く色を変える必要がある。光の効果は鏡面反射と散漫散乱の成分に分けることができ、鏡面反射を多くすると金属的な質感が得られ、散乱を多くするとゴムのような質感が得られる。具体的な計算は次のようになる。散乱成分については面法線ベクトルと光源方向のベクトルを考え、平行に近いほど面が光源を直視しており面が光を多く受けることになるので明るく表示する。鏡面反射については、光源方向のベクトルを面の法線ベクトル方向で折り返した反射光ベクトルの視点方向に向かう成分として簡単に計算することが出来る。

Flashによるポリゴン描画

Flash MX以降でサポートされたMovieClipオブジェクトの描画メソッドを用いることでActionScriptから簡単にポリゴンが描けるようになった。ポリゴンを描くにはbeginFillメソッドを呼び出した後、輪郭をmoveToおよびlineToで描き、最後にendFillメソッドを呼び出す。

movieClip.clear();
movieClip.beginFill(0x0FF9900, 100);
movieClip.moveTo(0,0);
movieClip.lineTo(240,320);
movieClip.lineTo(320,240);
movieClip.endFill();