SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ActionScriptによるWebの3Dグラフィックス再入門

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

シェーディングでもっと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つに増やせば4面体を描くことができます。三角形は、一般に3Dプログラミングにおける描画の最小単位として扱われます。人間の身体などのように複雑な形状であっても、細かい三角形を組み合わせることで表現することができます。

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
AS3におけるパッケージ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ActionScriptによるWebの3Dグラフィックス再入門連載記事一覧
この記事の著者

rch850/りちゃ(リチャ)

気になった技術をいろいろとつまみ食いしてます。覚えた技術をうまく組み合わせて面白いものができたらいいなと思います。twitter: @rch850

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2235 2008/09/05 11:02

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング