2012年1月8日日曜日

Flashで3Dなお絵描き

大学の時にブラウザ上で3Dモデルに絵を描くアプリケーションを作りました。

長い間ブログを放置していたので、それの紹介でもしたいと思います。

まずブラウザで3Dを扱うというのはあまりない話です。重いですし。
下のリンクでは描いたテクスチャを3Dモデルに貼り付けるようなことをやっていました。
http://labs.logosware.com/archives/21

なんやかんやあってFlashで作るのがいいだろうって話になって、そこからは自分がいろいろ試して作っていくことになりました。
Flashもそんな詳しいわけではなかったし、3Dは全く分からないというぐらいだったので開発には苦労しました。
ブログの過去記事などを見ると試行錯誤の跡が少し見られると思います。

まず3Dモデルをどうするかという話でしたが、開発メンバーが有料のモデリングソフトもってない、Flashの3Dライブラリでサポートされてるといった点などを考えた結果、Collada(.xml)形式にしました。

で、3Dライブラリは当時(今でも?)一番メジャーなPapervision3Dにしようと考えていました。

http://blog.r3c7.net/?p=333
上の記事を参考にサンプルを作っていきました。3Dモデルの作成や、マウスイベントなど苦労しましたがなんとかそれっぽいものはできました。
じゃあ次はシェーダーを試そうと思った時に問題が起きました。
http://aaharu.blogspot.com/2009/10/pv3duv.html
UVマッピングを使用したモデルにシェーダーを適用すると黒い線が出てきました。
これの解決方法は結局わからず、Papervision3D以外のライブラリではどうなのか試してみることにしました。

で、試したのがAway3Dです。
まあFlashの3Dライブラリといってもメジャーなのは、Papervision3DとAway3DとAlternativa3Dぐらいでしたし、Papervision3Dから派生したものだと聞いて今までのが移植しやすいかなーと。

それで試した結果、Away3Dは問題なく動作することがわかり、3DライブラリはAway3Dを使用することに決めました。
Away3Dにして良かった点はいくつかありました。
・上の黒い線の問題が解決したこと
・3Dマウスイベントが豊富なこと
・シェーダーなども豊富で、きれいであったこと
絵を描くということを考えると3Dのオブジェクトのマウスイベントがあるのはとてもよかったです。
悪いと思った点もいくらかあります。
・重い
・そんなに移植しやすいわけではなかった

とそんな感じでぐだぐだと作りました。
せっかくなので、FlashDevelopで書き直した、一部機能削除版をソースコードごと公開します。(開発時はFlashBuilderを使いました。学生だったので無料ライセンスで)
今見るといろいろと直したくなりますがそこらへんは許してやってください。


Flexアプリ http://www.aaharu.com/data/UruLabCreater.swf
ソースコード(Flex) http://www.aaharu.com/data/srcview_urulabcreater/index.html
ソースコード(ライブラリ)http://www.aaharu.com/data/srcview_urulab/index.html

ソースコード書き出し後に修正行ってるのでソースコード最新じゃないですけどだいたいあってます。

0 件のコメント:

コメントを投稿