ActionScriptによるWebの3Dグラフィックス再入門 (2) - シェーディングでもっと3Dらしく

フラットシェーディングの仕組みと、ActionScriptにおけるパッケージ化

ActionScript 3で3Dグラフィックスのプログラミングを学ぶ連載第2回です。前回実装した三角形の描画を発展させて4面体とし、シェーディング処理を加えます。その中で、ActionScript3のパッケージの概念や、3Dプログラミングに必要なベクトルの基礎について説明します。

シェーディングでもっと3Dらしく

　前回はワイヤーフレームの三角形をくるくる回すところまで紹介しました。その先の課題としていろいろなものがあると書いて終わりとなりましたが、今回はその中からシェーディングを取り上げて説明します。また、ActionScript 3のpackageの概念などについても必要に応じて説明します。

シェーディングするとこうなる！

Flex 3 SDKのリリースとFlashDevelopのバージョンアップ

　早速今回の内容に移りたいのですが、前回の記事掲載からの間に開発に大きく影響する変化があったので、そこをまず説明します。最も大きいのはFlex 3 SDKがベータ版ではなくなり、Adobe Open Sourceで公開されたことです。これにより従来のFlex 3 SDKは3月15日付で使えなくなりました。コンパイルしてみると、期限切れを表すエラーが出るはずです。

　正式バージョンのFlex 3 SDKはFlex 3 SDK Downloadsからダウンロードできます。3種類のダウンロードがありますが、基本的にはOpen Source Flex SDKをダウンロードしておけば足りると思います。それぞれの関係は「Adobe Flex SDK = Open Source Flex SDK + Adobe Add-ons」となっています。「Open Source Flex SDK」はFlex開発用で、MPLでライセンスされています。「Adobe Add-ons」にはAIRのランタイムなどが含まれており、Adobe Flex SDKライセンスでライセンスされています。この2つが一緒になっているのが「Free Adobe Flex SDK」です。

　また、FlashDevelopもBeta 5からBeta 6にバージョンアップしました。セットアップ方法自体は変わっていないので、第1回の記事を参考にしてください。バージョンアップの際は念のため前のバージョンを再インストールしておくことをお勧めします。特にインターフェイスも変わっていませんので、今回の記事はこのBeta 6を用いて説明します。

ポイント

• package
• シェーディング
• ランバートの法則
• ベクトルの内積、外積
• 法線

Step 1 - ワイヤーフレームの4面体

　今回の記事でシェーディングを題材に選んだ理由は、モデルが複雑になったときにシェーディングされていないと見づらいからです。このステップではシェーディングの必要性を知るため、描画方法はワイヤーフレームのまま、三角形を組み合わせた4面体（三角錐）を描きます。その中で、ActionScript 3におけるパッケージの考え方について説明します。

　4面体は、次のように4つの三角形を組み合わせた形です。見方によっては台形に斜め線が入っているだけに見えますが、一応立体です。

4面体

　三角形自体は前回描くことができたので、それを4つに増やせば4面体を描くことができます。三角形は、一般に3Dプログラミングにおける描画の最小単位として扱われます。人間の身体などのように複雑な形状であっても、細かい三角形を組み合わせることで表現することができます。

　三角形はこの先もたくさん使っていくので、再利用しやすいようにクラス化しておきます。また、前回使ったVector3クラスもよく使うものなので、せっかくだからパッケージ化してしまいましょう。